Hollowmere Halloween Descent

# Prompt: HOLLOWMERE, "A Night of Lanterns": Halloween descent scroll

Give me the superdetailed exact prompt to recreate this page exactly as it is, including the correct asset URL, all elements, animations, and fonts. This is that prompt.

## What it is

Build a single-page site for a fictional Halloween night festival called **Hollowmere**. Use plain HTML, CSS and vanilla JavaScript in one file, with no libraries.

**The structure.** The page is **one continuous illustrated descent**: five full-bleed flat-vector Halloween scenes stacked vertically into a single tall picture.

| # | Scene |
|---|---|
| 1 | A moonlit canyon of gothic houses with a castle on the moon |
| 2 | An underground crypt laboratory with a glass tower of captured ghosts |
| 3 | A mill chamber with a giant jack-o'-lantern-studded wheel |
| 4 | A cauldron foundry pouring molten potion |
| 5 | A cave mouth opening onto a moonlit lake of floating lanterns |

**The joins.** Between every pair of scenes lies an illustrated band of rock strata: the ground of the scene above on top, the cave ceiling of the scene below underneath. The scenes therefore join through real drawn geology, never through gradient fades.

**The art.** Every scene is drawn in one art style: angular shard-cut shapes, grainy speckled texture, glowing rim light, deep indigo, violet and electric blue with pale cyan ghost-light and warm orange jack-o'-lantern accents. A **pale cyan "ghost-light" waterfall** runs from the hero's pool down through the scenes, like the falls in an illustrated-scroll corporate site.

**The motion is all code:**
- The falls flow continuously as canvas streaks.
- Lava streams pour.
- Mist breathes and lanterns and jack-o'-lanterns flicker.
- Motes, spray, bubbles and moonlight shimmer drift on small canvases.
- Ghost sprites bob and shy away from the cursor, and bats flap across the skies.
- The page scrolls with eased momentum.
- The hero title rises letter by letter on load and drifts with parallax, and section copy rises line by line out of masks.
- A warm "lantern" glow follows the cursor.

## Media: every asset URL

All images are Higgsfield generation results served through the images.higgs.ai resizer. They are not re-uploaded.

| Asset | URL | Notes |
|---|---|---|
| Scene 1, hero (canyon, moon and castle, ghost-light falls, pool, lower cascade) | https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20261029_023809_d6836117-c958-4680-aa43-1e1973fbc17c.png&w=2400&q=85 | Source 2688 × 1520 |
| Scene 2, crypt laboratory | https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20261029_023812_40e3f5f5-a613-4a33-9c78-4cab8b04a992.png&w=2400&q=85 | 2688 × 1520 |
| Scene 3, mill wheel chamber | https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20261029_023814_b2c8f33a-3c90-4aa1-bb91-cce7f0deb878.png&w=2400&q=85 | 2688 × 1520 |
| Scene 4, cauldron foundry | https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20261029_023817_3e21faea-ad1c-4723-be92-9b22692094e1.png&w=2400&q=85 | 2688 × 1520 |
| Scene 5, cave mouth onto the lantern lake | https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20261029_023819_5b21be3d-159e-4d1d-a3b3-80339bc5d5f1.png&w=2400&q=85 | 2688 × 1520 |
| Seam 1: canyon floor (boulders, two jack-o'-lanterns, crooked tombstone, dead grass) over the crypt ceiling (stalactites, roots, cobwebs, a chain with a small lantern), with a waterfall opening at 47–53 % | https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20261029_025938_e54c50c3-9748-4d00-af68-886bef6e65e7.png&w=2400&q=85 | 2688 × 1152, transparent (Higgsfield background remover result) |
| Seam 2: crypt flagstones (skulls, melted candles, a jack-o'-lantern) over the mill ceiling (wooden beams, stalactites), with a waterfall opening at about 23–31 % | https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20261029_030022_7a86d576-94d5-4069-b515-62547af3b50c.png&w=2400&q=85 | 2688 × 1152, transparent (Higgsfield background remover result) |
| Seam 3: mill floor (iron grate, puddles, candles) over the foundry ceiling (riveted pipes, chains, a cog, stalactites), with a waterfall pouring through an iron pipe collar at about 62–73 % | https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20261029_025940_a85237c9-d7e3-4c28-b1d9-71ad7d8cbca4.png&w=2400&q=85 | 2688 × 1152, transparent (Higgsfield background remover result) |
| Seam 4: foundry floor (glowing orange potion puddles, a jack-o'-lantern) over the jagged sea-cave ceiling (violet shards, cyan rim, stalactites, two hanging bats), no opening | https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20261029_025942_debc2172-5187-4ad4-af0d-307c5e0277b5.png&w=2400&q=85 | 2688 × 1152, transparent (Higgsfield background remover result) |
| Sprite sheet: 4 ghosts on the top row, bats on the bottom row, transparent | https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20261029_023917_156ac3d3-e103-4a95-947d-07554914ab0b.png&w=1024&q=85 | 1024 × 688, keeps alpha |

### Using the scenes

- Each scene is the `background` of an `.art` box (`center / 100% 100% no-repeat`), passed through a CSS variable `--img`.
- When the URL is inside an inline `style` attribute, write it as `url('…')` in single quotes.
- Every scene's top and bottom edge is dark `#110A2A`. The seam bands cover those edges completely, so no fade is ever visible.

### Using the sprite sheet

Each sprite is a `<div>` showing a crop of the one sheet. With the sheet at 1024 × 688 and a crop of `[x, y, w, h]`:
- `background-size = (1024/w × 100)% (688/h × 100)%`
- `background-position = (x/(1024−w) × 100)% (y/(688−h) × 100)%`
- `aspect-ratio = w / h`

| Sprite | Crop [x, y, w, h] |
|---|---|
| ghost1: drifting, trailing tail | 39, 103, 204, 221 |
| ghost2: waving | 303, 122, 152, 212 |
| ghost3: curled tail | 538, 125, 208, 201 |
| ghost4: tall, rising | 833, 70, 131, 280 |
| bat, wings up | 41, 389, 203, 221 |
| bat, wings down | 299, 389, 195, 221 |

Ghosts carry `filter: drop-shadow(0 0 10px rgba(170,235,255,.45))`.

## Fonts

Self-host them; the single file embeds both as base64 WOFF2 (Latin subset).

| Family | Use | Source |
|---|---|---|
| Oswald (variable, 200–700) | The hero title and subtitle | https://fonts.googleapis.com/css2?family=Oswald:wght@300..700 |
| Inter (variable, 100–900) | Nav, headings, body, buttons | https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600 |

## Tokens

| Token | Value |
|---|---|
| `--night` (page and theme colour) | `#110A2A` |
| `--ink` | `#F4F0FF` |
| `--soft` (body copy) | `rgba(232,226,255,.78)` |
| `--ember` (button hover) | `#FF9A3C` |
| `--ease` | `cubic-bezier(.2,.8,.2,1)` |
| `--artH` (scene height) | `calc(100vw × 1520 / 2688)`, so each scene is exactly 16:9-ish and fills a 1440 × 810 screen |

## Page structure

- **`<header class="nav">`:** fixed, `z-index 50`.
- **`#scroller`:** `position: fixed; top: 0; width: 100%`, moved by `translate3d`. It holds the five `<section class="scene">` elements, with a `<div class="seam">` between each pair. There is no footer.
- **`body`:** its height is set by JS to the scroller's height, so native scrolling drives everything.
- **`.lamp`:** the cursor light, `position: fixed`.

### Nav

- **Bar:** 64px tall, padding 0 2.2vw, grid `1fr auto 1fr`, with a top-down scrim from `rgba(17,10,42,.55)` to transparent.
- **Type:** Inter 500, 12px, links in `rgba(244,240,255,.82)` turning white on hover.
- **Left,** 5.6vw apart: "Our Story", "The Rites", "Visitors".
- **Centre, the logo:** a 26 × 24 SVG. A solid white triangle (13,1 → 25,23 → 1,23) with a crescent-moon notch: a 3.4px night-coloured circle at (13, 15.2) overlapped by a 3px white circle at (14.4, 14.4).
- **Right:** "Gallery" and "Journal" (both link to the finale), then a "Tickets" box: 1px `rgba(244,240,255,.6)` border, padding 9px 14px, 2px radius, filling white with night-coloured text on hover.
- **On load:** the nav slides down from `translateY(−100%)` over 900ms with a 500ms delay.

### Scene shell

- **`.scene`:** `position: relative; height: var(--artH); overflow-x: clip`.
- **Stacking:** scenes have no z-index. The hero has `overflow: clip` on both axes, so its parallax never spills onto scene 2.
- **`.art`:** `position: absolute; inset: top 0 left 0; width: 100vw; height: var(--artH)`. It holds a `.bg` div plus every animated layer, all positioned in **% of the illustration**, so they stay locked to the painted features at any size.

## The seams: illustrated rock bands across every join

- **Element:** `<div class="seam">` with `position: relative; height: 0; z-index: 10; pointer-events: none`, placed between two sections. It sits above both neighbouring scenes.
- **Band:** a `.band` box inside it, `position: absolute; left: 0; top: 0; width: 100vw; aspect-ratio: 2688 / 1152; transform: translateY(−50%)`, so it straddles the join exactly. It holds the transparent band image (`<img>`, filling the box, `z-index 1`) and, where the falls pass through, a falls canvas behind the image (`z-index 0`).
- **Size:** the drawn rock occupies about 19–80 % of the band image's height. At 1440px wide, that is roughly 185px into the bottom of the upper scene and 185px into the top of the lower scene.
- **Mobile:** the band uses the lower scene's `--focus` with the same width and offset formula as `.art`, so its opening stays over the lower scene's falls.

| Seam | Between | `--focus` | Falls canvas behind the opening (left / top / width / height, % of the band) |
|---|---|---|---|
| 1 | Hero → Our Story | 48 | 44.8 / 2 / 10.4 / 90, speed 1 |
| 2 | Our Story → The Rites | 40 | 21.4 / 22 / 10.6 / 74, speed 1 |
| 3 | The Rites → Plan Your Night | 66 | 60.8 / 46 / 13.6 / 50, speed 1 (below the painted pipe collar) |
| 4 | Plan Your Night → Finale | 45 | none |

**Seam waterfalls get a water body.** Behind each opening there is no painted water, only the dark edges of the scenes, so a seam falls canvas first fills itself with a horizontal gradient before drawing its streaks:
- `rgba(80,150,255,0)` at the edges;
- `rgba(90,175,255,.7)` at 18 % and 82 %;
- `rgba(175,238,255,.96)` in the centre.

This makes the stream opaque enough to read as one waterfall continuing from the hero's painted cascade into the crypt's painted falls.

**Seam 1's canvas starts at 2 % of the band**, well above the join, so it is fully opaque across the line where the clipped hero ends.

## The five scenes, with every overlay

Positions are left and top in % of the art box; widths are % of art width. `canvas.fall` boxes are left, top, width, height. Every `.glow`, `.mist` and `.moonglow` is centred on its point with `translate(−50%, −50%)` and is a 1:1 circle unless a height is given.

### 1. Hero: "HOLLOWMERE" (`#top`, focus 50)

**Overlays:**
- **`.moonglow`** at 50.2 / 25.6, width 21 %. It is a ring halo: a radial gradient, transparent to 62 %, then `rgba(255,226,170,.32)` at 70 % and `rgba(190,150,255,.12)` at 85 %. It breathes over 6s.
- **Upper falls canvas** (ghost-light, speed 1): 47.4 / 51, 5.6 × 22.
- **Mist** at 50 / 73, 22 × 9.
- **Lower cascade canvas** (ghost-light, speed 1.15): 44 / 80, 12.4 × 34. It overhangs the bottom and is clipped by the hero.
- **12 warm jack-o'-lantern `.glow`s:**

| left / top | width |
|---|---|
| 4.8 / 54.4 | 4.6 |
| 18.5 / 50.6 | 3.6 |
| 17.5 / 69.4 | 3.8 |
| 25.9 / 38.3 | 2.6 |
| 31.6 / 42 | 2.4 |
| 30.4 / 63 | 2.4 |
| 80 / 36.7 | 3 |
| 85 / 45.3 | 3 |
| 93.8 / 53 | 4.6 |
| 87.8 / 73 | 3.8 |
| 74.5 / 61 | 2.6 |
| 67.2 / 64.8 | 2.6 |

- **Wisp canvas:** 70 particles.
- **Sprites:**
  - ghost1 at 21 / 30, width 4.2 %.
  - ghost2 at 78 / 21, width 3.4 %.
  - ghost4 at 64 / 44, width 2.8 %.
  - ghost3 at 36 / 46, width 2.4 %.
  - 4 bats crossing the sky band from 8 % to 34 %.

**Hero copy** sits centred at `top: artH × .085`, `z-index 6`:

| Element | Text | Style |
|---|---|---|
| `h1` | "HOLLOWMERE", split into one span per letter | Oswald 500, `clamp(46px, 6.4vw, 124px)`, line height 1, letter-spacing `calc(var(--ls, .42em) + var(--lsx, 0em))` with left padding equal to `--ls` so it stays optically centred, `overflow: hidden`, text-shadow `0 0 40px rgba(120,90,255,.45)` |
| `.sub` | "A NIGHT OF LANTERNS" | Oswald 500, `clamp(12px, 1.18vw, 22px)`, letter-spacing .62em, white, no shadow. Absolutely placed at `top: artH × .335` inside the hero copy (`.085 + .335` = 42 % of the art), on the dark hill **below** the moon and castle, so the title and subtitle frame the castle and nothing sits over the pale moon |

### 2. "Our Story" (`#story`, focus 48)

**Overlays:**
- **Falls canvas** (speed .9): 40.6 / 0, 17.2 × 90.
- **Mist** at 49 / 84, 34 × 14.
- **Cold `.glow`s** (cyan):

| What | left / top | width |
|---|---|---|
| Crystal ball | 20.3 / 69.8 | 7 |
| Ghost jars in the tower | 72.5 / 19 | 5 |
| | 80.4 / 18.1 | 4.4 |
| | 76 / 41.6 | 5.6 |
| | 85 / 43.3 | 4 |
| | 70.5 / 68.5 | 4.4 |
| | 77.3 / 63.7 | 4.4 |
| | 85.3 / 66.3 | 4 |

- **Warm `.glow`s:** 7.6 / 85 (4.4), 13.2 / 87 (3.2), 92.2 / 84 (3.6).
- **Mote canvas:** 50 particles.
- **Sprite:** ghost4 at 30 / 22, width 2.6 %.

**Copy** at left 6.5 %, top 26 %, width 31 %, below the seam band:

| Element | Text |
|---|---|
| `h2` | "Our Story" |
| Rule | |
| Paragraph | "Every October the falls of Hollowmere run pale. For one night the canyon lights its lanterns, the old houses open their doors, and the ghosts come home to visit." |
| Paragraph | "We have kept the night for two hundred years: a walk through the crypts, the mill and the cauldron halls, ending at the lake where the lanterns are set free." |
| Button | "Read the legend" |

### 3. "The Rites" (`#rites`, focus 40)

**Overlays:**
- **Falls canvas** (speed 1.05): 19.5 / 0, 18 × 38. It covers only the stretch above the wheel.
- **Mist** at 31 / 33, 22 × 10.
- **Warm wheel-pumpkin glows,** each 4.2 wide: 12 / 34, 37.5 / 47.7, 32.3 / 52.6, 11.7 / 62.3, 39 / 78.2.
- **Cold spellbook glows,** each 9 wide: 64.5 / 70.3 and 88.5 / 70.7.
- **Candle glows,** each 2.4 wide: 61.4 / 75, 72.6 / 75.4, 91.5 / 75.4.
- **Spray canvas:** 60 particles in the box x 20–40 %, y 30–48 %, where the falls hits the wheel.

**Copy** at left 55 %, top 24 %, width 40 %:

| Element | Text |
|---|---|
| `h2` | "The Rites" |
| Rule | |
| `h3` | "The Lantern Walk." |
| Paragraph | "At dusk the procession leaves the castle gate and follows the ghost-light falls down into the canyon. Bring a lantern, or borrow one of ours at the gate." |
| Paragraph | "Children lead, the old walk last, and nobody looks back until the bells stop." |
| `h3` | "The Turning Wheel." |
| Paragraph | "Below the falls the old mill turns all night. Write a wish on a paper lantern, pin it to a spoke, and let the wheel carry it round to midnight." |

### 4. "Plan Your Night" (`#night`, focus 66)

**Overlays:**
- **Falls canvas** (ghost, speed 1): 67.4 / 0, 11.8 × 37, pouring into the cauldron.
- **Three lava canvases** (speeds .55 / .6 / .5), each 1.8 wide and 25 tall at top 66.5, at left 62.3, 69.4 and 76.5. They line up with the three painted pipes.
- **Warm glows:** a wide floor glow at 70 / 93 (width 26), plus 16.8 / 78.2 (6), 27.8 / 85.3 (4) and 18 / 66.3 (8, the big amber bubble).
- **Cold glow** at 73 / 33 (14) where the falls meets the cauldron.
- **Bubble canvas:** 22 particles in the box x 60–84 %, y 8–36 %.

**Copy** at left 6.5 %, top 25 %, width 40 %:

| Element | Text |
|---|---|
| `h2` | "Plan Your Night" |
| Rule | |
| `h3` | "Gates at Six." |
| Paragraph | "The gates open at 18:00 on 31 October. The walk takes about ninety minutes, and the cauldron halls stay open until three, serving spiced cider, soul cakes and hot pumpkin broth." |
| `h3` | "Midnight at the Cauldron." |
| Paragraph | "At the twelfth bell the great cauldron is lit and every lantern in Hollowmere is carried down to the lake. Stay for it." |

### 5. Finale (`#finale`, focus 45)

**Overlays:**
- **`.moonglow`** at 39.1 / 56.6, width 19.
- **Shimmer canvas:** 90 particles in the box x 34–44 %, y 69–91 %, on the moon's light pillar.
- **15 warm lantern glows:**

| left / top | width |
|---|---|
| 29.9 / 76.7 | 3.4 |
| 32.9 / 72.7 | 2.4 |
| 45.9 / 72.7 | 2.4 |
| 48.3 / 77.4 | 3.6 |
| 55.4 / 81.8 | 4 |
| 58.1 / 75.6 | 3.2 |
| 53.9 / 72.2 | 2.2 |
| 62.5 / 72.5 | 2.2 |
| 69.9 / 80.9 | 4 |
| 74.9 / 75.9 | 3.2 |
| 73 / 72.3 | 2.2 |
| 79.1 / 72.5 | 2.2 |
| 24.8 / 72.1 | 2.2 |
| 7.8 / 65.4 | 5 (cave jack-o'-lantern) |
| 89.8 / 76.9 | 5 (cave jack-o'-lantern) |

- **Sprites:** ghost2 at 66 / 26 (width 3 %), ghost1 at 27 / 38 (width 2.6 %), and 3 bats in the band 24–40 %.

**Copy** is centred: `left: 50%; translateX(−50%); top: 30%; width: 60%; text-align: center`.
- **`h2`:** "See you at midnight.", `clamp(34px, 4.4vw, 78px)`.
- **Rule:** centred.
- **Buttons:** "Get tickets" (white, links to the finale) and "Plan your visit" (ghost button: transparent with a 1px `rgba(244,240,255,.6)` border).

There is **no footer**: the page ends on the finale scene.

## Copy typography

| Element | Style |
|---|---|
| `h2` | Inter 600, `clamp(30px, 3.4vw, 60px)`, line height 1.04, letter-spacing −.025em |
| `.rule` | 150 × 1px, `rgba(244,240,255,.45)`, margins 20px 0 22px, `transform-origin: left` |
| `h3` | Inter 600, 15px, 22px above and 8px below (no top margin straight after the rule) |
| Paragraph | Inter 400, 14px, line height 1.55, `--soft`, max 52ch, 10px between paragraphs |
| `.btn` | 38px tall, padding 0 18px, white with night text, Inter 600 12.5px, 2px radius, 22px above |

- **Copy blocks:** `max-width: 520px`, `z-index 6`. There are no eyebrow lines above the headings.
- **Button hover:** turns ember `#FF9A3C` with `#1A0B05` text and lifts 2px. Colour transitions take .3s; the lift uses `--ease`.

## The falls renderer (`canvas.fall`)

**Element styling:**
- `mix-blend-mode: screen`, so the streaks add light on top of the painted falls.
- A **double CSS mask**, intersected (`mask-composite: intersect`, `-webkit-mask-composite: source-in`):
  - horizontal: transparent → black 22 % → black 78 % → transparent;
  - vertical: transparent → black 12 % → black 82 % → transparent.
- The streams therefore feather out at the sides, top and bottom.

**Streak sprites:** pre-render 8 × 160 offscreen canvases, each a vertical gradient, two per kind.

| Kind | Sprite A | Sprite B |
|---|---|---|
| ghost | `rgba(190,240,255,0)` → `rgba(210,248,255,.95)` at 35 % → `rgba(120,200,255,0)` | `rgba(120,190,255,0)` → `rgba(140,215,255,.8)` at 50 % → `rgba(90,150,255,0)` |
| lava | `rgba(255,190,80,0)` → `rgba(255,236,150,1)` at 40 % → `rgba(255,120,30,0)` | `rgba(255,120,30,0)` → `rgba(255,150,50,.9)` at 50 % → `rgba(255,80,20,0)` |

**Sizing (on load and resize):**
- Read `offsetWidth` and `offsetHeight`, which ignore transforms, so the hero's load zoom does not distort it.
- The pixel ratio is capped at 1.5.

**Streaks per canvas:**

| | ghost | lava |
|---|---|---|
| Count | `round(w / 2.2) × 2` | `round(w / 3) × 3` |
| x | Anywhere across the width | Within the middle 50 % |
| Stroke width | .8–4px | 1–3.2px |
| Length | 60–280px | 30–100px |
| Speed | 420–760 px/s × the canvas `data-speed` | 195–350 px/s × the canvas `data-speed` |
| Opacity | .18–.73 | .18–.73 |

Each streak gets a random phase and one of the two sprites (45 % / 55 %).

**Each frame:**
- Clear the canvas and switch to `globalCompositeOperation = 'lighter'`.
- For every streak, `y = ((t × v × speed + phase) mod (h + len)) − len`.
- Draw the sprite at (x, y) and again one span higher, so streaks wrap seamlessly.
- Ghost streaks dim towards the edges by `1 − (|x/w − .5| × 2)² × .6`.
- Only canvases whose rect is within 50px of the viewport are drawn.

## Particle canvases (`canvas.dust`)

**Setup:**
- Each canvas is full-art, with `mix-blend-mode: screen`.
- Each particle has u, v, r, phase and speed .4–1.2.
- An optional box (`data-x/w/y/h`, in %) limits where the particles live.
- A canvas is drawn only while it is on screen.

| Kind | Behaviour |
|---|---|
| `wisp` (hero) | Rises at `.02 × speed` of the height per second from the canyon floor. It respawns at v .98 across x .2–.8 once v passes .35. It sways ±1.2 % and has radius .8–2.6px. Opacity fades in over the first .25 of its rise and pulses with `|sin(2t + phase)|`. Colour `rgb(190,240,255)` |
| `mote` (crypt) | Drifts up very slowly (.008 × speed), wraps top to bottom, sways ±2 %, radius .6–2px, opacity .25–.75, colour `rgb(170,225,255)` |
| `spray` (mill) | Lives a 1-second loop, `life = (t × speed × .8 + phase) mod 1`. It is thrown sideways by `(r − .5) × .6` of the box and falls in a parabola (`life² × .9` of the box height). Radius .7–2.3px, opacity 1 − life, colour `rgb(200,245,255)` |
| `bubble` (cauldron) | `life = (t × speed × .16 + phase) mod 1`. Rises from the bottom of the box to the top, wobbling `sin(1.4t)` × 3 % of the box, with radius (2–9px) × width/1440. Drawn as a radial gradient: `rgba(255,240,180,a)` → `rgba(255,170,70,.55a)` → transparent, with a highlight offset up and left. `a = sin(life × π) × .9` |
| `shimmer` (lake) | Horizontal glints 12–32px long and 1.2px tall in `rgba(255,240,205,a)`, with `a = max(0, sin(t × (1.2 + 2r) + phase)) × .8`. They spread wider further down the light pillar (spread .3 → 1) |

## CSS-animated glows

| Class | Look | Animation |
|---|---|---|
| `.glow` (warm) | `radial-gradient(closest-side, rgba(255,150,60,.7), rgba(255,110,40,.22) 50%, transparent)`, `mix-blend-mode: screen` | `flicker` 2.8s `steps(1,end)` infinite: an irregular candle stutter that holds opacity at 1 → .78 → 1 → .86 → 1 → .7 → .95 → .82 |
| `.glow.cold` | Cyan `rgba(150,235,255,.6)` / `rgba(110,190,255,.2)` | `breathe` 3.8s |
| `.mist` | Elliptical `radial-gradient(closest-side, rgba(170,235,255,.55), rgba(120,200,255,.18) 55%, transparent)` | `breathe` 4.6s |
| `.moonglow` | The ring halo described above | `breathe` 6s |

`breathe` keeps the element centred and scales it 1 → 1.08 → 1, with brightness 1 → 1.25 → 1, ease-in-out.

## Sprites in motion

**Ghosts:**
- **Placement:** each ghost is placed by `translate3d` at its % anchor in the art, centred, with drift added on top.
- **Wander:** `x += sin(.35t + phase) × 1.2 %` of the art width, `y += sin(.9t + phase) × 1.4 %` of the art height.
- **Sway:** rotation `sin(.7t + phase) × 6° + offsetX × .05`.
- **Cursor repulsion:** within 260px of the cursor, a ghost is pushed directly away by up to `(1 − d/260)^1.5 × 90` px. The push eases at `1 − e^(−3dt)`, so ghosts glide aside and drift back.

**Bats:**
- **Path:** each bat flies `x: −8 % → 108 %` of the art width over 9–16s, looping, with a random offset.
- **Height:** `y = y0 + sin(p × 9 + offset × 6) × (1–4) %`.
- **Size:** 1.6–3.2 % of the art width, aspect 203 / 221.
- **Flap:** wings-up and wings-down frames swap 8–12 times a second, toggled by a `.down` class.

## Motion system

### Smooth scroll

- Each frame: `cur += (scrollY − cur) × (1 − e^(−7.5·dt))`. It snaps when within .05px.
- `#scroller` gets `translate3d(0, −cur px, 0)`.
- Anchor links jump instantly by native scroll, and the easing does the glide.

### Hero parallax

- The hero `.art` translates `+cur × .32` px, so the illustration lags behind.
- `.hero-copy` translates `+cur × .55` px.
- The title's `--lsx` grows from 0 to .18em as the hero scrolls away. With `hp = clamp(cur / heroHeight, 0, 1)`, the letters spread apart as you descend.

### Load intro

All Web Animations:
- **Letters:** each letter rises `translateY(110%) → 0` over 1200ms, starting at 250ms, 70ms apart.
- **Subtitle:** over 1600ms from 900ms: letter-spacing 1.4em → .62em, `translateY(14px) → 0`, `clip-path: inset(0 50% 0 50%) → inset(0)`. It opens from the centre outwards.
- **Hero art:** `scale(1.09) → 1` over 2600ms, composited with "add" so it stacks on the parallax.
- **Nav:** slides down over 900ms from 500ms.
- **Easing:** `cubic-bezier(.2,.8,.2,1)` throughout.

### Section reveals

- **Trigger:** the first time a copy block's top passes 80 % of the viewport height.
- **Lines:** each `.ln > span` rises `translateY(105%) → 0` over 1000ms, 80ms apart.
- **Rule:** scales X 0 → 1 over 1100ms after 160ms.
- **No opacity fades anywhere.**

### Lantern light

- A fixed 520px circle, `radial-gradient(closest-side, rgba(255,170,90,.16), rgba(255,140,70,.06) 55%, transparent)`, `mix-blend-mode: screen`.
- It follows the cursor with `1 − e^(−10·dt)` smoothing.
- It shows only on fine pointers.

## Responsive (≤ 767px)

- **Scene height:** `--artH: max(100vw × 1520/2688, 92svh)`, so phones get tall scenes.
- **Art box:** widens to `artH × 2688/1520` and slides so each scene's `--focus` x (in %) sits at the screen centre: `left = 50vw − focus × artWidth / 100`.

| Scene | Focus |
|---|---|
| Hero | 50 (falls) |
| Story | 48 |
| Rites | 40 |
| Night | 66 (cauldron) |
| Finale | 45 (moon) |

- **Nav:** 56px tall. Only the logo (left) and Tickets (right) remain.
- **Hero copy:** at `artH × .11`, title 9.6vw with `--ls: .14em`, subtitle 11px with .42em tracking at `top: artH × .305`.
- **Section copy:** full width (left and right 20px, top 24 % of the scene, below the band) on a panel `linear-gradient(rgba(17,10,42,.78), rgba(17,10,42,.5))` with a 2px backdrop blur and 18px padding. `h2` is 30px, paragraphs 13.5px.
- **Finale copy:** at top 26 %, with no panel.
- **Seam bands:** follow the lower scene's focus, like `.art`.

## Reduced motion

- Glows, mist and moonglow stop animating.
- Copy is shown without the rise.
- The scroll easing is instant.
- Canvases draw a single still frame (t = 0), and nothing drifts.

## Acceptance checklist

1. **Load:** at 1440 × 810 the hero fills the screen. HOLLOWMERE rises letter by letter over the moon and castle, the subtitle opens from the centre, and the ghost-light falls stream into the misty pool.
2. **Cursor:** moving it near a ghost makes the ghost glide away.
3. **Descent:** scrolling glides down with momentum. The hero lags and its title spreads apart. At every join a drawn rock band (ground above, cave ceiling below) bridges the scenes, and the waterfall pours through its opening as one continuous glowing stream. No gradient fades anywhere.
4. **Copy:** "Our Story", "The Rites" and "Plan Your Night" rise line by line into the dark areas of their scenes. The mill throws spray, the cauldron pours three lava streams and bubbles, and the jack-o'-lanterns and candles flicker.
5. **Finale:** "See you at midnight." over the lantern lake, with shimmering moonlight and flickering lanterns. The page ends there.