/* ============================================================
   PROJECT MARS - interactive scroll mission timeline
   ============================================================ */

:root{
  --bg: #050608;
  --ink: #f4f5f7;
  --ink-dim: #9aa0ac;
  --ink-faint: #5a5f6a;
  --accent: #ff5a36;
  --accent-dim: #a8391f;
  --line: rgba(244,245,247,0.14);
  --font-display: 'Orbitron', sans-serif;
  --font-mono: 'Space Mono', monospace;
  --ease: cubic-bezier(.16,.84,.44,1);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ background:var(--bg); scroll-behavior:auto; }
html.loading-lock, html.loading-lock body{ overflow:hidden; height:100%; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-mono);
  overflow-x:hidden;
  cursor:default;
  -webkit-font-smoothing:antialiased;
}
::selection{ background:var(--accent); color:#0a0a0a; }

a{ color:inherit; text-decoration:none; }

/* ---------------------------------------------------------- */
/* LOADER                                                      */
/* ---------------------------------------------------------- */
#loader{
  position:fixed; inset:0; z-index:9999;
  background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .4s var(--ease), visibility .4s var(--ease);
}
#loader.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }

.loader-inner{ display:flex; flex-direction:column; align-items:center; gap:22px; }

.loader-mark{ position:relative; width:64px; height:64px; }
.loader-ring{
  position:absolute; inset:0; border-radius:50%;
  border:1px solid var(--line);
  border-top-color:var(--accent);
  animation:spin 1.6s linear infinite;
}
.loader-ring--2{
  inset:12px; border-top-color:transparent; border-right-color:var(--ink-dim);
  animation-duration:2.4s; animation-direction:reverse;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.loader-word{
  font-family:var(--font-display); font-weight:700;
  font-size:15px; letter-spacing:.45em; text-indent:.45em;
  color:var(--ink);
}
.loader-word span{ color:var(--accent); }

.loader-bar{
  width:220px; height:2px; background:var(--line); position:relative; overflow:hidden;
}
.loader-bar-fill{
  position:absolute; inset:0; width:100%; background:var(--accent);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .25s linear;
}
.loader-pct{
  font-size:11px; letter-spacing:.2em; color:var(--ink-dim);
}
.loader-status{
  font-size:10px; letter-spacing:.25em; color:var(--ink-faint);
}

/* ---------------------------------------------------------- */
/* NAV                                                         */
/* ---------------------------------------------------------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:500;
  display:flex; align-items:center; justify-content:space-between;
  padding:26px 34px;
  font-family:var(--font-display);
  pointer-events:none;
  mix-blend-mode:difference;
}
.nav-brand{
  font-size:13px; font-weight:600; letter-spacing:.35em;
}
.nav-brand span{ color:var(--accent); mix-blend-mode:normal; }

/* ---------------------------------------------------------- */
/* SCENE / PIN                                                 */
/* ---------------------------------------------------------- */
#scene{ position:relative; height:650vh; }
#pin{
  position:sticky; top:0; left:0;
  height:100vh; width:100%;
  overflow:hidden;
  background:#000;
  opacity:0; transform:scale(1.03);
  transition:opacity 1.1s var(--ease), transform 1.3s var(--ease);
}
body.is-ready #pin{ opacity:1; transform:none; }

.nav{ opacity:0; transition:opacity .7s var(--ease) .2s; }
body.is-ready .nav{ opacity:1; }

#stars-canvas{
  position:absolute; inset:0; width:100%; height:100%; display:block; z-index:1;
}
#frame-canvas{
  position:absolute; display:block; z-index:2; will-change:transform;
}

.vignette{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 100%, rgba(0,0,0,.65), transparent 55%),
    radial-gradient(120% 90% at 50% 0%, rgba(0,0,0,.55), transparent 55%),
    linear-gradient(90deg, rgba(0,0,0,.55), transparent 22%, transparent 78%, rgba(0,0,0,.55));
}
.grain{
  position:absolute; inset:-50%; z-index:4; pointer-events:none;
  opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation:grain 1s steps(4) infinite;
}
@keyframes grain{
  0%{ transform:translate(0,0); } 25%{ transform:translate(-2%,1%); }
  50%{ transform:translate(1%,-2%); } 75%{ transform:translate(-1%,-1%); }
  100%{ transform:translate(0,0); }
}

/* ---------------------------------------------------------- */
/* SCROLL HINT                                                 */
/* ---------------------------------------------------------- */
.scroll-hint{
  position:absolute; left:50%; bottom:38px; transform:translateX(-50%);
  z-index:20; display:flex; flex-direction:column; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.3em; color:var(--ink-dim);
  transition:opacity .5s var(--ease);
}
.scroll-hint-line{
  width:1px; height:34px; background:var(--line); position:relative; overflow:hidden;
}
.scroll-hint-dot{
  position:absolute; left:-1.5px; top:-6px; width:4px; height:4px; border-radius:50%;
  background:var(--accent);
  animation:hint-drop 1.8s ease-in-out infinite;
}
@keyframes hint-drop{
  0%{ top:-6px; opacity:0; } 20%{ opacity:1; } 100%{ top:36px; opacity:0; }
}

/* ---------------------------------------------------------- */
/* STAGE TEXT BLOCKS                                            */
/* ---------------------------------------------------------- */
.stage{
  position:absolute; top:0; height:100%;
  z-index:10;
  display:flex; flex-direction:column;
  padding:clamp(40px, 10vh, 88px) clamp(24px, 5vw, 64px);
  opacity:0; pointer-events:none;
  will-change:opacity, transform;
}

/* position variants - pinned to a true corner, kept narrow so the copy
   never drifts into the centre of frame where the spacecraft sits */
.pos-top-left{ left:0; justify-content:flex-start; align-items:flex-start; text-align:left; }
.pos-top-right{ right:0; justify-content:flex-start; align-items:flex-end; text-align:right; }
.pos-bottom-left{ left:0; justify-content:flex-end; align-items:flex-start; text-align:left; }
.pos-bottom-right{ right:0; justify-content:flex-end; align-items:flex-end; text-align:right; }

.pos-top-left, .pos-top-right, .pos-bottom-left, .pos-bottom-right{
  width:min(60vw, 640px);
}
.pos-top-left .stage-title, .pos-top-right .stage-title,
.pos-bottom-left .stage-title, .pos-bottom-right .stage-title{
  font-size:clamp(26px, 3.4vw, 56px);
  max-width:100%;
}
.pos-top-left .stage-body, .pos-top-right .stage-body,
.pos-bottom-left .stage-body, .pos-bottom-right .stage-body{
  max-width:32ch;
}

.pos-top-right .stage-stats, .pos-bottom-right .stage-stats{ justify-content:flex-end; }
.pos-top-right .stat, .pos-bottom-right .stat{
  border-left:none; border-right:1px solid var(--line);
  padding-left:0; padding-right:14px; align-items:flex-end;
}

.pos-top-right .stage-title::before, .pos-bottom-right .stage-title::before{
  left:auto; right:-4px; border-left:none; border-right:1px solid var(--ink-dim);
}
.pos-top-right .stage-title::after, .pos-bottom-right .stage-title::after{
  right:auto; left:0; border-right:none; border-left:1px solid var(--ink-dim);
}

/* ---------------------------------------------------------- */
/* HUD BAND - alternate layout: metrics + icon on one side,     */
/* phase/title/description on the other, pinned along the      */
/* bottom edge. Used for a couple of stages to break up the     */
/* rhythm instead of every stage reading title+paragraph.       */
/* ---------------------------------------------------------- */
.layout-hud{
  left:0; width:100%;
  justify-content:flex-end; align-items:stretch;
  padding-bottom:clamp(56px, 9vh, 96px);
}
.hud-row{
  display:flex; flex-direction:row; flex-wrap:wrap;
  justify-content:space-between; align-items:flex-end;
  gap:32px 48px;
}

.hud-left{ display:flex; align-items:center; gap:22px; }
.hud-icon{
  width:56px; height:56px; flex-shrink:0; border-radius:50%; opacity:.85;
  background:repeating-conic-gradient(var(--ink-dim) 0deg 7deg, transparent 7deg 18deg);
  -webkit-mask:radial-gradient(circle, transparent 56%, #000 60%, #000 76%, transparent 80%);
          mask:radial-gradient(circle, transparent 56%, #000 60%, #000 76%, transparent 80%);
}
.hud-metrics{ display:flex; flex-direction:column; gap:10px; }
.hud-metric{ display:flex; align-items:baseline; gap:16px; }
.hud-metric-label{
  font-family:var(--font-display); font-weight:700;
  font-size:11px; letter-spacing:.15em; color:var(--ink-dim);
  width:82px; flex-shrink:0;
}
.hud-metric-value{
  font-family:var(--font-display); font-weight:600;
  font-size:13.5px; letter-spacing:.02em; color:var(--ink);
}

.hud-right{ position:relative; max-width:540px; text-align:right; padding-top:16px; }
.hud-kicker{
  position:relative; display:inline-block;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.35em;
  color:var(--accent); margin-bottom:12px;
}
.hud-kicker::before{
  content:''; position:absolute; top:-14px; right:0; width:18px; height:8px; opacity:.6;
  border-top:1px solid var(--ink-dim); border-right:1px solid var(--ink-dim);
}
.hud-title{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(30px, 4.4vw, 66px);
  line-height:.95; letter-spacing:-.01em; text-transform:uppercase;
}
.hud-desc{
  margin-top:14px;
  font-family:var(--font-display); font-weight:500;
  text-transform:uppercase; letter-spacing:.03em;
  font-size:11.5px; line-height:1.6; color:var(--ink-dim);
}

@media (max-width:860px){
  .hud-row{ flex-direction:column; align-items:flex-start; gap:28px; }
  .hud-right{ text-align:left; max-width:none; }
  .hud-kicker::before{ right:auto; left:0; border-right:none; border-left:1px solid var(--ink-dim); }
}

.stage-kicker{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.3em;
  color:var(--accent); margin-bottom:18px;
}

.stage-title{
  position:relative;
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(42px, 8vw, 128px);
  line-height:.92; letter-spacing:-.01em;
  text-transform:uppercase;
  max-width:14ch;
  margin:18px 0;
  overflow-wrap:break-word; word-break:break-word;
}
/* corner ticks float fully outside the text box so they never shift its
   horizontal position - title stays flush with the kicker and body above/below it */
.stage-title::before, .stage-title::after{
  content:''; position:absolute; width:20px; height:10px; opacity:.6;
}
.stage-title::before{ top:-16px; left:0; border-top:1px solid var(--ink-dim); border-left:1px solid var(--ink-dim); }
.stage-title::after{ bottom:-16px; right:0; border-bottom:1px solid var(--ink-dim); border-right:1px solid var(--ink-dim); }

.stage-body{
  margin-top:26px; max-width:46ch;
  font-family:var(--font-display); font-weight:500;
  text-transform:uppercase; letter-spacing:.03em;
  font-size:12.5px; line-height:1.8; color:var(--ink);
}

.stage-stats{
  display:flex; gap:36px; margin-top:44px; flex-wrap:wrap;
}
.stat{ display:flex; flex-direction:column; gap:6px; padding-left:14px; border-left:1px solid var(--line); }
.stat-label{ font-family:var(--font-display); font-size:10px; letter-spacing:.15em; color:var(--ink-dim); font-weight:600; }
.stat-value{ font-family:var(--font-display); font-size:13px; letter-spacing:.02em; color:var(--ink); font-weight:700; }

@media (max-width:640px){
  .stage{
    padding:9vh 7vw; left:0 !important; right:auto !important;
    width:100% !important; align-items:flex-start !important; text-align:left !important;
  }
  .stage-title{ font-size:clamp(34px, 12vw, 64px) !important; max-width:10ch !important; }
  .stage-body{ max-width:none !important; font-size:13.5px; }
  .stage-stats{ gap:22px; justify-content:flex-start !important; }
  .stat{ border-left:1px solid var(--line) !important; border-top:none !important; border-right:none !important; padding-left:14px !important; padding-top:0 !important; padding-right:0 !important; align-items:flex-start !important; }
}

@media (prefers-reduced-motion: reduce){
  .loader-ring, .scroll-hint-dot, .grain{ animation:none !important; }
  * { transition-duration:.01ms !important; }
}