/* ============================================================
   SPACEX — FLIGHT DIRECTOR CONSOLE
   dark monumental mission-control aesthetic
   ============================================================ */

@font-face{
  font-family:'Space Grotesk';
  src:url('fonts/SpaceGrotesk-var.woff2') format('woff2-variations');
  font-weight:300 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'IBM Plex Mono';
  src:url('fonts/IBMPlexMono-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'IBM Plex Mono';
  src:url('fonts/IBMPlexMono-500.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'IBM Plex Mono';
  src:url('fonts/IBMPlexMono-600.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap;
}

:root{
  --bg:#05070a;
  --bg-2:#0a0d12;
  --panel:#0b0e14;
  --ink:#e8ecf1;
  --ink-dim:#8b95a3;
  --ink-faint:#4a5462;
  --line:rgba(232,236,241,.14);
  --line-strong:rgba(232,236,241,.32);
  --accent:#ff4d1c;        /* international orange */
  --accent-dim:rgba(255,77,28,.35);
  --amber:#ffb454;
  --go:#3ddc84;
  --disp:'Space Grotesk',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--disp);
  font-weight:340;
  line-height:1.55;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--accent);color:#05070a}

.mono{font-family:var(--mono);font-weight:500;letter-spacing:.08em}
.accent{color:var(--accent)}
img{display:block;max-width:100%}

#starfield{
  position:fixed;inset:0;width:100vw;height:100vh;z-index:-2;pointer-events:none;
}
.grain{
  position:fixed;inset:-50%;z-index:60;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(4) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}25%{transform:translate(-2%,1%)}
  50%{transform:translate(1%,-2%)}75%{transform:translate(-1%,2%)}100%{transform:translate(0,0)}
}

/* ============ HUD ============ */
.hud{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;gap:24px;
  padding:14px 28px;
  background:linear-gradient(to bottom,rgba(5,7,10,.92),rgba(5,7,10,.72) 70%,transparent);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(6px);
}
.wordmark{height:16px;width:auto;filter:invert(1)}
.hud-lamps{display:flex;gap:10px;margin-left:auto}
.lamp{
  font-family:var(--mono);font-size:9px;letter-spacing:.14em;
  color:var(--ink-dim);
  border:1px solid var(--line);padding:4px 8px 3px;
  display:flex;gap:6px;align-items:center;
}
.lamp b{color:var(--go);font-weight:600;position:relative;padding-left:9px}
.lamp b::before{
  content:'';position:absolute;left:0;top:50%;translate:0 -50%;
  width:5px;height:5px;border-radius:50%;background:var(--go);
  box-shadow:0 0 6px var(--go);
  animation:lampPulse 2.4s ease-in-out infinite;
}
.lamp--fd b{color:var(--accent)}
.lamp--fd b::before{background:var(--accent);box-shadow:0 0 6px var(--accent)}
@keyframes lampPulse{0%,100%{opacity:1}50%{opacity:.35}}
.hud-met{display:flex;gap:10px;align-items:baseline}
.hud-label{font-family:var(--mono);font-size:9px;letter-spacing:.2em;color:var(--ink-faint)}
#met{font-size:13px;color:var(--ink);font-variant-numeric:tabular-nums}

/* rail */
.rail{
  position:fixed;right:18px;top:50%;translate:0 -50%;z-index:50;
  display:flex;flex-direction:column;gap:18px;
}
.rail a{
  display:flex;align-items:center;gap:10px;flex-direction:row-reverse;
  text-decoration:none;color:var(--ink-faint);
  font-family:var(--mono);font-size:9px;letter-spacing:.2em;
}
.rail a i{
  width:8px;height:8px;border:1px solid var(--ink-faint);rotate:45deg;
  transition:background .25s,border-color .25s;
}
.rail a span{opacity:0;translate:6px 0;transition:.25s}
.rail a:hover span,.rail a.is-active span{opacity:1;translate:0 0}
.rail a.is-active{color:var(--ink)}
.rail a.is-active i{background:var(--accent);border-color:var(--accent)}

/* ============ HERO ============ */
.hero{
  min-height:100vh;min-height:100svh;
  position:relative;display:flex;align-items:flex-end;
  padding:120px 6vw 110px;
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.hero-grid{
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:
    linear-gradient(var(--line) 1px,transparent 1px) 0 0/100% 25vh,
    linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/25vw 100%;
  mask-image:radial-gradient(120% 90% at 50% 100%,#000 30%,transparent 75%);
}
.hero-stage{
  position:absolute;right:6vw;bottom:0;top:0;width:min(38vw,420px);
  display:flex;justify-content:center;align-items:flex-end;pointer-events:none;
}
.vehicle{
  position:relative;z-index:2;height:72vh;color:#c9d2dd;opacity:.92;
  filter:drop-shadow(0 0 22px rgba(232,236,241,.12));
  margin-bottom:9vh;
}
.vehicle-detail line,.vehicle-detail rect{stroke-width:1.5}
#steam{position:absolute;bottom:0;left:0;width:100%;height:38vh;z-index:1}
.pad-line{
  position:absolute;bottom:9vh;left:-4vw;right:-4vw;height:2px;
  background:var(--line-strong);z-index:0;
}
.hero-copy{position:relative;z-index:3;max-width:min(62vw,780px)}
.kicker{font-size:11px;color:var(--ink-dim);margin-bottom:28px}
.kicker .tick{color:var(--accent);animation:blink 1.1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.hero-title{display:flex;flex-direction:column;line-height:.9;margin-bottom:40px}
.hero-title-top{
  font-size:clamp(20px,2.4vw,34px);font-weight:500;letter-spacing:.55em;color:var(--ink-dim);
}
.hero-title-big{
  font-size:clamp(56px,10.5vw,168px);font-weight:600;letter-spacing:-.02em;
  text-transform:uppercase;
  background:linear-gradient(180deg,#fff 55%,#6b7684);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-title-sub{
  font-size:clamp(12px,1.3vw,18px);font-weight:400;letter-spacing:.5em;color:var(--ink-faint);
  margin-top:14px;
}

.countdown{max-width:520px;margin-bottom:36px}
.cd-prefix{font-size:11px;letter-spacing:.4em;color:var(--accent);margin-bottom:6px}
.cd-digits{
  font-size:clamp(44px,7vw,96px);font-weight:600;line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:.02em;
  text-shadow:0 0 34px rgba(255,77,28,.28);
}
.cd-track{height:3px;background:rgba(232,236,241,.12);margin:14px 0 10px;overflow:hidden}
.cd-fill{height:100%;width:100%;background:var(--accent);transform-origin:left}
.cd-status{font-size:10px;letter-spacing:.22em;color:var(--ink-dim)}
.cd-status.is-go{color:var(--go)}

.hero-lede{max-width:54ch;color:var(--ink-dim);font-size:clamp(15px,1.25vw,18px)}
.hero-lede em{color:var(--ink);font-style:normal;border-bottom:1px solid var(--accent)}
.hero-cta{display:flex;align-items:center;gap:20px;margin-top:36px}
.btn{
  font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-decoration:none;
  color:var(--ink);border:1px solid var(--line-strong);padding:14px 22px;
  transition:.25s;position:relative;
}
.btn:hover{background:var(--accent);border-color:var(--accent);color:#05070a}
.hero-cta-note{font-size:9px;letter-spacing:.3em;color:var(--ink-faint)}
.hero-foot{
  position:absolute;left:6vw;right:6vw;bottom:26px;z-index:3;
  display:flex;justify-content:space-between;gap:16px;
  font-size:9px;letter-spacing:.22em;color:var(--ink-faint);
  border-top:1px solid var(--line);padding-top:12px;
}

/* ============ PANELS ============ */
.panel{
  position:relative;padding:14vh 6vw 10vh;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%);
}
.panel-head{position:relative;margin-bottom:8vh}
.panel-id{font-size:10px;letter-spacing:.3em;color:var(--accent);margin-bottom:18px}
.panel-title{
  font-size:clamp(52px,9vw,140px);font-weight:600;letter-spacing:-.015em;line-height:.95;
  text-transform:uppercase;
  clip-path:inset(0 100% 0 0);
  transition:clip-path 1s cubic-bezier(.7,0,.2,1);
}
.panel-title.is-in{clip-path:inset(0 0 0 0)}
.panel-tag{
  font-family:var(--mono);font-size:10px;letter-spacing:.34em;color:var(--ink-dim);
  margin-top:18px;
}
.patch{position:absolute;right:0;top:0;width:clamp(72px,8vw,120px);color:var(--ink-dim)}
.patch svg{width:100%;height:auto}
.patch-ring{fill:none;stroke:currentColor;stroke-width:2;stroke-dasharray:4 4}

.two-col{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:6vw;align-items:start;margin-bottom:8vh;
}
.two-col--rev{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
.two-col--rev .col-text{order:2}
.lede{font-size:clamp(17px,1.6vw,24px);line-height:1.5;color:var(--ink);max-width:34ch;font-weight:340}
.lede--center{margin:0 auto 7vh;text-align:center;max-width:46ch}
.spec{margin-top:5vh;border-top:1px solid var(--line)}
.spec>div{
  display:flex;justify-content:space-between;gap:20px;
  padding:12px 0;border-bottom:1px solid var(--line);
  font-size:12px;
}
.spec dt{color:var(--ink-faint);letter-spacing:.22em}
.spec dd{color:var(--ink);letter-spacing:.1em;font-variant-numeric:tabular-nums}
.note{margin-top:4vh;font-size:10px;letter-spacing:.16em;color:var(--ink-faint);line-height:1.9}
.note--center{text-align:center}

.col-viz{display:flex;justify-content:center}
.transfer{width:min(100%,560px);height:auto}
.orbit-ring{fill:none;stroke:var(--line);stroke-dasharray:2 6}
.sun{fill:var(--amber);opacity:.35}
.sun-core{fill:var(--amber);opacity:.9}
.planet-labels text{fill:var(--ink-faint);font-size:11px;letter-spacing:.2em}
.planet.earth{fill:#4d9dff}
.planet.mars{fill:var(--accent)}
.arc{stroke:var(--accent);stroke-width:2;fill:none}
.arc--ghost{stroke:var(--line-strong);stroke-dasharray:3 6;stroke-width:1.5}
.ship{fill:#fff;filter:drop-shadow(0 0 6px #fff)}
.viz-frame text{fill:var(--ink-faint);font-size:10px;letter-spacing:.18em}

figure{margin:0;position:relative}
.bleed img{width:100%;height:52vh;object-fit:cover;opacity:.9}
.bleed--half img{height:44vh}
.bleed figcaption,.col-photo figcaption{
  font-size:9px;letter-spacing:.24em;color:var(--ink-faint);
  border:1px solid var(--line);border-top:none;padding:10px 14px;
}
.col-photo img{width:100%;height:100%;max-height:64vh;object-fit:cover;opacity:.92}
.col-photo--tall img{max-height:78vh;object-position:50% 30%}
[data-parallax]{overflow:hidden}
[data-parallax] img{transform:scale(1.12);will-change:transform}

/* dragon reticle */
.reticle{position:absolute;top:calc(50% - 19px);left:50%;transform:translate(-50%,-50%);width:70%;max-width:340px;pointer-events:none}
.ret-ring{fill:none;stroke:var(--go);stroke-width:1;opacity:.55}
.ret-ring--inner{stroke-dasharray:4 6}
.ret-line{stroke:var(--go);stroke-width:1;opacity:.55}
.ret-text{fill:var(--go);font-size:10px;letter-spacing:.14em;opacity:.8}

/* ============ FALCON booster scene ============ */
.boosterscene{height:260vh;position:relative;margin:6vh -6vw -10vh}
.boosterscene-sticky{
  position:sticky;top:0;height:100vh;display:flex;flex-direction:column;
  justify-content:center;align-items:center;overflow:hidden;
}
.booster-viz{width:min(92vw,900px);height:auto}
.sea{stroke:var(--line-strong);stroke-width:2}
.droneship rect{fill:#1a2027;stroke:var(--line-strong)}
.droneship text{fill:var(--ink-faint);font-size:12px;letter-spacing:.2em}
.target-ring{fill:none;stroke:var(--accent);stroke-width:1.5;opacity:.8}
.target-dot{fill:var(--accent)}
#booster .booster-body rect{fill:#d5dce6}
#booster .booster-ic{fill:#9aa5b1}
#booster .legs line{stroke:#d5dce6;stroke-width:3;opacity:0;transition:opacity .3s}
#booster .legs.is-out line{opacity:1}
#burn{fill:var(--amber);opacity:0;filter:drop-shadow(0 0 12px var(--amber))}
.touchdown{
  font-size:12px;letter-spacing:.26em;color:var(--go);
  border:2px solid var(--go);padding:10px 22px;margin-top:3vh;
  opacity:0;transform:rotate(-4deg) scale(1.15);
  transition:opacity .4s,transform .4s cubic-bezier(.2,2,.4,1);
}
.touchdown.is-stamped{opacity:1;transform:rotate(-4deg) scale(1)}
.scene-caption{font-size:9px;letter-spacing:.3em;color:var(--ink-faint);margin-top:14px}

/* ============ RIDESHARE board ============ */
.board{
  max-width:1020px;margin:0 auto;border:1px solid var(--line-strong);
  background:rgba(10,13,18,.72);
}
.board-row{
  display:grid;grid-template-columns:.7fr 1.6fr 1fr 1fr 1.1fr 1fr;
  gap:14px;padding:13px 20px;border-bottom:1px solid var(--line);
  font-size:11px;letter-spacing:.12em;align-items:center;
  opacity:0;transform:perspective(600px) rotateX(-40deg);
  transition:opacity .5s,transform .5s,background .2s;
}
.board-row.is-in{opacity:1;transform:none}
.board-row:not(.board-row--head):hover{background:var(--accent-dim)}
.board-row:last-child{border-bottom:none}
.board-row--head{color:var(--ink-faint);font-size:9px;letter-spacing:.3em;opacity:1;transform:none}
.board-row .st{color:var(--go)}
.board-row .st--next{color:var(--amber)}

/* ============ MANIFESTO ============ */
.manifesto{
  min-height:130vh;display:flex;align-items:center;
  padding:16vh 6vw;border-bottom:1px solid var(--line);
  background:
    radial-gradient(90% 60% at 50% 110%,rgba(255,77,28,.14),transparent 60%),
    var(--bg);
}
.manifesto-inner{max-width:1020px;margin:0 auto;width:100%}
.transcript{margin:6vh 0;font-size:clamp(12px,1.35vw,16px);line-height:2.2}
.transcript p{opacity:0;transform:translateY(10px);transition:opacity .5s,transform .5s;color:var(--ink-dim)}
.transcript p.is-in{opacity:1;transform:none}
.transcript .ts{color:var(--ink-faint);display:inline-block;width:9em}
.transcript b{color:var(--accent);font-weight:600;display:inline-block;width:4.5em;letter-spacing:.2em}
.transcript-punch b{width:auto}
.manifesto-line{
  display:flex;flex-direction:column;line-height:.92;text-transform:uppercase;
  font-size:clamp(33px,9.2vw,150px);font-weight:600;letter-spacing:-.02em;
}
.manifesto-line span{opacity:0;transform:translateY(30px);transition:opacity .8s,transform .8s cubic-bezier(.2,1,.3,1)}
.manifesto-line.is-in span{opacity:1;transform:none}
.manifesto-line-2{
  color:transparent;-webkit-text-stroke:2px var(--ink);
}
.manifesto-line.is-in .manifesto-line-2{
  color:var(--accent);-webkit-text-stroke:0;transition-delay:.35s;
}
.manifesto-foot{margin-top:6vh;font-size:10px;letter-spacing:.3em;color:var(--ink-faint)}
.manifesto-foot::after{content:'▮';color:var(--accent);animation:blink 1.1s steps(2) infinite}

/* ============ FOOTER ============ */
.footer{padding:10vh 6vw 18vh;text-align:center}
.wordmark--foot{height:14px;margin:0 auto 4vh;opacity:.85}
.footer-note{font-size:9px;letter-spacing:.18em;color:var(--ink-faint);max-width:70ch;margin:0 auto 2vh;line-height:2}
.footer-coords{font-size:9px;letter-spacing:.22em;color:var(--ink-faint)}

/* ============ TELEMETRY RIBBON ============ */
.ribbon{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  border-top:1px solid var(--line-strong);
  background:rgba(5,7,10,.94);backdrop-filter:blur(6px);
  overflow:hidden;height:44px;display:flex;align-items:center;
}
.ribbon-track{
  display:flex;gap:0;white-space:nowrap;will-change:transform;
  animation:marquee 42s linear infinite;
}
.ribbon:hover .ribbon-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.ri{
  display:inline-flex;align-items:baseline;gap:12px;
  padding:0 34px;border-right:1px solid var(--line);height:44px;align-items:center;
}
.ri i{font-style:normal;font-family:var(--mono);font-size:9px;letter-spacing:.26em;color:var(--ink-faint)}
.ri b{font-size:14px;color:var(--ink);font-variant-numeric:tabular-nums;font-weight:600}
.ri--live b{color:var(--go)}
.blink{animation:blink 1.1s steps(2) infinite}

/* reveals */
[data-section] .col-text,[data-section] .col-photo,[data-section] .col-viz,[data-section] .bleed{
  opacity:0;transform:translateY(34px);
  transition:opacity .9s ease,transform .9s cubic-bezier(.2,1,.3,1);
}
[data-section].is-in .col-text,[data-section].is-in .col-photo,
[data-section].is-in .col-viz,[data-section].is-in .bleed{opacity:1;transform:none}
[data-section].is-in .col-viz{transition-delay:.12s}
[data-section].is-in .bleed{transition-delay:.15s}

/* ============ RESPONSIVE ============ */
@media (max-width:1020px){
  .hero-stage{width:44vw;opacity:.85}
  .hero-copy{max-width:56vw}
}
@media (max-width:820px){
  .hud{padding:12px 16px;gap:14px}
  .hud-lamps{display:none}
  .rail{display:none}
  .hero{padding:100px 6vw 130px;align-items:flex-end}
  .hero-stage{right:0;left:0;width:100%;opacity:.35}
  .vehicle{height:56vh}
  #steam{height:30vh}
  .hero-copy{max-width:100%}
  .hero-foot{flex-wrap:wrap;gap:8px 20px}
  .two-col,.two-col--rev{grid-template-columns:1fr;gap:7vh}
  .two-col--rev .col-text{order:0}
  .patch{position:relative;margin-top:24px}
  .board-row{grid-template-columns:1fr 1.4fr 1fr;row-gap:4px;font-size:10px}
  .board-row span:nth-child(4),.board-row span:nth-child(5){display:none}
  .boosterscene{height:220vh}
  .ribbon{height:38px}
  .ri{height:38px;padding:0 22px}
  .transcript .ts{width:7.5em}
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion:reduce){
  .grain,.ribbon-track,.kicker .tick,.manifesto-foot::after,.blink{animation:none}
  .panel-title{clip-path:none;transition:none}
  [data-section] .col-text,[data-section] .col-photo,[data-section] .col-viz,[data-section] .bleed,
  .transcript p,.manifesto-line span,.board-row{opacity:1;transform:none;transition:none}
  [data-parallax] img{transform:none}
}