Aurora.

Layout

• A near-black stage (#07070d) lit from behind by three enormous colour blobs. The light is one fixed layer, .sky (inset -20%, z-index 0, pointer-events none), filtered as a whole with blur(70px) saturate(1.2); inside it three 55vmax circles (<i> elements, centred with left/top 50% and a -27.5vmax margin) at opacity .4 with mix-blend-mode screen. Each circle drifts on its own keyframe, ease-in-out, infinite alternate: 26s from translate(-30vw,-22vh) to translate(-2vw,6vh) scale(1.15); 32s from translate(32vw,-18vh) to translate(4vw,20vh) scale(1.12); 38s from translate(-4vw,34vh) to translate(26vw,-6vh) scale(1.15). The whole sky fades in over 1.8s on load. Keep the blobs this dim: muted text must stay readable on top of them.
• Every slide declares its own palette inline: style="--c1:#5b3cff;--c2:#00c2ff;--c3:#ff4fa3". Blob n is background: var(--cn) with transition: background 1.4s; on deck:change a few lines of JS copy the active slide's --c1..--c3 onto .sky, so the whole room cross-fades to the new colours while the slide comes into focus. Use clearly different palettes on neighbouring slides (the demo runs violet/cyan/rose, teal/emerald/gold, amber/coral/plum, blue/indigo/mint, rose/orange/violet, green/cyan/pale blue) and a near-dark one (#2a2650 #1c2a3a #3a2848) for the close.
• A faint film grain over everything: a fixed full-screen layer at z-index 5, opacity .06, mix-blend-mode overlay, tiled at 220px with an SVG feTurbulence data-URI (fractalNoise, baseFrequency .9, 2 octaves).
• Content sits on glass. .card, .compare > div, .carousel-item, .frame and .code get backdrop-filter blur(20px) on the translucent surface rgba(255,255,255,.06) with a 1px rgba(255,255,255,.14) border and 22px radius. No shadows, no gradients, one accent (#b8a6ff).
• Stage. fixed, inset 0, padding 10vh 8vw 10vh 22vw (the left 22vw is the index rail's room), display grid; every slide occupies the same grid cell, vertically centred, width 100% up to 64rem, itself a grid with 2.4vh gaps holding title, lede and one object. Title in the display serif at clamp(3rem,6.2vw,6.4rem), weight 400, letter-spacing -0.02em, line-height 1, with the last word wrapped in <em> (italic, same colour); the cover title goes to clamp(3.4rem,7.6vw,8rem). Lede in #b4b3c4 at clamp(1.05rem,1.4vw,1.4rem), pulled 0.6vh closer to the title.
• Focus-pull transition (slides never slide): future slides sit at opacity 0, filter blur(14px), transform scale(1.04); past slides the same but scale(.97); the active slide is opacity 1, filter none, transform none. Transition .9s on all three (opacity ease, filter ease, transform cubic-bezier(.22,1,.36,1)); the incoming slide waits .25s so the outgoing one defocuses first. The body carries data-reveal-delay="700" and data-animate-delay="900" so objects (class reveal, 90ms stagger) and charts appear as the slide lands. Under prefers-reduced-motion the blobs hold fixed positions and the pull is instant.
• Index rail. fixed at left 6vw, vertically centred, z-index 3; every slide title as a <button data-goto> in 0.8rem body type, 0.55rem apart, padding-left 1rem, #b4b3c4; visited titles slightly brighter (muted mixed 45% toward ink), hover full ink, the active one full ink with a 6px #b8a6ff dot at its left (scale 0 to 1 over 500ms). 1.2rem below the list, aligned with the text, a 1px by 7vh vertical track in rgba(255,255,255,.14) whose fill grows to calc(var(--progress) × 100%) in #b8a6ff over 900ms.
• HUD. counter "02 / 07" top-right (top 5vh, right 4vw) in 0.8rem #b4b3c4 tabular figures, letter-spacing .06em; a hint "→ next" bottom-left (left 6vw, bottom 5vh) that fades out after the first slide.
• Under 760px the index rail is hidden, the stage padding becomes 8vh 8vw and a too-tall slide scrolls.

Navigation. → ↓ Space PageDown = next; ← ↑ PageUp = prev; mouse wheel / trackpad moves one slide per gesture (debounced 750ms); clicking a title in the index rail jumps; Home/End; number keys 1-9.