/* GoodToLaunch: motion + light layer for the "Departures" world.
   Additive only: delete the two fx links in index.html to revert.
   Rules kept from DESIGN.md: hard corners, no gradient text, no glass, no neon.
   Gradients here are "terminal lighting" (floor light, board glass, gate lamp). */

/* ---------- flight-progress bar (bottom edge of the sticky nav) ---------- */
.wayfinding{position:sticky}
.fx-progress{position:absolute;left:0;right:0;bottom:-3px;height:3px;pointer-events:none;overflow:visible}
.fx-progress i{display:block;height:100%;width:100%;background:var(--ink);transform-origin:0 50%;transform:scaleX(var(--p,0));transition:transform .12s linear}
.fx-progress b{position:absolute;top:-7px;left:calc(var(--p,0) * 100%);width:16px;height:16px;margin-left:-8px;display:grid;place-items:center;font:900 .8rem/1 var(--display);color:var(--ink);transition:left .12s linear}
.fx-progress b::before{content:"";position:absolute;inset:3px;background:var(--sign);border:2px solid var(--ink);border-radius:50%;z-index:-1}

/* ---------- departures ticker ---------- */
.ticker{background:var(--ink);color:var(--sign);border-bottom:3px solid var(--sign-deep);overflow:hidden;font:700 .8rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;user-select:none}
.ticker-track{display:inline-flex;animation:ticker 46s linear infinite;will-change:transform}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker span{padding:11px 0}
.ticker span::after{content:"\25C6";margin:0 22px;color:var(--sign-deep);font-size:.7em;vertical-align:.12em}
.ticker .ok{color:var(--proven);font-style:normal}
@keyframes ticker{to{transform:translateX(-50%)}}

/* ---------- hero: terminal lighting ---------- */
.hero{position:relative;isolation:isolate}
.hero::before{content:"";position:absolute;z-index:-1;left:50%;top:0;bottom:-40px;width:100vw;margin-left:-50vw;pointer-events:none;
  background:
    radial-gradient(60% 70% at 78% 42%,rgba(255,199,44,.30),rgba(255,199,44,0) 70%),
    radial-gradient(40% 50% at 8% 8%,rgba(255,199,44,.14),rgba(255,199,44,0) 70%),
    linear-gradient(rgba(14,15,16,.045) 1px,transparent 1px) 0 0/100% 56px,
    linear-gradient(90deg,rgba(14,15,16,.045) 1px,transparent 1px) 0 0/56px 100%;
  -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);mask-image:linear-gradient(180deg,#000 55%,transparent);
  animation:lamp 9s ease-in-out infinite alternate}
@keyframes lamp{from{background-position:0 0,0 0,0 0,0 0;opacity:.9}to{background-position:-30px 14px,18px -10px,0 0,0 0;opacity:1}}

/* hero headline: rise-in, line by line */
.hero h1 .fx-line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.hero h1 .fx-line > span{display:inline-block;transform:translateY(105%);animation:rise .8s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i,0) * 110ms + 120ms)}
@keyframes rise{to{transform:none}}
.fx-in{opacity:0;transform:translateY(14px);animation:fadeup .7s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i,0) * 110ms + 120ms)}
@keyframes fadeup{to{opacity:1;transform:none}}

/* blinking terminal cursor on the departures line */
.terminal::after{content:"";display:inline-block;width:.55em;height:1em;margin-left:8px;background:var(--ink);vertical-align:-.15em;animation:blink 1.05s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* primary button: sweep of light + arrow nudge */
.btn-sign{position:relative;overflow:hidden;isolation:isolate}
.btn-sign::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);transform:translateX(-120%);animation:btnsweep 4.8s ease-in-out 1.6s infinite}
@keyframes btnsweep{0%,70%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.btn-line::after,.btn-ink:not(.wf-cta)::after{content:"\2192";display:inline-block;transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.btn-line:hover::after,.btn-ink:not(.wf-cta):hover::after{transform:translateX(5px)}

/* ---------- board glass ---------- */
.board{position:relative}
.board::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:6px;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.06) 49%,rgba(255,255,255,.1) 50%,transparent 62%) 140% 0/260% 100% no-repeat;
  animation:glass 7s ease-in-out 2.5s infinite}
@keyframes glass{0%{background-position:140% 0}45%,100%{background-position:-60% 0}}
.board-head span:first-child::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--proven);margin-right:8px;vertical-align:1px;animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(61,220,132,.55)}50%{opacity:.55;box-shadow:0 0 0 5px rgba(61,220,132,0)}}
.board-wrap{animation:boardin 1s cubic-bezier(.2,.8,.2,1) .25s both}
@keyframes boardin{from{opacity:0;transform:translateY(26px) scale(.985)}to{opacity:1;transform:none}}

/* ---------- scroll reveal (class added by JS only below the fold) ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0) * 90ms)}
.reveal.in{opacity:1;transform:none}
.sign-head.reveal{transform:translateX(-26px)}
.sign-head.reveal.in{transform:none}
/* gate-now keeps its raised position after the reveal */
.gate-now.reveal{transform:translateY(18px)}
.gate-now.reveal.in{transform:translateY(-10px)}
@media (max-width:1020px){.gate-now.reveal.in{transform:none}}

/* sign panels: a light sweep when they arrive */
.sign-head{position:relative;overflow:hidden}
.sign-head.in::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.6) 50%,transparent 70%);transform:translateX(-120%);animation:signsweep 1.1s ease-out .35s 1 forwards}
@keyframes signsweep{to{transform:translateX(120%)}}

/* ---------- nav scroll-spy ---------- */
nav a{transition:background-color .15s,color .15s}
nav a.is-here{background:var(--ink);color:var(--sign)}

/* ---------- manifest codes: flip-in ---------- */
.manifest li.in .code{animation:codeflip .6s cubic-bezier(.3,.7,.4,1) both;animation-delay:calc(var(--i,0) * 90ms + 150ms)}
@keyframes codeflip{0%{transform:perspective(200px) rotateX(-90deg);background:var(--sign);color:var(--ink)}60%{transform:perspective(200px) rotateX(12deg)}100%{transform:none}}
.manifest li{transition:background-color .2s}
.manifest li:hover{background:linear-gradient(90deg,rgba(255,199,44,.16),rgba(255,199,44,0) 70%)}

/* ---------- steps: pop + drawn connector ---------- */
.steps li.in .step-n{animation:pop .55s cubic-bezier(.3,1.6,.5,1) both;animation-delay:calc(var(--i,0) * 90ms + 200ms)}
@keyframes pop{0%{transform:scale(.3);opacity:0}100%{transform:none;opacity:1}}
.steps li::after{content:"";position:absolute;left:68px;right:-22px;top:48px;height:0;border-top:3px dashed var(--ink);opacity:0;transform:scaleX(0);transform-origin:0 50%;transition:transform .6s cubic-bezier(.2,.8,.2,1) calc(var(--i,0) * 90ms + 450ms),opacity .2s calc(var(--i,0) * 90ms + 450ms)}
.steps li.in:not(:last-child)::after{opacity:.55;transform:none}
@media (max-width:1020px){.steps li::after{display:none}}

/* ---------- gate B: boarding lamp ---------- */
.gate-now{background-color:var(--sign);background-image:linear-gradient(110deg,transparent 40%,rgba(255,255,255,.4) 50%,transparent 60%);background-size:260% 100%;background-position:130% 0;animation:lamp-b 6.5s ease-in-out 1.2s infinite}
@keyframes lamp-b{0%{background-position:130% 0}40%,100%{background-position:-40% 0}}
.boarding::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--proven);margin-right:8px;vertical-align:0;animation:pulse 1.4s ease-in-out infinite}

/* ---------- cursor spotlight on cards ---------- */
.gate:not(.gate-now),.fit-note,.retest{background-image:radial-gradient(circle 220px at var(--mx,-400px) var(--my,-400px),rgba(255,199,44,.26),rgba(255,199,44,0) 70%)}
.pass{background-image:radial-gradient(circle 260px at var(--mx,-400px) var(--my,-400px),rgba(255,199,44,.3),rgba(255,199,44,0) 70%)}
.gate,.fit-note,.retest,.pass,.badge{transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.gate:not(.gate-now):hover{translate:0 -5px;box-shadow:6px 6px 0 var(--ink)}
.gate-now:hover{box-shadow:11px 11px 0 var(--ink)}
.gate{transition-property:transform,box-shadow,translate}
.badge{transition:translate .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.badge:hover{translate:0 -8px;box-shadow:0 22px 30px -14px rgba(14,15,16,.55)}
.badge .photo img{transition:filter .35s}
.badge:hover .photo img{filter:grayscale(0) contrast(1.05)}
.barcode{background-size:100% 100%}
.badge:hover .barcode{animation:scan 1.1s linear infinite;background-position:0 0}
@keyframes scan{to{background-position:48px 0}}

/* ---------- boarding pass: stub shine ---------- */
.pass{position:relative;overflow:hidden}
.pass::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.55) 50%,transparent 58%);transform:translateX(-130%);transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.pass:hover::after{transform:translateX(130%)}

/* ---------- comparison table: our column glows in ---------- */
.table-frame td.us{position:relative}
tbody tr{transition:background-color .15s}
tbody tr:hover th,tbody tr:hover td:not(.us){background:rgba(255,199,44,.14)}

/* ---------- FAQ: smooth open ---------- */
.faq details[open] p{animation:faqopen .35s cubic-bezier(.2,.8,.2,1)}
@keyframes faqopen{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.faq summary{transition:padding-left .2s cubic-bezier(.2,.8,.2,1)}
.faq summary:hover{padding-left:8px}

/* ---------- final CTA: moving runway stripe ---------- */
section.final{position:relative;overflow:hidden}
section.final::before,section.final::after{content:"";position:absolute;left:0;right:0;height:12px;background:repeating-linear-gradient(135deg,var(--ink) 0 14px,transparent 14px 28px);background-size:39.6px 100%;animation:conveyor 1.6s linear infinite;pointer-events:none}
section.final::before{top:0}
section.final::after{bottom:0;animation-direction:reverse}
@keyframes conveyor{to{background-position:39.6px 0}}
.final-inner{background:radial-gradient(70% 120% at 85% 20%,rgba(255,255,255,.35),rgba(255,255,255,0) 60%),var(--sign)}

/* ---------- reduced motion: show the finished page, no movement ---------- */
@media (prefers-reduced-motion:reduce){
  .ticker-track{animation:none}
  .reveal,.reveal.in{opacity:1 !important;transform:none !important}
  .gate-now.reveal.in{transform:translateY(-10px) !important}
  .hero h1 .fx-line > span,.fx-in,.board-wrap{opacity:1 !important;transform:none !important}
  .fx-progress b{display:none}
}