/* ============================================================
   MISSION CONTROL — SPICY layer (2026). Additive; loads after site.css
   ============================================================ */

/* 00 CURTAIN — page-load reveal: arrow draws, fills, curtain lifts */
#curtain{position:fixed;inset:0;z-index:1000;background:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--paper);transition:transform .9s cubic-bezier(.85,0,.15,1);transform-origin:top}
#curtain.done{transform:scaleY(0);pointer-events:none}
#curtain .cmark{width:150px;color:var(--orange)}
#curtain .cmark path{fill:none;stroke:currentColor;stroke-width:6;stroke-dasharray:1100;stroke-dashoffset:1100;animation:cDraw 1s ease-out forwards,cFill .35s ease-out 1s forwards}
@keyframes cDraw{to{stroke-dashoffset:0}}
@keyframes cFill{to{fill:currentColor}}
#curtain .cwords{margin-top:22px;font-family:var(--mono);font-size:12px;letter-spacing:.3em;text-transform:uppercase;opacity:0;animation:cFade .4s ease-out 1.15s forwards}
#curtain .cwords b{color:var(--lime);font-weight:400}
@keyframes cFade{to{opacity:1}}
html.curtain-wait .hero>*:not(.hero-watermark),html.curtain-wait .logo{visibility:hidden}

/* CURSOR — the arrow IS the cursor (pointer devices only) */
@media(hover:hover) and (pointer:fine){
  body.has-cur,body.has-cur a,body.has-cur button{cursor:none}
  #cur{position:fixed;left:0;top:0;width:14px;height:14px;border-radius:50%;background:var(--ink);pointer-events:none;z-index:900;transform:translate(-50%,-50%);transition:width .2s,height .2s,background .2s}
  #cur .cin{position:absolute;inset:0;display:grid;place-items:center;color:var(--paper);opacity:0;transition:opacity .15s;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
  #cur .cin svg{width:28px;height:auto}
  body.cur-link #cur{width:56px;height:56px;background:var(--orange)}
  body.cur-link #cur .cin{opacity:1}
  body.cur-dark #cur{background:var(--paper)}
  body.cur-dark.cur-link #cur{background:var(--orange)}
}
#cur{display:none}
@media(hover:hover) and (pointer:fine){body.has-cur #cur{display:block}}

/* 01 LAUNCH — nav wordmark letters stagger up, arrow lifts off, trail draws */
.logo .w{display:inline-block;overflow:hidden;vertical-align:bottom;line-height:.9}
.logo .w i{display:inline-block;font-style:normal;transform:translateY(110%);transition:transform .7s cubic-bezier(.2,.9,.2,1)}
.logo.go .w i{transform:none}
.logo .mc-arrow{transform:translateY(60px) scale(.6);opacity:0;transition:transform .8s cubic-bezier(.2,1.4,.3,1) .45s,opacity .3s .45s}
.logo.go .mc-arrow{transform:none;opacity:1}
.logo:hover .mc-arrow{transform:none}

/* 02 ORBIT — hover the logo: arrow launches, does a lap, re-docks */
.logo{position:relative}
.logo.go:hover .mc-arrow{animation:orbit 1.3s cubic-bezier(.5,0,.3,1) 1}
@keyframes orbit{0%{transform:none}25%{transform:translate(.2em,-1.2em) rotate(-30deg)}55%{transform:translate(-2.4em,-1.6em) rotate(-200deg)}80%{transform:translate(-1.2em,.3em) rotate(-330deg)}100%{transform:none}}
.logo .exhaust{position:absolute;pointer-events:none;inset:-40px;opacity:0}
.logo.go:hover .exhaust{animation:puff 1.3s ease-out 1}
.logo .exhaust b{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--orange)}
@keyframes puff{0%{opacity:0}15%{opacity:1}100%{opacity:0;transform:scale(1.6)}}

/* 03 SCROLL-AWARE — nav arrow tilts with scroll velocity (JS sets --tilt) */
.logo.go .mc-arrow{transition:transform .25s cubic-bezier(.2,.9,.2,1)}
.logo.go.tilting .mc-arrow{transform:rotate(var(--tilt,0deg)) translateY(var(--lift,0px))}

/* HERO — words rise in after curtain */
.hero .rise{display:inline-block;opacity:0;transform:translateY(40px);transition:opacity .7s cubic-bezier(.2,.9,.2,1),transform .7s cubic-bezier(.2,.9,.2,1)}
.hero.go .rise{opacity:1;transform:none}
.hero.go .rise:nth-child(2){transition-delay:.08s}
.hero .eyebrow,.hero .hero-sub,.hero .hero-ctas,.hero .sticker{opacity:0;transform:translateY(24px);transition:opacity .6s,transform .6s}
.hero.go .eyebrow{opacity:1;transform:none;transition-delay:.1s}
.hero.go .hero-sub{opacity:1;transform:none;transition-delay:.45s}
.hero.go .hero-ctas{opacity:1;transform:none;transition-delay:.6s}
.hero.go .sticker{opacity:1;transition-delay:.8s}
.hero.go .sticker-1{transform:rotate(8deg)}.hero.go .sticker-2{transform:rotate(-6deg)}.hero.go .sticker-3{transform:rotate(-3deg)}
.hero.go h1 .swipe::before{animation-delay:1s}

/* 05 HERO WATERMARK — giant arrow drifts, tiny orange satellite traces an orbit */
.hero-watermark{animation:wmDrift 14s ease-in-out infinite}
@keyframes wmDrift{0%,100%{transform:translateY(-50%) rotate(10deg)}50%{transform:translateY(-54%) rotate(14deg)}}
.satellite{position:absolute;right:20%;top:52%;width:44px;color:var(--orange);pointer-events:none;z-index:0;offset-path:path('M 0 0 C 120 -160, 320 -160, 440 0 C 320 160, 120 160, 0 0 Z');offset-rotate:auto 90deg;animation:sat 11s linear infinite;opacity:.9}
@keyframes sat{to{offset-distance:100%}}
@media(max-width:760px){.satellite{display:none}}

/* 06 TICKER — hover to hit the throttle */
.client-track:hover{animation-play-state:paused}

/* Footer wordmark uses real vector */
.foot-word img{height:1em;width:auto;display:block}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  #curtain{display:none}html.curtain-wait .hero>*,html.curtain-wait .logo{visibility:visible}
  .logo .w i,.logo .mc-arrow,.hero .rise,.hero .eyebrow,.hero .hero-sub,.hero .hero-ctas,.hero .sticker{opacity:1!important;transform:none!important;transition:none!important}
  .satellite,.hero-watermark{animation:none!important}
}

/* ---- 10 STATEMENT (replaces orbit-band) ---- */
.statement{padding:clamp(70px,10vw,140px) 32px;overflow:hidden;border-top:2px solid var(--ink)}
.st-wrap{max-width:1200px;margin:0 auto}
.st-line{margin:0;font-family:var(--display);font-weight:850;text-transform:uppercase;letter-spacing:-.03em;line-height:.95;font-size:clamp(44px,8.2vw,124px);display:flex;flex-wrap:wrap;gap:0 .28em;align-items:baseline;opacity:0;transform:translateY(40px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
.statement.in .st-line{opacity:1;transform:none}
.statement.in .st-line:nth-child(2){transition-delay:.12s}
.statement.in .st-line:nth-child(3){transition-delay:.24s}
.flip{position:relative;display:inline-grid;color:var(--orange)}
.flip b{grid-area:1/1;justify-self:start;width:max-content;font-weight:inherit;white-space:nowrap;opacity:0;transform:translateY(.55em) rotateX(-40deg);transform-origin:50% 100%;transition:opacity .45s,transform .55s cubic-bezier(.2,.9,.2,1)}
.flip b.on{opacity:1;transform:none}
.flip b.out{opacity:0;transform:translateY(-.55em) rotateX(40deg);transition:opacity .35s,transform .45s cubic-bezier(.6,0,.8,.4)}
.st-line:nth-child(2) .flip{color:var(--ink)}
.st-line:nth-child(2) .flip b{background:linear-gradient(var(--lime),var(--lime)) no-repeat 0 100%/0 .22em}
.st-line:nth-child(2) .flip b.on{transition:opacity .45s,transform .55s cubic-bezier(.2,.9,.2,1),background-size .6s cubic-bezier(.2,.8,.2,1) .45s;background-size:100% .22em}
.go{position:relative;display:inline-block}
.go-arrow{position:absolute;left:100%;bottom:.05em;width:.62em;margin-left:.08em;color:var(--orange);transform:translateY(.5em) scale(.6);opacity:0}
.statement.in .go-arrow{animation:goLaunch 1.1s cubic-bezier(.2,.9,.3,1) .7s forwards}
@keyframes goLaunch{0%{opacity:0;transform:translateY(.6em) scale(.6)}30%{opacity:1}100%{opacity:1;transform:translateY(0) scale(1)}}
.go::after{content:"";position:absolute;left:0;right:0;bottom:-.08em;height:.09em;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .8s cubic-bezier(.2,.8,.2,1) .9s}
.statement.in .go::after{transform:scaleX(1)}
.statement.in .go-arrow{animation:goLaunch 1.1s cubic-bezier(.2,.9,.3,1) .7s forwards, goHover 4s ease-in-out 1.9s infinite}
@keyframes goHover{50%{transform:translateY(-.18em)}}
@media(max-width:760px){.statement{padding:60px 20px}.st-line{font-size:clamp(40px,11.5vw,64px)}}
@media(prefers-reduced-motion:reduce){.st-line,.flip b,.go-arrow,.go::after{transition:none;animation:none;opacity:1;transform:none}.flip b:not(.on){display:none}}