/* ============================================
   A to B Intro Overlay — Premium loading intro
   ============================================ */

.intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  animation: introOverlayFadeOut 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.intro-overlay.intro-overlay-removed {
  pointer-events: none;
  animation: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease-out, visibility 0.15s ease-out;
}

.intro-overlay-bg {
  position: absolute;
  inset: 0;
  background: #fff;
  animation: introOverlayBgFade 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.intro-overlay-card {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 20px;
  padding: clamp(2rem, 6vw, 3.5rem);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08),
              0 2px 8px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
}

.intro-overlay-logo {
  width: clamp(120px, 28vw, 200px);
  height: auto;
  max-width: 200px;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  animation: introOverlayLogoSpin 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Timeline: 0–50% bg fades, ~70–100% overlay fades, 0–100% logo spins */
@keyframes introOverlayBgFade {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes introOverlayFadeOut {
  0%, 70% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes introOverlayLogoSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(720deg); }
}

/* Reduced motion: skip rotation, quick fade */
@media (prefers-reduced-motion: reduce) {
  .intro-overlay {
    animation: introOverlayReduced 0.2s ease-out forwards;
  }

  .intro-overlay-bg {
    animation: introOverlayReduced 0.2s ease-out forwards;
  }

  .intro-overlay-logo {
    animation: none;
  }
}

@keyframes introOverlayReduced {
  0% { opacity: 1; }
  100% { opacity: 0; }
}