/* ============================================================
   MEW FORCE ONE — $MEW1
   One continuous sky. The squadron fills in as you scroll.
   Hand-written vanilla CSS. No framework, no grain, no marquee,
   no glass nav, no stat cards.
   ============================================================ */

:root{
  --sky-1:#2B79CE;
  --sky-2:#4E9EE4;
  --sky-3:#7FC0F2;
  --sky-4:#B3DEFA;
  --sky-5:#DCF0FE;
  --sky-6:#EFF9FF;

  --ink:#062A52;
  --ink-mid:#2D5580;
  --ink-soft:#5C7FA6;

  --cape:#DE2A1E;
  --cape-dk:#A81810;
  --paper:#FBF4E6;
  --gold:#F5B93C;

  --panel:rgba(255,255,255,.87);
  --hair:rgba(6,42,82,.18);
  --hair-soft:rgba(6,42,82,.10);

  --f-disp:"Space Grotesk",system-ui,-apple-system,Segoe UI,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --shell:min(1180px,92vw);
  --ease:cubic-bezier(.2,.8,.25,1);

  --d:0;
  --p-far:0px; --p-mid:0px; --p-near:0px; --p-fleet:0px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--f-disp);
  font-size:clamp(16px,.42vw+15px,18px);
  line-height:1.62;
  color:var(--ink);
  background:var(--sky-3);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
::selection{background:var(--cape);color:#fff}
:focus-visible{outline:2.5px solid var(--cape);outline-offset:3px}

/* ============================================================
   THE SKY
   ============================================================ */
.env{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.sky{
  position:absolute;inset:0;
  background:linear-gradient(180deg,
    var(--sky-1) 0%, var(--sky-2) 24%, var(--sky-3) 48%,
    var(--sky-4) 70%, var(--sky-5) 88%, var(--sky-6) 100%);
  background-size:100% 240%;
  background-position:0% calc(var(--d) * 100%);
}
.sun{
  position:absolute;right:8vw;top:5vh;
  width:min(46vw,520px);aspect-ratio:1;
  background:radial-gradient(circle at 50% 50%,
    rgba(255,255,255,.95) 0%, rgba(255,246,214,.70) 18%,
    rgba(255,226,150,.28) 38%, rgba(255,226,150,0) 70%);
  transform:translate3d(0,calc(var(--d) * -30vh),0);
}
.deck{position:absolute;left:-6%;width:112%;height:132%;top:-16%;color:#fff}
.deck .cl>use{fill:currentColor}
#deck-far {opacity:.52;transform:translate3d(0,var(--p-far),0)}
#deck-mid {opacity:.76;transform:translate3d(0,var(--p-mid),0)}
#deck-near{opacity:.94;transform:translate3d(0,var(--p-near),0)}
.fleet{position:absolute;left:-6%;width:112%;height:132%;top:-16%;
  transform:translate3d(0,var(--p-fleet),0)}

/* ============================================================
   HUD — squadron strength
   ============================================================ */
.hud{
  position:fixed;z-index:40;right:max(16px,2.4vw);bottom:max(18px,2.6vh);
  width:132px;padding:14px 15px 13px;
  background:rgba(255,255,255,.72);
  border:1px solid var(--hair);border-radius:3px;
  box-shadow:0 8px 26px rgba(6,42,82,.14);
  pointer-events:none;
}
.hud-k{margin:0;font-family:var(--f-mono);font-size:9px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-soft)}
.hud-n{margin:2px 0 9px;font-family:var(--f-mono);font-weight:700;
  font-size:34px;line-height:1;letter-spacing:-.02em;color:var(--ink);
  font-variant-numeric:tabular-nums}
.hud-bar{height:3px;background:rgba(6,42,82,.14);border-radius:2px;overflow:hidden}
.hud-bar i{display:block;height:100%;width:0;background:var(--cape);
  transition:width .35s var(--ease)}
.hud-s{margin:9px 0 0;font-family:var(--f-mono);font-size:8.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-soft)}
/* The floating block only appears once the page gutter is genuinely wide
   enough to hold it — below 1520px it would sit on top of the content
   column, so the topbar readout carries the count instead. */
.hud{display:none}
@media (min-width:1520px){.hud{display:block}}

/* ============================================================
   TOPBAR — hairline, deliberately not glass
   ============================================================ */
.topbar{
  position:fixed;z-index:50;inset:0 0 auto 0;height:62px;
  display:flex;align-items:center;gap:22px;padding:0 max(16px,3vw);
  border-bottom:1px solid rgba(255,255,255,.5);
  background:linear-gradient(180deg,rgba(255,255,255,.44),rgba(255,255,255,0));
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img{width:38px;height:38px;border-radius:50%;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.9),0 3px 10px rgba(6,42,82,.22)}
.brand-txt{display:flex;flex-direction:column;line-height:1.06}
.brand-txt b{font-size:14.5px;font-weight:700;letter-spacing:-.02em}
.brand-txt i{font-family:var(--f-mono);font-style:normal;font-size:9.5px;
  letter-spacing:.12em;color:var(--ink-mid);text-transform:uppercase}
.nav{display:flex;gap:24px;margin-left:auto}
.nav a{font-size:13.5px;font-weight:500;text-decoration:none;position:relative;padding:4px 0}
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:0;
  background:var(--cape);transition:width .3s var(--ease)}
.nav a:hover::after,.nav a:focus-visible::after{width:100%}
.airborne{display:flex;align-items:center;gap:7px;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;
  background:rgba(255,255,255,.7);border:1px solid var(--hair);
  border-radius:2px;padding:6px 10px;white-space:nowrap}
.airborne b{font-weight:700;font-variant-numeric:tabular-nums}
.airborne .dot{width:6px;height:6px;border-radius:50%;background:var(--cape);
  animation:blip 2.4s ease-in-out infinite}
@keyframes blip{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(222,42,30,.5)}
  50%{opacity:.55;box-shadow:0 0 0 5px rgba(222,42,30,0)}}
.lbl-short{display:none}
@media (max-width:960px){.nav{display:none}.motion-toggle{margin-left:auto}}
/* keep the counter on phones — just shorten the label rather than drop it */
@media (max-width:520px){
  .lbl-long{display:none}
  .lbl-short{display:inline}
  .airborne{font-size:9.5px;padding:6px 8px;gap:6px;letter-spacing:.1em}
  .topbar{gap:9px;padding:0 12px}
  .brand-txt b{font-size:13px}
}

/* ============================================================
   LAYOUT
   ============================================================ */
main{position:relative;z-index:10}
/* position+z-index so content paints ABOVE the absolutely-positioned
   flight-path spine drawn by .band::before/::after */
.wrap{width:var(--shell);margin-inline:auto;position:relative;z-index:1}
.band{position:relative;padding:clamp(84px,12vh,150px) 0}
.band::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.85) 0 8px,transparent 8px 20px);
  opacity:.45}
.band::after{content:"";position:absolute;left:50%;top:0;width:9px;height:9px;
  transform:translate(-50%,-50%) rotate(45deg);background:#fff;border:1.5px solid var(--cape)}
.hero::before,.hero::after{display:none}

.flnum{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--ink-mid);margin:0 0 18px;
  display:flex;align-items:center;gap:12px}
.flnum::after{content:"";flex:1;height:1px;background:var(--hair)}

.h2{font-size:clamp(2rem,4.6vw,3.5rem);line-height:1.06;letter-spacing:-.035em;
  font-weight:700;margin:0 0 14px;text-wrap:balance;max-width:20ch}
.h2 em{font-style:normal;color:var(--cape)}
.secsub{color:var(--ink-mid);max-width:58ch;margin:0 0 42px;font-size:1.02rem}

/* Anything that animates in is VISIBLE by default and only starts hidden
   when motion is on — so a failed script or a blocked animation can never
   leave content permanently invisible. */
:root.motion-on .rv{opacity:0;filter:blur(7px);transform:translateY(-12px);
  transition:opacity .8s var(--ease),filter .8s var(--ease),transform .8s var(--ease)}
:root.motion-on .rv.on{opacity:1;filter:blur(0);transform:none}

/* ============================================================
   HERO
   ============================================================ */
.hero{padding-top:clamp(104px,16vh,180px);padding-bottom:clamp(52px,8vh,96px)}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,72px);
  align-items:center}
.eyebrow{display:flex;align-items:center;gap:9px;margin:0 0 18px;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:#fff;text-shadow:0 1px 6px rgba(6,42,82,.35)}
.pip{width:7px;height:7px;background:var(--cape);border-radius:50%;
  box-shadow:0 0 0 3px rgba(255,255,255,.45)}

.wordmark{
  margin:0 0 22px;font-weight:700;color:#fff;
  font-size:clamp(2.9rem,9.6vw,7.2rem);
  line-height:.84;letter-spacing:-.055em;
  text-shadow:0 3px 0 rgba(6,42,82,.10),0 14px 44px rgba(6,42,82,.28);
}
.wm-l{display:block;font-style:normal;color:#fff}
.wm-red{color:var(--cape);
  text-shadow:0 3px 0 rgba(255,255,255,.35),0 14px 40px rgba(168,24,16,.30)}

.lede{font-size:clamp(1.16rem,1.8vw,1.6rem);line-height:1.28;font-weight:600;
  color:#fff;margin:0 0 16px;text-wrap:balance;letter-spacing:-.02em;
  text-shadow:0 1px 10px rgba(6,42,82,.34)}
.sub{color:var(--ink);margin:0 0 30px;max-width:48ch;
  background:rgba(255,255,255,.58);padding:14px 16px;border-left:2px solid var(--cape);
  border-radius:0 3px 3px 0;font-size:.97rem;line-height:1.6}

.cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--f-disp);font-weight:600;font-size:14.5px;
  padding:13px 24px;border-radius:2px;border:1.5px solid transparent;
  text-decoration:none;cursor:pointer;
  transition:transform .22s var(--ease),background .22s,box-shadow .22s}
.btn-primary{background:var(--cape);color:#fff;box-shadow:0 6px 20px rgba(168,24,16,.28)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(168,24,16,.36)}
.btn-ghost{background:rgba(255,255,255,.74);color:var(--ink);border-color:rgba(255,255,255,.9)}
.btn-ghost:hover{background:#fff;transform:translateY(-2px)}
.btn-small{padding:9px 15px;font-size:12.5px;background:var(--ink);color:#fff}
.btn-small:disabled{opacity:.42;cursor:not-allowed}
.btn:active{transform:translateY(0) scale(.985)}

.tinynote{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;
  color:var(--ink-mid);margin:0}
.tinynote.center{text-align:center;margin-top:34px}

.hero-art{position:relative;margin:0}
.hero-art img{border-radius:50%;position:relative;z-index:2;
  box-shadow:0 22px 60px rgba(6,42,82,.3),0 0 0 6px rgba(255,255,255,.55)}
.art-ring{position:absolute;inset:-7%;border-radius:50%;
  border:1px dashed rgba(255,255,255,.85);animation:spin 46s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.hero-art figcaption{margin-top:16px;text-align:center;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-mid)}

.motto{margin:clamp(40px,7vh,80px) 0 0;text-align:center;color:#fff;
  font-weight:700;letter-spacing:.16em;font-size:clamp(1rem,2.4vw,1.5rem);
  text-transform:uppercase;text-shadow:0 2px 14px rgba(6,42,82,.35)}

/* ============================================================
   THE FOLD — instruction-manual diagrams
   ============================================================ */
.folds{list-style:none;padding:0;margin:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.folds li{position:relative;background:var(--panel);border:1px solid var(--hair);
  border-radius:3px;padding:26px 24px 24px;box-shadow:0 12px 34px rgba(6,42,82,.11)}
.fk{position:absolute;top:16px;right:18px;font-family:var(--f-mono);font-size:10px;
  letter-spacing:.14em;color:var(--ink-soft)}
.fd{width:100%;max-width:150px;height:auto;margin:0 0 16px;display:block}
.folds h3{margin:0 0 7px;font-size:1.3rem;font-weight:700;letter-spacing:-.03em}
.folds p{margin:0;color:var(--ink-mid);font-size:.93rem;line-height:1.58}

/* ============================================================
   ROSTER
   ============================================================ */
.roster{background:var(--panel);border:1px solid var(--hair);border-radius:3px;
  box-shadow:0 14px 40px rgba(6,42,82,.12);overflow-x:auto}
.roster table{width:100%;border-collapse:collapse;min-width:420px}
.roster th{text-align:left;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-soft);font-weight:400;
  padding:15px clamp(14px,2.2vw,26px);border-bottom:1px solid var(--hair)}
.roster td{padding:15px clamp(14px,2.2vw,26px);border-bottom:1px solid var(--hair-soft);
  font-size:.94rem}
.roster tbody tr:last-child td{border-bottom:0}
.roster tbody tr{transition:background .25s var(--ease)}
.roster tbody tr:hover{background:rgba(255,255,255,.6)}
.roster td b{font-family:var(--f-mono);font-weight:700;letter-spacing:.06em;font-size:.88rem}
.st{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 8px;border-radius:2px;border:1px solid}
.st-go{color:#17703F;border-color:rgba(23,112,63,.35);background:rgba(23,112,63,.08)}
.st-hold{color:var(--cape);border-color:rgba(222,42,30,.35);background:rgba(222,42,30,.07)}
@media (max-width:640px){.hide-s{display:none}.roster table{min-width:0}}

/* ============================================================
   FLIGHT RULES
   ============================================================ */
.rules-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(18px,3vw,40px);
  align-items:start}
.rules{list-style:none;padding:clamp(22px,3vw,36px);margin:0;
  background:var(--panel);border:1px solid var(--hair);border-radius:3px;
  box-shadow:0 14px 40px rgba(6,42,82,.12);counter-reset:r}
.rules li{padding:15px 0;border-bottom:1px solid var(--hair-soft);
  font-size:.98rem;line-height:1.6;color:var(--ink)}
.rules li:last-child{border-bottom:0;padding-bottom:0}
.rules li:first-child{padding-top:0}
.rules b{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;
  color:var(--cape);margin-right:12px;font-weight:700}
.ordercard{background:var(--ink);color:#fff;border-radius:3px;
  padding:clamp(24px,3vw,34px);box-shadow:0 20px 50px rgba(6,42,82,.28);
  position:relative;overflow:hidden}
.ordercard::after{content:"";position:absolute;inset:8px;
  border:1px solid rgba(255,255,255,.16);border-radius:2px;pointer-events:none}
.oc-k{margin:0 0 14px;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:#9DC3EA}
.oc-b{margin:0 0 18px;font-size:clamp(1.7rem,3.4vw,2.5rem);font-weight:700;
  line-height:1.08;letter-spacing:-.035em;color:var(--cape);
  text-shadow:0 0 30px rgba(222,42,30,.4)}
.oc-s{margin:0;font-size:.85rem;line-height:1.55;color:#9DC3EA}
@media (max-width:860px){.rules-grid{grid-template-columns:1fr}}

/* ============================================================
   MANIFEST
   ============================================================ */
.manifest{background:var(--panel);border:1px solid var(--hair);border-radius:3px;
  box-shadow:0 14px 40px rgba(6,42,82,.12);overflow:hidden}
/* six entries, so 3x2 rather than auto-fit's ragged 5+1 */
.manifest dl{margin:0;display:grid;grid-template-columns:repeat(3,1fr)}
@media (max-width:860px){.manifest dl{grid-template-columns:repeat(2,1fr)}}
.manifest dl>div{padding:24px clamp(18px,2.4vw,30px);
  border-right:1px solid var(--hair-soft);border-bottom:1px solid var(--hair-soft)}
.manifest dt{font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px}
.manifest dd{margin:0;font-size:clamp(1.15rem,2.2vw,1.6rem);font-weight:700;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.ca{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:22px clamp(18px,2.4vw,30px);background:rgba(6,42,82,.04)}
.ca-label{font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-soft);margin:0}
.ca code{font-family:var(--f-mono);font-size:12.5px;color:var(--ink);
  word-break:break-all;flex:1;min-width:170px}

/* ============================================================
   CHECKLIST
   ============================================================ */
.checklist{list-style:none;padding:0;margin:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:14px}
.checklist li{display:flex;gap:14px;align-items:flex-start;
  background:var(--panel);border:1px solid var(--hair);border-radius:3px;
  padding:22px 20px;box-shadow:0 10px 30px rgba(6,42,82,.09)}
.ck{font-family:var(--f-mono);font-size:10.5px;font-weight:700;letter-spacing:.08em;
  color:#fff;background:var(--ink);padding:4px 7px;border-radius:2px;flex:none}
.checklist h3{margin:0 0 5px;font-size:1.02rem;font-weight:700;letter-spacing:-.02em}
.checklist p{margin:0;color:var(--ink-mid);font-size:.9rem;line-height:1.55}
.chip{display:inline-block;vertical-align:-3px;margin-right:3px;border-radius:3px}

/* ============================================================
   FORMATION
   ============================================================ */
.banner{margin:0 0 30px;border-radius:3px;overflow:hidden;
  box-shadow:0 26px 70px rgba(6,42,82,.28);border:1px solid rgba(255,255,255,.7)}
.banner figcaption{background:var(--ink);color:#9DC3EA;margin:0;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  padding:11px 16px;text-align:center}
.closing{font-size:clamp(1.1rem,2.1vw,1.45rem);line-height:1.45;max-width:46ch;
  margin:0 auto;text-align:center;font-weight:500}
.closing b{color:var(--cape);font-weight:700}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{position:relative;z-index:10;background:var(--ink);color:#A9C9E8;
  padding:56px 0 40px;margin-top:40px}
.foot-grid{display:flex;align-items:center;justify-content:space-between;gap:24px;
  flex-wrap:wrap;padding-bottom:26px;border-bottom:1px solid rgba(255,255,255,.14)}
.foot-mark{font-size:1.45rem;font-weight:700;color:#fff;letter-spacing:-.035em;margin:0}
.foot-tag{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;margin:4px 0 0;color:#7FA8D0}
.foot-links{display:flex;gap:10px}
.ico{width:42px;height:42px;display:grid;place-items:center;border-radius:2px;
  border:1px solid rgba(255,255,255,.2);transition:background .22s,transform .22s var(--ease)}
.ico img{filter:brightness(0) invert(1);opacity:.85}
.ico:hover{background:var(--cape);transform:translateY(-2px)}
.disclaimer{font-size:11.5px;line-height:1.7;color:#6F98C2;margin:22px 0 0;max-width:88ch}

/* ============================================================
   LAUNCHED PLANES + TOAST
   ============================================================ */
.launchpad{position:fixed;inset:0;z-index:60;pointer-events:none;overflow:hidden}
.pplane{position:absolute;width:46px;height:19px;
  transform:translate(-50%,-50%);
  animation:fly 1.5s cubic-bezier(.25,.5,.4,1) forwards}
@keyframes fly{
  0%  {opacity:0;transform:translate(-50%,-50%) scale(.4) rotate(-14deg)}
  12% {opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-10deg)}
  100%{opacity:0;
       transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.72) rotate(-16deg)}
}
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,140%);
  z-index:70;background:var(--ink);color:#fff;
  font-family:var(--f-mono);font-size:12px;letter-spacing:.05em;
  padding:11px 18px;border-radius:2px;box-shadow:0 12px 34px rgba(6,42,82,.34);
  transition:transform .42s var(--ease);max-width:min(90vw,420px);text-align:center}
.toast.show{transform:translate(-50%,0)}

/* ============================================================
   MOTION SYSTEM
   Everything below is ambient/scroll motion. All of it is
   switched off wholesale in the reduced-motion block.
   ============================================================ */

/* --- clouds stream past: three copies of each deck translated by one
       viewBox width, so -1600 lands copy 2 exactly on copy 1 --- */
.drift{animation:cloudDrift var(--cd,110s) linear infinite}
@keyframes cloudDrift{from{transform:translateX(0)}to{transform:translateX(-1600px)}}

/* --- formation station-keeping: each aircraft holds position and bobs --- */
.acft{animation:bob var(--bd,6s) ease-in-out infinite alternate;animation-delay:var(--bdl,0s)}
@keyframes bob{
  from{transform:translate(0,0)}
  to  {transform:translate(var(--bx,10px),var(--by,-8px))}
}

/* --- airspeed streaks --- */
.streaks{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.streak{position:absolute;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);
  opacity:.42;animation:zip var(--sd,5s) linear infinite;animation-delay:var(--sdl,0s)}
@keyframes zip{from{transform:translateX(112vw)}to{transform:translateX(-40vw)}}
/* fewer moving parts on phones */
@media (max-width:600px){.streak:nth-child(n+5){display:none}}

/* --- the lead cat flies --- */
.hero-art img{animation:floaty 6.4s ease-in-out infinite alternate}
@keyframes floaty{from{transform:translateY(-9px) rotate(-1deg)}
                  to  {transform:translateY(11px) rotate(1.3deg)}}

/* --- wordmark takes off, line by line --- */
:root.motion-on .wm-l{opacity:0;transform:translateX(-46px) rotate(-3.5deg);
  animation:flyin .95s cubic-bezier(.16,1,.3,1) forwards}
:root.motion-on .wm-l:nth-child(1){animation-delay:.10s}
:root.motion-on .wm-l:nth-child(2){animation-delay:.24s}
:root.motion-on .wm-l:nth-child(3){animation-delay:.38s}
@keyframes flyin{to{opacity:1;transform:none}}

/* --- motto words land one at a time --- */
.motto span{display:inline-block;margin:0 .28em}
:root.motion-on .motto span{opacity:0;transform:translateY(16px);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
:root.motion-on .motto.on span:nth-child(1){transition-delay:0s}
:root.motion-on .motto.on span:nth-child(2){transition-delay:.14s}
:root.motion-on .motto.on span:nth-child(3){transition-delay:.28s}
:root.motion-on .motto.on span{opacity:1;transform:none}

/* --- technical-drawing guides march, like a live instruction manual --- */
.fd .guide{animation:march 1.5s linear infinite}
@keyframes march{to{stroke-dashoffset:-18}}
.fd .arrow{animation:nudge 1.5s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(2.5px)}}

/* --- roster rows arrive in sequence --- */
:root.motion-on .roster tbody tr{opacity:0;transform:translateY(10px);
  transition:opacity .55s var(--ease),transform .55s var(--ease),background .25s var(--ease)}
:root.motion-on .roster.on tbody tr{opacity:1;transform:none}

/* --- banner settles out of a slow push-in --- */
:root.motion-on .banner img{transform:scale(1.07);transition:transform 1.4s var(--ease)}
:root.motion-on .banner.on img{transform:scale(1)}

/* --- squadron count ticks over --- */
.tick{animation:tickpop .34s var(--ease)}
@keyframes tickpop{0%{transform:translateY(-3px);opacity:.45}100%{transform:none;opacity:1}}

/* --- waypoint diamond pulses as you pass it --- */
.band.passed::after{animation:ping 1.1s var(--ease)}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(222,42,30,.55)}
                100%{box-shadow:0 0 0 16px rgba(222,42,30,0)}}

/* --- launched planes trail a contrail --- */
.pplane::after{content:"";position:absolute;right:100%;top:52%;
  width:54px;height:2px;margin-right:2px;border-radius:2px;
  background:linear-gradient(270deg,rgba(255,255,255,.85),transparent);
  transform:rotate(9deg);transform-origin:right center}

/* --- primary CTA breathes very slightly --- */
.btn-primary{animation:pulse 3.4s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 6px 20px rgba(168,24,16,.28)}
                 50%{box-shadow:0 8px 28px rgba(168,24,16,.44)}}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .hero-art{max-width:300px;margin:8px auto 0}
  .band::before,.band::after{display:none}
  .sub{max-width:none}
}
@media (max-width:520px){
  .wordmark{font-size:clamp(2.6rem,14vw,4.4rem)}
  .manifest dl{grid-template-columns:1fr 1fr}
  .foot-grid{flex-direction:column;align-items:flex-start}
  .toast{bottom:16px}
}

/* ============================================================
   MOTION TOGGLE
   JS sets .motion-on / .motion-off on <html>, defaulting to the
   OS prefers-reduced-motion setting but letting a visitor opt in
   or out. Everything static lives in ONE block, below.
   ============================================================ */
.motion-toggle{display:flex;align-items:center;gap:7px;cursor:pointer;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;
  background:rgba(255,255,255,.7);border:1px solid var(--hair);
  border-radius:2px;padding:6px 10px;color:var(--ink);white-space:nowrap;
  transition:background .22s,transform .22s var(--ease)}
.motion-toggle{position:relative}
/* invisible expanded hit area so the tap target clears ~44px on touch */
.motion-toggle::after{content:"";position:absolute;inset:-9px -7px}
.motion-toggle:hover{background:#fff;transform:translateY(-1px)}
.motion-toggle .sw{width:22px;height:12px;border-radius:7px;flex:none;position:relative;
  background:rgba(6,42,82,.22);transition:background .25s var(--ease)}
.motion-toggle .sw::after{content:"";position:absolute;top:2px;left:2px;
  width:8px;height:8px;border-radius:50%;background:#fff;
  transition:transform .25s var(--ease)}
:root.motion-on .motion-toggle .sw{background:var(--cape)}
:root.motion-on .motion-toggle .sw::after{transform:translateX(10px)}
@media (max-width:1100px){.motion-toggle .mt-lbl{display:none}}
@media (max-width:600px){.motion-toggle{padding:6px 8px}}

/* ---- the single "everything holds still" block ---- */
:root.motion-off *,
:root.motion-off *::before,
:root.motion-off *::after{
  animation-duration:.001ms!important;animation-iteration-count:1!important;
  transition-duration:.001ms!important}
:root.motion-off{scroll-behavior:auto}
/* the reveal/fly-in states are scoped to .motion-on, so nothing here needs to
   un-hide content — it only has to stop things that move on their own */
:root.motion-off .sun,
:root.motion-off .deck,
:root.motion-off .fleet,
:root.motion-off .drift,
:root.motion-off .acft,
:root.motion-off .hero-art img,
:root.motion-off .art-ring,
:root.motion-off .fd .guide,
:root.motion-off .fd .arrow,
:root.motion-off .btn-primary,
:root.motion-off .airborne .dot{animation:none!important;transform:none!important}
:root.motion-off .streaks{display:none}
:root.motion-off .pplane::after{display:none}
:root.motion-off .scrollhint i{animation:none!important}

@media (forced-colors:active){
  .wordmark,.wordmark span,.wordmark em{text-shadow:none}
  .ordercard,.foot{border:1px solid}
}