impact-ui 5.0.0 → 5.0.1-beta.1

package/dist/assets/halloween_candle_light.html.js

@@ -0,0 +1,2320 @@
+const halloweenCandleLightHtml = `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+    <title>The Last Candle</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Creepster&display=swap" />
+    <style>
+      html,
+      body {
+        margin: 0;
+        height: 100%;
+        background: #000;
+        overflow: hidden;
+      }
+      canvas {
+        display: block;
+      }
+      #hint {
+        position: fixed;
+        inset: 0;
+        display: grid;
+        place-items: center;
+        margin: 0;
+        pointer-events: none;
+        user-select: none;
+        font:
+          400 15px/1.5 'Iowan Old Style',
+          'Palatino Linotype',
+          Palatino,
+          Georgia,
+          serif;
+        letter-spacing: 0.05em;
+        color: #7f766a;
+        transition: opacity 1.4s ease;
+      }
+      #hint.gone {
+        opacity: 0;
+      }
+    </style>
+    <script type="importmap">
+      {
+        "imports": {
+          "three": "https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js",
+          "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/"
+        }
+      }
+    <\/script>
+  </head>
+  <body>
+    <p id="hint">Best experienced with sound.</p>
+
+    <script type="module">
+      import * as THREE from 'three';
+      import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';
+      import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
+      import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
+      import { BokehPass } from 'three/addons/postprocessing/BokehPass.js';
+      import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
+      import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
+      import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';
+      import { mergeGeometries, mergeVertices } from 'three/addons/utils/BufferGeometryUtils.js';
+
+      /* ==========================================================================
+   THE LAST CANDLE
+   An empty graveyard at night. The camera makes one slow push down the aisle
+   while the low morning sun, haze and carved pumpkins fade up from black; at the end
+   every light goes out at once.
+
+   Timeline (seconds)
+   0.0  - 0.8   pitch black, every light at 0
+   0.8  - 6.5   morning sun, sky, haze and environment fade up; pumpkins kindle
+   10   - 15.5  the pumpkins gutter
+   2.5  - 7.5   the stone monument at the end of the aisle wakes: its edges and
+                veins glow blue to violet; a witch's hat hovers above it
+   9.8 - 16.9   "Happy Halloween" burns in at the top-left corner: fire-lit letters,
+                a hot igniting edge, heat shimmer and rising embers
+   1.0  - 16.9  a small "Applying Style...." status line at the bottom centre, dots loading
+   16.9         every light hits exactly 0
+   16.9 - 20.0  pitch black
+   ========================================================================== */
+
+      const RENDER = new URLSearchParams(location.search).has('render');
+      const EMBED = new URLSearchParams(location.search).has('embed');
+      const T = {
+        revealIn: 0.8,
+        revealFull: 6.5,
+        devilGo: 2.2,
+        devilArrive: 14.4,
+        lift0: 15.0,
+        lift1: 16.1,
+        blow0: 16.25,
+        out: 16.9,
+        end: 20.0,
+        loop: 22.0,
+      };
+      const Z_START = -31.0,
+        Z_END = 0.4; // the point the camera looks at and focuses on
+      const CAM_Z0 = 9.0,
+        CAM_Z1 = 3.4; // dolly path
+      const CAM_Y0 = 1.74,
+        CAM_Y1 = 1.45;
+      const FOG_DENSITY = 0.026; // light morning haze
+      // light levels at full reveal (physical units: lux for the sun, candela for point lights)
+      const K = {
+        sun: 3.8,
+        hemi: 1.05,
+        env: 0.4,
+        pump: 0.42,
+        glow: 1.6,
+        ap0: 0.00025,
+        ap1: 0.0013,
+      };
+
+      /* ---------- deterministic randomness ---------- */
+      function mulberry32(a) {
+        return function () {
+          a |= 0;
+          a = (a + 0x6d2b79f5) | 0;
+          let t = Math.imul(a ^ (a >>> 15), 1 | a);
+          t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+          return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+        };
+      }
+      const rng = mulberry32(31102026);
+      const rand = (a = 0, b = 1) => a + (b - a) * rng();
+      function hash1(n) {
+        const x = Math.sin(n * 127.1 + 311.7) * 43758.5453;
+        return x - Math.floor(x);
+      }
+      function noise1(x) {
+        const i = Math.floor(x),
+          f = x - i,
+          u = f * f * (3 - 2 * f);
+        return hash1(i) * (1 - u) + hash1(i + 1) * u;
+      }
+      function fbm1(x) {
+        return 0.5 * noise1(x) + 0.3 * noise1(x * 2.03 + 7.1) + 0.2 * noise1(x * 4.11 + 3.3);
+      }
+
+      /* ---------- easing ---------- */
+      const clamp = (x, a = 0, b = 1) => Math.min(b, Math.max(a, x));
+      const lerp = (a, b, t) => a + (b - a) * t;
+      const smooth = (e0, e1, x) => {
+        const t = clamp((x - e0) / (e1 - e0));
+        return t * t * (3 - 2 * t);
+      };
+      const smoother = (e0, e1, x) => {
+        const t = clamp((x - e0) / (e1 - e0));
+        return t * t * t * (t * (t * 6 - 15) + 10);
+      };
+      // long-tailed ease: very gentle start and an extremely soft landing
+      function easeLong(u) {
+        u = clamp(u);
+        const p = 2.3,
+          a = Math.pow(u, p),
+          b = Math.pow(1 - u, p);
+        return a / (a + b);
+      }
+      // glide profile: speed ~ u^1.6 (1-u)^2.6, integrated once (a drifting body that bleeds speed slowly)
+      const TRAVEL = (() => {
+        const N = 2048,
+          arr = new Float32Array(N + 1);
+        let s = 0;
+        for (let i = 1; i <= N; i++) {
+          const u = (i - 0.5) / N;
+          s += Math.pow(u, 1.6) * Math.pow(1 - u, 2.6);
+          arr[i] = s;
+        }
+        for (let i = 0; i <= N; i++) arr[i] /= s;
+        return arr;
+      })();
+      function travel(u) {
+        u = clamp(u);
+        const f = u * 2048,
+          i = Math.min(2047, Math.floor(f));
+        return lerp(TRAVEL[i], TRAVEL[i + 1], f - i);
+      }
+      function devilZ(t) {
+        return lerp(Z_START, Z_END, travel((t - T.devilGo) / (T.devilArrive - T.devilGo)));
+      }
+
+      /* ---------- sound: UI-style, procedural, scheduled on the same timeline ----------
+   0.8 - 16.9  a very quiet cinematic bed: low drone, dark pad, soft wind
+   0.8 - 16.9  slight wind, gusting and drifting across the speakers
+   1.5         a ghostly, theremin-like wail drifts across
+   8.0         the wail again, drifting back the other way
+   5.2, 10.6, 15.0  bats flit past, squeaking softly
+   11.8        a wolf howls far off to the right, very quietly
+   16.9        power-off blip, then silence
+   ------------------------------------------------------------------------- */
+      const sndCache = new WeakMap();
+      function noiseBuf(ctx, seconds, kind, seed) {
+        const sr = ctx.sampleRate,
+          fade = Math.floor(0.05 * sr),
+          n = Math.floor(seconds * sr) + fade,
+          b = ctx.createBuffer(2, n, sr);
+        for (let ch = 0; ch < 2; ch++) {
+          const r = mulberry32(seed + ch * 7919),
+            d = b.getChannelData(ch);
+          let b0 = 0,
+            b1 = 0,
+            b2 = 0,
+            last = 0;
+          for (let i = 0; i < n; i++) {
+            const w = r() * 2 - 1;
+            if (kind === 'white') d[i] = w * 0.7;
+            else if (kind === 'pink') {
+              b0 = 0.99765 * b0 + w * 0.099046;
+              b1 = 0.963 * b1 + w * 0.2965164;
+              b2 = 0.57 * b2 + w * 1.0526913;
+              d[i] = (b0 + b1 + b2 + w * 0.1848) * 0.2;
+            } else {
+              last = (last + 0.02 * w) / 1.02;
+              d[i] = last * 3.2;
+            }
+          }
+          // seamless loop: the head fades in from the tail that will precede it
+          for (let i = 0; i < fade; i++) {
+            const k = i / fade;
+            d[i] = d[i] * k + d[n - fade + i] * (1 - k);
+          }
+        }
+        b.__loopEnd = (n - fade) / sr;
+        return b;
+      }
+      function impulseBuf(ctx, seconds, seed) {
+        const sr = ctx.sampleRate,
+          n = Math.floor(seconds * sr),
+          b = ctx.createBuffer(2, n, sr),
+          pre = Math.floor(0.018 * sr);
+        for (let ch = 0; ch < 2; ch++) {
+          const r = mulberry32(seed + ch * 31),
+            d = b.getChannelData(ch);
+          let lp = 0;
+          for (let i = 0; i < n; i++) {
+            const x = i / n,
+              w = r() * 2 - 1;
+            lp += (w - lp) * (0.6 - 0.5 * x);
+            d[i] = i < pre ? 0 : lp * Math.pow(1 - x, 1.6) * Math.exp(-3.0 * x);
+          }
+        }
+        return b;
+      }
+      function buildSound(ctx, t0, dest) {
+        const S =
+          sndCache.get(ctx) ||
+          (() => {
+            const c = {
+              white: noiseBuf(ctx, 3, 'white', 101),
+              brown: noiseBuf(ctx, 8, 'brown', 303),
+              ir: impulseBuf(ctx, 1.1, 404),
+            };
+            sndCache.set(ctx, c);
+            return c;
+          })();
+        const master = ctx.createGain();
+        master.gain.value = 0;
+        master.gain.setValueAtTime(2.2, t0);
+        master.gain.setValueAtTime(2.2, t0 + T.out + 0.22);
+        master.gain.linearRampToValueAtTime(0, t0 + T.out + 0.25);
+        const comp = ctx.createDynamicsCompressor();
+        comp.threshold.value = -14;
+        comp.ratio.value = 3;
+        comp.attack.value = 0.004;
+        comp.release.value = 0.2;
+        master.connect(comp);
+        comp.connect(dest);
+        const verb = ctx.createConvolver();
+        verb.buffer = S.ir;
+        const verbOut = ctx.createGain();
+        verbOut.gain.value = 0.18;
+        verb.connect(verbOut).connect(master);
+        const bus = ctx.createGain();
+        bus.connect(master);
+        bus.connect(verb);
+
+        const tone = (t, f0, f1, dur, type = 'sine', amp = 0.2, pan = 0, attack = 0.004) => {
+          const o = ctx.createOscillator();
+          o.type = type;
+          o.frequency.setValueAtTime(f0, t0 + t);
+          if (f1 !== f0) o.frequency.exponentialRampToValueAtTime(f1, t0 + t + dur);
+          const g = ctx.createGain();
+          g.gain.value = 0;
+          g.gain.setValueAtTime(0, t0 + t);
+          g.gain.linearRampToValueAtTime(amp, t0 + t + attack);
+          g.gain.exponentialRampToValueAtTime(0.0001, t0 + t + dur);
+          const p = ctx.createStereoPanner();
+          p.pan.value = pan;
+          o.connect(g).connect(p).connect(bus);
+          o.start(t0 + t);
+          o.stop(t0 + t + dur + 0.02);
+        };
+        const whoosh = (t, dur, fA, fB, amp, pan0 = 0, pan1 = 0) => {
+          const s = ctx.createBufferSource();
+          s.buffer = S.white;
+          s.loop = true;
+          s.loopEnd = S.white.__loopEnd;
+          const bp = ctx.createBiquadFilter();
+          bp.type = 'bandpass';
+          bp.Q.value = 1.2;
+          bp.frequency.setValueAtTime(fA, t0 + t);
+          bp.frequency.exponentialRampToValueAtTime(fB, t0 + t + dur);
+          const g = ctx.createGain();
+          g.gain.value = 0;
+          g.gain.setValueAtTime(0, t0 + t);
+          g.gain.linearRampToValueAtTime(amp, t0 + t + dur * 0.45);
+          g.gain.exponentialRampToValueAtTime(0.0001, t0 + t + dur);
+          const p = ctx.createStereoPanner();
+          p.pan.setValueAtTime(pan0, t0 + t);
+          p.pan.linearRampToValueAtTime(pan1, t0 + t + dur);
+          s.connect(bp).connect(g).connect(p).connect(bus);
+          s.start(t0 + t, 0);
+          s.stop(t0 + t + dur + 0.02);
+        };
+
+        // cinematic bed, very low: fades up with the picture, swells slowly, cuts with the lights
+        {
+          const bed = ctx.createGain();
+          bed.connect(bus);
+          const lvl = (t) => smoother(0.8, 6.0, t) * (0.75 + 0.25 * smoother(8, 15.5, t));
+          const n = Math.ceil(T.out * 30),
+            env = new Float32Array(n);
+          for (let i = 0; i < n; i++) env[i] = 0.1 * lvl((T.out * i) / (n - 1)); // 0.1 keeps it far under everything else
+          bed.gain.value = 0;
+          bed.gain.setValueCurveAtTime(env, t0, T.out - 0.02);
+          bed.gain.linearRampToValueAtTime(0, t0 + T.out);
+          const stopAt = t0 + T.out + 0.05;
+          const osc = (type, f, det, amp, dest) => {
+            const o = ctx.createOscillator();
+            o.type = type;
+            o.frequency.value = f;
+            o.detune.value = det;
+            const g = ctx.createGain();
+            g.gain.value = amp;
+            o.connect(g).connect(dest);
+            o.start(t0);
+            o.stop(stopAt);
+          };
+          // low drone (A and E)
+          const droneLP = ctx.createBiquadFilter();
+          droneLP.type = 'lowpass';
+          droneLP.frequency.value = 320;
+          droneLP.connect(bed);
+          osc('sine', 55, 0, 0.05, droneLP);
+          osc('sine', 55.3, 0, 0.04, droneLP);
+          osc('triangle', 82.41, 0, 0.02, droneLP);
+          osc('triangle', 110, 3, 0.012, droneLP);
+          // dark A-minor pad that slowly opens
+          const padLP = ctx.createBiquadFilter();
+          padLP.type = 'lowpass';
+          padLP.Q.value = 0.8;
+          padLP.connect(bed);
+          const m = Math.ceil(T.out * 20),
+            cut = new Float32Array(m);
+          for (let i = 0; i < m; i++) {
+            const t = (T.out * i) / (m - 1);
+            cut[i] = 380 + 520 * smoother(4, 15.5, t) + 60 * Math.sin(t * 0.7);
+          }
+          padLP.frequency.value = cut[0];
+          padLP.frequency.setValueCurveAtTime(cut, t0, T.out);
+          [
+            [110, -6],
+            [110, 6],
+            [130.81, -5],
+            [130.81, 5],
+            [164.81, -4],
+            [164.81, 4],
+          ].forEach(([f, d]) => osc('sawtooth', f, d, 0.006, padLP));
+          // soft wind
+          const wind = ctx.createBufferSource();
+          wind.buffer = S.brown;
+          wind.loop = true;
+          wind.loopEnd = S.brown.__loopEnd;
+          const windLP = ctx.createBiquadFilter();
+          windLP.type = 'lowpass';
+          windLP.Q.value = 0.5;
+          const wc = new Float32Array(m),
+            wg = new Float32Array(m);
+          for (let i = 0; i < m; i++) {
+            const t = (T.out * i) / (m - 1);
+            wc[i] = 260 + 380 * fbm1(t * 0.4 + 3.1);
+            wg[i] = 0.05 * (0.6 + 0.8 * (fbm1(t * 0.45 + 7.3) - 0.3));
+          }
+          windLP.frequency.value = wc[0];
+          windLP.frequency.setValueCurveAtTime(wc, t0, T.out);
+          const windG = ctx.createGain();
+          windG.gain.value = wg[0];
+          windG.gain.setValueCurveAtTime(wg, t0, T.out);
+          wind.connect(windLP).connect(windG).connect(bed);
+          wind.start(t0, 1.3);
+          wind.stop(stopAt);
+        }
+        // slight wind in the background: a low rush plus an airy gusting top, drifting left and right
+        {
+          const WIND = 0.07; // overall level: slight
+          const m = Math.ceil(T.out * 30),
+            at = (i) => (T.out * i) / (m - 1);
+          const curve = (fn) => {
+            const c = new Float32Array(m);
+            for (let i = 0; i < m; i++) c[i] = fn(at(i));
+            return c;
+          };
+          const gust = (t) => 0.55 + 0.75 * Math.max(0, fbm1(t * 0.5 + 11.7) - 0.25);
+          const level = (t) => smoother(0.8, 5.0, t) * gust(t);
+          const out = ctx.createGain();
+          out.gain.value = 0;
+          out.gain.setValueCurveAtTime(
+            curve((t) => WIND * level(t)),
+            t0,
+            T.out - 0.02
+          );
+          out.gain.linearRampToValueAtTime(0, t0 + T.out);
+          const pan = ctx.createStereoPanner();
+          pan.pan.value = 0;
+          pan.pan.setValueCurveAtTime(
+            curve((t) => 0.55 * Math.sin(t * 0.33 + 0.8)),
+            t0,
+            T.out
+          );
+          out.connect(pan).connect(bus);
+          const src = (buf, offset) => {
+            const s = ctx.createBufferSource();
+            s.buffer = buf;
+            s.loop = true;
+            s.loopEnd = buf.__loopEnd;
+            s.start(t0, offset);
+            s.stop(t0 + T.out + 0.05);
+            return s;
+          };
+          // low rush
+          const lp = ctx.createBiquadFilter();
+          lp.type = 'lowpass';
+          lp.Q.value = 0.6;
+          lp.frequency.value = 500;
+          lp.frequency.setValueCurveAtTime(
+            curve((t) => 380 + 520 * fbm1(t * 0.5 + 11.7)),
+            t0,
+            T.out
+          );
+          src(S.brown, 4.2).connect(lp).connect(out);
+          // airy, whistling top that rises with each gust
+          const bp = ctx.createBiquadFilter();
+          bp.type = 'bandpass';
+          bp.Q.value = 1.6;
+          bp.frequency.value = 900;
+          bp.frequency.setValueCurveAtTime(
+            curve((t) => 700 + 900 * fbm1(t * 0.5 + 11.7) + 150 * Math.sin(t * 0.9)),
+            t0,
+            T.out
+          );
+          const airG = ctx.createGain();
+          airG.gain.value = 0.35;
+          src(S.white, 1.1).connect(bp).connect(airG).connect(out);
+        }
+        // bats: a few quiet passes of high squeaks and soft wing flutter, flying across the stereo field
+        const batPass = (tStart, dur, panFrom, panTo, seed, amp) => {
+          const R = mulberry32(seed);
+          for (let t = tStart + 0.05; t < tStart + dur - 0.05;) {
+            const u = (t - tStart) / dur,
+              near = Math.sin(Math.PI * u); // louder as it passes closest
+            const pan = lerp(panFrom, panTo, u),
+              f0 = 7000 + R() * 2500;
+            tone(
+              t,
+              f0,
+              f0 * (0.45 + R() * 0.1),
+              0.018 + R() * 0.02,
+              'sine',
+              amp * (0.4 + 0.6 * near) * (0.6 + 0.4 * R()),
+              pan,
+              0.002
+            );
+            t += R() < 0.3 ? 0.035 + R() * 0.03 : 0.09 + R() * 0.16; // short clusters, then gaps
+          }
+          const n = ctx.createBufferSource();
+          n.buffer = S.white;
+          n.loop = true;
+          n.loopEnd = S.white.__loopEnd;
+          const bp = ctx.createBiquadFilter();
+          bp.type = 'bandpass';
+          bp.frequency.value = 900;
+          bp.Q.value = 0.9;
+          const g = ctx.createGain(),
+            k = Math.ceil(dur * 200),
+            env = new Float32Array(k);
+          for (let i = 0; i < k; i++) {
+            const u = i / (k - 1);
+            env[i] =
+              amp *
+              0.9 *
+              Math.sin(Math.PI * u) *
+              Math.pow(0.5 + 0.5 * Math.sin(u * dur * 2 * Math.PI * 11), 3);
+          }
+          g.gain.value = 0;
+          g.gain.setValueCurveAtTime(env, t0 + tStart, dur);
+          const pn = ctx.createStereoPanner();
+          pn.pan.setValueAtTime(panFrom, t0 + tStart);
+          pn.pan.linearRampToValueAtTime(panTo, t0 + tStart + dur);
+          n.connect(bp).connect(g).connect(pn).connect(bus);
+          n.start(t0 + tStart, R() * 2);
+          n.stop(t0 + tStart + dur + 0.02);
+        };
+        batPass(5.2, 1.6, -0.8, 0.8, 4101, 0.035);
+        batPass(10.6, 1.1, 0.8, -0.5, 4202, 0.03);
+        batPass(15.0, 1.3, -0.6, 0.9, 4303, 0.028);
+        // a voice whose pitch and level follow curves over its life
+        const voiceCurve = (t, dur, freqFn, ampFn, type = 'sine', pan = 0, lpf = 4000) => {
+          const n = Math.max(8, Math.ceil(dur * 120)),
+            fq = new Float32Array(n),
+            am = new Float32Array(n);
+          for (let i = 0; i < n; i++) {
+            const u = i / (n - 1);
+            fq[i] = freqFn(u);
+            am[i] = ampFn(u);
+          }
+          am[n - 1] = 0;
+          const o = ctx.createOscillator();
+          o.type = type;
+          o.frequency.value = fq[0];
+          o.frequency.setValueCurveAtTime(fq, t0 + t, dur);
+          const g = ctx.createGain();
+          g.gain.value = 0;
+          g.gain.setValueCurveAtTime(am, t0 + t, dur);
+          const lp = ctx.createBiquadFilter();
+          lp.type = 'lowpass';
+          lp.frequency.value = lpf;
+          const p = ctx.createStereoPanner();
+          if (Array.isArray(pan)) {
+            p.pan.setValueAtTime(pan[0], t0 + t);
+            p.pan.linearRampToValueAtTime(pan[1], t0 + t + dur);
+          } else p.pan.value = pan;
+          o.connect(lp).connect(g).connect(p).connect(bus);
+          o.start(t0 + t);
+          o.stop(t0 + t + dur + 0.02);
+        };
+        // ghostly wail: theremin-like rise and fall with vibrato, drifting across, low
+        const wail = (t, pan) => {
+          const vib = (u) => 1 + 0.03 * Math.sin(u * 2.3 * 2 * Math.PI * 5.5),
+            shape = (u) => Math.sin(Math.PI * Math.min(1, u * 1.3));
+          voiceCurve(
+            t,
+            2.3,
+            (u) => (520 + 380 * shape(u)) * vib(u),
+            (u) => 0.045 * Math.sin(Math.PI * u),
+            'sine',
+            pan,
+            3000
+          );
+          voiceCurve(
+            t,
+            2.3,
+            (u) => (260 + 190 * shape(u)) * vib(u),
+            (u) => 0.018 * Math.sin(Math.PI * u),
+            'triangle',
+            pan,
+            1500
+          );
+        };
+        wail(1.5, [0.7, -0.7]); // as the graveyard fades up, right to left
+        wail(8.0, [-0.7, 0.7]); // again in the middle, left to right
+        // wolf howl, far off to the right, very low
+        voiceCurve(
+          11.8,
+          2.4,
+          (u) =>
+            (u < 0.25 ? 300 + 320 * (u / 0.25) : u < 0.7 ? 620 : 620 - 270 * ((u - 0.7) / 0.3)) *
+            (1 + 0.012 * Math.sin(u * 2.4 * 2 * Math.PI * 6)),
+          (u) => 0.025 * Math.min(1, u * 5) * Math.min(1, (1 - u) * 4),
+          'sine',
+          0.75,
+          1600
+        );
+        // lights out: power off
+        tone(T.out, 880, 90, 0.22, 'sine', 0.2);
+        tone(T.out, 1760, 180, 0.12, 'triangle', 0.06);
+        tone(T.out, 4000, 4000, 0.008, 'square', 0.03);
+      }
+      function wavBase64(buf) {
+        const ch = buf.numberOfChannels,
+          n = buf.length,
+          sr = buf.sampleRate,
+          bytes = new Uint8Array(44 + n * ch * 2),
+          v = new DataView(bytes.buffer);
+        const str = (o, s) => {
+          for (let i = 0; i < s.length; i++) v.setUint8(o + i, s.charCodeAt(i));
+        };
+        str(0, 'RIFF');
+        v.setUint32(4, 36 + n * ch * 2, true);
+        str(8, 'WAVE');
+        str(12, 'fmt ');
+        v.setUint32(16, 16, true);
+        v.setUint16(20, 1, true);
+        v.setUint16(22, ch, true);
+        v.setUint32(24, sr, true);
+        v.setUint32(28, sr * ch * 2, true);
+        v.setUint16(32, ch * 2, true);
+        v.setUint16(34, 16, true);
+        str(36, 'data');
+        v.setUint32(40, n * ch * 2, true);
+        const data = [];
+        for (let c = 0; c < ch; c++) data.push(buf.getChannelData(c));
+        let o = 44;
+        for (let i = 0; i < n; i++)
+          for (let c = 0; c < ch; c++) {
+            const s = Math.max(-1, Math.min(1, data[c][i]));
+            v.setInt16(o, s < 0 ? s * 0x8000 : s * 0x7fff, true);
+            o += 2;
+          }
+        let bin = '';
+        for (let i = 0; i < bytes.length; i += 0x8000)
+          bin += String.fromCharCode.apply(null, bytes.subarray(i, i + 0x8000));
+        return btoa(bin);
+      }
+      async function renderSoundtrack() {
+        const ctx = new OfflineAudioContext(2, Math.ceil(T.end * 48000), 48000);
+        buildSound(ctx, 0, ctx.destination);
+        return wavBase64(await ctx.startRendering());
+      }
+      /* ---------- end sound ---------- */
+
+      /* ---------- renderer ---------- */
+      let W = RENDER ? 1920 : innerWidth,
+        H = RENDER ? 1080 : innerHeight;
+      const renderer = new THREE.WebGLRenderer({
+        antialias: true,
+        powerPreference: 'high-performance',
+        preserveDrawingBuffer: RENDER,
+      });
+      let pixelRatio = RENDER ? 1 : Math.min(devicePixelRatio, 1.5);
+      renderer.setPixelRatio(pixelRatio);
+      renderer.setSize(W, H);
+      renderer.toneMapping = THREE.ACESFilmicToneMapping;
+      renderer.toneMappingExposure = 1.0;
+      renderer.shadowMap.enabled = true;
+      renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+      renderer.setClearColor(0x000000, 1);
+      document.body.appendChild(renderer.domElement);
+      const maxAniso = renderer.capabilities.getMaxAnisotropy();
+
+      const scene = new THREE.Scene();
+      const FOG_BASE = new THREE.Color(0xb3c2d2); // pale blue morning haze
+      scene.fog = new THREE.FogExp2(0x000000, FOG_DENSITY);
+      scene.background = new THREE.Color(0x000000);
+      const pmrem = new THREE.PMREMGenerator(renderer);
+      scene.environment = pmrem.fromScene(new RoomEnvironment(), 0.04).texture;
+      scene.environmentIntensity = 0;
+
+      const camera = new THREE.PerspectiveCamera(32, W / H, 0.1, 100);
+      camera.position.set(0, CAM_Y0, CAM_Z0);
+
+      /* ---------- procedural textures (seeded, tileable) ---------- */
+      function tileNoise(size, cells, seed) {
+        const r = mulberry32(seed),
+          g = new Float32Array(cells * cells);
+        for (let i = 0; i < g.length; i++) g[i] = r();
+        const out = new Float32Array(size * size);
+        for (let y = 0; y < size; y++) {
+          const fy = (y / size) * cells,
+            iy = Math.floor(fy),
+            ty = fy - iy,
+            sy = ty * ty * (3 - 2 * ty),
+            y0 = iy % cells,
+            y1 = (iy + 1) % cells;
+          for (let x = 0; x < size; x++) {
+            const fx = (x / size) * cells,
+              ix = Math.floor(fx),
+              tx = fx - ix,
+              sx = tx * tx * (3 - 2 * tx),
+              x0 = ix % cells,
+              x1 = (ix + 1) % cells;
+            const a = g[y0 * cells + x0],
+              b = g[y0 * cells + x1],
+              c = g[y1 * cells + x0],
+              d = g[y1 * cells + x1];
+            out[y * size + x] = (a * (1 - sx) + b * sx) * (1 - sy) + (c * (1 - sx) + d * sx) * sy;
+          }
+        }
+        return out;
+      }
+      function fbmField(size, base, oct, seed) {
+        const acc = new Float32Array(size * size);
+        let amp = 0.5,
+          tot = 0;
+        for (let o = 0; o < oct; o++) {
+          const n = tileNoise(size, base << o, seed + o * 101);
+          for (let i = 0; i < acc.length; i++) acc[i] += n[i] * amp;
+          tot += amp;
+          amp *= 0.5;
+        }
+        for (let i = 0; i < acc.length; i++) acc[i] = clamp((acc[i] / tot - 0.5) * 2.3 + 0.5);
+        return acc;
+      }
+      function canvasTex(size, fill, srgb, repeat = 1) {
+        const c = document.createElement('canvas');
+        c.width = c.height = size;
+        const ctx = c.getContext('2d'),
+          img = ctx.createImageData(size, size);
+        for (let i = 0; i < size * size; i++) {
+          const p = fill(i);
+          img.data[i * 4] = p[0] * 255;
+          img.data[i * 4 + 1] = p[1] * 255;
+          img.data[i * 4 + 2] = p[2] * 255;
+          img.data[i * 4 + 3] = 255;
+        }
+        ctx.putImageData(img, 0, 0);
+        const t = new THREE.CanvasTexture(c);
+        t.wrapS = t.wrapT = THREE.RepeatWrapping;
+        t.repeat.set(repeat, repeat);
+        t.colorSpace = srgb ? THREE.SRGBColorSpace : THREE.NoColorSpace;
+        t.anisotropy = maxAniso;
+        return t;
+      }
+      const TS = 512;
+      const nA = fbmField(TS, 4, 6, 11),
+        nB = fbmField(TS, 8, 4, 23),
+        nC = fbmField(TS, 32, 3, 37),
+        nD = fbmField(TS, 4, 5, 53);
+
+      const stoneMap = canvasTex(
+        TS,
+        (i) => {
+          const base = 0.34 + 0.2 * nA[i] + 0.07 * (nC[i] - 0.5);
+          let r = base,
+            g = base * 0.985,
+            b = base * 0.95;
+          const lichen = smooth(0.62, 0.85, nB[i]) * 0.38;
+          r = lerp(r, 0.24, lichen);
+          g = lerp(g, 0.27, lichen);
+          b = lerp(b, 0.15, lichen);
+          const pit = smooth(0.68, 0.88, nC[i]) * 0.22;
+          return [r * (1 - pit), g * (1 - pit), b * (1 - pit)];
+        },
+        true,
+        1.7
+      );
+      const stoneRough = canvasTex(
+        TS,
+        (i) => {
+          const v = 0.7 + 0.28 * nB[i];
+          return [v, v, v];
+        },
+        false,
+        1.7
+      );
+      const stoneBump = canvasTex(
+        TS,
+        (i) => {
+          const v = 0.6 * nC[i] + 0.4 * nA[i];
+          return [v, v, v];
+        },
+        false,
+        1.7
+      );
+      const soilMap = canvasTex(
+        TS,
+        (i) => {
+          const a = nD[i],
+            c = nC[i];
+          let r = 0.13 + 0.07 * a,
+            g = 0.105 + 0.055 * a,
+            b = 0.085 + 0.04 * a;
+          const leaf = smooth(0.62, 0.8, nB[i]) * 0.6;
+          r = lerp(r, 0.24, leaf);
+          g = lerp(g, 0.17, leaf);
+          b = lerp(b, 0.09, leaf);
+          const k = 0.85 + 0.3 * c;
+          return [r * k, g * k, b * k];
+        },
+        true,
+        1
+      );
+      soilMap.repeat.set(22, 34);
+      const soilBump = canvasTex(
+        TS,
+        (i) => {
+          const v = 0.55 * nC[i] + 0.45 * nB[i];
+          return [v, v, v];
+        },
+        false,
+        1
+      );
+      soilBump.repeat.set(22, 34);
+      const fabricBump = canvasTex(
+        TS,
+        (i) => {
+          const x = (i % TS) / TS;
+          const v =
+            0.5 + 0.38 * Math.sin(Math.PI * 2 * (x * 11) + 3.2 * nA[i]) + 0.12 * (nC[i] - 0.5);
+          return [v, v, v];
+        },
+        false,
+        1
+      );
+      /* ---------- materials ---------- */
+      const P = (o) => new THREE.MeshPhysicalMaterial(o);
+      const stoneMats = [0xbdb8ae, 0xa8a49c, 0xc9c2b4, 0x9a9890].map((c, k) =>
+        P({
+          color: c,
+          map: stoneMap,
+          roughnessMap: stoneRough,
+          roughness: 1.0,
+          bumpMap: stoneBump,
+          bumpScale: 0.5 + k * 0.1,
+          metalness: 0,
+          specularIntensity: 0.35,
+          envMapIntensity: 0.6,
+        })
+      );
+      const groundMat = P({
+        color: 0xffffff,
+        vertexColors: true,
+        map: soilMap,
+        roughness: 0.97,
+        bumpMap: soilBump,
+        bumpScale: 3.0,
+        specularIntensity: 0.25,
+      });
+      const barkMat = P({
+        color: 0x3a322b,
+        roughness: 0.93,
+        bumpMap: stoneBump,
+        bumpScale: 4.0,
+        specularIntensity: 0.2,
+      });
+      const ironMat = P({
+        color: 0x1d1c1b,
+        metalness: 0.85,
+        roughness: 0.58,
+        envMapIntensity: 0.8,
+      });
+      const grassMat = P({
+        color: 0xffffff,
+        roughness: 0.85,
+        specularIntensity: 0.3,
+        sheen: 0.4,
+        sheenColor: 0x8a8460,
+        sheenRoughness: 0.6,
+      });
+
+      /* ---------- terrain ---------- */
+      function groundH(x, z) {
+        const m = smooth(0.9, 2.4, Math.abs(x));
+        const h =
+          0.1 * Math.sin(0.33 * x + 0.21 * z) * Math.sin(0.27 * z - 0.13 * x + 1.0) +
+          0.05 * Math.sin(1.13 * x + 0.6) * Math.cos(0.87 * z + 0.3) +
+          0.025 * Math.sin(2.7 * x + 1.9 * z);
+        const hill = 1.4 * smooth(-26, -70, z) * (0.6 + 0.4 * Math.sin(0.13 * x + 0.8));
+        return h * m - 0.015 * (1 - m) + hill;
+      }
+      {
+        const g = new THREE.PlaneGeometry(76, 110, 152, 220);
+        g.rotateX(-Math.PI / 2);
+        g.translate(0, 0, -35);
+        const pos = g.attributes.position,
+          col = new Float32Array(pos.count * 3);
+        for (let i = 0; i < pos.count; i++) {
+          const x = pos.getX(i),
+            z = pos.getZ(i);
+          pos.setY(i, groundH(x, z));
+          const path = 1 - smooth(0.5, 1.6, Math.abs(x));
+          const damp = 0.5 + 0.5 * Math.sin(x * 0.7 + z * 0.4) * Math.sin(z * 0.23);
+          col[i * 3] = lerp(0.82 + 0.1 * damp, 1.18, path);
+          col[i * 3 + 1] = lerp(0.86 + 0.08 * damp, 1.1, path);
+          col[i * 3 + 2] = lerp(0.8, 1.02, path);
+        }
+        g.setAttribute('color', new THREE.BufferAttribute(col, 3));
+        g.computeVertexNormals();
+        const ground = new THREE.Mesh(g, groundMat);
+        ground.receiveShadow = true;
+        scene.add(ground);
+      }
+
+      /* ---------- sky dome: morning blue overhead, hazy at the horizon, warm around a low sun ---------- */
+      const SUN_POS = new THREE.Vector3(14, 9, -40); // low, upper right of frame, behind the monument
+      const sunDir = SUN_POS.clone().normalize();
+      const ZENITH = new THREE.Color(0x6f9ccf),
+        SUN_TINT = new THREE.Color(0xffc283);
+      const skyMat = new THREE.ShaderMaterial({
+        side: THREE.BackSide,
+        depthWrite: false,
+        fog: false,
+        uniforms: {
+          uFog: { value: new THREE.Color(0) },
+          uZenith: { value: new THREE.Color(0) },
+          uSunCol: { value: new THREE.Color(0) },
+          uSun: { value: sunDir },
+        },
+        vertexShader: \`varying vec3 vDir; void main(){ vec4 w = modelMatrix*vec4(position,1.0); vDir = w.xyz - cameraPosition; gl_Position = projectionMatrix*viewMatrix*w; }\`,
+        fragmentShader: \`uniform vec3 uFog, uZenith, uSunCol, uSun; varying vec3 vDir;
+    void main(){ vec3 d = normalize(vDir); float h = d.y;
+      vec3 col = mix(uFog, uZenith, smoothstep(0.0, 0.55, h));
+      float m = max(dot(d, normalize(uSun)), 0.0);
+      col += uSunCol * (0.35*pow(m, 6.0) + 0.6*pow(m, 60.0)) * smoothstep(-0.1, 0.15, h);   // warm glow around the sun
+      col += uSunCol * 4.0 * smoothstep(0.99955, 0.9998, m);                                // the sun's disc
+      gl_FragColor = vec4(col, 1.0); }\`,
+      });
+      const sky = new THREE.Mesh(new THREE.SphereGeometry(85, 32, 16), skyMat);
+      sky.renderOrder = -1;
+      scene.add(sky);
+
+      /* ---------- tombstones ---------- */
+      function stoneShape(w, h, type) {
+        const s = new THREE.Shape(),
+          hw = w / 2;
+        if (type === 0) {
+          s.moveTo(-hw, 0);
+          s.lineTo(hw, 0);
+          s.lineTo(hw, h - hw);
+          s.absarc(0, h - hw, hw, 0, Math.PI, false);
+          s.lineTo(-hw, 0);
+        } else if (type === 1) {
+          s.moveTo(-hw, 0);
+          s.lineTo(hw, 0);
+          s.lineTo(hw, h * 0.62);
+          s.quadraticCurveTo(hw, h * 0.9, 0, h);
+          s.quadraticCurveTo(-hw, h * 0.9, -hw, h * 0.62);
+          s.lineTo(-hw, 0);
+        } else if (type === 2) {
+          s.moveTo(-hw, 0);
+          s.lineTo(hw, 0);
+          s.lineTo(hw, h * 0.8);
+          s.quadraticCurveTo(hw * 0.95, h * 0.88, hw * 0.58, h * 0.88);
+          s.quadraticCurveTo(hw * 0.25, h * 0.88, 0, h);
+          s.quadraticCurveTo(-hw * 0.25, h * 0.88, -hw * 0.58, h * 0.88);
+          s.quadraticCurveTo(-hw * 0.95, h * 0.88, -hw, h * 0.8);
+          s.lineTo(-hw, 0);
+        } else {
+          const a = w * 0.15,
+            y0 = h * 0.6,
+            y1 = y0 + 2 * a;
+          s.moveTo(-a, 0);
+          s.lineTo(a, 0);
+          s.lineTo(a, y0);
+          s.lineTo(hw, y0);
+          s.lineTo(hw, y1);
+          s.lineTo(a, y1);
+          s.lineTo(a, h);
+          s.lineTo(-a, h);
+          s.lineTo(-a, y1);
+          s.lineTo(-hw, y1);
+          s.lineTo(-hw, y0);
+          s.lineTo(-a, y0);
+          s.lineTo(-a, 0);
+        }
+        return s;
+      }
+      const stoneGroup = new THREE.Group();
+      scene.add(stoneGroup);
+      function addTomb(x, z, scale) {
+        const type = rng() < 0.12 ? 3 : Math.floor(rand(0, 3)),
+          r = rng();
+        const w = (type === 3 ? rand(0.55, 0.75) : rand(0.5, 0.78)) * scale,
+          h = (type === 3 ? rand(1.0, 1.35) : rand(0.7, 1.15)) * scale,
+          d = rand(0.1, 0.17) * scale;
+        const geo = new THREE.ExtrudeGeometry(stoneShape(w, h, type), {
+          depth: d,
+          bevelEnabled: true,
+          bevelThickness: 0.014,
+          bevelSize: 0.014,
+          bevelSegments: 2,
+          curveSegments: 18,
+        });
+        geo.translate(0, 0, -d / 2);
+        const m = new THREE.Mesh(geo, stoneMats[Math.floor(r * 4)]);
+        const grp = new THREE.Group();
+        grp.add(m);
+        if (type !== 3 && rng() < 0.45) {
+          const pl = new THREE.Mesh(
+            new THREE.BoxGeometry(w * 1.18, 0.12 * scale, d * 2.2),
+            m.material
+          );
+          pl.position.y = 0.0;
+          m.position.y = 0.05 * scale;
+          grp.add(pl);
+          pl.castShadow = pl.receiveShadow = true;
+        }
+        grp.position.set(x, groundH(x, z) - rand(0.03, 0.1), z);
+        grp.rotation.set(
+          rand(-0.11, 0.07),
+          rand(-0.3, 0.3) + (x > 0 ? -0.08 : 0.08),
+          rand(-0.09, 0.09)
+        );
+        m.castShadow = m.receiveShadow = true;
+        stoneGroup.add(grp);
+        if (rng() < 0.5) {
+          const mound = new THREE.Mesh(
+            new THREE.SphereGeometry(1, 20, 12, 0, Math.PI * 2, 0, Math.PI / 2),
+            groundMat
+          );
+          mound.scale.set(w * 0.62, 0.11, 0.85);
+          mound.position.set(x + rand(-0.05, 0.05), groundH(x, z + 0.95) - 0.05, z + 0.95);
+          mound.receiveShadow = true;
+          scene.add(mound);
+        }
+      }
+      function addObelisk(x, z) {
+        const h = rand(1.5, 2.1),
+          w = rand(0.32, 0.4),
+          grp = new THREE.Group(),
+          mat = stoneMats[Math.floor(rand(0, 4))];
+        const base = new THREE.Mesh(new THREE.BoxGeometry(w * 1.7, 0.28, w * 1.7), mat);
+        base.position.y = 0.1;
+        const shaft = new THREE.Mesh(new THREE.CylinderGeometry(w * 0.48, w * 0.68, h, 4, 1), mat);
+        shaft.rotation.y = Math.PI / 4;
+        shaft.position.y = 0.24 + h / 2;
+        const tip = new THREE.Mesh(new THREE.ConeGeometry(w * 0.48, w * 0.7, 4), mat);
+        tip.rotation.y = Math.PI / 4;
+        tip.position.y = 0.24 + h + w * 0.35;
+        [base, shaft, tip].forEach((o) => {
+          o.castShadow = o.receiveShadow = true;
+          grp.add(o);
+        });
+        grp.position.set(x, groundH(x, z) - 0.05, z);
+        grp.rotation.set(rand(-0.04, 0.04), rand(0, 1), rand(-0.05, 0.05));
+        stoneGroup.add(grp);
+      }
+      for (const side of [-1, 1]) {
+        for (let z = 6.2; z > -40; z -= rand(2.2, 3.0))
+          addTomb(side * rand(1.55, 2.05), z + rand(-0.4, 0.4), rand(0.9, 1.1));
+        for (let z = 5.0; z > -42; z -= rand(2.4, 3.4))
+          addTomb(side * rand(3.0, 4.2), z + rand(-0.5, 0.5), rand(0.85, 1.15));
+        for (let z = 3.0; z > -44; z -= rand(2.6, 4.0)) {
+          const x = side * rand(5.2, 8.5);
+          if (rng() < 0.18) addObelisk(x, z);
+          else addTomb(x, z, rand(0.9, 1.25));
+        }
+      }
+
+      /* ---------- dead trees ---------- */
+      function makeTree(seed, scale) {
+        const r = mulberry32(seed),
+          geos = [],
+          Y = new THREE.Vector3(0, 1, 0);
+        function seg(a, b, r0, r1, joint) {
+          const d = new THREE.Vector3().subVectors(b, a),
+            L = d.length();
+          const g = new THREE.CylinderGeometry(r1, r0, L, 7, 1);
+          g.translate(0, L / 2, 0);
+          g.applyQuaternion(new THREE.Quaternion().setFromUnitVectors(Y, d.normalize()));
+          g.translate(a.x, a.y, a.z);
+          geos.push(g);
+          if (joint) {
+            const s = new THREE.SphereGeometry(r1 * 1.02, 8, 6);
+            s.translate(b.x, b.y, b.z);
+            geos.push(s);
+          }
+        }
+        function branch(p, dir, len, rad, depth) {
+          let cur = p.clone(),
+            d = dir.clone(),
+            r0 = rad * (depth === 0 ? 1.7 : 1);
+          for (let i = 0; i < 3; i++) {
+            d.add(
+              new THREE.Vector3((r() - 0.5) * 0.7, (r() - 0.45) * 0.35, (r() - 0.5) * 0.7)
+            ).normalize();
+            const nxt = cur.clone().addScaledVector(d, len / 3),
+              r1 = rad * (1 - (0.5 * (i + 1)) / 3);
+            seg(cur, nxt, r0, r1, depth < 3);
+            cur = nxt;
+            r0 = r1;
+          }
+          if (depth >= 5 || rad < 0.012) return;
+          const kids = depth < 1 ? 3 : 2 + (r() < 0.4 ? 1 : 0);
+          for (let k = 0; k < kids; k++) {
+            const nd = d
+              .clone()
+              .add(new THREE.Vector3((r() - 0.5) * 1.7, r() * 0.7 - 0.15, (r() - 0.5) * 1.7))
+              .normalize();
+            branch(cur, nd, len * (0.6 + r() * 0.16), r0 * 0.74, depth + 1);
+          }
+        }
+        branch(
+          new THREE.Vector3(0, -0.3, 0),
+          new THREE.Vector3(0, 1, 0),
+          3.4 * scale,
+          0.2 * scale,
+          0
+        );
+        return mergeGeometries(geos);
+      }
+      [
+        [-5.6, -13, 1.25, 7],
+        [6.8, -19, 1.1, 19],
+        [-8.5, -27, 1.3, 33],
+        [4.6, -35, 1.0, 41],
+        [9.5, -8, 0.9, 57],
+        [-11, -6, 1.0, 71],
+        [12, -30, 1.2, 83],
+      ].forEach(([x, z, s, seed]) => {
+        const t = new THREE.Mesh(makeTree(seed, s), barkMat);
+        t.position.set(x, groundH(x, z), z);
+        t.rotation.y = seed;
+        t.castShadow = true;
+        t.receiveShadow = true;
+        scene.add(t);
+      });
+
+      /* ---------- gate and iron fence (at the far end of the aisle) ---------- */
+      const GATE_Z = -27;
+      {
+        const pillarMat = stoneMats[1];
+        for (const side of [-1, 1]) {
+          const pg = new THREE.Group();
+          const p = new THREE.Mesh(new THREE.BoxGeometry(0.5, 2.5, 0.5), pillarMat);
+          p.position.y = 1.25;
+          const cap = new THREE.Mesh(new THREE.BoxGeometry(0.64, 0.14, 0.64), pillarMat);
+          cap.position.y = 2.57;
+          const fin = new THREE.Mesh(new THREE.SphereGeometry(0.17, 20, 14), pillarMat);
+          fin.position.y = 2.82;
+          [p, cap, fin].forEach((o) => {
+            o.castShadow = o.receiveShadow = true;
+            pg.add(o);
+          });
+          pg.position.set(side * 1.65, groundH(side * 1.65, GATE_Z), GATE_Z);
+          scene.add(pg);
+          // open gate leaf, hinged at the pillar, swung toward the camera
+          const bars = [];
+          for (let i = 0; i < 8; i++) {
+            const b = new THREE.CylinderGeometry(0.013, 0.013, 1.9, 6);
+            b.translate(0.08 + i * 0.16, 0.98, 0);
+            bars.push(b);
+            const tip = new THREE.ConeGeometry(0.03, 0.12, 6);
+            tip.translate(0.08 + i * 0.16, 1.98, 0);
+            bars.push(tip);
+          }
+          for (const y of [0.18, 1.55, 1.8]) {
+            const r = new THREE.BoxGeometry(1.24, 0.035, 0.035);
+            r.translate(0.64, y, 0);
+            bars.push(r);
+          }
+          const leaf = new THREE.Mesh(mergeGeometries(bars.map((g) => g.toNonIndexed())), ironMat);
+          leaf.castShadow = true;
+          const hinge = new THREE.Group();
+          hinge.position.set(side * 1.38, groundH(side * 1.38, GATE_Z), GATE_Z + 0.02);
+          hinge.rotation.y = side < 0 ? -1.15 : Math.PI + 1.15;
+          hinge.add(leaf);
+          scene.add(hinge);
+        }
+        // arch
+        const arch = new THREE.Mesh(new THREE.TorusGeometry(1.4, 0.022, 8, 48, Math.PI), ironMat);
+        arch.position.set(0, 2.45, GATE_Z);
+        arch.castShadow = true;
+        scene.add(arch);
+        // fence
+        const barGeo = mergeGeometries([
+          new THREE.CylinderGeometry(0.011, 0.011, 1.5, 5).translate(0, 0.75, 0).toNonIndexed(),
+          new THREE.ConeGeometry(0.026, 0.1, 5).translate(0, 1.55, 0).toNonIndexed(),
+        ]);
+        const xs = [];
+        for (const side of [-1, 1]) for (let x = 2.0; x < 16; x += 0.15) xs.push(side * x);
+        const fence = new THREE.InstancedMesh(barGeo, ironMat, xs.length);
+        const m4 = new THREE.Matrix4();
+        xs.forEach((x, i) => {
+          m4.makeRotationZ((hash1(i * 3.1) - 0.5) * 0.06);
+          m4.setPosition(x, groundH(x, GATE_Z) - 0.05, GATE_Z);
+          fence.setMatrixAt(i, m4);
+        });
+        fence.castShadow = true;
+        scene.add(fence);
+        for (const side of [-1, 1])
+          for (const y of [0.25, 1.32]) {
+            const r = new THREE.Mesh(new THREE.BoxGeometry(14, 0.03, 0.03), ironMat);
+            r.position.set(side * 9, y + 0.1, GATE_Z);
+            r.castShadow = true;
+            scene.add(r);
+          }
+      }
+
+      /* ---------- dead grass ---------- */
+      {
+        const N = 5200,
+          blade = new THREE.ConeGeometry(0.008, 0.18, 3, 1);
+        blade.translate(0, 0.09, 0);
+        const grass = new THREE.InstancedMesh(blade, grassMat, N),
+          m4 = new THREE.Matrix4(),
+          q = new THREE.Quaternion(),
+          e = new THREE.Euler(),
+          s = new THREE.Vector3(),
+          p = new THREE.Vector3(),
+          c = new THREE.Color();
+        let n = 0;
+        while (n < N) {
+          const x = rand(-13, 13),
+            z = rand(-40, 8.5);
+          if (Math.abs(x) < 0.75 + rng() * 0.6) continue;
+          e.set(rand(-0.45, 0.45), rand(0, 6.28), rand(-0.45, 0.45));
+          q.setFromEuler(e);
+          s.set(rand(0.7, 1.3), rand(0.45, 1.5), rand(0.7, 1.3));
+          p.set(x, groundH(x, z) - 0.02, z);
+          m4.compose(p, q, s);
+          grass.setMatrixAt(n, m4);
+          c.setRGB(lerp(0.14, 0.27, rng()), lerp(0.13, 0.23, rng()), lerp(0.08, 0.12, rng()));
+          grass.setColorAt(n, c);
+          n++;
+        }
+        grass.receiveShadow = true;
+        scene.add(grass);
+      }
+
+      /* ---------- pumpkins ---------- */
+      const pumpkinColorDark = new THREE.Color(0x5a1e06),
+        pumpkinColorLight = new THREE.Color(0xd9661c);
+      function pumpkinDeform(v) {
+        const th = Math.atan2(v.z, v.x),
+          lobe = Math.pow(Math.abs(Math.cos(th * 4)), 0.5);
+        const rf = (1 - 0.075 * (1 - lobe)) * (1 - 0.06 * v.y * v.y);
+        let y = v.y * 0.72 - 0.2 * smooth(0.72, 1.0, v.y) + 0.08 * smooth(-0.8, -1.0, v.y);
+        return { p: new THREE.Vector3(v.x * rf, y, v.z * rf), lobe };
+      }
+      const pumpkinGeo = (() => {
+        let g = new THREE.SphereGeometry(1, 64, 40);
+        g.deleteAttribute('uv');
+        g.deleteAttribute('normal');
+        g = mergeVertices(g);
+        const pos = g.attributes.position,
+          col = new Float32Array(pos.count * 3),
+          v = new THREE.Vector3(),
+          c = new THREE.Color();
+        for (let i = 0; i < pos.count; i++) {
+          v.fromBufferAttribute(pos, i).normalize();
+          const d = pumpkinDeform(v);
+          pos.setXYZ(i, d.p.x, d.p.y, d.p.z);
+          c.copy(pumpkinColorDark).lerp(
+            pumpkinColorLight,
+            Math.pow(d.lobe, 1.6) * (0.75 + 0.25 * (1 - Math.abs(v.y)))
+          );
+          col[i * 3] = c.r;
+          col[i * 3 + 1] = c.g;
+          col[i * 3 + 2] = c.b;
+        }
+        g.setAttribute('color', new THREE.BufferAttribute(col, 3));
+        g.computeVertexNormals();
+        return g;
+      })();
+      const pumpkinMat = P({
+        color: 0xffffff,
+        vertexColors: true,
+        roughness: 0.52,
+        clearcoat: 0.35,
+        clearcoatRoughness: 0.45,
+        sheen: 0.3,
+        sheenColor: 0xffa060,
+        specularIntensity: 0.6,
+      });
+      const stemMat = P({ color: 0x4a4426, roughness: 0.82, bumpMap: stoneBump, bumpScale: 3 });
+      function subdivide(geo, times) {
+        let g = geo.index ? geo.toNonIndexed() : geo;
+        for (let k = 0; k < times; k++) {
+          const a = g.attributes.position.array,
+            out = [];
+          for (let i = 0; i < a.length; i += 9) {
+            const A = [a[i], a[i + 1], a[i + 2]],
+              B = [a[i + 3], a[i + 4], a[i + 5]],
+              C = [a[i + 6], a[i + 7], a[i + 8]];
+            const mid = (p, q) => [(p[0] + q[0]) / 2, (p[1] + q[1]) / 2, (p[2] + q[2]) / 2];
+            const ab = mid(A, B),
+              bc = mid(B, C),
+              ca = mid(C, A);
+            out.push(
+              ...A,
+              ...ab,
+              ...ca,
+              ...ab,
+              ...B,
+              ...bc,
+              ...ca,
+              ...bc,
+              ...C,
+              ...ab,
+              ...bc,
+              ...ca
+            );
+          }
+          g = new THREE.BufferGeometry();
+          g.setAttribute('position', new THREE.Float32BufferAttribute(out, 3));
+        }
+        return g;
+      }
+      const faceGeo = (() => {
+        const shapes = [];
+        const tri = (pts) => {
+          const s = new THREE.Shape();
+          s.moveTo(...pts[0]);
+          pts.slice(1).forEach((p) => s.lineTo(...p));
+          s.closePath();
+          return s;
+        };
+        shapes.push(
+          tri([
+            [0.12, 0.08],
+            [0.42, 0.17],
+            [0.25, 0.38],
+          ]),
+          tri([
+            [-0.12, 0.08],
+            [-0.25, 0.38],
+            [-0.42, 0.17],
+          ]),
+          tri([
+            [-0.06, -0.03],
+            [0.06, -0.03],
+            [0, 0.07],
+          ])
+        );
+        const yu = (x) => -0.1 - 0.1 * (1 - (x / 0.5) ** 2),
+          yl = (x) => -0.14 - 0.26 * (1 - (x / 0.5) ** 2);
+        const m = new THREE.Shape();
+        m.moveTo(-0.5, yu(-0.5));
+        for (let x = -0.45; x <= 0.451; x += 0.05) {
+          const xr = Math.round(x * 100) / 100;
+          if (xr === -0.05) {
+            m.lineTo(-0.05, yl(-0.05));
+            m.lineTo(-0.05, yl(-0.05) + 0.08);
+            m.lineTo(0.05, yl(0.05) + 0.08);
+            m.lineTo(0.05, yl(0.05));
+            continue;
+          }
+          if (xr === 0 || xr === 0.05) continue;
+          m.lineTo(xr, yl(xr));
+        }
+        m.lineTo(0.5, yu(0.5));
+        for (let x = 0.45; x >= -0.451; x -= 0.05) {
+          const xr = Math.round(x * 100) / 100;
+          if (xr === 0.22) {
+            m.lineTo(0.22, yu(0.22));
+            m.lineTo(0.22, yu(0.22) - 0.08);
+            m.lineTo(0.12, yu(0.12) - 0.08);
+            m.lineTo(0.12, yu(0.12));
+            continue;
+          }
+          if (xr === -0.12) {
+            m.lineTo(-0.12, yu(-0.12));
+            m.lineTo(-0.12, yu(-0.12) - 0.08);
+            m.lineTo(-0.22, yu(-0.22) - 0.08);
+            m.lineTo(-0.22, yu(-0.22));
+            continue;
+          }
+          if ((xr > 0.12 && xr < 0.22) || (xr > -0.22 && xr < -0.12)) continue;
+          m.lineTo(xr, yu(xr));
+        }
+        m.closePath();
+        shapes.push(m);
+        const flat = subdivide(new THREE.ShapeGeometry(shapes, 1), 3),
+          pos = flat.attributes.position;
+        const col = new Float32Array(pos.count * 3),
+          v = new THREE.Vector3();
+        for (let i = 0; i < pos.count; i++) {
+          const x = pos.getX(i),
+            y = pos.getY(i);
+          v.set(x, y, Math.sqrt(Math.max(0, 1 - x * x - y * y))).normalize();
+          const d = pumpkinDeform(v);
+          d.p.addScaledVector(v, 0.014);
+          pos.setXYZ(i, d.p.x, d.p.y, d.p.z);
+          const k = 0.55 + 0.45 * smooth(0.55, 0.0, Math.hypot(x * 0.8, y + 0.05));
+          col[i * 3] = k;
+          col[i * 3 + 1] = k * k;
+          col[i * 3 + 2] = k * k * k;
+        }
+        flat.setAttribute('color', new THREE.BufferAttribute(col, 3));
+        return flat;
+      })();
+      const pumpkins = [];
+      function addPumpkin(x, z, r, carved, withLight) {
+        const g = new THREE.Group(),
+          body = new THREE.Mesh(pumpkinGeo, pumpkinMat);
+        body.castShadow = body.receiveShadow = true;
+        g.add(body);
+        const st = new THREE.CylinderGeometry(0.045, 0.08, 0.26, 7, 5);
+        const sp = st.attributes.position;
+        for (let i = 0; i < sp.count; i++) {
+          const yy = sp.getY(i) + 0.13;
+          sp.setX(i, sp.getX(i) + 0.1 * yy * yy);
+        }
+        st.computeVertexNormals();
+        const stem = new THREE.Mesh(st, stemMat);
+        stem.position.y = 0.58;
+        stem.rotation.y = rand(0, 6);
+        stem.castShadow = true;
+        g.add(stem);
+        let face = null,
+          faceMat = null,
+          light = null;
+        if (carved) {
+          faceMat = new THREE.MeshBasicMaterial({
+            color: 0x000000,
+            vertexColors: true,
+            polygonOffset: true,
+            polygonOffsetFactor: -2,
+            polygonOffsetUnits: -2,
+          });
+          face = new THREE.Mesh(faceGeo, faceMat);
+          g.add(face);
+          if (withLight) {
+            light = new THREE.PointLight(0xff7a2a, 0, 5, 2);
+            light.position.set(0, 0.25, 0.55);
+            g.add(light);
+          }
+        }
+        g.scale.setScalar(r);
+        g.position.set(x, groundH(x, z) + r * 0.62, z);
+        g.rotation.y = Math.atan2(0 - x, 3.0 - z) + rand(-0.18, 0.18);
+        g.rotation.z = rand(-0.08, 0.08);
+        scene.add(g);
+        pumpkins.push({ g, faceMat, light, seed: pumpkins.length * 13.7 + 2.1 });
+      }
+      addPumpkin(-0.98, -1.35, 0.3, true, true);
+      addPumpkin(1.18, -2.75, 0.34, true, true);
+      addPumpkin(1.42, -2.25, 0.2, false);
+      addPumpkin(-1.38, 4.6, 0.26, true, true);
+      addPumpkin(-2.4, 2.1, 0.22, false);
+      addPumpkin(1.55, -6.6, 0.27, true, false);
+      addPumpkin(-1.75, -11.2, 0.3, true, false);
+      addPumpkin(2.6, -8.4, 0.24, false);
+      addPumpkin(1.6, -17.5, 0.28, true, false);
+      addPumpkin(-2.9, -3.8, 0.2, false);
+
+      /* ---------- ground mist (soft sheets, never in the dolly path) ---------- */
+      const mistUniforms = {
+        uTime: { value: 0 },
+        uColor: { value: new THREE.Color(0) },
+        uCandlePos: { value: new THREE.Vector3() },
+        uCandleCol: { value: new THREE.Color(1.0, 0.5, 0.18) },
+        uCandleI: { value: 0 },
+        uCam: { value: new THREE.Vector3() },
+        uFogDensity: { value: FOG_DENSITY },
+      };
+      function mistMaterial(vertical, opacity) {
+        return new THREE.ShaderMaterial({
+          transparent: true,
+          depthWrite: false,
+          fog: false,
+          side: THREE.DoubleSide,
+          uniforms: {
+            ...mistUniforms,
+            uVertical: { value: vertical ? 1 : 0 },
+            uOpacity: { value: opacity },
+          },
+          vertexShader: \`varying vec3 vW; void main(){ vec4 w = modelMatrix*vec4(position,1.0); vW = w.xyz; gl_Position = projectionMatrix*viewMatrix*w; }\`,
+          fragmentShader: \`
+      uniform float uTime, uOpacity, uFogDensity, uVertical, uCandleI; uniform vec3 uColor, uCandlePos, uCandleCol, uCam; varying vec3 vW;
+      float hash(vec2 p){ p = fract(p*vec2(123.34,456.21)); p += dot(p, p+45.32); return fract(p.x*p.y); }
+      float vn(vec2 p){ vec2 i = floor(p), f = fract(p), u = f*f*(3.0-2.0*f);
+        return mix(mix(hash(i), hash(i+vec2(1,0)), u.x), mix(hash(i+vec2(0,1)), hash(i+vec2(1,1)), u.x), u.y); }
+      float fbm(vec2 p){ float a = 0.5, s = 0.0; for(int i=0;i<4;i++){ s += a*vn(p); p = p*2.03 + vec2(1.7,9.2); a *= 0.5; } return s; }
+      void main(){
+        vec2 q = uVertical > 0.5 ? vec2(vW.x*0.32 + uTime*0.05, vW.y*0.75 - uTime*0.012) : vec2(vW.x*0.22 + uTime*0.04, vW.z*0.2 + uTime*0.025);
+        float n = fbm(q + 1.3*fbm(q*1.6 - uTime*0.03));
+        float a = smoothstep(0.38, 0.86, n) * uOpacity;
+        if (uVertical > 0.5) { a *= smoothstep(0.0, 0.6, vW.y) * smoothstep(3.0, 1.1, vW.y) * smoothstep(13.0, 5.0, abs(vW.x)); }
+        else { a *= smoothstep(15.0, 4.0, abs(vW.x)); }
+        float dc = distance(uCam, vW); a *= smoothstep(0.9, 3.5, dc);
+        float fogF = 1.0 - exp(-pow(uFogDensity*dc, 2.0));
+        float dl = distance(vW, uCandlePos); float w = uCandleI / (0.3 + dl*dl);
+        vec3 col = uColor + uCandleCol * w * 0.22;
+        a = a * (1.0 - 0.75*fogF) * (1.0 + min(w, 3.0)*0.35);
+        gl_FragColor = vec4(col, clamp(a, 0.0, 1.0));
+      }\`,
+        });
+      }
+      const mistGroup = new THREE.Group();
+      scene.add(mistGroup);
+      {
+        const h1 = new THREE.Mesh(new THREE.PlaneGeometry(36, 66), mistMaterial(false, 0.55));
+        h1.rotation.x = -Math.PI / 2;
+        h1.position.set(0, 0.2, -24);
+        mistGroup.add(h1);
+        const h2 = new THREE.Mesh(new THREE.PlaneGeometry(36, 60), mistMaterial(false, 0.3));
+        h2.rotation.x = -Math.PI / 2;
+        h2.position.set(0, 0.55, -27);
+        mistGroup.add(h2);
+        for (const z of [-3.5, -9, -15.5, -22.5]) {
+          const v = new THREE.Mesh(new THREE.PlaneGeometry(26, 3.2), mistMaterial(true, 0.5));
+          v.position.set(0, 1.5, z);
+          mistGroup.add(v);
+        }
+      }
+
+      /* ==========================================================================
+   THE MONUMENT: three carved stone shards on a buried boulder, glowing blue
+   to violet along their edges and veins, with a witch's hat hovering above.
+   ========================================================================== */
+      const MON_Z = -4.5,
+        MON_LIFT = 0.12,
+        PX = 0.00685; // reference drawing: 1 px = 6.85 mm
+      function vnoise3(x, y, z) {
+        const xi = Math.floor(x),
+          yi = Math.floor(y),
+          zi = Math.floor(z),
+          s = (t) => t * t * (3 - 2 * t),
+          u = s(x - xi),
+          v = s(y - yi),
+          w = s(z - zi);
+        const hh = (a, b, c) => hash1(a * 127.1 + b * 311.7 + c * 74.7),
+          l = (a, b, t) => a + (b - a) * t;
+        return l(
+          l(
+            l(hh(xi, yi, zi), hh(xi + 1, yi, zi), u),
+            l(hh(xi, yi + 1, zi), hh(xi + 1, yi + 1, zi), u),
+            v
+          ),
+          l(
+            l(hh(xi, yi, zi + 1), hh(xi + 1, yi, zi + 1), u),
+            l(hh(xi, yi + 1, zi + 1), hh(xi + 1, yi + 1, zi + 1), u),
+            v
+          ),
+          w
+        );
+      }
+      const GN = \`
+  float gh(vec3 p){ p = fract(p*0.3183099 + 0.1); p *= 17.0; return fract(p.x*p.y*p.z*(p.x+p.y+p.z)); }
+  float gn(vec3 x){ vec3 i = floor(x), f = fract(x); f = f*f*(3.0-2.0*f);
+    return mix(mix(mix(gh(i), gh(i+vec3(1,0,0)), f.x), mix(gh(i+vec3(0,1,0)), gh(i+vec3(1,1,0)), f.x), f.y),
+               mix(mix(gh(i+vec3(0,0,1)), gh(i+vec3(1,0,1)), f.x), mix(gh(i+vec3(0,1,1)), gh(i+vec3(1,1,1)), f.x), f.y), f.z); }
+\`;
+      const monUni = {
+        uGlow: { value: 0 },
+        uTime: { value: 0 },
+        uTop: { value: new THREE.Color(0x6aaee6) },
+        uBot: { value: new THREE.Color(0x6a6ee6) },
+        uOrigin: { value: new THREE.Vector3(0, 0, MON_Z) },
+      };
+      const glowStoneMat = P({
+        color: 0x4c5262,
+        map: stoneMap,
+        roughnessMap: stoneRough,
+        roughness: 1,
+        bumpMap: stoneBump,
+        bumpScale: 1.4,
+        specularIntensity: 0.45,
+        envMapIntensity: 0.7,
+      });
+      glowStoneMat.onBeforeCompile = (sh) => {
+        Object.assign(sh.uniforms, monUni);
+        sh.vertexShader =
+          'uniform vec3 uOrigin; varying vec3 vMon;\\n' +
+          sh.vertexShader.replace(
+            '#include <begin_vertex>',
+            '#include <begin_vertex>\\n  vMon = (modelMatrix * vec4(transformed, 1.0)).xyz - uOrigin;'
+          );
+        sh.fragmentShader =
+          'uniform float uGlow, uTime; uniform vec3 uTop, uBot; varying vec3 vMon;\\n' +
+          GN +
+          sh.fragmentShader.replace(
+            '#include <emissivemap_fragment>',
+            \`#include <emissivemap_fragment>
+      float k = clamp(0.5 + 0.38*(vMon.y - 1.1) - 0.3*vMon.x, 0.0, 1.0);          // light blue top-left, violet bottom-right
+      vec3 gcol = mix(uBot, uTop, k);
+      float rim = pow(1.0 - abs(dot(normalize(normal), normalize(vViewPosition))), 3.0);
+      float r1 = 1.0 - abs(gn(vMon*2.4 + vec3(0.0, uTime*0.04, 0.0))*2.0 - 1.0);
+      float r2 = 1.0 - abs(gn(vMon*5.5 + 11.0)*2.0 - 1.0);
+      float vein = smoothstep(0.982, 0.999, r1) + 0.5*smoothstep(0.99, 0.9995, r2);   // sparse, thin cracks
+      float pulse = 0.8 + 0.2*sin(uTime*2.2 - vMon.y*3.0);
+      totalEmissiveRadiance += gcol * uGlow * (0.08 + 1.9*rim + 3.0*vein*pulse);\`
+          );
+      };
+      glowStoneMat.customProgramCacheKey = () => 'glow-stone';
+      const monument = new THREE.Group();
+      monument.position.set(0, MON_LIFT, MON_Z);
+      scene.add(monument);
+      function shard(pts, depth, zOff, seed) {
+        const s = new THREE.Shape(),
+          m2 = pts.map(([px, py]) => [(px - 227) * PX, (575 - py) * PX]);
+        const cx = m2.reduce((a, q) => a + q[0], 0) / m2.length,
+          cy = m2.reduce((a, q) => a + q[1], 0) / m2.length;
+        m2.forEach(([x, y], i) => {
+          x = cx + (x - cx) * 0.95;
+          y = cy + (y - cy) * 0.95;
+          if (i) s.lineTo(x, y);
+          else s.moveTo(x, y);
+        });
+        s.closePath(); // shrink a little so the gaps stay open
+        const g = new THREE.ExtrudeGeometry(s, {
+          depth,
+          bevelEnabled: true,
+          bevelThickness: 0.06,
+          bevelSize: 0.03,
+          bevelSegments: 3,
+          curveSegments: 1,
+        });
+        g.translate(0, 0, -depth / 2 + zOff);
+        const pos = g.attributes.position,
+          v = new THREE.Vector3();
+        for (let i = 0; i < pos.count; i++) {
+          // rough it up; shared corners move together, so no cracks
+          v.fromBufferAttribute(pos, i);
+          const n = (a, b) => vnoise3(v.x * a + seed, v.y * a + b, v.z * a) - 0.5;
+          v.x += 0.05 * n(5, 1) + 0.015 * n(17, 4);
+          v.y += 0.05 * n(5, 7) + 0.015 * n(17, 9);
+          v.z += 0.06 * n(5, 13);
+          pos.setXYZ(i, v.x, v.y, v.z);
+        }
+        g.computeVertexNormals();
+        const m = new THREE.Mesh(g, glowStoneMat);
+        m.castShadow = m.receiveShadow = true;
+        monument.add(m);
+      }
+      shard(
+        [
+          [166, 350],
+          [226, 397],
+          [140, 575],
+          [82, 528],
+        ],
+        0.42,
+        0.0,
+        3.1
+      ); // leaning slab
+      shard(
+        [
+          [198, 283],
+          [258, 330],
+          [233, 383],
+          [172, 338],
+        ],
+        0.36,
+        0.04,
+        7.7
+      ); // top block
+      shard(
+        [
+          [268, 356],
+          [372, 575],
+          [207, 488],
+        ],
+        0.4,
+        -0.03,
+        12.9
+      ); // triangle
+      {
+        // the boulder it stands on, half buried
+        const g = new THREE.IcosahedronGeometry(1, 4),
+          pos = g.attributes.position,
+          v = new THREE.Vector3();
+        for (let i = 0; i < pos.count; i++) {
+          v.fromBufferAttribute(pos, i);
+          const k =
+            1 +
+            0.18 * (vnoise3(v.x * 2.2, v.y * 2.2, v.z * 2.2) - 0.5) +
+            0.06 * (vnoise3(v.x * 6 + 3, v.y * 6, v.z * 6) - 0.5);
+          pos.setXYZ(i, v.x * k * 1.45, v.y * k * 0.38, v.z * k * 0.85);
+        }
+        g.computeVertexNormals();
+        const base = new THREE.Mesh(
+          g,
+          P({
+            color: 0x5d5b58,
+            map: stoneMap,
+            roughnessMap: stoneRough,
+            roughness: 1,
+            bumpMap: stoneBump,
+            bumpScale: 1.6,
+            specularIntensity: 0.3,
+          })
+        );
+        base.position.set(0.02, groundH(0, MON_Z) - 0.02, MON_Z);
+        base.castShadow = base.receiveShadow = true;
+        scene.add(base);
+      }
+      // its glow on the ground, the fog and the underside of the hat
+      const monLights = [
+        [new THREE.PointLight(0x6aaee6, 0, 0, 2), [-0.5, 1.2, 1.6], 1.0],
+        [new THREE.PointLight(0x6a6ee6, 0, 0, 2), [0.7, 0.45, 1.5], 1.0],
+        [new THREE.PointLight(0x7a9ef0, 0, 0, 2), [0, 2.25, 0.35], 0.45],
+      ];
+      monLights.forEach(([l, p]) => {
+        l.position.set(...p);
+        monument.add(l);
+      });
+
+      // the hat: crooked cone, curled brim, band and gold buckle
+      const HAT_Y = MON_LIFT + 2.0 + 0.32;
+      const hat = new THREE.Group();
+      hat.position.set(-0.08, HAT_Y, MON_Z);
+      scene.add(hat);
+      const hatRed = new THREE.Color(0x8f3434),
+        hatPink = new THREE.Color(0xe9b7ac);
+      const hatMat = P({
+        color: 0xffffff,
+        vertexColors: true,
+        roughness: 0.86,
+        sheen: 0.6,
+        sheenColor: 0xf0b8a8,
+        sheenRoughness: 0.5,
+        specularIntensity: 0.3,
+        side: THREE.DoubleSide,
+        bumpMap: fabricBump,
+        bumpScale: 0.6,
+      });
+      {
+        const H = 1.35,
+          pts = [];
+        for (let i = 0; i <= 48; i++) {
+          const t = i / 48;
+          pts.push(new THREE.Vector2(0.42 * Math.pow(1 - t, 1.1) + 0.012, t * H));
+        }
+        const g = new THREE.LatheGeometry(pts, 72, Math.PI, Math.PI * 2),
+          pos = g.attributes.position,
+          col = new Float32Array(pos.count * 3),
+          c = new THREE.Color();
+        for (let i = 0; i < pos.count; i++) {
+          let x = pos.getX(i),
+            y = pos.getY(i),
+            z = pos.getZ(i);
+          const hn = y / H,
+            phi = Math.atan2(x, z);
+          const wr =
+            1 +
+            0.06 * Math.sin(hn * 15 + phi * 2) * smooth(0.1, 0.6, hn) +
+            0.03 * Math.sin(phi * 5 + hn * 9);
+          x *= wr;
+          z *= wr;
+          x += -0.45 * Math.pow(hn, 2.2) - 0.12 * smooth(0.75, 1, hn); // tip bends to the left
+          y -= 0.14 * smooth(0.72, 1, hn) * hn; // and droops
+          pos.setXYZ(i, x, y, z);
+          const hl =
+            smooth(0.1, 0.85, Math.sin(phi)) *
+            smooth(0.12, 0.45, hn) *
+            (1 - smooth(0.85, 1, hn)) *
+            0.75;
+          c.copy(hatRed).lerp(hatPink, hl);
+          col[i * 3] = c.r;
+          col[i * 3 + 1] = c.g;
+          col[i * 3 + 2] = c.b;
+        }
+        g.setAttribute('color', new THREE.BufferAttribute(col, 3));
+        g.computeVertexNormals();
+        const cone = new THREE.Mesh(g, hatMat);
+        cone.castShadow = cone.receiveShadow = true;
+        hat.add(cone);
+      }
+      {
+        const prof = [
+          [0.3, 0.02],
+          [0.6, 0.0],
+          [0.85, 0.03],
+          [0.98, 0.1],
+          [1.0, 0.12],
+          [0.99, 0.1],
+          [0.85, 0.0],
+          [0.6, -0.025],
+          [0.3, -0.01],
+        ];
+        const g = new THREE.LatheGeometry(
+          prof.map((p) => new THREE.Vector2(...p)),
+          96,
+          Math.PI,
+          Math.PI * 2
+        );
+        const pos = g.attributes.position,
+          col = new Float32Array(pos.count * 3),
+          c = new THREE.Color();
+        for (let i = 0; i < pos.count; i++) {
+          let x = pos.getX(i),
+            y = pos.getY(i),
+            z = pos.getZ(i);
+          const r = Math.hypot(x, z),
+            phi = Math.atan2(x, z),
+            top = i % prof.length < 5;
+          y += 0.035 * Math.sin(phi * 3 + 1) * smooth(0.4, 1, r);
+          y += 0.16 * smooth(0.55, 1, r) * Math.pow(Math.max(0, Math.sin(phi)), 3); // right edge curls up
+          y -= 0.05 * smooth(0.6, 1, r) * Math.max(0, -Math.sin(phi));
+          pos.setXYZ(i, x, y, z * 0.82);
+          c.copy(hatRed).lerp(hatPink, smooth(0.7, 1, r) * Math.max(0, Math.sin(phi)) * 0.6);
+          if (!top) c.multiplyScalar(0.6);
+          col[i * 3] = c.r;
+          col[i * 3 + 1] = c.g;
+          col[i * 3 + 2] = c.b;
+        }
+        g.setAttribute('color', new THREE.BufferAttribute(col, 3));
+        g.computeVertexNormals();
+        const brim = new THREE.Mesh(g, hatMat);
+        brim.castShadow = brim.receiveShadow = true;
+        hat.add(brim);
+      }
+      {
+        const band = new THREE.Mesh(
+          new THREE.CylinderGeometry(0.432, 0.448, 0.13, 72, 1, true),
+          P({
+            color: 0x5a1f1f,
+            roughness: 0.8,
+            sheen: 0.4,
+            sheenColor: 0xc08070,
+            side: THREE.DoubleSide,
+          })
+        );
+        band.position.y = 0.075;
+        band.castShadow = true;
+        hat.add(band);
+        const a = 0.55,
+          piv = new THREE.Group();
+        piv.position.set(Math.sin(a) * 0.455, 0.075, Math.cos(a) * 0.455);
+        piv.rotation.y = a;
+        hat.add(piv);
+        const buckle = new THREE.Mesh(
+          new THREE.TorusGeometry(0.075, 0.014, 8, 4),
+          P({ color: 0xf2c230, metalness: 1, roughness: 0.32, clearcoat: 0.3 })
+        );
+        buckle.rotation.z = Math.PI / 4;
+        piv.add(buckle);
+      }
+
+      /* ---------- lights ---------- */
+      const sun = new THREE.DirectionalLight(0xffcf9a, 0); // low warm morning sun, backlighting the scene
+      sun.position.copy(SUN_POS);
+      sun.target.position.set(0, 0, -12);
+      sun.castShadow = true;
+      sun.shadow.mapSize.set(2048, 2048);
+      Object.assign(sun.shadow.camera, {
+        left: -27,
+        right: 27,
+        top: 27,
+        bottom: -27,
+        near: 1,
+        far: 90,
+      });
+      sun.shadow.bias = -0.0005;
+      sun.shadow.normalBias = 0.03;
+      scene.add(sun, sun.target);
+      const hemi = new THREE.HemisphereLight(0xbcd0e8, 0x5e5040, 0);
+      scene.add(hemi);
+
+      /* ---------- "Happy Halloween": a burning title in the top-left corner ----------
+   Screen-space pass after tone mapping, placed in the lower part of the frame so it frames
+   the monument instead of covering it. The letters ignite left to right behind a hot edge,
+   then burn: fire flowing upward inside, a charred rim, an orange halo, heat shimmer and
+   embers rising off the words. */
+      // <fire-title>
+      const TITLE_T0 = 9.8,
+        TITLE_W = 0.42,
+        TITLE_CY = 0.867,
+        TITLE_LEFT = 0.05; // start, rect width, rect centre (from bottom), left margin
+      const TITLE_FRAG = \`
+  uniform sampler2D tDiffuse, tMask; uniform float uT, uAspect, uOn; uniform vec4 uRect; varying vec2 vUv;
+  float hh(vec2 p){ return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453); }
+  float vn(vec2 p){ vec2 i = floor(p), f = fract(p); f = f*f*(3.0-2.0*f);
+    return mix(mix(hh(i), hh(i+vec2(1.0,0.0)), f.x), mix(hh(i+vec2(0.0,1.0)), hh(i+vec2(1.0,1.0)), f.x), f.y); }
+  float fbm(vec2 p){ float s = 0.0, a = 0.5; for (int i = 0; i < 4; i++){ s += a*vn(p); p = p*2.03 + vec2(1.7, 9.2); a *= 0.5; } return s; }
+  void main(){
+    vec3 col = texture2D(tDiffuse, vUv).rgb;
+    vec2 q = (vUv - uRect.xy)/uRect.zw + 0.5;
+    if (uT <= 0.0 || uOn <= 0.0 || q.x < -0.12 || q.x > 1.12 || q.y < -0.5 || q.y > 2.2) { gl_FragColor = vec4(col, 1.0); return; }
+    float R = uRect.z*uAspect/uRect.w;
+    vec2 hq = q + vec2((vn(vec2(q.x*14.0, q.y*6.0 - uT*3.0)) - 0.5)*0.003, (vn(vec2(q.x*10.0 + 3.0, q.y*5.0 - uT*2.5)) - 0.5)*0.012);   // heat shimmer
+    vec4 M = texture2D(tMask, hq);                                     // r sharp, g soft, b wide halo
+    float n = fbm(q*vec2(R*2.5, 2.5) + 3.1);
+    float front = uT*0.75 - q.x*0.9 + (n - 0.5)*0.5;                    // ignition sweeps left to right
+    float lit = smoothstep(0.0, 0.08, front);
+    float edge = smoothstep(0.0, 0.05, front)*(1.0 - smoothstep(0.05, 0.28, front));
+    col *= 1.0 - 0.5*M.b*smoothstep(-0.2, 0.3, front);                 // the night darkens behind the words
+    float flick = 0.86 + 0.14*vn(vec2(uT*7.0, 1.0));
+    float fire = fbm(vec2(q.x*R*3.0, q.y*3.0 - uT*1.6));
+    vec3 deep = vec3(0.78, 0.17, 0.02), hot = vec3(1.0, 0.6, 0.1), core = vec3(1.0, 0.92, 0.66);
+    vec3 fillc = mix(deep, hot, smoothstep(0.3, 0.75, fire + 0.3*(1.0 - clamp(q.y, 0.0, 1.0))));
+    fillc = mix(fillc, core, smoothstep(0.72, 0.95, fire)*0.6);
+    float inside = smoothstep(0.38, 0.62, M.g);
+    float rim = smoothstep(0.38, 0.5, M.g)*(1.0 - smoothstep(0.55, 0.85, M.g));
+    vec3 letters = fillc*flick*(1.0 - 0.45*rim);                        // charred rim, burning heart
+    col += vec3(1.0, 0.4, 0.07)*(M.g*0.55 + M.b*0.55)*flick*lit*0.6;    // halo
+    col = mix(col, letters, inside*lit);
+    col += vec3(1.0, 0.82, 0.5)*edge*smoothstep(0.15, 0.6, M.g)*1.3;     // the igniting edge flares
+    vec2 sp = vec2(q.x*R*6.0, q.y*6.0 - uT*1.3);                          // embers drifting up off the words
+    vec2 cid = floor(sp), cf = fract(sp) - 0.5; float hs = hh(cid);
+    vec2 off = vec2(hh(cid + 7.1) - 0.5, hh(cid + 3.3) - 0.5)*0.6 + vec2(sin(uT*3.0 + hs*20.0)*0.15, 0.0);
+    float spark = step(0.86, hs)*smoothstep(0.09, 0.0, length(cf - off))*smoothstep(2.0, 0.7, q.y)*smoothstep(0.1, 0.6, q.y)
+                * smoothstep(0.05, 0.3, max(texture2D(tMask, vec2(q.x, 0.34)).b, texture2D(tMask, vec2(q.x, 0.66)).b))*lit;
+    col += vec3(1.0, 0.55, 0.15)*spark*(0.55 + 0.45*sin(uT*9.0 + hs*40.0));
+    gl_FragColor = vec4(min(col, vec3(1.0)), 1.0);
+  }\`;
+      function blurInto(src, CW, CH, RB, passes) {
+        const b = src.slice(),
+          tmp = new Float32Array(src.length),
+          cl = (v, n) => Math.min(n - 1, Math.max(0, v)),
+          k = 1 / (2 * RB + 1);
+        for (let pass = 0; pass < passes; pass++) {
+          for (let y = 0; y < CH; y++) {
+            const row = y * CW;
+            let s = 0;
+            for (let x = -RB; x <= RB; x++) s += b[row + cl(x, CW)];
+            for (let x = 0; x < CW; x++) {
+              tmp[row + x] = s * k;
+              s += b[row + cl(x + RB + 1, CW)] - b[row + cl(x - RB, CW)];
+            }
+          }
+          for (let x = 0; x < CW; x++) {
+            let s = 0;
+            for (let y = -RB; y <= RB; y++) s += tmp[cl(y, CH) * CW + x];
+            for (let y = 0; y < CH; y++) {
+              b[y * CW + x] = s * k;
+              s += tmp[cl(y + RB + 1, CH) * CW + x] - tmp[cl(y - RB, CH) * CW + x];
+            }
+          }
+        }
+        return b;
+      }
+      function buildTitleMask(text) {
+        const CW = 2048,
+          CH = 512,
+          c = document.createElement('canvas');
+        c.width = CW;
+        c.height = CH;
+        const g = c.getContext('2d'),
+          font = (s) => \`400 \${s}px "Creepster", "Chiller", "Papyrus", Georgia, serif\`;
+        const lines = text.split('\\n');
+        g.font = font(260);
+        const widest = Math.max(...lines.map((l) => g.measureText(l).width));
+        const fs = Math.floor(Math.min((260 * 1820) / widest, 400 / (lines.length * 1.12)));
+        g.font = font(fs);
+        g.textAlign = 'left';
+        g.textBaseline = 'middle';
+        g.fillStyle = g.strokeStyle = '#fff';
+        g.lineJoin = 'round';
+        g.lineWidth = fs * 0.02;
+        lines.forEach((l, i) => {
+          const y = CH / 2 + (i - (lines.length - 1) / 2) * fs * 1.12;
+          g.fillText(l, 40, y);
+          g.strokeText(l, 40, y);
+        }); // left-aligned
+        const px = g.getImageData(0, 0, CW, CH).data,
+          a = new Float32Array(CW * CH);
+        for (let i = 0; i < a.length; i++) a[i] = px[i * 4 + 3] / 255;
+        const soft = blurInto(a, CW, CH, 3, 2),
+          wide = blurInto(a, CW, CH, 22, 3);
+        const data = new Uint8Array(CW * CH * 4);
+        for (let y = 0; y < CH; y++)
+          for (let x = 0; x < CW; x++) {
+            const i = y * CW + x,
+              o = ((CH - 1 - y) * CW + x) * 4; // flip: texture rows run bottom-up
+            data[o] = a[i] * 255;
+            data[o + 1] = soft[i] * 255;
+            data[o + 2] = Math.min(1, wide[i] * 1.8) * 255;
+            data[o + 3] = 255;
+          }
+        return { data, CW, CH };
+      }
+      // </fire-title>
+      await Promise.race([
+        document.fonts ? document.fonts.load('400 200px "Creepster"') : Promise.resolve(),
+        new Promise((res) => setTimeout(res, 3000)),
+      ]);
+      const titleMask = buildTitleMask('Happy\\nHalloween');
+      const titleTex = new THREE.DataTexture(
+        titleMask.data,
+        titleMask.CW,
+        titleMask.CH,
+        THREE.RGBAFormat
+      );
+      titleTex.minFilter = titleTex.magFilter = THREE.LinearFilter;
+      titleTex.generateMipmaps = false;
+      titleTex.needsUpdate = true;
+      const titlePass = new ShaderPass({
+        uniforms: {
+          tDiffuse: { value: null },
+          tMask: { value: titleTex },
+          uT: { value: 0 },
+          uOn: { value: 0 },
+          uAspect: { value: W / H },
+          uRect: {
+            value: new THREE.Vector4(
+              TITLE_LEFT + TITLE_W / 2 - (40 / 2048) * TITLE_W,
+              TITLE_CY,
+              TITLE_W,
+              (TITLE_W * (W / H)) / 4
+            ),
+          },
+        },
+        vertexShader: \`varying vec2 vUv; void main(){ vUv = uv; gl_Position = projectionMatrix*modelViewMatrix*vec4(position,1.0); }\`,
+        fragmentShader: TITLE_FRAG,
+      });
+
+      /* ---------- "Applying Style....": a small loading line at the bottom centre ----------
+   Text and dots are drawn once into a mipmapped mask (red = words, green = dots) so they stay
+   crisp at a small size; the dots fill in one by one and reset, and a soft shimmer sweeps the words. */
+      // <status-line>
+      const STATUS_CY = 0.045,
+        STATUS_H = 0.031; // centre (from bottom) and rect height, as fractions of the screen
+      const STATUS_FRAG = \`
+  uniform sampler2D tDiffuse, tStatus; uniform float uT, uOn, uDot0, uDotStep; uniform vec4 uRect; varying vec2 vUv;
+  void main(){
+    vec3 col = texture2D(tDiffuse, vUv).rgb;
+    vec2 q = (vUv - uRect.xy)/uRect.zw + 0.5;
+    if (uOn <= 0.0 || q.x < 0.0 || q.x > 1.0 || q.y < -0.2 || q.y > 1.0) { gl_FragColor = vec4(col, 1.0); return; }
+    float appear = smoothstep(1.0, 1.8, uT);
+    vec4 m = texture2D(tStatus, q);
+    float phase = fract(uT/1.6)*5.0, i = floor((q.x - uDot0)/uDotStep);
+    float dotA = smoothstep(i + 0.6, i + 1.0, phase)*(1.0 - smoothstep(4.55, 4.95, phase));   // dots fill in, then reset
+    float sweep = exp(-pow((q.x - (fract(uT/2.4)*1.6 - 0.3))*7.0, 2.0));                      // soft shimmer
+    float a = (m.r*(0.6 + 0.4*sweep) + m.g*dotA*0.85)*appear;
+    gl_FragColor = vec4(mix(col, vec3(0.93, 0.94, 0.97), a), 1.0);
+  }\`;
+      function buildStatusMask(words, dots) {
+        const CW = 1024,
+          CH = 128,
+          c = document.createElement('canvas');
+        c.width = CW;
+        c.height = CH;
+        const g = c.getContext('2d');
+        g.fillStyle = '#000';
+        g.fillRect(0, 0, CW, CH);
+        g.font = '300 64px "Helvetica Neue", Helvetica, Arial, sans-serif';
+        if ('letterSpacing' in g) g.letterSpacing = '2px';
+        g.textBaseline = 'middle';
+        const ww = g.measureText(words).width,
+          dw = g.measureText('.').width + 4,
+          x0 = (CW - (ww + dw * dots)) / 2;
+        g.fillStyle = '#f00';
+        g.fillText(words, x0, CH / 2);
+        g.fillStyle = '#0f0';
+        for (let i = 0; i < dots; i++) g.fillText('.', x0 + ww + i * dw, CH / 2);
+        const tex = new THREE.CanvasTexture(c);
+        tex.colorSpace = THREE.NoColorSpace;
+        tex.generateMipmaps = true;
+        tex.minFilter = THREE.LinearMipmapLinearFilter;
+        tex.magFilter = THREE.LinearFilter;
+        tex.anisotropy = 4;
+        return { tex, dot0: (x0 + ww) / CW, dotStep: dw / CW, aspect: CW / CH };
+      }
+      // </status-line>
+      const status = buildStatusMask('Applying Style', 4);
+      const statusPass = new ShaderPass({
+        uniforms: {
+          tDiffuse: { value: null },
+          tStatus: { value: status.tex },
+          uT: { value: 0 },
+          uOn: { value: 0 },
+          uDot0: { value: status.dot0 },
+          uDotStep: { value: status.dotStep },
+          uRect: {
+            value: new THREE.Vector4(
+              0.5,
+              STATUS_CY,
+              (STATUS_H * status.aspect) / (W / H),
+              STATUS_H
+            ),
+          },
+        },
+        vertexShader: \`varying vec2 vUv; void main(){ vUv = uv; gl_Position = projectionMatrix*modelViewMatrix*vec4(position,1.0); }\`,
+        fragmentShader: STATUS_FRAG,
+      });
+
+      /* ---------- post: MSAA HDR -> depth of field -> ACES -> title -> status -> film ---------- */
+      const rt = new THREE.WebGLRenderTarget(W * pixelRatio, H * pixelRatio, {
+        type: THREE.HalfFloatType,
+        samples: 4,
+      });
+      const composer = new EffectComposer(renderer, rt);
+      composer.addPass(new RenderPass(scene, camera));
+      const bokeh = new BokehPass(scene, camera, { focus: 10, aperture: 0.0004, maxblur: 0.009 });
+      const bokehRender = bokeh.render.bind(bokeh);
+      bokeh.render = (...a) => {
+        mistGroup.visible = false;
+        sky.visible = false;
+        bokehRender(...a);
+        mistGroup.visible = true;
+        sky.visible = true;
+      };
+      composer.addPass(bokeh);
+      const bloom = new UnrealBloomPass(
+        new THREE.Vector2(W * pixelRatio, H * pixelRatio),
+        0.5,
+        0.6,
+        1.3
+      );
+      composer.addPass(bloom);
+      composer.addPass(new OutputPass());
+      const filmPass = new ShaderPass({
+        uniforms: {
+          tDiffuse: { value: null },
+          uTime: { value: 0 },
+          uFade: { value: 0 },
+          uRes: { value: new THREE.Vector2(W, H) },
+        },
+        vertexShader: \`varying vec2 vUv; void main(){ vUv = uv; gl_Position = projectionMatrix*modelViewMatrix*vec4(position,1.0); }\`,
+        fragmentShader: \`uniform sampler2D tDiffuse; uniform float uTime, uFade; uniform vec2 uRes; varying vec2 vUv;
+    float h(vec2 p){ return fract(sin(dot(p, vec2(12.9898, 78.233)))*43758.5453); }
+    void main(){ vec2 c = vUv - 0.5; vec2 ca = c*vec2(uRes.x/uRes.y, 1.0); float r2 = dot(ca, ca);
+      vec2 off = c*r2*0.006;
+      vec3 col = vec3(texture2D(tDiffuse, vUv - off).r, texture2D(tDiffuse, vUv).g, texture2D(tDiffuse, vUv + off).b);
+      col *= 1.0 - 0.58*smoothstep(0.12, 0.95, sqrt(r2));
+      float g = h(floor(vUv*uRes) + fract(uTime*7.31)*vec2(91.7, 37.3)) - 0.5;
+      col *= 1.0 + g*0.11;
+      gl_FragColor = vec4(max(col, 0.0)*uFade, 1.0); }\`,
+      });
+      composer.addPass(titlePass);
+      composer.addPass(statusPass);
+      composer.addPass(filmPass);
+
+      /* ==========================================================================
+   SEQUENCE — every value is a pure function of t
+   ========================================================================== */
+      const tmpV = new THREE.Vector3(),
+        faceW = new THREE.Vector3(),
+        lookFar = new THREE.Vector3(0, 1.15, -30),
+        lookDev = new THREE.Vector3(),
+        Yup = new THREE.Vector3(0, 1, 0);
+      const fogCol = new THREE.Color();
+
+      function update(t) {
+        const out = t >= T.out;
+        const on = out ? 0 : 1;
+
+        // world light: the morning fades up from absolute zero; thin drifting cloud barely varies the sun
+        const reveal = smoother(T.revealIn, T.revealFull, t) * on;
+        const cloud = 1 + 0.05 * (fbm1(t * 0.35) - 0.5);
+        sun.intensity = K.sun * reveal * cloud;
+        hemi.intensity = K.hemi * reveal;
+        scene.environmentIntensity = K.env * reveal;
+        fogCol.copy(FOG_BASE).multiplyScalar(reveal);
+        scene.fog.color.copy(fogCol);
+        scene.background.copy(fogCol);
+        skyMat.uniforms.uFog.value.copy(fogCol);
+        skyMat.uniforms.uZenith.value.copy(ZENITH).multiplyScalar(reveal);
+        skyMat.uniforms.uSunCol.value.copy(SUN_TINT).multiplyScalar(reveal * cloud);
+
+        // the monument wakes: edges and veins glow, the hat hovers and sways above it
+        const glowLevel = smoother(2.5, 7.5, t) * on * (0.88 + 0.12 * Math.sin(t * 1.6));
+        monUni.uGlow.value = glowLevel;
+        monUni.uTime.value = t;
+        monLights.forEach(([l, , k]) => {
+          l.intensity = K.glow * k * glowLevel;
+        });
+        hat.position.y = HAT_Y + 0.06 * Math.sin(t * 1.25) + 0.02 * Math.sin(t * 2.7 + 1.0);
+        hat.rotation.set(
+          0.04 * Math.sin(t * 0.8 + 0.5),
+          0.25 * Math.sin(t * 0.35),
+          -0.08 + 0.05 * Math.sin(t * 0.95)
+        );
+
+        // pumpkins kindle with the reveal and gutter toward the end
+        const fear = smoother(10, 15.5, t);
+        for (const p of pumpkins) {
+          if (!p.faceMat) continue;
+          const f =
+            (0.78 + 0.22 * fbm1(t * 3.1 + p.seed) + 0.07 * noise1(t * 11 + p.seed)) *
+            (1 - 0.45 * fear);
+          const k = smoother(1.6, 6.0, t) * on * f;
+          p.faceMat.color.setRGB(2.6 * k, 0.95 * k, 0.22 * k);
+          if (p.light) p.light.intensity = K.pump * k;
+        }
+
+        // camera: one continuous dolly, eased to an almost imperceptible landing
+        const cu = easeLong(t / T.out);
+        camera.position.set(0, lerp(CAM_Y0, CAM_Y1, cu), lerp(CAM_Z0, CAM_Z1, cu));
+        const wLook = smoother(3.5, 13.8, t);
+        lookDev.set(0, 1.7, MON_Z);
+        camera.lookAt(tmpV.copy(lookFar).lerp(lookDev, wLook));
+        camera.updateMatrixWorld();
+
+        // derived: focus on the point the camera is looking at
+        faceW.set(0, 1.4, MON_Z + 0.3);
+        mistUniforms.uTime.value = t;
+        mistUniforms.uColor.value.copy(fogCol).multiplyScalar(1.1);
+        mistUniforms.uCam.value.copy(camera.position);
+        mistUniforms.uCandlePos.value.set(0, 1.2, MON_Z + 0.6);
+        mistUniforms.uCandleCol.value.setRGB(0.42, 0.62, 1.0);
+        mistUniforms.uCandleI.value = 1.2 * glowLevel;
+        sky.position.copy(camera.position);
+        const focus = -faceW.clone().applyMatrix4(camera.matrixWorldInverse).z;
+        bokeh.uniforms.focus.value = focus;
+        bokeh.uniforms.aperture.value = lerp(K.ap0, K.ap1, smoother(5, 15.5, t));
+
+        filmPass.uniforms.uTime.value = t;
+        filmPass.uniforms.uFade.value = on;
+        titlePass.uniforms.uT.value = t - TITLE_T0;
+        titlePass.uniforms.uOn.value = on;
+        statusPass.uniforms.uT.value = t;
+        statusPass.uniforms.uOn.value = on;
+      }
+
+      /* ---------- drive ---------- */
+      function resize() {
+        if (RENDER) return;
+        W = innerWidth;
+        H = innerHeight;
+        camera.aspect = W / H;
+        camera.updateProjectionMatrix();
+        renderer.setPixelRatio(pixelRatio);
+        renderer.setSize(W, H);
+        composer.setPixelRatio(pixelRatio);
+        composer.setSize(W, H);
+        bokeh.uniforms.aspect.value = camera.aspect;
+        filmPass.uniforms.uRes.value.set(W * pixelRatio, H * pixelRatio);
+        titlePass.uniforms.uAspect.value = W / H;
+        titlePass.uniforms.uRect.value.w = (TITLE_W * (W / H)) / 4;
+        statusPass.uniforms.uRect.value.z = (STATUS_H * status.aspect) / (W / H);
+      }
+      filmPass.uniforms.uRes.value.set(W * pixelRatio, H * pixelRatio);
+      addEventListener('resize', resize);
+
+      update(0);
+      renderer.compile(scene, camera);
+
+      if (RENDER) {
+        window.__renderAt = (t) => {
+          update(t);
+          composer.render();
+          return true;
+        };
+        window.__duration = T.end;
+        window.__renderAudio = renderSoundtrack; // base64 WAV, 48 kHz stereo, same timeline
+        document.getElementById('hint').remove();
+        window.__ready = true;
+      } else {
+        // Live: the timeline runs on the audio clock so picture and sound stay locked.
+        // Browsers only allow sound after a gesture, so it waits on black for a click or key.
+        const hint = document.getElementById('hint');
+        let actx = null,
+          outGain = null,
+          cycleOut = null,
+          cycleStart = 0,
+          nextQueued = false,
+          started = false,
+          clockStart = 0,
+          muted = false;
+        let frames = 0,
+          acc = 0,
+          tuned = false,
+          last = 0,
+          introCompleteSent = false;
+        const schedule = (at) => {
+          const g = actx.createGain();
+          g.connect(outGain);
+          buildSound(actx, at, g);
+          return g;
+        };
+        function begin() {
+          hint.classList.add('gone');
+          try {
+            if (!actx) {
+              actx = new (window.AudioContext || window.webkitAudioContext)();
+              outGain = actx.createGain();
+              outGain.connect(actx.destination);
+            }
+            actx.resume();
+          } catch (e) {
+            actx = null;
+          }
+          if (actx) {
+            if (cycleOut) {
+              const old = cycleOut;
+              old.gain.setTargetAtTime(0, actx.currentTime, 0.04);
+              setTimeout(() => old.disconnect(), 800);
+            }
+            cycleStart = actx.currentTime + 0.15;
+            cycleOut = schedule(cycleStart);
+            nextQueued = false;
+          } else clockStart = performance.now();
+          started = true;
+        }
+        function clock() {
+          if (!actx) return (performance.now() - clockStart) / 1000;
+          return actx.currentTime - cycleStart - (actx.outputLatency || actx.baseLatency || 0);
+        }
+        function frame(now) {
+          let t = 0;
+          if (started) {
+            t = clock();
+            if (actx && !nextQueued && t > T.loop - 0.6) {
+              cycleOut = schedule(cycleStart + T.loop);
+              nextQueued = true;
+            }
+            if (t >= T.loop) {
+              if (actx) {
+                cycleStart += T.loop;
+                nextQueued = false;
+              } else clockStart += T.loop * 1000;
+              t -= T.loop;
+            }
+            t = Math.max(0, t);
+          }
+          update(t);
+          composer.render();
+          if (EMBED && started && !introCompleteSent && t >= T.end) {
+            introCompleteSent = true;
+            try {
+              window.parent.postMessage(
+                { source: 'impact-ui-halloween-intro', type: 'complete' },
+                '*'
+              );
+            } catch (_) {}
+          }
+          if (started && !tuned && t > 2) {
+            acc += now - last;
+            frames++;
+            if (frames === 90) {
+              tuned = true;
+              if (acc / frames > 19 && pixelRatio > 1) {
+                pixelRatio = 1;
+                resize();
+              }
+            }
+          }
+          last = now;
+          requestAnimationFrame(frame);
+        }
+        requestAnimationFrame(frame);
+        if (EMBED) {
+          setTimeout(begin, 150);
+        } else {
+          addEventListener('pointerdown', begin);
+          addEventListener('keydown', (e) => {
+            if (e.key === 'm' || e.key === 'M') {
+              muted = !muted;
+              if (outGain) outGain.gain.setTargetAtTime(muted ? 0 : 1, actx.currentTime, 0.05);
+            } else if (e.key === ' ' || e.key === 'Enter') {
+              e.preventDefault();
+              begin();
+            }
+          });
+        }
+      }
+    <\/script>
+  </body>
+</html>
+`;
+export {
+  halloweenCandleLightHtml as default
+};