impact-ui 5.0.1 → 5.0.2-beta.1

package/dist/assets/halloween_devil_morning_final.html.js

@@ -0,0 +1,1304 @@
+const halloweenDevilLightHtml = `<!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: Morning</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: #fff; 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">Click anywhere to begin. Best 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 { mergeGeometries, mergeVertices } from 'three/addons/utils/BufferGeometryUtils.js';
+
+/* ==========================================================================
+   THE LAST CANDLE
+   Climax shot (designed first): camera at z 2.9, eye 1.62, 32mm-ish lens,
+   looking slightly up at the hooded devil dead centre, candle raised to its
+   face. A low morning sun back-lights the scene from the upper right; the candle
+   is the warm key on the hood and horns from below.
+
+   Timeline (seconds)
+   (story clock: the 20 s piece below plays in 18 s of video)
+   0.0  - 0.6   pure white
+   0.6  - 3.6   the white fades away, revealing the sunlit graveyard
+   2.4  - 10.6  bats come out of the fog and take their time flying past the lens, squeaking
+   0.8  - 6.5   morning sun, sky, haze and environment fade up; pumpkins kindle
+   1.5  - 3.5   a lone flame appears deep in the fog beyond the gate
+   2.2  - 14.4  the devil floats the length of the aisle (physical glide)
+   15.0 - 16.1  it lifts the candle to its face and draws breath
+   16.25- 16.9  it blows; the flame bends and gutters
+   1.0  - 16.9  a small "Applying Style...." status line at the bottom centre, dots loading
+   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
+   16.9         every light hits exactly 0
+   16.9 - 20.0  pure white
+   ========================================================================== */
+
+const QS = new URLSearchParams(location.search), EXPORT = QS.has('export'), RENDER = QS.has('render') || EXPORT;   // ?render: frame-by-frame capture; ?export: save an MP4 in the browser
+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;          // devil path
+const CAM_Z0 = 9.0, CAM_Z1 = 2.9;            // dolly path
+const CAM_Y0 = 1.74, CAM_Y1 = 1.62;
+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, candle: 1.1, pump: 0.42, 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))); }
+
+/* ---------- bats: a small colony bursts out of the fog and flies past the lens ----------
+   Shared by the picture and the sound so every squeak follows its own bat. Story-clock times. */
+const BATS = (() => {
+  const r = mulberry32(4242), out = [];
+  for (let i = 0; i < 14; i++) {
+    const side = i % 2 ? 1 : -1, hero = i === 0;            // bat 0 skims right past the lens
+    out.push({ t0: hero ? 6.2 : 2.4 + r() * 3.0, dur: hero ? 4.4 : 4.2 + r() * 1.6,   // long, unhurried flights
+      a: [(r() - 0.5) * 9, 1.8 + r() * 2.8, -34 + r() * 10],
+      b: hero ? [0.5, 0.35] : [side * (1.3 + r() * 2.4), 0.7 + r() * 1.9],
+      ph: r() * 6.28, rate: 4.5 + r() * 1.5, wob: 0.3 + r() * 0.4, span: 0.52 + r() * 0.18 });
+  }
+  return out;
+})();
+function camAt(t) { const cu = easeLong(t / T.out); return [0, lerp(CAM_Y0, CAM_Y1, cu), lerp(CAM_Z0, CAM_Z1, cu)]; }
+function batPos(bt, t) {
+  const u = (t - bt.t0) / bt.dur; if (u < 0 || u > 1) return null;
+  const c = camAt(bt.t0 + bt.dur), e = u * u * (3 - 2 * u) * 0.35 + u * 0.65;
+  return [lerp(bt.a[0], c[0] + bt.b[0], e) + bt.wob * Math.sin(u * 11 + bt.ph),
+          lerp(bt.a[1], c[1] + bt.b[1], e) + 0.6 * bt.wob * Math.sin(u * 14 + bt.ph * 2),
+          lerp(bt.a[2], c[2] + 2.5, e)];
+}
+
+/* ---------- sound: fully procedural, scheduled on the same timeline ----------
+   0.4 - 5.5   wind rises with the reveal; a whistle threads through the trees
+   2.6         a distant bell as the flame appears beyond the gate
+   2.0 - 16.9  the candle hisses and crackles, louder as it nears the camera
+   6.5 - 16.3  a dissonant drone gathers; the wind drains away
+   8.7         the bell again
+   10.6 - 15.0 a heartbeat, quickening, then stopping dead
+   15.3 - 16.2 it draws breath
+   16.22- 18.8 it blows the candle out: a breathy gust, the flame flutters and dies at
+               16.9, and the breath carries on into the dark, trailing off
+   1.5, 8.0    a ghostly, theremin-like wail drifts across the speakers
+   16.9        everything else stops with the light; only the breath lingers, 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;
+}
+// The picture is authored on a 20 s story clock and plays in 18 s of video. The soundtrack keeps
+// natural speed: each sound STARTS at its story moment mapped into video time (V), but plays out
+// at its own real-time pace: bell decay, heartbeat tempo, wail, crackles, squeaks, the breath.
+const STORY_SCALE = 20 / 18, V = s => s / STORY_SCALE;
+const WHITE_BLANK = true;    // morning: open on white, fade into the scene, cut to white at the end
+
+const BAT_SQUEAK = 0.16, BAT_WINGS = 0.8;
+function buildSound(ctx, t0, dest) {
+  const S = sndCache.get(ctx) || (() => { const c = { white: noiseBuf(ctx, 6, 'white', 101), pink: noiseBuf(ctx, 7, 'pink', 202), brown: noiseBuf(ctx, 8, 'brown', 303), ir: impulseBuf(ctx, 4.5, 404) }; sndCache.set(ctx, c); return c; })();
+  const R = mulberry32(1666);
+  const END = T.out + 0.2, END_V = V(END);   // story / video
+  const automate = (param, a, b, fn, rate = 30) => {          // a, b and fn in story time; scheduled in video time
+    const va = V(a), vb = V(b), n = Math.max(2, Math.ceil((vb - va) * rate)), v = new Float32Array(n);
+    for (let i = 0; i < n; i++) v[i] = fn((va + (vb - va) * i / (n - 1)) * STORY_SCALE);
+    param.value = v[0]; param.setValueCurveAtTime(v, t0 + va, vb - va);
+  };
+  const filter = (type, f, q) => { const x = ctx.createBiquadFilter(); x.type = type; x.frequency.value = f; if (q !== undefined) x.Q.value = q; return x; };
+
+  // master: everything dies on the frame the lights do
+  const master = ctx.createGain(); master.gain.value = 0;
+  master.gain.setValueAtTime(0.9, t0); master.gain.setValueAtTime(0.9, t0 + V(T.out) - 0.004); master.gain.linearRampToValueAtTime(0, t0 + V(T.out) + 0.025);
+  const comp = ctx.createDynamicsCompressor(); comp.threshold.value = -18; comp.knee.value = 12; comp.ratio.value = 3; comp.attack.value = 0.008; comp.release.value = 0.3;
+  master.connect(comp); comp.connect(dest);
+  const verb = ctx.createConvolver(); verb.buffer = S.ir;
+  const verbOut = ctx.createGain(); verbOut.gain.value = 0.5; verb.connect(filter('lowpass', 3000, 0.5)).connect(verbOut).connect(master);
+  const dry = ctx.createGain(); dry.connect(master);
+  const voice = (fn, send, rate) => { const g = ctx.createGain(); automate(g.gain, 0, T.out + 0.05, fn, rate); g.connect(dry); if (send) { const s = ctx.createGain(); s.gain.value = send; g.connect(s).connect(verb); } return g; };
+  const loop = (buf, offset) => { const s = ctx.createBufferSource(); s.buffer = buf; s.loop = true; s.loopEnd = buf.__loopEnd; s.start(t0, offset % (buf.__loopEnd - 0.1)); s.stop(t0 + END_V); return s; };
+  const osc = (type, f) => { const o = ctx.createOscillator(); o.type = type; o.frequency.value = f; o.start(t0); o.stop(t0 + END_V); return o; };
+
+  // shared curves, same functions the picture uses
+  const camZ = t => lerp(CAM_Z0, CAM_Z1, easeLong(t / T.out));
+  const near = t => { const d = Math.max(0.5, camZ(t) - devilZ(t) - 0.4); return 1 / (1 + (d / 2.6) ** 2); };
+  const flameLvl = t => smoother(1.5, 3.5, t) * near(t);
+  const windLvl = t => smoother(0.4, 5.5, t) * (0.65 + 0.7 * (fbm1(t * 0.45 + 3.1) - 0.3)) * (1 - 0.72 * smoother(10.5, 15.2, t));
+
+  // wind: low body + a thin whistle wandering left to right
+  { const lp = filter('lowpass', 400, 0.5); automate(lp.frequency, 0, END, t => 240 + 460 * fbm1(t * 0.45 + 3.1), 20);
+    loop(S.brown, 1.3).connect(lp).connect(voice(t => 0.5 * windLvl(t), 0.25, 30)); }
+  { const bp = filter('bandpass', 700, 7); automate(bp.frequency, 0, END, t => 420 + 900 * (fbm1(t * 0.35 + 11) - 0.2) + 160 * Math.sin(t * 0.7), 30);
+    const pan = ctx.createStereoPanner(); automate(pan.pan, 0, END, t => 0.65 * Math.sin(t * 0.21 + 1.0), 10);
+    loop(S.white, 2.2).connect(bp).connect(pan).connect(voice(t => 0.2 * windLvl(t) * smooth(0.5, 0.78, fbm1(t * 0.55 + 5)) * (1 - smoother(9.5, 13.5, t)), 0.7, 30)); }
+
+  // sub drone, then a dissonant cluster (A, B flat, E flat) that opens up as it nears
+  { const lp = filter('lowpass', 170, 0.7); lp.connect(voice(t => 0.2 * smoother(2.0, 9, t) + 0.14 * smoother(9, 16.2, t), 0.3, 20));
+    [[43.65, 'sine', 1], [43.95, 'sine', 0.8], [65.41, 'triangle', 0.4], [87.31, 'triangle', 0.25]].forEach(([f, ty, a]) => { const g = ctx.createGain(); g.gain.value = a; osc(ty, f).connect(g).connect(lp); }); }
+  { const lp = filter('lowpass', 300, 1.8); automate(lp.frequency, 0, END, t => 240 + 950 * smoother(7, 16.2, t) + 600 * smoother(16.25, 16.7, t), 20);
+    lp.connect(voice(t => 0.07 * smoother(6.5, 14.5, t) + 0.07 * smoother(15.0, 16.3, t), 0.9, 20));
+    const lfo = osc('sine', 4.7), depth = ctx.createGain(); depth.gain.value = 7; lfo.connect(depth);
+    [[110, -4, 0.5], [116.54, 3, 0.5], [155.56, -2, 0.45], [220, 5, 0.22], [233.08, -6, 0.22]].forEach(([f, det, a]) => {
+      const o = osc('sawtooth', f); o.detune.value = det; depth.connect(o.detune); const g = ctx.createGain(); g.gain.value = a; o.connect(g).connect(lp); }); }
+
+  // a far-off bell, mostly heard as its reverb
+  const bell = (tb, f, amp) => {
+    const lp = filter('lowpass', 2200), g = ctx.createGain(); g.gain.value = amp; lp.connect(g); g.connect(dry);
+    const s = ctx.createGain(); s.gain.value = 2.0; g.connect(s).connect(verb);
+    [[0.5, 0.35, 7], [1, 1, 5], [1.183, 0.55, 3.8], [1.506, 0.4, 3], [2.0, 0.45, 2.6], [2.514, 0.28, 2], [2.662, 0.22, 1.7], [3.011, 0.16, 1.4], [4.166, 0.08, 0.9]].forEach(([r, a, d]) => {
+      const o = ctx.createOscillator(); o.frequency.value = f * r; const e = ctx.createGain(); e.gain.value = 0;
+      e.gain.setValueAtTime(0, t0 + tb); e.gain.linearRampToValueAtTime(a, t0 + tb + 0.005); e.gain.exponentialRampToValueAtTime(0.0001, t0 + tb + d);
+      o.connect(e).connect(lp); o.start(t0 + tb); o.stop(t0 + Math.min(tb + d + 0.05, END_V)); });
+  };
+  bell(V(2.6), 146.83, 0.07); bell(V(8.7), 146.83, 0.055);
+
+  // heartbeat: lub-dub, quickening, stopping before the breath
+  { const lp = filter('lowpass', 260, 0.8); lp.connect(dry);
+    for (let tb = V(10.6); tb < V(15.0);) {
+      const k = smoother(10.6, 15.0, tb * STORY_SCALE), amp = 0.55 * (0.3 + 0.7 * k);
+      for (const [off, a] of [[0, 1], [0.27, 0.6]]) {
+        const ts = t0 + tb + off;
+        for (const [mul, ty, w] of [[1, 'sine', 1], [2, 'triangle', 0.35]]) {
+          const o = ctx.createOscillator(); o.type = ty; o.frequency.setValueAtTime(72 * mul, ts); o.frequency.exponentialRampToValueAtTime(44 * mul, ts + 0.15);
+          const e = ctx.createGain(); e.gain.value = 0; e.gain.setValueAtTime(0, ts); e.gain.linearRampToValueAtTime(amp * a * w, ts + 0.012); e.gain.exponentialRampToValueAtTime(0.0001, ts + 0.24);
+          o.connect(e).connect(lp); o.start(ts); o.stop(ts + 0.26);
+        }
+      }
+      tb += lerp(1.05, 0.68, k);
+    }
+  }
+
+  // candle: soft hiss with flicker, and sparse crackles
+  { const bp = filter('bandpass', 1100, 0.7);
+    loop(S.pink, 3.7).connect(bp).connect(voice(t => 0.22 * flameLvl(t) * (0.75 + 0.25 * noise1(V(t) * 14)), 0.15, 60)); }
+  { let tp = V(2.0);
+    while (tp < V(T.out) - 0.03) {
+      const blow = smooth(16.3, 16.6, tp * STORY_SCALE), lvl = flameLvl(tp * STORY_SCALE) * (1 + 1.5 * blow);
+      const dur = 0.004 + R() * 0.016, src = ctx.createBufferSource(); src.buffer = S.white;
+      const bp = filter('bandpass', 1800 + R() * 3200, 1.2), e = ctx.createGain(), pan = ctx.createStereoPanner(); pan.pan.value = (R() - 0.5) * 0.3;
+      const a = 0.9 * lvl * (0.25 + 0.75 * R() * R());
+      e.gain.value = 0; e.gain.setValueAtTime(0, t0 + tp); e.gain.linearRampToValueAtTime(a, t0 + tp + 0.001); e.gain.exponentialRampToValueAtTime(0.0001, t0 + tp + dur);
+      src.connect(bp).connect(e).connect(pan).connect(dry); src.start(t0 + tp, R() * 5); src.stop(t0 + tp + dur + 0.01);
+      tp += (0.08 + R() * 0.32) / (1 + 2.5 * blow);
+    }
+  }
+
+  // breath in: rising, hoarse
+  { const bp = filter('bandpass', 500, 1.4); automate(bp.frequency, 0, END, t => 420 + 950 * smooth(15.3, 16.15, t), 40);
+    const hs = filter('highshelf', 2500); hs.gain.value = 5;
+    loop(S.pink, 0.7).connect(bp).connect(hs).connect(voice(t => 1.1 * smooth(15.3, 16.05, t) * (1 - smooth(16.05, 16.24, t)) * (0.85 + 0.15 * noise1(V(t) * 30)), 0.35, 60)); }
+  // breath out: blowing the candle out. The gust is routed past the master cut, so while the
+  // flame's flutter and everything else stop with the light, the breath itself carries on into
+  // the dark and trails off, with its own bit of room.
+  {
+    const B0 = T.blow0 - 0.03, PEAK_END = 16.6, TAIL_END = T.out + 2.3;
+    const tail = ctx.createGain(); tail.connect(comp);
+    const tailVerb = ctx.createConvolver(); tailVerb.buffer = S.ir;
+    const tailVerbOut = ctx.createGain(); tailVerbOut.gain.value = 0.45; tailVerb.connect(filter('lowpass', 3000, 0.5)).connect(tailVerbOut).connect(comp);
+    tailVerbOut.gain.setValueAtTime(0.45, t0 + V(TAIL_END) - 0.15); tailVerbOut.gain.linearRampToValueAtTime(0, t0 + V(TAIL_END) + 0.45);   // echo gone before the video ends
+    const gust = t => t < B0 ? 0 : smooth(B0, B0 + 0.1, t) * (t < PEAK_END ? 1 : Math.exp(-(t - PEAK_END) / (0.55 * STORY_SCALE)))
+      * (1 - smooth(TAIL_END - 0.6, TAIL_END - 0.2, t)) * (0.85 + 0.15 * noise1(V(t) * 40));   // trails ~1.7 s past the blow-out
+    // the breath: airy "fffhhh", losing pressure (and pitch) as it fades
+    const air = ctx.createBufferSource(); air.buffer = S.white; air.loop = true; air.loopEnd = S.white.__loopEnd;
+    const bp = filter('bandpass', 2300, 0.6); automate(bp.frequency, 0, TAIL_END, t => 2300 - 900 * smooth(16.5, 18.2, t), 30);
+    const g = ctx.createGain(); automate(g.gain, 0, TAIL_END, t => 0.44 * gust(t), 120);   // about 4 dB softer
+    const send = ctx.createGain(); send.gain.value = 0.35;
+    air.connect(filter('highpass', 350)).connect(bp).connect(filter('lowpass', 6500)).connect(g).connect(tail); g.connect(send).connect(tailVerb);
+    air.start(t0, 1.7); air.stop(t0 + V(TAIL_END) + 0.05);
+    // a low puff as the breath leaves
+    const puff = ctx.createBufferSource(); puff.buffer = S.brown; puff.loop = true; puff.loopEnd = S.brown.__loopEnd;
+    const pg = ctx.createGain(); automate(pg.gain, 0, 17.4, t => 0.57 * smooth(B0, B0 + 0.06, t) * Math.exp(-Math.max(0, t - B0 - 0.06) / (0.25 * STORY_SCALE)), 120);
+    puff.connect(filter('lowpass', 260)).connect(pg).connect(tail); puff.start(t0, 4.1); puff.stop(t0 + V(17.45));
+  }
+  // the flame flutters in the gust and dies with the light (inside the master, so it stops at 16.9)
+  { const env = t => smooth(16.28, 16.4, t);
+    loop(S.pink, 2.9).connect(filter('bandpass', 750, 1.2)).connect(voice(t => 0.35 * env(t) * (0.6 + 0.4 * Math.sin(V(t) * Math.PI * 2 * 18)), 0.2, 220)); }
+  // bats: squeaks and wingbeats that follow each bat's flight past the lens
+  for (const bt of BATS) {
+    const R = mulberry32(Math.floor(bt.ph * 1000) + 17);
+    const rel = t => { const p = batPos(bt, t), c = camAt(t); return p ? [p[0] - c[0], p[1] - c[1], p[2] - c[2]] : null; };
+    const loud = t => { const q = rel(t); return q ? 1 / (1 + (Math.hypot(q[0], q[1], q[2]) / 3.5) ** 2) : 0; };
+    const panAt = t => { const q = rel(t); return q ? clamp(q[0] / (Math.abs(q[2]) * 0.6 + Math.abs(q[0]) + 0.3), -1, 1) : 0; };
+    for (let t = V(bt.t0) + 0.05; t < V(bt.t0 + bt.dur) - 0.05;) {
+      const ts = t * STORY_SCALE, f0 = 7000 + R() * 2800, d = 0.018 + R() * 0.02, a = BAT_SQUEAK * loud(ts) * (0.5 + 0.5 * R());
+      if (a > 0.002) {
+        const o = ctx.createOscillator(); o.frequency.setValueAtTime(f0, t0 + t); o.frequency.exponentialRampToValueAtTime(f0 * 0.45, t0 + t + d);
+        const g = ctx.createGain(); g.gain.value = 0; g.gain.setValueAtTime(0, t0 + t); g.gain.linearRampToValueAtTime(a, t0 + t + 0.002); g.gain.exponentialRampToValueAtTime(0.0001, t0 + t + d);
+        const p = ctx.createStereoPanner(); p.pan.value = panAt(ts);
+        o.connect(g).connect(p).connect(dry); o.start(t0 + t); o.stop(t0 + t + d + 0.01);
+      }
+      t += R() < 0.35 ? 0.03 + R() * 0.03 : 0.1 + R() * 0.2;
+    }
+    const n = ctx.createBufferSource(); n.buffer = S.white; n.loop = true; n.loopEnd = S.white.__loopEnd;
+    const g = ctx.createGain(), p = ctx.createStereoPanner();
+    automate(g.gain, bt.t0, bt.t0 + bt.dur, t => BAT_WINGS * loud(t) ** 1.5 * Math.pow(0.5 + 0.5 * Math.sin(2 * Math.PI * bt.rate * t + bt.ph), 3), 240);
+    automate(p.pan, bt.t0, bt.t0 + bt.dur, panAt, 60);
+    n.connect(filter('bandpass', 750, 0.9)).connect(g).connect(p).connect(dry); n.start(t0 + V(bt.t0), R() * 2); n.stop(t0 + V(bt.t0 + bt.dur) + 0.02);
+  }
+
+  // ghostly wail: a theremin-like voice that rises and falls with vibrato, drifting across the speakers
+  const voiceCurve = (t, dur, freqFn, ampFn, type, pan, lpf) => {
+    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 p = ctx.createStereoPanner(); p.pan.setValueAtTime(pan[0], t0 + t); p.pan.linearRampToValueAtTime(pan[1], t0 + t + dur);
+    const send = ctx.createGain(); send.gain.value = 0.35;
+    o.connect(filter('lowpass', lpf)).connect(g).connect(p); p.connect(dry); p.connect(send).connect(verb);
+    o.start(t0 + t); o.stop(t0 + t + dur + 0.02);
+  };
+  const wail = (t, pan, k = 1) => {
+    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 => k * WAIL * Math.sin(Math.PI * u), 'sine', pan, 3000);
+    voiceCurve(t, 2.3, u => (260 + 190 * shape(u)) * vib(u), u => k * WAIL * 0.4 * Math.sin(Math.PI * u), 'triangle', pan, 1500);
+  };
+  const WAIL = 0.09;
+  wail(V(1.5), [0.7, -0.7]);   // as the graveyard fades up, right to left
+  wail(V(8.0), [-0.7, 0.7], 1.7);   // again in the middle, left to right (louder: the drone is up by then)
+}
+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 / STORY_SCALE * 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);
+const waxGlow = (() => { const c = document.createElement('canvas'); c.width = 4; c.height = 128; const g = c.getContext('2d');
+  const gr = g.createLinearGradient(0, 128, 0, 0); gr.addColorStop(0, '#000'); gr.addColorStop(0.55, '#140802'); gr.addColorStop(0.85, '#7a3a14'); gr.addColorStop(1, '#ffd2a0');
+  g.fillStyle = gr; g.fillRect(0, 0, 4, 128); const t = new THREE.CanvasTexture(c); t.colorSpace = THREE.SRGBColorSpace; return t; })();
+const haloTex = (() => { const c = document.createElement('canvas'); c.width = c.height = 128; const g = c.getContext('2d');
+  const gr = g.createRadialGradient(64, 64, 0, 64, 64, 64); gr.addColorStop(0, 'rgba(255,255,255,1)'); gr.addColorStop(0.15, 'rgba(255,255,255,0.45)');
+  gr.addColorStop(0.45, 'rgba(255,255,255,0.08)'); gr.addColorStop(1, 'rgba(255,255,255,0)');
+  g.fillStyle = gr; g.fillRect(0, 0, 128, 128); const t = new THREE.CanvasTexture(c); t.colorSpace = THREE.SRGBColorSpace; return t; })();
+
+/* ---------- 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.10 * 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 (where the devil comes from) ---------- */
+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 DEVIL
+   ========================================================================== */
+const U = { time: { value: 0 }, drag: { value: 0 }, flutter: { value: 1 } };
+const devil = new THREE.Group(); devil.scale.setScalar(0.9); scene.add(devil);
+const body = new THREE.Group(); body.position.y = 1.1; devil.add(body);
+const parts = new THREE.Group(); parts.position.y = -1.1; body.add(parts);
+
+const clothMat = P({ color: 0x1a0a0b, roughness: 0.88, sheen: 0.55, sheenColor: 0x5e2a22, sheenRoughness: 0.55,
+  bumpMap: fabricBump, bumpScale: 1.6, specularIntensity: 0.4, envMapIntensity: 0.7 });
+const robeMat = clothMat.clone(); robeMat.transparent = true;
+robeMat.onBeforeCompile = sh => {
+  sh.uniforms.uTime = U.time; sh.uniforms.uDrag = U.drag; sh.uniforms.uFlutter = U.flutter;
+  sh.vertexShader = 'attribute float aW; attribute float aPhi; attribute float aFade; uniform float uTime, uDrag, uFlutter; varying float vFade;\\n' +
+    sh.vertexShader.replace('#include <begin_vertex>', \`#include <begin_vertex>
+      float w2 = aW*aW;
+      float wave = sin(position.y*7.0 - uTime*2.2 + aPhi*3.0) + 0.6*sin(position.y*13.0 - uTime*3.6 + aPhi*5.0 + 1.3);
+      transformed.xz += normalize(position.xz + 1e-4) * wave * 0.035 * w2 * uFlutter;
+      transformed.x += sin(uTime*1.7 + aPhi*2.0 + position.y*4.0) * 0.02 * w2;
+      transformed.z -= uDrag * (aW*0.22 + w2*0.3);
+      transformed.y += uDrag * w2 * 0.12;
+      vFade = aFade;\`);
+  sh.fragmentShader = 'varying float vFade;\\n' + sh.fragmentShader.replace('#include <alphamap_fragment>', '#include <alphamap_fragment>\\n diffuseColor.a *= vFade;');
+};
+robeMat.customProgramCacheKey = () => 'ghost-robe';
+
+// robe: lathe from a smooth profile, then tattered hem
+{
+  const prof = [[0.44, 0.0], [0.4, 0.14], [0.36, 0.32], [0.32, 0.56], [0.29, 0.8], [0.28, 1.0], [0.295, 1.18], [0.315, 1.32], [0.3, 1.42], [0.25, 1.5], [0.17, 1.58], [0.1, 1.64], [0.02, 1.67]];
+  const curve = new THREE.CatmullRomCurve3(prof.map(([r, y]) => new THREE.Vector3(r, y, 0)));
+  const pts = curve.getPoints(64).map(p => new THREE.Vector2(Math.max(0.01, p.x), p.y));
+  const g = new THREE.LatheGeometry(pts, 112, Math.PI, Math.PI * 2);
+  const pos = g.attributes.position, n = pos.count, aW = new Float32Array(n), aPhi = new Float32Array(n), aFade = new Float32Array(n);
+  for (let i = 0; i < n; i++) {
+    let x = pos.getX(i), y = pos.getY(i), z = pos.getZ(i); const phi = Math.atan2(x, z);
+    const w = smooth(0.6, 0.0, y);
+    const nn = 0.5 * (0.5 + 0.5 * Math.sin(phi * 7 + 0.4)) + 0.3 * (0.5 + 0.5 * Math.sin(phi * 13 + 2.1)) + 0.2 * (0.5 + 0.5 * Math.sin(phi * 23 + 0.7));
+    y -= w * w * 0.34 * Math.pow(nn, 2.4); const shrink = 1 - 0.16 * w * w * nn; x *= shrink; z *= shrink;
+    x *= 1 + 0.12 * smooth(1.0, 1.4, y) * smooth(1.62, 1.45, y); z *= 0.84;
+    pos.setXYZ(i, x, y, z); aW[i] = w; aPhi[i] = phi; aFade[i] = smooth(-0.3, 0.55, y);
+  }
+  g.setAttribute('aW', new THREE.BufferAttribute(aW, 1)); g.setAttribute('aPhi', new THREE.BufferAttribute(aPhi, 1)); g.setAttribute('aFade', new THREE.BufferAttribute(aFade, 1));
+  g.computeVertexNormals();
+  var robe = new THREE.Mesh(g, robeMat); robe.castShadow = true; robe.receiveShadow = true; parts.add(robe);
+}
+
+// hood, void, eyes, horns
+const head = new THREE.Group(); head.position.set(0, 1.76, 0); parts.add(head);
+{
+  const g = new THREE.SphereGeometry(0.2, 56, 40); g.rotateY(-Math.PI / 2);
+  const pos = g.attributes.position, v = new THREE.Vector3();
+  for (let i = 0; i < pos.count; i++) {
+    v.fromBufferAttribute(pos, i); const ny = v.y / 0.2, nz = v.z / 0.2;
+    const peak = Math.pow(Math.max(0, ny * 0.75 - nz * 0.25), 3.5);
+    v.z *= 1.12; v.y += 0.085 * peak; v.z -= 0.06 * peak; v.x *= 1 - 0.1 * peak;
+    pos.setXYZ(i, v.x, v.y, v.z);
+  }
+  g.computeVertexNormals();
+  const hood = new THREE.Mesh(g, clothMat); hood.castShadow = hood.receiveShadow = true; head.add(hood);
+  const voidMat = new THREE.MeshBasicMaterial({ color: 0x000000 });
+  const face = new THREE.Mesh(new THREE.SphereGeometry(1, 40, 28), voidMat); face.scale.set(0.108, 0.138, 0.075); face.position.set(0, -0.015, 0.165); head.add(face);
+}
+const eyeMat = new THREE.MeshBasicMaterial({ color: 0x000000 });
+for (const s of [-1, 1]) {
+  const e = new THREE.Mesh(new THREE.SphereGeometry(1, 16, 10), eyeMat); e.scale.set(0.017, 0.0075, 0.006);
+  e.position.set(s * 0.04, -0.0, 0.237); e.rotation.z = s * -0.38; head.add(e);
+}
+const hornMat = P({ color: 0xffffff, vertexColors: true, roughness: 0.36, clearcoat: 0.6, clearcoatRoughness: 0.28, specularIntensity: 0.7, bumpMap: stoneBump, bumpScale: 0.8 });
+for (const s of [-1, 1]) {
+  const path = new THREE.CatmullRomCurve3([[0.1, 0.08, 0.03], [0.19, 0.14, 0.01], [0.245, 0.25, -0.03], [0.225, 0.37, -0.055], [0.165, 0.445, -0.03]].map(p => new THREE.Vector3(s * p[0], p[1], p[2])));
+  const segs = 48, rad = 14, g = new THREE.TubeGeometry(path, segs, 1, rad, false);
+  const pos = g.attributes.position, col = new Float32Array(pos.count * 3), P0 = new THREE.Vector3(), v = new THREE.Vector3();
+  for (let i = 0; i <= segs; i++) {
+    const t = i / segs; path.getPointAt(t, P0);
+    const r = (0.036 * Math.pow(1 - t, 0.85) + 0.0015) * (1 + 0.07 * Math.sin(t * 46) * (1 - t));
+    const c0 = [0.46, 0.37, 0.27], c1 = [0.03, 0.02, 0.02], k = Math.pow(t, 0.8);
+    for (let j = 0; j <= rad; j++) { const idx = i * (rad + 1) + j; v.fromBufferAttribute(pos, idx).sub(P0).multiplyScalar(r).add(P0); pos.setXYZ(idx, v.x, v.y, v.z);
+      col[idx * 3] = lerp(c0[0], c1[0], k); col[idx * 3 + 1] = lerp(c0[1], c1[1], k); col[idx * 3 + 2] = lerp(c0[2], c1[2], k); }
+  }
+  g.setAttribute('color', new THREE.BufferAttribute(col, 3)); g.computeVertexNormals();
+  const horn = new THREE.Mesh(g, hornMat); horn.castShadow = true; head.add(horn);
+}
+
+// sleeves and hands
+function sleeveGeometry(r0, r1, billow) { const g = new THREE.CylinderGeometry(r1, r0, 1, 24, 8, true); g.translate(0, 0.5, 0);
+  const pos = g.attributes.position;
+  for (let i = 0; i < pos.count; i++) { const y = pos.getY(i), k = 1 + billow * Math.sin(Math.PI * y) * (1 - smooth(0.85, 1.0, y)); pos.setX(i, pos.getX(i) * k); pos.setZ(i, pos.getZ(i) * k); }
+  g.computeVertexNormals(); return g; }
+const upperGeo = sleeveGeometry(0.085, 0.08, 0.12), foreGeo = sleeveGeometry(0.072, 0.098, 0.1);
+const sleeveMat = clothMat.clone(); sleeveMat.side = THREE.DoubleSide;
+const skinMat = P({ color: 0x5f6b67, roughness: 0.55, sheen: 0.4, sheenColor: 0x9fb0aa, sheenRoughness: 0.5, specularIntensity: 0.5, clearcoat: 0.15 });
+const clawMat = P({ color: 0x120c0a, roughness: 0.3, clearcoat: 0.8 });
+const SHOULDERS = [new THREE.Vector3(-0.25, 1.43, 0.03), new THREE.Vector3(0.25, 1.43, 0.03)];
+const sleeves = [], hands = [], elbows = [];
+const elbowGeo = new THREE.SphereGeometry(0.084, 20, 14);
+for (const s of [-1, 1]) {
+  const up = new THREE.Mesh(upperGeo, sleeveMat), fo = new THREE.Mesh(foreGeo, sleeveMat), el = new THREE.Mesh(elbowGeo, clothMat);
+  [up, fo, el].forEach(o => { o.castShadow = o.receiveShadow = true; parts.add(o); }); sleeves.push([up, fo]); elbows.push(el);
+  const hand = new THREE.Group();
+  const palm = new THREE.Mesh(new THREE.SphereGeometry(1, 20, 14), skinMat); palm.scale.set(0.034, 0.02, 0.048); palm.position.set(0, 0, 0.03); hand.add(palm);
+  for (let f = 0; f < 4; f++) {
+    const fx = (f - 1.5) * 0.015, len = 0.032 - Math.abs(f - 1.5) * 0.004;
+    const prox = new THREE.Mesh(new THREE.CapsuleGeometry(0.0075, len, 4, 8), skinMat); prox.rotation.x = Math.PI / 2 - 0.25; prox.position.set(fx, 0.004, 0.07 + len * 0.3); hand.add(prox);
+    const dist = new THREE.Mesh(new THREE.CapsuleGeometry(0.0065, len * 0.9, 4, 8), skinMat); dist.rotation.x = Math.PI / 2 - 1.3; dist.position.set(fx, 0.02, 0.093 + len * 0.45); hand.add(dist);
+    const claw = new THREE.Mesh(new THREE.ConeGeometry(0.0055, 0.018, 6), clawMat); claw.rotation.x = -0.35; claw.position.set(fx, 0.04, 0.099 + len * 0.5); hand.add(claw);
+  }
+  hand.traverse(o => { if (o.isMesh) o.castShadow = true; });
+  hand.rotation.set(0.15, -s * 1.15, s * 0.25); parts.add(hand); hands.push(hand);
+}
+
+// candle rig
+const candleRig = new THREE.Group(); parts.add(candleRig);
+const brassMat = P({ color: 0x7a5a36, metalness: 1.0, roughness: 0.4, clearcoat: 0.2, envMapIntensity: 1.0, bumpMap: stoneBump, bumpScale: 0.5 });
+const waxMat = P({ color: 0xe9dcc2, roughness: 0.48, sheen: 0.5, sheenColor: 0xffd6a0, emissive: 0xff8a3a, emissiveMap: waxGlow, emissiveIntensity: 0, specularIntensity: 0.5 });
+{
+  const dish = new THREE.Mesh(new THREE.LatheGeometry([[0.0, 0.0], [0.06, 0.0], [0.074, 0.008], [0.08, 0.019], [0.077, 0.021], [0.07, 0.012], [0.03, 0.009], [0.028, 0.03], [0.024, 0.031], [0.022, 0.012], [0.0, 0.012]].map(p => new THREE.Vector2(...p)), 48), brassMat);
+  dish.castShadow = dish.receiveShadow = true; candleRig.add(dish);
+  const ring = new THREE.Mesh(new THREE.TorusGeometry(0.022, 0.0045, 8, 24), brassMat); ring.position.set(0.09, 0.012, 0); ring.rotation.y = Math.PI / 2; candleRig.add(ring);
+  const cg = new THREE.CylinderGeometry(0.021, 0.023, 0.12, 28, 6); const cp = cg.attributes.position;
+  for (let i = 0; i < cp.count; i++) { const y = cp.getY(i), r = Math.hypot(cp.getX(i), cp.getZ(i)); if (y > 0.059 && r < 0.012) cp.setY(i, y - 0.008); }
+  cg.computeVertexNormals();
+  const candle = new THREE.Mesh(cg, waxMat); candle.position.y = 0.012 + 0.06; candle.castShadow = true; candle.receiveShadow = true; candleRig.add(candle);
+  for (let k = 0; k < 5; k++) { const a = k * 1.3 + 0.4, l = 0.012 + hash1(k) * 0.03;
+    const d = new THREE.Mesh(new THREE.CapsuleGeometry(0.0042, l, 4, 8), waxMat); d.position.set(Math.cos(a) * 0.022, 0.13 - l / 2 - 0.004, Math.sin(a) * 0.022); candleRig.add(d); }
+  const pool = new THREE.Mesh(new THREE.SphereGeometry(1, 20, 10), waxMat); pool.scale.set(0.034, 0.006, 0.032); pool.position.y = 0.012; candleRig.add(pool);
+  const wick = new THREE.Mesh(new THREE.CylinderGeometry(0.0016, 0.0018, 0.014, 6), new THREE.MeshPhysicalMaterial({ color: 0x0b0806, roughness: 0.9 }));
+  wick.position.set(0, 0.131, 0); wick.rotation.z = 0.12; candleRig.add(wick);
+}
+const FLAME_BASE = new THREE.Vector3(0, 0.137, 0);
+const flameMat = new THREE.ShaderMaterial({
+  transparent: true, depthWrite: false, blending: THREE.AdditiveBlending, fog: false,
+  uniforms: { uTime: { value: 0 }, uBend: { value: new THREE.Vector3() }, uLife: { value: 0 }, uStretch: { value: 1 }, uFogDensity: { value: FOG_DENSITY } },
+  vertexShader: \`uniform float uTime, uStretch; uniform vec3 uBend; varying float vH; varying vec3 vN; varying vec3 vV; varying float vD;
+    void main(){ vec3 p = position; float h = p.y; vH = h;
+      float fl = sin(uTime*17.0 + h*5.0)*0.5 + sin(uTime*23.0 + 1.7)*0.3 + sin(uTime*9.0 + h*2.0)*0.4;
+      p.x += fl*0.07*h*h; p.z += cos(uTime*13.0 + h*4.0)*0.05*h*h;
+      p.y *= uStretch*(1.0 + 0.06*sin(uTime*21.0));
+      p += uBend*h*h;
+      vec4 mv = modelViewMatrix*vec4(p,1.0); vN = normalize(normalMatrix*normal); vV = normalize(-mv.xyz); vD = -mv.z;
+      gl_Position = projectionMatrix*mv; }\`,
+  fragmentShader: \`uniform float uLife, uFogDensity; varying float vH; varying vec3 vN; varying vec3 vV; varying float vD;
+    void main(){ float f = abs(dot(normalize(vN), normalize(vV))); float core = pow(f, 2.6);
+      vec3 blue = vec3(0.12, 0.22, 1.1), orange = vec3(2.4, 0.8, 0.14), white = vec3(4.2, 3.1, 1.7);
+      vec3 col = mix(orange, white, core*smoothstep(0.95, 0.2, vH));
+      col = mix(col, blue, smoothstep(0.22, 0.0, vH)*0.75*(1.0 - core));
+      float a = pow(f, 1.2)*smoothstep(1.0, 0.55, vH)*smoothstep(0.0, 0.06, vH);
+      float fogF = exp(-pow(uFogDensity*0.5*vD, 2.0));
+      gl_FragColor = vec4(col*a*uLife*fogF, 1.0); }\`
+});
+const flame = (() => { const pts = []; for (let i = 0; i <= 28; i++) { const y = i / 28; pts.push(new THREE.Vector2(0.4 * Math.sin(Math.PI * Math.pow(y, 0.55)) * Math.pow(1 - y, 0.35) + 0.0005, y)); }
+  const m = new THREE.Mesh(new THREE.LatheGeometry(pts, 28), flameMat); m.scale.set(0.042, 0.064, 0.042); m.position.copy(FLAME_BASE); m.frustumCulled = false; return m; })();
+candleRig.add(flame);
+const halo = new THREE.Sprite(new THREE.SpriteMaterial({ map: haloTex, color: 0xff9a50, blending: THREE.AdditiveBlending, transparent: true, depthWrite: false, fog: false, opacity: 0 }));
+halo.position.copy(FLAME_BASE).add(new THREE.Vector3(0, 0.03, 0)); halo.scale.setScalar(0.85); candleRig.add(halo);
+const candleLight = new THREE.PointLight(0xff9548, 0, 0, 2);
+candleLight.position.copy(FLAME_BASE).add(new THREE.Vector3(0, 0.028, 0));
+candleLight.castShadow = true; candleLight.shadow.mapSize.set(512, 512);
+candleLight.shadow.camera.near = 0.03; candleLight.shadow.camera.far = 14; candleLight.shadow.bias = -0.0025; candleLight.shadow.normalBias = 0.018;
+candleRig.add(candleLight);
+const flameAnchor = new THREE.Object3D(); flameAnchor.position.copy(FLAME_BASE).add(new THREE.Vector3(0, 0.03, 0)); candleRig.add(flameAnchor);
+
+/* ---------- the bats themselves: dark body, ears, scalloped membrane wings that flap ---------- */
+const batMat = P({ color: 0x15100f, roughness: 0.75, sheen: 0.4, sheenColor: 0x4a3a36, side: THREE.DoubleSide });
+const batWingGeo = (() => {
+  const s = new THREE.Shape(), pts = [[0, 0.06], [0.35, 0.16], [0.7, 0.14], [1.0, 0.05], [0.82, -0.04], [0.75, 0.02], [0.62, -0.1], [0.52, -0.02], [0.38, -0.16], [0.27, -0.06], [0.12, -0.14], [0, -0.08]];
+  pts.forEach(([x, y], i) => i ? s.lineTo(x, y) : s.moveTo(x, y)); s.closePath();
+  const g = new THREE.ShapeGeometry(s); g.rotateX(Math.PI / 2); return g;             // span along +x, leading edge forward (+z)
+})();
+const batBodyGeo = new THREE.SphereGeometry(1, 12, 8), batEarGeo = new THREE.ConeGeometry(1, 2.2, 5);
+const batRigs = BATS.map(bt => {
+  const g = new THREE.Group(), k = bt.span;
+  const bodyM = new THREE.Mesh(batBodyGeo, batMat); bodyM.scale.set(0.045 * k, 0.04 * k, 0.11 * k); g.add(bodyM);
+  const headM = new THREE.Mesh(batBodyGeo, batMat); headM.scale.setScalar(0.035 * k); headM.position.set(0, 0.012 * k, 0.1 * k); g.add(headM);
+  for (const s of [-1, 1]) { const e = new THREE.Mesh(batEarGeo, batMat); e.scale.setScalar(0.012 * k); e.position.set(s * 0.016 * k, 0.045 * k, 0.1 * k); e.rotation.z = -s * 0.3; g.add(e); }
+  const wings = [-1, 1].map(s => { const piv = new THREE.Group(); piv.position.x = s * 0.03 * k; const w = new THREE.Mesh(batWingGeo, batMat); w.scale.set(s * k * 0.5, 1, k * 0.95); piv.add(w); g.add(piv); return piv; });
+  g.visible = false; scene.add(g); return { g, wings };
+});
+
+/* ---------- 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 -> 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; halo.visible = false; sky.visible = false; bokehRender(...a); mistGroup.visible = true; halo.visible = true; sky.visible = true; };
+composer.addPass(bokeh);
+composer.addPass(new OutputPass());
+const filmPass = new ShaderPass({
+  uniforms: { tDiffuse: { value: null }, uTime: { value: 0 }, uFade: { value: 0 }, uWhite: { 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, uWhite; 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(mix(max(col, 0.0)*uFade, vec3(1.0), uWhite), 1.0); }\`   // uWhite = 1 gives pure white
+});
+composer.addPass(titlePass);
+composer.addPass(statusPass);
+composer.addPass(filmPass);
+
+/* ==========================================================================
+   SEQUENCE — every value is a pure function of t
+   ========================================================================== */
+const tmpV = new THREE.Vector3(), flameW = 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();
+const CANDLE_REST = new THREE.Vector3(0, 1.18, 0.42);
+
+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 = (WHITE_BLANK ? 1 : smoother(T.revealIn, T.revealFull, t)) * on;   // morning: full daylight under the white
+  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);
+
+  // devil glide (integrated speed profile) + floating oscillators
+  const u = clamp((t - T.devilGo) / (T.devilArrive - T.devilGo));
+  const s = travel(u), zD = devilZ(t);
+  const vel = (devilZ(t + 0.05) - devilZ(t - 0.05)) / 0.1;
+  const acc = (devilZ(t + 0.1) - 2 * zD + devilZ(t - 0.1)) / 0.01;
+  const settle = Math.pow(1 - s, 2);
+  const swayX = 0.16 * Math.sin(t * 0.55 + 0.4) * settle;
+  const swayV = 0.16 * 0.55 * Math.cos(t * 0.55 + 0.4) * settle;
+  const bob = 0.055 * Math.sin(t * 2.05) + 0.022 * Math.sin(t * 3.7 + 1.3) + 0.012 * Math.sin(t * 0.9 + 2.0);
+  const lift = smoother(T.lift0, T.lift1, t), blow = smoother(T.blow0, T.out - 0.1, t);
+  devil.position.set(swayX, 0.36 + bob, zD);
+  devil.rotation.y = 0.13 * Math.sin(t * 0.38 + 1.1) * settle;
+  body.rotation.x = 0.016 * vel - 0.012 * acc + 0.035 * lift - 0.02 * blow;
+  body.rotation.z = -0.9 * swayV + 0.015 * Math.sin(t * 1.3);
+  U.time.value = t; U.drag.value = clamp(vel / 6, 0, 1); U.flutter.value = 0.7 + 0.5 * clamp(vel / 4, 0, 1);
+
+  // breath: lift candle to the face, inhale, blow
+  const inhale = smooth(T.lift0 + 0.3, T.blow0, t) * (1 - blow);
+  candleRig.position.set(0, CANDLE_REST.y + 0.2 * lift + 0.01 * Math.sin(t * 2.6), CANDLE_REST.z - 0.03 * lift + 0.015 * blow);
+  head.rotation.x = 0.06 + 0.2 * lift + 0.08 * blow + 0.012 * Math.sin(t * 1.1);
+  head.position.z = 0.035 * blow; head.position.y = 1.76 + 0.012 * inhale;
+  robe.scale.set(1 + 0.035 * inhale, 1, 1 + 0.05 * inhale);
+  for (let k = 0; k < 2; k++) {
+    const sgn = k === 0 ? -1 : 1, S = SHOULDERS[k];
+    const Wp = tmpV.copy(candleRig.position).add(new THREE.Vector3(sgn * 0.09, -0.03, -0.05));
+    hands[k].position.copy(Wp);
+    const Sp = S.clone().add(new THREE.Vector3(0, 0.012 * inhale, 0));
+    const E = new THREE.Vector3(sgn * 0.3, 1.12 + 0.12 * lift, 0.17);
+    elbows[k].position.copy(E);
+    const [up, fo] = sleeves[k];
+    let dir = E.clone().sub(Sp); up.position.copy(Sp); up.scale.set(1, dir.length(), 1); up.quaternion.setFromUnitVectors(Yup, dir.normalize());
+    dir = Wp.clone().sub(E); fo.position.copy(E); fo.scale.set(1, dir.length(), 1); fo.quaternion.setFromUnitVectors(Yup, dir.normalize());
+  }
+
+  // candle: kindles deep in the fog, flickers, bends and gutters, then dies
+  const kindle = smoother(1.5, 3.5, t) * on;
+  const flick = 0.8 + 0.14 * fbm1(t * 2.3) + 0.06 * noise1(t * 14.0);
+  const gutter = 1 - 0.65 * blow;
+  const candleLevel = kindle * flick * gutter;
+  candleLight.intensity = K.candle * candleLevel;
+  flameMat.uniforms.uTime.value = t; flameMat.uniforms.uLife.value = kindle * (0.85 + 0.15 * flick) * (1 - 0.5 * blow);
+  flameMat.uniforms.uBend.value.set(0.25 * Math.sin(t * 9) * blow, -0.25 * blow, 1.4 * blow + 0.25 * inhale * Math.sin(t * 7));
+  flameMat.uniforms.uStretch.value = 1 + 0.25 * blow;
+  flame.visible = !out;
+  waxMat.emissiveIntensity = 0.9 * candleLevel;
+  candleLight.position.x = 0.002 * Math.sin(t * 13) + 0.012 * blow;
+
+  // eyes wake once it is close
+  const eyeK = smoother(6.5, 10.0, t) * on * (0.85 + 0.15 * noise1(t * 4.0)) * (1 + 0.6 * inhale);
+  eyeMat.color.setRGB(2.1 * eyeK, 0.2 * eyeK, 0.025 * eyeK);
+
+  // pumpkins kindle with the reveal and cower as it passes
+  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;
+  }
+
+  // bats: fly their paths, flapping, banking into each weave
+  BATS.forEach((bt, i) => {
+    const rig = batRigs[i], p = batPos(bt, t);
+    if (!p || on === 0) { rig.g.visible = false; return; }
+    const q = batPos(bt, Math.min(t + 0.03, bt.t0 + bt.dur)) || p;
+    rig.g.visible = true; rig.g.position.set(p[0], p[1], p[2]); rig.g.lookAt(q[0], q[1], q[2] + (q === p ? 0.01 : 0));
+    rig.g.rotateZ(0.5 * Math.cos(((t - bt.t0) / bt.dur) * 11 + bt.ph));
+    rig.g.rotateX(-0.75);   // nose up a little, so the camera sees the wings' undersides rather than their edges
+    const flap = 0.2 + 0.95 * Math.sin(2 * Math.PI * bt.rate * t + bt.ph);
+    rig.wings[0].rotation.z = flap; rig.wings[1].rotation.z = -flap;
+  });
+
+  // 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.735, Math.max(zD, -30));
+  camera.lookAt(tmpV.copy(lookFar).lerp(lookDev, wLook));
+  camera.updateMatrixWorld();
+
+  // derived: candle world position feeds DOF, mist scattering, halo
+  devil.updateMatrixWorld(true);
+  flameAnchor.getWorldPosition(flameW);
+  const camDist = camera.position.distanceTo(flameW);
+  halo.material.opacity = 0.2 * candleLevel * Math.exp(-Math.pow(FOG_DENSITY * 0.55 * camDist, 2));
+  mistUniforms.uTime.value = t; mistUniforms.uColor.value.copy(fogCol).multiplyScalar(1.1);
+  mistUniforms.uCandlePos.value.copy(flameW); mistUniforms.uCandleI.value = candleLevel; mistUniforms.uCam.value.copy(camera.position);
+  sky.position.copy(camera.position);
+  const focus = -flameW.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 = WHITE_BLANK ? 1 : on;
+  filmPass.uniforms.uWhite.value = WHITE_BLANK ? Math.max(1 - smoother(0.6, 3.6, t), on ? 0 : 1) : 0;   // fade from white; cut to white
+  titlePass.uniforms.uT.value = t - TITLE_T0; titlePass.uniforms.uOn.value = on;
+  statusPass.uniforms.uT.value = t; statusPass.uniforms.uOn.value = on;
+}
+
+/* ---------- ?export: render every frame from the timeline and save an MP4 with sound ----------
+   Runs entirely in the browser (Chrome or Edge): WebCodecs encodes H.264 video and AAC audio
+   (Opus where AAC isn't available) and mp4-muxer packs them into a file that downloads. */
+async function exportVideo() {
+  const FPS = 30, VW = 1920, VH = 1080, total = Math.round(T.end / STORY_SCALE * FPS), file = 'halloween_devil_morning.mp4';
+  const ui = document.createElement('p');
+  ui.style.cssText = 'position:fixed;left:18px;bottom:14px;margin:0;font:13px/1.4 system-ui,sans-serif;color:#a7adb5;z-index:10';
+  document.body.appendChild(ui);
+  renderer.domElement.style.width = '100vw'; renderer.domElement.style.height = 'auto';
+  const say = s => { ui.textContent = s; };
+  const breathe = () => new Promise(r => { const c = new MessageChannel(); c.port1.onmessage = r; c.port2.postMessage(0); });
+  try {
+    if (!('VideoEncoder' in window) || !('AudioEncoder' in window)) throw new Error('this browser cannot encode video. Open the page in a recent Chrome or Edge.');
+    const { Muxer, ArrayBufferTarget } = await import('https://cdn.jsdelivr.net/npm/mp4-muxer@5.1.3/build/mp4-muxer.mjs');
+    const aac = (await AudioEncoder.isConfigSupported({ codec: 'mp4a.40.2', sampleRate: 48000, numberOfChannels: 2, bitrate: 192000 })).supported;
+    const muxer = new Muxer({ target: new ArrayBufferTarget(), fastStart: 'in-memory',
+      video: { codec: 'avc', width: VW, height: VH, frameRate: FPS }, audio: { codec: aac ? 'aac' : 'opus', numberOfChannels: 2, sampleRate: 48000 } });
+    let failure = null;
+    const ve = new VideoEncoder({ output: (c, m) => muxer.addVideoChunk(c, m), error: e => { failure = e; } });
+    ve.configure({ codec: 'avc1.640028', width: VW, height: VH, bitrate: 16e6, framerate: FPS });
+    for (let i = 0; i < total; i++) {
+      if (failure) throw failure;
+      window.__renderAt(i / FPS);
+      const frame = new VideoFrame(renderer.domElement, { timestamp: Math.round(i * 1e6 / FPS), duration: Math.round(1e6 / FPS) });
+      ve.encode(frame, { keyFrame: i % (FPS * 2) === 0 }); frame.close();
+      while (ve.encodeQueueSize > 4) await new Promise(r => ve.addEventListener('dequeue', r, { once: true }));
+      if (i % 5 === 0) { say(\`Rendering video \${Math.round(100 * i / total)}%. Keep this tab open and visible.\`); await breathe(); }
+    }
+    await ve.flush();
+    say('Rendering sound…');
+    const actx = new OfflineAudioContext(2, Math.ceil(T.end / STORY_SCALE * 48000), 48000);
+    buildSound(actx, 0, actx.destination);
+    const sound = await actx.startRendering();
+    const ae = new AudioEncoder({ output: (c, m) => muxer.addAudioChunk(c, m), error: e => { failure = e; } });
+    ae.configure({ codec: aac ? 'mp4a.40.2' : 'opus', sampleRate: 48000, numberOfChannels: 2, bitrate: 192000 });
+    for (let s = 0; s < sound.length; s += 4800) {
+      const n = Math.min(4800, sound.length - s), planar = new Float32Array(n * 2);
+      planar.set(sound.getChannelData(0).subarray(s, s + n), 0); planar.set(sound.getChannelData(1).subarray(s, s + n), n);
+      const data = new AudioData({ format: 'f32-planar', sampleRate: 48000, numberOfFrames: n, numberOfChannels: 2, timestamp: Math.round(s * 1e6 / 48000), data: planar });
+      ae.encode(data); data.close();
+    }
+    await ae.flush();
+    if (failure) throw failure;
+    muxer.finalize();
+    const blob = new Blob([muxer.target.buffer], { type: 'video/mp4' }), url = URL.createObjectURL(blob);
+    const a = document.createElement('a'); a.href = url; a.download = file; document.body.appendChild(a); a.click();
+    ui.textContent = ''; const link = document.createElement('a'); link.href = url; link.download = file; link.style.color = '#d8dde3';
+    link.textContent = \`Download \${file} (\${(blob.size / 1e6).toFixed(1)} MB)\`; ui.append('Saved. If the download didn\\'t start: ', link);
+  } catch (e) {
+    say(\`Export stopped: \${e.message || e}\`); console.error(e);
+  }
+}
+
+/* ---------- 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 * STORY_SCALE); composer.render(); return true; };   // t in video seconds
+  window.__duration = T.end / STORY_SCALE;   // 18 s
+  window.__renderAudio = renderSoundtrack;   // base64 WAV, 48 kHz stereo, same timeline
+  document.getElementById('hint').remove();
+  window.__ready = true;
+  if (EXPORT) exportVideo();
+} 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;
+  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);
+  }
+  const LOOP = T.loop / STORY_SCALE;   // video seconds
+  function frame(now) {
+    let t = 0;
+    if (started) {
+      t = clock();
+      if (actx && !nextQueued && t > LOOP - 0.6) { cycleOut = schedule(cycleStart + LOOP); nextQueued = true; }
+      if (t >= LOOP) { if (actx) { cycleStart += LOOP; nextQueued = false; } else clockStart += LOOP * 1000; t -= LOOP; }
+      t = Math.max(0, t);
+    }
+    update(t * STORY_SCALE); composer.render();
+    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);
+  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 {
+  halloweenDevilLightHtml as default
+};