/* ══════════════════════════════════════════════════════════════════
   LANDING INTRO — homepage only.
   Recreates phases 1→2 of the Remotion intro (_Intro_Video_Tool):
   rule draws left→right, wordmark fades in, lockup flies to the header.
   Hidden unless JS adds .intro-active, so no-JS visitors see content.
   ══════════════════════════════════════════════════════════════════ */

.intro{display:none}

.intro-active .intro{
  display:flex;align-items:center;justify-content:center;
  position:fixed;inset:0;z-index:100;
  background:var(--ground);
  will-change:opacity;
}
/* Faint green bloom behind the lockup, from the training greens */
.intro-active .intro::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 900px 600px at 50% 50%,
    rgba(55,200,113,.20), rgba(47,184,102,.06) 45%, rgba(5,9,15,0) 72%);
  opacity:0;animation:introBloom .9s var(--ease) .1s forwards;
}

.intro-lockup{position:relative;z-index:1;transform-origin:center center}
.intro-lockup .word{font-size:46px;opacity:0;animation:introFade .55s var(--ease) .05s forwards}
.intro-lockup .rule{
  height:4px;margin:20px 0 18px;
  transform:scaleX(0);animation:introDraw .8s var(--ease) .12s forwards;
}
.intro-lockup .sub{font-size:21px;opacity:0;animation:introFade .5s var(--ease) .5s forwards}

@keyframes introFade{to{opacity:1}}
@keyframes introDraw{to{transform:scaleX(1)}}
@keyframes introBloom{to{opacity:1}}

/* Page content waits behind the intro, then settles up */
.intro-active .stage{opacity:0}
.intro-active .stage.reveal{animation:stageIn .7s var(--ease) forwards}
@keyframes stageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.intro.done{opacity:0;transition:opacity .45s ease;pointer-events:none}

/* The header logo stays dark until the flight lands on it */
.intro-active .brand{opacity:0}
.brand{transition:opacity .3s ease}
.brand.lit{opacity:1}

@media (max-width:768px){
  .intro-lockup .word{font-size:26px}
  .intro-lockup .sub{font-size:13px}
}

@media (prefers-reduced-motion:reduce){
  .intro-active .intro{display:none}          /* skip the sequence entirely */
  .intro-active .stage{opacity:1;animation:none}
  .intro-active .brand{opacity:1}
}