/*
  Cosmos Diamonds × SKYROOT — Lotus Payload
  ──────────────────────────────────────────
  Scroll-driven rocket separation reveal.
  --fairing  0→1  upper separation / fairing release
  --rise     0→1  lotus floats after payload release
  --stage-1  0→1  first stage separation
  --stage-2  0→1  second stage separation
  --stage-3  0→1  third stage + payload release
  --progress 0→1  global scroll (parallax, copy)
*/

:root {
  --progress: 0;
  --fairing:  0;
  --rise:     0;
  --stage-1:  0;
  --stage-2:  0;
  --stage-3:  0;

  --ink:         #ede8df;
  --muted:       #78889a;
  --space:       #02030a;
  --blue:        #0f3ea0;
  --gold:        #c4912a;
  --gold-light:  #e8ca7c;
  --saffron:     #e87820;
  --green:       #148048;
  --cream:       #f7f3ec;
  --cream-ink:   #18140e;
  --cream-muted: #5e5750;
  --cream-gold:  #9a6410;

  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:    'DM Sans', system-ui, -apple-system, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--space);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Film-grain overlay */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 300px 300px;
}

img  { display: block; max-width: 100%; }
a    { color: inherit; text-decoration: none; }

/* ── Header ─────────────────────────────────────── */

.site-header {
  position: fixed;
  z-index: 20;
  top: 0; left: 0;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 20px clamp(18px, 4vw, 56px);
  background: linear-gradient(180deg, rgba(2,3,10,.9), rgba(2,3,10,0));
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-body);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
}

.brand-mark {
  width: 36px; height: 36px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(196,145,42,.32);
}

nav {
  display: flex;
  gap: clamp(14px, 3vw, 34px);
  color: rgba(237,232,223,.56);
  font-family: var(--font-body);
  font-size: .7rem;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
}

nav a { transition: color .22s ease; }
nav a:hover { color: var(--ink); }

.music-toggle {
  min-height: 36px;
  padding: 0 15px;
  border: 1px solid rgba(196,145,42,.3);
  border-radius: 999px;
  background: rgba(196,145,42,.06);
  color: rgba(237,232,223,.68);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: .64rem; font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  transition: border-color .22s, background .22s, color .22s;
}

.music-toggle:hover { border-color: rgba(196,145,42,.52); color: var(--gold-light); }
.music-toggle[aria-pressed="true"] {
  border-color: rgba(232,202,124,.7);
  background: rgba(196,145,42,.14);
  color: var(--gold-light);
}

/* ── Hero — two-column grid ─────────────────────── */

.hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr min(24vw, 210px);
  align-items: center;
  min-height: 100svh;
  padding: 120px clamp(22px, 6vw, 86px) 14vh;
  gap: clamp(24px, 4vw, 60px);
  isolation: isolate;
  overflow: hidden;
}

/* Sky */
.sky {
  position: absolute;
  inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse at 70% 26%, rgba(22,68,164,.3), transparent 34%),
    radial-gradient(ellipse at 26% 74%, rgba(196,145,42,.1), transparent 28%),
    radial-gradient(ellipse at 84% 80%, rgba(20,128,72,.07), transparent 20%),
    linear-gradient(180deg, #02030a 0%, #050810 56%, #08101a 100%);
}

.stars {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.84) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(255,255,255,.44) 0 1px, transparent 1.5px);
  background-size: 176px 176px, 284px 284px;
  transform: translateY(calc(var(--progress) * -60px));
  opacity: .5;
}

.stars-b {
  background-position: 74px 112px, 16px 34px;
  transform: translateY(calc(var(--progress) * -130px));
  opacity: .22;
}

.stars-c {
  background-image:
    radial-gradient(circle, rgba(232,202,124,.65) 0 0.8px, transparent 1.2px),
    radial-gradient(circle, rgba(255,255,255,.28) 0 1px, transparent 1.5px);
  background-size: 440px 440px, 700px 700px;
  background-position: 220px 78px, 350px 154px;
  transform: translateY(calc(var(--progress) * -38px));
  opacity: .28;
  animation: star-shimmer 9s ease-in-out infinite alternate;
}

@keyframes star-shimmer {
  0%   { opacity: .18; }
  100% { opacity: .42; }
}

/* ── Shooting stars ──────────────────────────────────
   Each .shoot is a thin gradient line rotated -45°.
   translateY drives it across the sky along that axis.
   Eight stars staggered so 1–2 are always in flight.
*/

.shoot {
  position: absolute;
  width: 1px;
  border-radius: 999px;
  /* Bright head fading to a long tail */
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(255, 255, 255, 0) 10%,
    rgba(255, 255, 255, .9) 48%,
    rgba(232, 202, 124, .6) 58%,
    transparent 100%
  );
  transform: rotate(-45deg);
  opacity: 0;
  animation: shoot linear infinite;
}

@keyframes shoot {
  0%   { opacity: 0; transform: rotate(-45deg) translateY(-120px); }
  6%   { opacity: 0; }
  10%  { opacity: 1; }
  88%  { opacity: .7; }
  96%  { opacity: 0; }
  100% { opacity: 0; transform: rotate(-45deg) translateY(800px); }
}

/* Each star: unique position, duration, delay, and length */
.s1 { height: 90px;  top:  8%; left: 74%; animation-duration: 3.1s; animation-delay: 0s;    }
.s2 { height: 64px;  top:  3%; left: 42%; animation-duration: 2.6s; animation-delay: 1.5s;  }
.s3 { height: 110px; top: 14%; left: 85%; animation-duration: 3.8s; animation-delay: 0.8s;  }
.s4 { height: 72px;  top:  2%; left: 58%; animation-duration: 2.3s; animation-delay: 2.4s;  }
.s5 { height: 95px;  top: 20%; left: 25%; animation-duration: 4.1s; animation-delay: 3.6s;  }
.s6 { height: 58px;  top:  6%; left: 91%; animation-duration: 2.9s; animation-delay: 1.1s;  }
.s7 { height: 80px;  top: 11%; left: 62%; animation-duration: 3.4s; animation-delay: 4.8s;  }
.s8 { height: 68px;  top:  1%; left: 34%; animation-duration: 2.7s; animation-delay: 2.9s;  }

.horizon {
  position: absolute;
  right: -10vw; bottom: -22vh;
  width: 66vw; height: 38vh;
  border-radius: 50% 50% 0 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), transparent 14%),
    linear-gradient(90deg, rgba(232,120,32,.2), rgba(15,62,160,.36), rgba(20,128,72,.16));
  filter: blur(.3px);
  opacity: .5;
}

/* Hero copy — column 1 */
.hero-copy {
  position: relative;
  z-index: 2;
  grid-column: 1;
}

/* Hero rocket — column 2 (fills its column, bleeds below fold) */
.hero-rocket-col {
  grid-column: 2;
  position: relative;
  align-self: end;
  height: min(92vh, 880px);
  margin-bottom: -16vh;
  z-index: 1;
  isolation: isolate;
}

.hero-vikram-rocket,
.reveal-vikram-rocket {
  display: block;
  object-fit: contain;
}

.hero-vikram-rocket {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: unset;
  transform: translateY(calc(var(--progress) * -70px)) scale(1.21);
  transform-origin: 50% 45%;
  filter: drop-shadow(0 28px 52px rgba(0,0,0,.58));
  animation: enter-fade 1.4s ease both .7s;
  z-index: 1;
}

.reveal-vikram-rocket {
  position: relative;
  z-index: 1;
  width: min(34vw, 360px);
  height: auto;
  max-width: 100%;
  transform: translateY(calc(var(--progress) * -40px));
  filter: drop-shadow(0 24px 44px rgba(0,0,0,.5));
}

.hero-thrusters {
  position: absolute;
  left: 50%;
  bottom: -2%;
  z-index: 0;
  width: min(26vw, 280px);
  height: min(26vh, 260px);
  transform: translateX(-50%);
  pointer-events: none;
  filter: drop-shadow(0 18px 34px rgba(255,145,40,.16));
}

.hero-thrusters::before,
.hero-thrusters::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  pointer-events: none;
}

.hero-thrusters::before {
  bottom: 0;
  width: 56%;
  height: 78%;
  background:
    radial-gradient(circle at 50% 10%,
      rgba(255,255,255,.98) 0 10%,
      rgba(255,244,192,.96) 12%,
      rgba(255,194,90,.96) 26%,
      rgba(255,126,24,.88) 48%,
      rgba(214,61,0,.65) 68%,
      transparent 76%),
    radial-gradient(ellipse at center,
      rgba(255,170,50,.42) 0%,
      rgba(255,110,18,.24) 46%,
      transparent 72%);
  clip-path: polygon(50% 0%, 61% 9%, 73% 24%, 86% 44%, 95% 69%, 100% 100%, 82% 96%, 65% 92%, 50% 84%, 35% 92%, 18% 96%, 0 100%, 5% 69%, 14% 44%, 27% 24%, 39% 9%);
  filter: blur(4px);
  opacity: .96;
  animation:
    thruster-flicker 1.1s ease-in-out infinite alternate,
    thruster-rise 1.9s ease-in-out infinite alternate;
}

.hero-thrusters::after {
  bottom: -10%;
  width: 72%;
  height: 76%;
  background:
    radial-gradient(ellipse at center,
      rgba(58,48,44,.38) 0%,
      rgba(30,22,20,.24) 30%,
      rgba(0,0,0,0) 70%),
    radial-gradient(ellipse at center,
      rgba(255,164,52,.18) 0%,
      rgba(255,110,24,.1) 35%,
      transparent 72%);
  filter: blur(16px);
  opacity: .82;
  animation: thruster-smoke 2.7s ease-in-out infinite alternate;
}

.thruster {
  position: absolute;
  bottom: 0;
  width: 11%;
  height: 18%;
  border-radius: 45% 45% 24% 24%;
  background:
    linear-gradient(180deg,
      rgba(111,118,127,.92) 0%,
      rgba(37,41,48,.96) 36%,
      rgba(11,13,16,.98) 100%);
  box-shadow:
    inset 0 4px 10px rgba(255,255,255,.16),
    inset 0 -6px 10px rgba(0,0,0,.42),
    0 0 0 1px rgba(255,255,255,.08);
  transform-origin: 50% 100%;
  filter: blur(.15px);
}

.thruster::before {
  content: "";
  position: absolute;
  inset: 18% 18% 26%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 44%,
    rgba(5,6,9,.98) 0 34%,
    rgba(43,47,54,.92) 35% 52%,
    rgba(255,180,55,.62) 54%,
    rgba(255,180,55,0) 74%);
  filter: blur(.2px);
  animation: thruster-core 1.05s ease-in-out infinite alternate;
}

.thruster-left {
  left: 31%;
  transform: translateX(-50%);
}

.thruster-center {
  left: 50%;
  transform: translateX(-50%);
}

.thruster-right {
  left: 69%;
  transform: translateX(-50%);
}

.thruster-left::before {
  animation-delay: -.12s;
}

.thruster-center::before {
  animation-delay: -.34s;
}

.thruster-right::before {
  animation-delay: -.2s;
}

@keyframes thruster-flicker {
  0%   { transform: translateX(-50%) scale(.94, .88) translateY(0); opacity: .84; }
  100% { transform: translateX(-50%) scale(1.04, 1.08) translateY(2px); opacity: 1; }
}

@keyframes thruster-glow {
  0%   { transform: translateX(-50%) scale(.92); opacity: .72; }
  100% { transform: translateX(-50%) scale(1.06); opacity: 1; }
}

@keyframes thruster-trail {
  0%   { transform: translateX(-50%) scale(.88); opacity: .45; }
  100% { transform: translateX(-50%) scale(1.08); opacity: .8; }
}

@keyframes thruster-core {
  0%   { transform: scale(.92); opacity: .65; }
  100% { transform: scale(1.06); opacity: 1; }
}

@keyframes thruster-rise {
  0%   { transform: translateX(-50%) scale(.98); }
  100% { transform: translateX(-50%) scale(1.02, 1.06); }
}

@keyframes thruster-smoke {
  0%   { transform: translateX(-50%) scale(.96); opacity: .6; }
  100% { transform: translateX(-50%) scale(1.05); opacity: .92; }
}

/* ── Entrance animations ─────────────────────────── */

@keyframes enter-up {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes enter-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.hero-enter-1      { animation: enter-up  .9s cubic-bezier(.16,1,.3,1) both .26s; }
.hero-enter-2      { animation: enter-up 1.1s cubic-bezier(.16,1,.3,1) both .46s; }
.hero-enter-3      { animation: enter-up  1s  cubic-bezier(.16,1,.3,1) both .7s;  }
.hero-enter-4      { animation: enter-up  .9s cubic-bezier(.16,1,.3,1) both .9s;  }
.hero-enter-5      { animation: enter-fade 1.2s ease both 1.4s; }
.hero-enter-rocket { animation: enter-fade 1.4s ease both .6s; }

/* ── Typography ─────────────────────────────────── */

.eyebrow,
.stage-label {
  margin: 0 0 18px;
  color: var(--gold);
  font-family: var(--font-body);
  font-size: .67rem; font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  opacity: .88;
}

h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 7vw, 9rem);
  font-weight: 300;
  line-height: .87;
  letter-spacing: -.015em;
}

h1 em {
  font-style: italic;
  color: var(--gold-light);
}

h2 {
  margin: 0;
  max-width: 10ch;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5.5vw, 6.4rem);
  font-weight: 300;
  line-height: .88;
  letter-spacing: -.015em;
  color: var(--ink);
}

p {
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--muted);
  font-size: clamp(.95rem, 1.25vw, 1.08rem);
  line-height: 1.82;
}

.hero-copy p:not(.eyebrow) { max-width: 520px; margin-top: 22px; }
.section-copy p,
.closing-section p { max-width: 520px; }

.launch-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  margin-top: 30px;
  padding: 0 26px;
  border: 1px solid rgba(196,145,42,.32);
  border-radius: 999px;
  background: rgba(196,145,42,.06);
  color: var(--gold-light);
  font-family: var(--font-body);
  font-size: .7rem; font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  transition: border-color .26s ease, background .26s ease, transform .26s ease;
}

.launch-link:hover {
  transform: translateY(-2px);
  border-color: rgba(232,202,124,.54);
  background: rgba(196,145,42,.13);
}

/* Scroll cue */
.scroll-cue {
  position: absolute;
  bottom: 30px; left: 50%;
  width: 26px; height: 42px;
  border: 1px solid rgba(196,145,42,.36);
  border-radius: 999px;
  transform: translateX(-50%);
  animation: enter-fade 1s ease both 1.7s;
}

.scroll-cue span {
  position: absolute;
  top: 8px; left: 50%;
  width: 3px; height: 8px;
  border-radius: 999px;
  background: var(--gold);
  opacity: .72;
  transform: translateX(-50%);
  animation: cue 1.9s ease-in-out infinite;
}

@keyframes cue {
  50% { top: 22px; opacity: .2; }
}

/* HUD telemetry */
.hero-hud {
  position: absolute;
  bottom: 88px; left: clamp(22px, 6vw, 86px);
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hud-item { display: flex; gap: 12px; align-items: baseline; }

.hud-label {
  font-family: var(--font-body);
  font-size: .57rem; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold); opacity: .58;
  min-width: 52px;
}

.hud-value {
  font-family: var(--font-body);
  font-size: .63rem; font-weight: 300;
  letter-spacing: .06em;
  color: rgba(237,232,223,.4);
}

/* Sequence index */
.hero-index {
  position: absolute;
  bottom: 36px; right: clamp(22px, 6vw, 86px);
  z-index: 3;
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-body);
  font-size: .58rem; font-weight: 400;
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(237,232,223,.28);
}

.hero-index-line { display: block; width: 38px; height: 1px; background: currentColor; }

/* ── Reveal section ──────────────────────────────── */

.reveal-section {
  height: 520vh;
  background: linear-gradient(180deg, #04060d 0%, #080b14 46%, #030509 100%);
}

.sticky-stage {
  position: sticky;
  top: 0;
  min-height: 100svh;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(200px, 25vw) 1fr minmax(150px, 20vw);
  align-items: center;
  padding: 88px clamp(18px, 4vw, 56px) 44px;
  gap: 18px;
}

.mission-copy { z-index: 5; align-self: center; }
.mission-copy h2 { max-width: 9ch; font-size: clamp(1.9rem, 4vw, 4.8rem); }
.mission-copy p:last-child { max-width: 320px; }

/* Stage text fade */
#stageLabel, #stageTitle, #stageText { transition: opacity .2s ease; }
.stage-transitioning { opacity: 0 !important; }

/* Indian flag */
.flag-ribbon {
  position: absolute;
  top: 88px; right: clamp(18px, 4vw, 56px);
  z-index: 6;
  display: grid;
  width: 108px; height: 66px;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 18px 44px rgba(0,0,0,.28);
}

.flag-ribbon span { display: block; }
.saffron { background: var(--saffron); }
.white { position: relative; background: #fff; }
.green  { background: var(--green); }

.white i, .mini-flag i {
  position: absolute;
  top: 50%; left: 50%;
  width: 14px; height: 14px;
  border: 2px solid #1d3485;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.white i::before, .mini-flag i::before {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: #1d3485;
  content: "";
}

/* ── Scene ───────────────────────────────────────── */

.scene {
  position: relative;
  display: grid;
  place-items: center;
  height: 100%;
  min-height: 78vh;
  overflow: visible;
}

/* ── Rocket ──────────────────────────────────────── */

.rocket-stack {
  position: relative;
  width: min(30vw, 300px);
  min-width: 180px;
  height: min(82vh, 760px);
  transform: translateY(5vh);
  overflow: visible;
  filter: drop-shadow(0 24px 44px rgba(0,0,0,.5));
}

.rocket-core {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  transform: translateY(calc(var(--progress) * -18px)) scale(1.01);
  transform-origin: 50% 50%;
  opacity: var(--core-visible, 1);
  z-index: 0;
  filter: drop-shadow(0 18px 34px rgba(0,0,0,.22));
}

.rocket-stage {
  position: absolute;
  left: 50%;
  pointer-events: none;
  will-change: transform;
  transform: translateX(-50%);
  display: block;
  width: min(30vw, 292px);
  max-width: 100%;
  user-select: none;
  -webkit-user-drag: none;
}

.rocket-stage-bottom {
  top: 54%;
  transform:
    translateX(-50%)
    translateY(calc(var(--stage-1) * 156px));
  opacity: var(--stage-1-visible, 0);
  z-index: 1;
}

.rocket-stage-middle {
  top: 28%;
  transform:
    translateX(-50%)
    translateY(calc(var(--stage-2) * 124px));
  opacity: var(--stage-2-visible, 0);
  z-index: 2;
}

.rocket-stage-top {
  position: absolute;
  left: 50%;
  top: -1%;
  width: min(22vw, 226px);
  height: min(34vh, 300px);
  z-index: 4;
  opacity: var(--stage-3-visible, 0);
  transform: translateX(-50%) translateY(calc(var(--stage-3) * -8px));
  pointer-events: none;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.18));
}

.rocket-stage-top .rocket-head-half {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
}

.rocket-stage-top .rocket-head-image {
  position: absolute;
  top: 0;
  width: 200%;
  object-fit: cover;
  object-position: center top;
}

.rocket-stage-top .rocket-head-left {
  left: 0;
  transform-origin: 100% 54%;
  transform: translateX(calc(var(--stage-3) * -78px)) rotate(calc(var(--stage-3) * -20deg));
  clip-path: inset(0 50% 0 0);
}

.rocket-stage-top .rocket-head-left .rocket-head-image {
  left: 0;
}

.rocket-stage-top .rocket-head-right {
  left: 50%;
  transform-origin: 0% 54%;
  transform: translateX(calc(var(--stage-3) * 78px)) rotate(calc(var(--stage-3) * 20deg));
  clip-path: inset(0 0 0 50%);
}

.rocket-stage-top .rocket-head-right .rocket-head-image {
  right: 0;
}

.rocket-stack::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -11%;
  width: 48%;
  height: 26%;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at center,
      rgba(255,255,255,.98) 0%,
      rgba(255,247,216,.95) 10%,
      rgba(255,214,116,.82) 24%,
      rgba(255,144,34,.54) 44%,
      rgba(196,68,0,.18) 62%,
      transparent 74%);
  filter: blur(10px);
  opacity: calc(var(--stage-1-visible, 0) * .95);
  z-index: 0;
}

.rocket-stack::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2%;
  width: 78%;
  height: 30%;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at center,
      rgba(255,255,255,.9) 0%,
      rgba(255,235,168,.8) 18%,
      rgba(255,180,70,.55) 34%,
      rgba(255,118,28,.28) 52%,
      transparent 72%);
  filter: blur(12px);
  opacity: calc(.12 + var(--stage-3-visible, 0) * .28);
  z-index: 0;
}

/* ── FAIRING (payload nosecone — two hinged halves) ──
   Each half is 50% of the fairing width with overflow:hidden.
   A ::before pseudo renders the full nose shape inside each;
   the container clips it to show only its half.
   On scroll, --fairing drives a hinge rotation from the base.
*/

.fairing {
  position: absolute;
  top: 0;
  left: 18%;
  width: 64%;
  height: 27%;
  z-index: 4;
}

.fairing-half {
  position: absolute;
  top: 0;
  height: 100%;
  width: 50%;
  overflow: hidden;
}

/* Left half — hinge at bottom-right corner (base-center of fairing) */
.fairing-l {
  left: 0;
  transform-origin: 100% 100%;
  transform:
    rotate(calc(var(--fairing) * -68deg))
    translateY(calc(var(--fairing) * 6%));
}

/* Right half — hinge at bottom-left corner (base-center of fairing) */
.fairing-r {
  left: 50%;
  transform-origin: 0% 100%;
  transform:
    rotate(calc(var(--fairing) * 68deg))
    translateY(calc(var(--fairing) * 6%));
}

/* Full nose cone shape rendered in each half, clipped by parent overflow */
.fairing-l::before,
.fairing-r::before {
  content: '';
  position: absolute;
  top: 0;
  height: 100%;
  width: 200%;   /* = full fairing width */
  border-radius: 50% 50% 12% 12% / 72% 72% 18% 18%;
  background:
    radial-gradient(circle at 64% 20%, rgba(255,255,255,.92), transparent 10%),
    linear-gradient(90deg, #b7bcc1 0%, #fff 24%, #f7f8f8 55%, #a4a8ad 100%);
}

.fairing-l::before { left: 0; }    /* left half of the nose gradient */
.fairing-r::before { right: 0; }   /* right half of the nose gradient */

/* Specular highlight on left fairing half */
.nose-highlight {
  position: absolute;
  top: 10%; right: 20%;
  width: 18%; height: 46%;
  border-radius: 50%;
  background: rgba(255,255,255,.52);
  filter: blur(6px);
}

/* Mini Indian flag on left fairing half */
.mini-flag {
  position: absolute;
  left: 44%; top: 54%;
  width: 50%; height: 20px;
  background: linear-gradient(180deg, var(--saffron) 0 33%, #fff 33% 66%, var(--green) 66% 100%);
}

.mini-flag i { width: 8px; height: 8px; border-width: 1px; }
.mini-flag i::before { inset: 2px; }

/* ── Rocket body sections ────────────────────────── */

.upper-band {
  position: absolute;
  top: 22.5%; left: 12%;
  width: 76%; height: 8%;
  clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%);
  background: linear-gradient(90deg, #979ca0, #f3f5f4 28%, #d7dadb 68%, #8d9294);
}

.body {
  position: absolute;
  top: 29%; left: 21%;
  width: 58%; height: 44%;
  border-radius: 3% 3% 9% 9%;
  background: linear-gradient(90deg, #9da2a6 0%, #fafafa 22%, #f4f4f1 61%, #9fa3a7 100%);
}

.body::before, .body::after {
  position: absolute;
  top: 13%;
  width: 14%; height: 66%;
  border-radius: 999px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.24), transparent);
  content: "";
}

.body::before { left: -8%; }
.body::after  { right: -8%; }

.lower-livery {
  position: absolute;
  left: 18%; bottom: 3%;
  z-index: 0;
  width: 64%; height: 29%;
  overflow: hidden;
  border-radius: 7% 7% 2% 2%;
  background:
    linear-gradient(90deg, rgba(0,0,0,.26), transparent 22%, transparent 70%, rgba(0,0,0,.22)),
    linear-gradient(180deg, #f6f7f4 0 12%, #e7e8e5 12% 27%, #0d2c9b 27% 100%);
}

.lower-livery::after {
  position: absolute;
  inset: auto 0 0;
  height: 74%;
  background: linear-gradient(90deg, #07165c, #1749c4 48%, #061556);
  clip-path: polygon(50% 0, 96% 38%, 96% 100%, 4% 100%, 4% 38%);
  content: "";
}

.chevron {
  position: absolute;
  left: 50%; z-index: 2;
  width: 92%; height: 34%;
  transform: translateX(-50%);
  clip-path: polygon(50% 0, 100% 100%, 82% 100%, 50% 34%, 18% 100%, 0 100%);
}

.chevron-silver { top: 7%;  background: rgba(211,218,225,.72); }
.chevron-gold   { top: 20%; width: 78%; background: #ffc400; }
.chevron-orange { top: 31%; width: 66%; background: linear-gradient(90deg, #d33a0c, #ff8f12 46%, #d33a0c); }

.blue-core {
  position: absolute;
  left: 22%; bottom: 0; z-index: 3;
  width: 56%; height: 70%;
  background: linear-gradient(90deg, #07175f, #1750cb 50%, #07175f);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.blue-core i {
  position: absolute;
  left: 50%; top: 36%;
  color: rgba(255,255,255,.92);
  font-size: clamp(.65rem, 1.05vw, .92rem);
  font-style: normal;
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: .26em;
  writing-mode: vertical-rl;
  transform: translateX(-50%);
}

.insignia {
  position: absolute;
  top: 18%; left: 50%;
  width: 42px; height: 24px;
  border: 2px solid #24282f;
  border-top: 0;
  transform: translateX(-50%) rotate(-13deg) skewX(-16deg);
  opacity: .72;
}

.insignia::before {
  position: absolute;
  left: 8px; bottom: 4px;
  width: 35px; height: 2px;
  background: #24282f;
  transform: rotate(34deg);
  content: "";
}

.rocket-word {
  position: absolute;
  left: 50%; top: 38%;
  color: #11151c;
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.7vw, 1.42rem);
  font-weight: 700;
  letter-spacing: .18em;
  writing-mode: vertical-rl;
  transform: translateX(-50%);
}

.window {
  position: absolute;
  top: 15%;
  width: 7px; height: 18px;
  border-radius: 999px;
  background: rgba(20,26,35,.22);
}

.window-one { left: 18%; }
.window-two { right: 18%; }

/* ── Engine / nozzle (static — no petal animation) ── */

.engine {
  position: absolute;
  left: 15%; bottom: 1%;
  width: 70%; height: 28%;
}

/* Engine bell (upper flared section) */
.engine-bell {
  position: absolute;
  top: 0; left: 18%;
  width: 64%; height: 50%;
  border-radius: 0 0 45% 45%;
  background:
    linear-gradient(135deg, transparent 0 24%, rgba(255,255,255,.55) 25% 29%, transparent 30% 100%),
    linear-gradient(225deg, transparent 0 24%, rgba(255,255,255,.48) 25% 29%, transparent 30% 100%),
    linear-gradient(90deg, #c2c5c7, #f2f4f1 42%, #a3a7aa);
}

/* Nozzle exit cone */
.nozzle {
  position: absolute;
  bottom: 0; left: 32%;
  width: 36%; height: 28%;
  clip-path: polygon(16% 0, 84% 0, 100% 100%, 0 100%);
  background: linear-gradient(90deg, #222933, #7c8589 47%, #151b23);
}

/* Exhaust glow when lotus is fully rising (engine firing for separation) */
.engine::after {
  content: '';
  position: absolute;
  bottom: -14px; left: 28%;
  width: 44%; height: 22px;
  background: radial-gradient(ellipse at center, rgba(255,150,40,.72), rgba(255,210,80,.3) 45%, transparent 72%);
  opacity: calc(var(--rise) * 0.9);
  filter: blur(4px);
  border-radius: 0 0 50% 50%;
}

/* ── Payload glow (bleeds through as fairing opens) ── */

.payload-glow {
  position: absolute;
  z-index: 0;
  /* sits behind the lotus (z-index 1 on lotus → glow behind, but lotus is sibling) */
}

.payload-glow::before {
  content: '';
  position: absolute;
  /* centre on the fairing opening area: ~27% down the rocket from scene centre */
  top: 50%;
  left: 50%;
  width: min(22vw, 200px);
  height: min(22vw, 200px);
  margin-top: min(-25vh, -220px);  /* offset to fairing area */
  margin-left: calc(-1 * min(11vw, 100px));
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(232,202,124,.55) 0%,
    rgba(255,220,140,.25) 35%,
    transparent 70%);
  opacity: calc(var(--fairing) * 1.1);
  filter: blur(12px);
  transform: scale(calc(.6 + var(--fairing) * .4 + var(--rise) * .6));
  transition: none;
}

/* ── LOTUS PAYLOAD ───────────────────────────────────
   Starts tiny and hidden at the fairing level (top of rocket).
   As --fairing opens the halves, the lotus blooms in scale.
   As --rise activates, it floats up above the fairing opening.
*/

.lotus-payload {
  position: absolute;
  left: 50%;
  top: 54%;
  z-index: 0;  /* emerges behind the stack, then reads as the payload release */
  width: min(42vw, 430px);
  max-width: 84vw;

  /*
    Vertical anchor: offset to fairing area (≈ top-quarter of rocket).
    -26vh positions the lotus at roughly the centre of the payload fairing
    on most viewport heights. The additional -5vh of rise gives a gentle
    float above the opening once revealed.
  */
  transform:
    translateX(-50%)
    translateY(calc(
      -16vh
      - var(--rise) * 9vh
    ))
    scale(calc(
      .01                           /* invisible until stage 3              */
      + var(--stage-3) * .5         /* emerges as the head splits           */
      + var(--rise)    * .45        /* reaches full size as it floats       */
    ))
    rotate(calc((1 - var(--rise)) * -4deg));

  transform-origin: 50% 50%;

  opacity: calc(
    var(--stage-3) * 0.95           /* stays hidden until the split opens   */
    + var(--rise)  * 0.4            /* fully opaque once rising             */
  );

  filter:
    drop-shadow(0 0 24px rgba(232,202,124,.38))
    drop-shadow(0 16px 48px rgba(0,0,0,.7));
}

/* Mission stats sidebar */
.mission-stats {
  z-index: 5;
  display: grid;
  gap: 18px;
  align-self: center;
}

.mission-stats span {
  display: block;
  border-top: 1px solid rgba(196,145,42,.2);
  padding-top: 14px;
  color: rgba(237,232,223,.56);
  font-family: var(--font-body);
  font-size: .74rem; font-weight: 300;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.mission-stats strong {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-display);
  color: var(--ink);
  font-size: clamp(1.5rem, 2.8vw, 2.6rem);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -.01em;
}

/* ── Craft / Partnership section ─────────────────── */

.craft-section,
.microart-section,
.closing-section {
  padding: clamp(80px,12vw,160px) clamp(22px,6vw,86px);
  background: var(--cream);
  color: var(--cream-ink);
}

.craft-section {
  display: grid;
  grid-template-columns: minmax(280px, 560px) minmax(260px, 1fr);
  gap: clamp(44px, 7vw, 108px);
  align-items: center;
  min-height: 72vh;
}

.craft-section .eyebrow,
.microart-section .eyebrow,
.closing-section .eyebrow { color: var(--cream-gold); opacity: 1; }

.craft-section p,
.microart-section p,
.closing-section p { color: var(--cream-muted); }

.section-copy h2,
.microart-copy h2,
.closing-section h2 { max-width: 10ch; color: var(--cream-ink); font-size: clamp(2.8rem,6vw,7rem); }

.craft-panel {
  display: grid;
  grid-template-columns: minmax(110px,.5fr) 1fr;
  border-top: 1px solid rgba(24,20,14,.12);
  border-bottom: 1px solid rgba(24,20,14,.12);
}

.craft-panel span,
.craft-panel strong {
  padding: 18px 0;
  border-top: 1px solid rgba(24,20,14,.1);
}

.craft-panel span:first-child,
.craft-panel strong:nth-child(2) { border-top: 0; }

.craft-panel span {
  color: var(--cream-muted);
  font-family: var(--font-body);
  font-size: .68rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  align-self: center;
}

.craft-panel strong {
  font-family: var(--font-display);
  color: var(--cream-ink);
  font-size: clamp(1.5rem,2.8vw,3.1rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.01em;
}

/* ── Microart section ───────────────────────────── */

.microart-section {
  display: grid;
  grid-template-columns: minmax(280px, 560px) minmax(280px, 1fr);
  gap: clamp(36px, 6vw, 96px);
  align-items: center;
  min-height: 72vh;
  background:
    radial-gradient(circle at 18% 12%, rgba(232,202,124,.15), transparent 28%),
    radial-gradient(circle at 82% 18%, rgba(20,128,72,.12), transparent 26%),
    linear-gradient(180deg, #06080f 0%, #05070d 100%);
  border-top: 1px solid rgba(196,145,42,.12);
}

.microart-copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 18px;
  align-content: center;
}

.microart-copy h2 {
  max-width: 11ch;
  color: var(--cream);
}

.microart-copy p {
  max-width: 56ch;
}

.microart-visual {
  position: relative;
  margin: 0;
  justify-self: end;
  width: min(100%, 560px);
  padding: 22px;
  border-radius: 34px;
  border: 1px solid rgba(232,202,124,.16);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015)),
    rgba(255,255,255,.02);
  box-shadow: 0 24px 68px rgba(0,0,0,.34);
  overflow: hidden;
}

.microart-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 18%, rgba(255,235,168,.18), transparent 34%),
    radial-gradient(circle at 82% 22%, rgba(20,128,72,.12), transparent 30%);
  pointer-events: none;
}

.microart-visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1280 / 720;
  object-fit: cover;
  border-radius: 22px;
  filter: saturate(1.02) contrast(1.04);
}

.microart-visual figcaption {
  margin-top: 14px;
  font-family: var(--font-body);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(237,232,223,.56);
}

/* ── Closing section ────────────────────────────── */

.closing-section {
  display: grid;
  grid-template-columns: 144px minmax(260px,1fr) auto;
  gap: clamp(28px,5vw,72px);
  align-items: center;
  min-height: 72vh;
  border-top: 1px solid rgba(24,20,14,.1);
}

.closing-logo {
  width: 144px; height: 144px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 20px 52px rgba(24,20,14,.15);
}

.closing-section .launch-link {
  border-color: rgba(24,20,14,.22);
  background: var(--cream-ink);
  color: var(--cream);
  white-space: nowrap;
}

.closing-section .launch-link:hover {
  background: #2a231a;
  border-color: rgba(24,20,14,.4);
  transform: translateY(-2px);
}

/* ── Media Coverage ─────────────────────────────── */

.media-section {
  display: grid;
  grid-template-columns: minmax(280px, 440px) minmax(320px, 1fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: start;
  padding: clamp(80px, 12vw, 160px) clamp(22px, 6vw, 86px);
  background:
    radial-gradient(circle at 16% 8%, rgba(232,202,124,.16), transparent 28%),
    radial-gradient(circle at 84% 18%, rgba(20,128,72,.16), transparent 30%),
    linear-gradient(180deg, #050710 0%, #04050b 100%);
  border-top: 1px solid rgba(196,145,42,.12);
}

.media-section .eyebrow { color: var(--gold-light); opacity: .9; }

.media-section h2 {
  max-width: 10ch;
  color: var(--cream);
  font-size: clamp(2.8rem, 6vw, 7rem);
}

.media-section p { color: rgba(237,232,223,.64); }

.media-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.media-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 220px;
  padding: 24px;
  border: 1px solid rgba(232,202,124,.16);
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)),
    rgba(255,255,255,.01);
  box-shadow: 0 18px 52px rgba(0,0,0,.22);
  overflow: hidden;
  transition: transform .26s ease, border-color .26s ease, background .26s ease, box-shadow .26s ease;
}

.media-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, transparent 0%, rgba(232,202,124,.06) 42%, transparent 68%);
  opacity: .7;
  pointer-events: none;
}

.media-card:hover {
  transform: translateY(-4px);
  border-color: rgba(232,202,124,.36);
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
    rgba(255,255,255,.02);
  box-shadow: 0 24px 64px rgba(0,0,0,.34);
}

.media-card span {
  position: relative;
  z-index: 1;
  color: rgba(232,202,124,.8);
  font-family: var(--font-body);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.media-card strong {
  position: relative;
  z-index: 1;
  margin-top: 14px;
  font-family: var(--font-display);
  color: var(--cream);
  font-size: clamp(1.3rem, 2vw, 2.1rem);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -.01em;
}

/* ── Footer ─────────────────────────────────────── */

.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px clamp(22px, 6vw, 86px) 34px;
  background: #04050b;
  border-top: 1px solid rgba(232,202,124,.12);
}

.footer-label {
  font-family: var(--font-body);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(237,232,223,.48);
}

.site-footer a {
  color: var(--gold-light);
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.7rem);
  font-weight: 300;
  letter-spacing: -.01em;
  text-decoration: none;
  transition: color .24s ease, transform .24s ease;
}

.site-footer a:hover {
  color: var(--cream);
  transform: translateY(-1px);
}

/* ── Scroll-reveal for light sections ─────────────── */

@media (prefers-reduced-motion: no-preference) {
  .craft-section,
  .microart-section,
  .closing-section,
  .media-section {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .85s ease, transform .85s cubic-bezier(.16,1,.3,1);
  }

  .craft-section.is-visible,
  .microart-section.is-visible,
  .closing-section.is-visible,
  .media-section.is-visible { opacity: 1; transform: none; }
}

/* ── Responsive ─────────────────────────────────── */

@media (max-width: 960px) {
  .site-header { padding-top: 14px; gap: 12px; }
  nav { display: none; }

  .music-toggle {
    margin-left: auto;
    min-height: 34px; padding: 0 12px;
    font-size: .6rem;
  }

  /* Single column on mobile, rocket hidden */
  .hero {
    grid-template-columns: 1fr;
    align-items: end;
    padding-bottom: 12vh;
    gap: 0;
  }

  .hero-rocket-col { display: none; }

  h1 { font-size: clamp(3.4rem, 18vw, 5.8rem); }

  .hero-hud,
  .hero-index { display: none; }

  .sticky-stage {
    grid-template-columns: 1fr;
    align-items: start;
    overflow: hidden;
    padding: 80px 18px 28px;
  }

  .mission-copy { max-width: 440px; }
  .mission-copy h2 { font-size: clamp(2rem, 11vw, 4rem); }

  .scene { min-height: 50vh; margin-top: 8px; }

  .rocket-stack {
    width: min(56vw, 250px);
    height: min(52vh, 540px);
  }

  .lotus-payload {
    width: min(78vw, 380px);
    transform:
      translateY(calc(-18vh - var(--rise) * 4vh))
      scale(calc(.06 + var(--fairing) * .34 + var(--rise) * .60))
      rotate(calc((1 - var(--rise)) * -4deg));
  }

  .flag-ribbon { display: none; }

  .mission-stats {
    grid-template-columns: repeat(3,1fr);
    gap: 8px;
    margin-bottom: 0;
    align-self: end;
  }

  .mission-stats span  { font-size: .6rem; }
  .mission-stats strong { font-size: 1.1rem; }

  .craft-section,
  .microart-section,
  .closing-section { grid-template-columns: 1fr; }

  .media-section { grid-template-columns: 1fr; }
  .media-grid { grid-template-columns: 1fr; }

  .craft-panel { grid-template-columns: 1fr; }
  .craft-panel strong { padding-top: 0; border-top: 0; }
  .closing-logo { width: 100px; height: 100px; }
  .microart-visual { justify-self: stretch; }
  .site-footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ── Motion preferences ─────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scroll-cue span, .stars-c, .shoot { animation: none; opacity: 0; }
  .launch-link { transition: none; }

  [class*="hero-enter"],
  .hero-enter-rocket,
  .hero-static-rocket,
  .scroll-cue {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}