/* =====================================================================
   ADROAS — css/intro.css
   Intro animation — centered reveal strategy.
   ===================================================================== */


/* ─────────────────────────────────────────────────────────────────────
   13. INTRO ANIMATION — centered reveal strategy
   The AD symbol starts centered by itself. As the ADROAS wordmark appears,
   the flexbox container centers the combined lockup, shifting the symbol
   leftward dynamically. The header logo fades in directly in its final position.
   ───────────────────────────────────────────────────────────────────── */

/* Default: overlay hidden — no-JS fallback */
.intro-overlay {
  display: none;
  pointer-events: none;
}

/* Active intro: overlay is a flexbox container centering the logo lockup */
html.intro-active .intro-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg);
  pointer-events: none;
  opacity: 1;
}

/* Prevent scroll during intro */
html.intro-active body {
  overflow: hidden;
}

/* Centered lockup layout */
.intro-lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: opacity;
}

/* Phase 1: Symbol fades/scales in (0.0s - 0.5s) */
.intro-symbol {
  display: block;
  height: 108px; /* Proportional to the 3.4x scale */
  width: auto;
  object-fit: contain;
  opacity: 0;
  transform: scale(0.95);
  flex-shrink: 0;
}

html.intro-active .intro-symbol {
  animation: intro-sym-enter 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes intro-sym-enter {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

/* Phase 2: Wordmark text slide/fade in (0.6s - 1.2s) */
.intro-wm-text {
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--navy);
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  max-width: 0;
  margin-left: 0;
  overflow: hidden;
  display: inline-block;
  flex-shrink: 0;
  transition:
    max-width 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    margin-left 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.45s ease;
}

html.intro-active .intro-wm-text.wm-visible {
  max-width: var(--intro-wm-w, 300px);
  margin-left: 1.5rem; /* Proportional gap */
  opacity: 1;
}

/* Overlay fade-out when site is revealed */
html.site-revealed .intro-overlay {
  opacity: 0;
  transition: opacity 0.7s ease;
  pointer-events: none;
}

/* Pre-intro: hide nav/hero — NOT the header wordmark */
html.intro-active .pre-intro-hidden {
  opacity: 0;
  pointer-events: none;
  transition: none;
}

/* Subtly shift nav and CTA down during intro */
html.intro-active .site-nav.pre-intro-hidden,
html.intro-active .header-actions.pre-intro-hidden,
html.intro-active .nav-toggle.pre-intro-hidden {
  transform: translateY(8px);
}

/* Hero content starts slightly shifted down */
html.intro-active .hero-inner.pre-intro-hidden {
  transform: translateY(16px);
}

/* Content reveal animations (2.2s - 3.0s) */
html.content-revealed .pre-intro-hidden {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

html.content-revealed .site-nav {
  transition:
    opacity 0.5s ease 0.1s,
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
}

html.content-revealed .header-actions {
  transition:
    opacity 0.5s ease 0.15s,
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}

html.content-revealed .nav-toggle {
  transition:
    opacity 0.5s ease 0.1s,
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
}

html.content-revealed .hero-inner {
  transition:
    opacity 0.6s ease 0.05s,
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.05s;
}

/* Reduced-motion support overrides */
@media (prefers-reduced-motion: reduce) {
  html.intro-active .intro-overlay { display: none !important; }
  html.intro-active .site-header   { z-index: 100; }
  html.intro-active body           { overflow: auto; }
  html.intro-active .pre-intro-hidden {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    transition: none !important;
  }
}