/* =============================================
   PRO STAR PLANET — Cinematic Hero Intro
   JS-driven: body.hero-intro hides elements,
   then JS adds .intro-go to trigger transitions,
   then JS adds stage classes for choreography.
   ============================================= */

/* --- Light sweep element --- */
.hero-lightsweep {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    105deg,
    transparent 0%,
    transparent 38%,
    rgba(255, 248, 230, 0.09) 42%,
    rgba(255, 255, 255, 0.15) 48%,
    rgba(255, 248, 230, 0.09) 54%,
    transparent 58%,
    transparent 100%
  );
  transform: translateX(-120%);
  opacity: 0;
  pointer-events: none;
  will-change: transform;
}

/* ======================
   INITIAL HIDDEN STATE
   ====================== */

/* Everything starts hidden when intro is active */
.hero-intro .nav-logo,
.hero-intro .nav-links > a,
.hero-intro .nav-links > .nav-cta,
.hero-intro .nav-toggle {
  opacity: 0;
}

.hero-intro .hero-label,
.hero-intro .hero h1,
.hero-intro .hero-sub,
.hero-intro .hero .btn-group,
.hero-intro .hero-stats {
  opacity: 0;
  transform: translateY(24px);
}

/* Overlay fully hidden — town image at full brightness first */
.hero-intro .hero-overlay {
  opacity: 0;
}

/* Vignette hidden initially */
.hero-intro .hero-vignette {
  opacity: 0;
}

/* Brand glow hidden */
.hero-intro .hero::before,
.hero-intro .hero::after {
  opacity: 0;
}

/* Background starts full brightness, slightly more zoomed */
.hero-intro .hero-bg {
  transform: scale(1.07);
}


/* ======================
   PHASE 1: SWEEP + BLOOM
   Triggered by .intro-go
   ====================== */

/* Animate the light sweep */
.hero-intro.intro-go .hero-lightsweep {
  opacity: 1;
  animation: psp-sweep 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes psp-sweep {
  0%   { transform: translateX(-120%); opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateX(120%); opacity: 0; }
}

/* Overlay bloom — brief bright flash then darkens */
.hero-intro.intro-go .hero-overlay {
  transition: opacity 2.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Background settles from zoomed to normal, filter returns to admin values */
.hero-intro.intro-go .hero-bg {
  transition: transform 3.5s cubic-bezier(0.16, 1, 0.3, 1),
              filter 2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ======================
   PHASE 2: SETTLE
   Triggered by .intro-settle
   ====================== */

.hero-intro.intro-settle .hero-overlay {
  opacity: 1;
}

.hero-intro.intro-settle .hero-vignette {
  opacity: 1;
  transition: opacity 1.2s ease;
}

.hero-intro.intro-settle .hero::before,
.hero-intro.intro-settle .hero::after {
  opacity: 1;
  transition: opacity 1.5s ease;
}

.hero-intro.intro-settle .hero-bg {
  transform: scale(1.03);
}

/* ======================
   PHASE 3: NAV ENTRANCE
   Triggered by .intro-nav
   ====================== */

.hero-intro.intro-nav .nav-logo {
  opacity: 1;
  transition: opacity 0.6s ease;
}

.hero-intro.intro-nav .nav-links > a {
  transition: opacity 0.4s ease;
}

.hero-intro.intro-nav .nav-links > a:nth-child(1) { opacity: 1; transition-delay: 0s; }
.hero-intro.intro-nav .nav-links > a:nth-child(2) { opacity: 1; transition-delay: 0.06s; }
.hero-intro.intro-nav .nav-links > a:nth-child(3) { opacity: 1; transition-delay: 0.12s; }
.hero-intro.intro-nav .nav-links > a:nth-child(4) { opacity: 1; transition-delay: 0.18s; }
.hero-intro.intro-nav .nav-links > a:nth-child(5) { opacity: 1; transition-delay: 0.24s; }
.hero-intro.intro-nav .nav-links > a:nth-child(6) { opacity: 1; transition-delay: 0.30s; }
.hero-intro.intro-nav .nav-links > a:nth-child(7) { opacity: 1; transition-delay: 0.36s; }

.hero-intro.intro-nav .nav-links > .nav-cta {
  opacity: 1;
  transition: opacity 0.5s ease 0.42s;
}

.hero-intro.intro-nav .nav-toggle {
  opacity: 1;
  transition: opacity 0.5s ease;
}

/* ======================
   PHASE 4: CONTENT ENTRANCE
   Triggered per-element by .intro-show
   ====================== */

.hero-intro .hero-label.intro-show {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-intro .hero h1.intro-show {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-intro .hero-sub.intro-show {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-intro .btn-group.intro-show {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-intro .hero-stats.intro-show {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ======================
   MOBILE — Lighter, faster
   ====================== */
@media (max-width: 900px) {
  .hero-intro .hero-lightsweep {
    display: none;
  }
}