<section class="rkt-stage" id="rktStage">
  <div class="rkt-intro"><p>Scroll ↓ to launch</p></div>
  <canvas id="rktCanvas"></canvas>
  <div class="rkt-hud">ALT <span id="rktAlt">0.0</span> KM · <span id="rktPhase">PRE-LAUNCH</span></div>
</section>
<section class="rkt-bottom"><p>Orbit insertion nominal.</p></section>

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#0a1120;color:#fff;font-family:system-ui,-apple-system,sans-serif}
.rkt-bottom{min-height:70vh;display:flex;justify-content:center;align-items:center;color:#7f93b8;font-size:15px;letter-spacing:.08em;text-transform:uppercase;background:#02040c}
.rkt-stage{height:100vh;position:relative;overflow:hidden;background:#0a1120}
.rkt-intro{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;pointer-events:none;z-index:5;color:#cfe0ff;font-size:15px;letter-spacing:.08em;text-transform:uppercase;transition:opacity .4s ease}
#rktCanvas{display:block;width:100%;height:100%}
.rkt-hud{position:absolute;left:24px;bottom:24px;font-variant-numeric:tabular-nums;font-size:13px;letter-spacing:.14em;color:#fb923c;text-transform:uppercase;opacity:.85}

const canvas = document.getElementById('rktCanvas');
const altEl = document.getElementById('rktAlt');
const phaseEl = document.getElementById('rktPhase');
const introEl = document.querySelector('.rkt-intro');
const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

const scene = new THREE.Scene();
// Sky gradient handled by scroll: dawn blue → deep space.
const SKY0 = new THREE.Color(0x2a4a7a), SKY1 = new THREE.Color(0x01020a);
scene.background = SKY0.clone();
scene.fog = new THREE.Fog(0x2a4a7a, 60, 220);
const camera = new THREE.PerspectiveCamera(55, 1, 0.1, 600);

scene.add(new THREE.AmbientLight(0xffffff, 0.5));
const sun = new THREE.DirectionalLight(0xffe8c8, 1.1);
sun.position.set(-40, 30, 30);
scene.add(sun);
const engineGlow = new THREE.PointLight(0xff9a3c, 0, 40);
scene.add(engineGlow);

// Launch pad ground + tower, left behind as the rocket climbs.
const ground = new THREE.Mesh(
  new THREE.CylinderGeometry(80, 80, 2, 48),
  new THREE.MeshLambertMaterial({ color: 0x24354f })
);
ground.position.y = -1;
scene.add(ground);
const tower = new THREE.Mesh(
  new THREE.BoxGeometry(2, 26, 2),
  new THREE.MeshLambertMaterial({ color: 0x374b66 })
);
tower.position.set(6, 13, 0);
scene.add(tower);

// The rocket: booster stage + upper stage + capsule + fins, grouped so
// stage separation can split the hierarchy mid-flight.
const rocket = new THREE.Group();
scene.add(rocket);
const white = new THREE.MeshStandardMaterial({ color: 0xe8ecf2, roughness: 0.4, metalness: 0.3 });
const dark = new THREE.MeshStandardMaterial({ color: 0x1f2937, roughness: 0.5, metalness: 0.5 });

const booster = new THREE.Group();
const boosterBody = new THREE.Mesh(new THREE.CylinderGeometry(1.5, 1.5, 12, 24), white);
boosterBody.position.y = 6;
booster.add(boosterBody);
for (let i = 0; i < 4; i++) {
  const fin = new THREE.Mesh(new THREE.BoxGeometry(0.18, 3.4, 2.2), dark);
  const a = (i / 4) * Math.PI * 2;
  fin.position.set(Math.cos(a) * 1.9, 1.6, Math.sin(a) * 1.9);
  fin.rotation.y = -a;
  booster.add(fin);
}
const nozzle = new THREE.Mesh(new THREE.CylinderGeometry(0.9, 1.25, 1.4, 24), dark);
nozzle.position.y = -0.6;
booster.add(nozzle);
rocket.add(booster);

const upper = new THREE.Group();
const upperBody = new THREE.Mesh(new THREE.CylinderGeometry(1.5, 1.5, 5.5, 24), white);
upperBody.position.y = 14.75;
upper.add(upperBody);
const capsule = new THREE.Mesh(new THREE.ConeGeometry(1.5, 3.2, 24), dark);
capsule.position.y = 19.1;
upper.add(capsule);
rocket.add(upper);

// Exhaust: recycled particles pushed down from the active nozzle; their
// spawn rate scales with thrust so the plume dies at MECO.
const EX = 500;
const exGeo = new THREE.BufferGeometry();
const exPos = new Float32Array(EX * 3);
const exLife = new Float32Array(EX);
for (let i = 0; i < EX; i++) { exLife[i] = Math.random(); exPos[i * 3 + 1] = -9999; }
exGeo.setAttribute('position', new THREE.BufferAttribute(exPos, 3));
const exhaust = new THREE.Points(exGeo, new THREE.PointsMaterial({
  color: 0xffb35c, size: 0.85, transparent: true, opacity: 0.9,
  blending: THREE.AdditiveBlending, depthWrite: false,
}));
scene.add(exhaust);

// Stars fade in as the sky darkens.
const starGeo = new THREE.BufferGeometry();
const starPos = new Float32Array(900 * 3);
for (let i = 0; i < 900; i++) {
  starPos[i * 3] = (Math.random() - 0.5) * 500;
  starPos[i * 3 + 1] = 60 + Math.random() * 400;
  starPos[i * 3 + 2] = (Math.random() - 0.5) * 500;
}
starGeo.setAttribute('position', new THREE.BufferAttribute(starPos, 3));
const stars = new THREE.Points(starGeo, new THREE.PointsMaterial({
  color: 0xdde6ff, size: 0.9, transparent: true, opacity: 0, sizeAttenuation: true,
}));
scene.add(stars);

gsap.registerPlugin(ScrollTrigger);
const flight = { p: 0 };
gsap.to(flight, {
  p: 1,
  ease: 'none',
  scrollTrigger: { trigger: '#rktStage', start: 'top top', end: '+=500%', scrub: 0.5, pin: true },
});

function resize() {
  const w = canvas.clientWidth, h = canvas.clientHeight;
  renderer.setSize(w, h, false);
  camera.aspect = w / h;
  camera.updateProjectionMatrix();
}

// Flight profile phases (fractions of scroll):
// 0–0.08 ignition rumble · 0.08–0.55 boost · 0.55–0.62 separation
// 0.62–1 upper-stage climb to orbit.
const SEP = 0.58;
const clock = new THREE.Clock();
const skyTmp = new THREE.Color();

function animate() {
  requestAnimationFrame(animate);
  const t = clock.getElapsedTime();
  const p = flight.p;
  if (introEl) introEl.style.opacity = p > 0.02 ? '0' : '1';

  // Altitude: quadratic in p so the climb accelerates like a real ascent.
  const alt = Math.max(0, (p - 0.08) / 0.92);
  const y = alt * alt * 190;
  rocket.position.y = y;

  // Ignition rumble before liftoff.
  const rumble = (p > 0.02 && p < 0.1) ? Math.sin(t * 60) * 0.06 * ((p - 0.02) / 0.08) : 0;
  rocket.position.x = rumble;

  // Stage separation: after SEP the booster stops tracking the rocket
  // group's climb and falls away with tumble.
  const sep = Math.max(0, (p - SEP) / (1 - SEP));
  if (sep > 0) {
    booster.position.y = -sep * sep * 150;
    booster.position.x = -sep * 22;
    booster.rotation.z = sep * 1.8;
  } else {
    booster.position.set(0, 0, 0);
    booster.rotation.z = 0;
  }

  // Thrust: full during boost, brief gap at separation, upper stage relights.
  const thrust = p < 0.06 ? 0 : (p < SEP ? 1 : (p < SEP + 0.05 ? 0.1 : 0.75));
  engineGlow.intensity = thrust * (2.2 + Math.sin(t * 40) * 0.5);
  // The active nozzle: booster bottom before sep, upper stage bottom after.
  const nozzleY = p < SEP ? y - 0.6 : y + 12 - 0.5;
  engineGlow.position.set(rumble, nozzleY - 1.5, 0);

  const ep = exhaust.geometry.attributes.position;
  for (let i = 0; i < EX; i++) {
    exLife[i] += 0.025 + (i % 7) * 0.004;
    if (exLife[i] > 1) {
      exLife[i] = 0;
      if (thrust > 0.15) {
        ep.array[i * 3] = rumble + (Math.random() - 0.5) * 0.7;
        ep.array[i * 3 + 1] = nozzleY;
        ep.array[i * 3 + 2] = (Math.random() - 0.5) * 0.7;
      } else {
        ep.array[i * 3 + 1] = -9999;
      }
    } else if (ep.array[i * 3 + 1] > -999) {
      ep.array[i * 3 + 1] -= 1.1 + exLife[i] * 1.6;
      ep.array[i * 3] += (Math.random() - 0.5) * 0.3;
      ep.array[i * 3 + 2] += (Math.random() - 0.5) * 0.3;
    }
  }
  ep.needsUpdate = true;
  exhaust.material.opacity = 0.25 + thrust * 0.65;

  // Sky darkens with altitude; stars and fog respond in lockstep.
  const dark01 = Math.min(1, y / 130);
  skyTmp.copy(SKY0).lerp(SKY1, dark01);
  scene.background.copy(skyTmp);
  scene.fog.color.copy(skyTmp);
  stars.material.opacity = Math.max(0, dark01 - 0.35) * 1.4;

  // Chase camera: below-looking-up at the pad, pulling alongside in
  // flight, settling behind the upper stage near orbit.
  const camY = 6 + y * 0.96 + dark01 * 6;
  const camDist = 26 - Math.min(1, p * 2) * 6 + dark01 * 8;
  const ang = 0.5 + p * 1.1;
  camera.position.set(Math.sin(ang) * camDist, camY, Math.cos(ang) * camDist);
  camera.lookAt(rumble, y + (p < SEP ? 8 : 15), 0);

  altEl.textContent = (y * 0.55).toFixed(1);
  phaseEl.textContent = p < 0.08 ? 'PRE-LAUNCH' : (p < SEP ? 'BOOST' : (p < SEP + 0.05 ? 'STAGE SEP' : 'ORBIT BURN'));
  renderer.render(scene, camera);
}

resize();
window.addEventListener('resize', resize);
animate();