Fly-through.

Layout

• Ground. full-bleed #0e0f12. A fixed SVG behind everything draws four 1px diagonals from the viewport corners to the centre in rgba(255,255,255,.12) plus a 5px #5b8cff dot at the vanishing point; that is the only decoration.
• The stage is fixed inset 0, perspective 1200px, perspective-origin 50% 50%, display grid, place-items center, transform-style preserve-3d. Every slide is a frame in the same grid cell: width min(73vw, 130vh), aspect-ratio 16/9 (max-height 78vh), 24px radius, 1px border color-mix(in oklab, #f3f3f1 20%, transparent), fill color-mix(in oklab, color-mix(in oklab, #0e0f12 86%, white) 62%, transparent): a hair lighter than the ground and translucent, so the deeper frames show through it. Padding 4.5vh 3.8vw, flex column, gap 2vh, overflow hidden.
• Depth comes from the engine's --d (signed distance to the active slide) and --ad (absolute): transform: translateZ(calc(max(var(--d), -1) * -900px)). With perspective 1200 the frame at d=1 projects at 57% size, d=2 at 40%, d=3 at 31%, all nested concentrically inside the active frame like a tunnel. opacity: calc(1 - var(--ad) * .3); filter: blur(calc(min(var(--ad), 3) * 1.6px)). Future frames are pointer-events none and show only their number row and title (the title in #7f8189); their lede and objects carry class reveal and stay hidden until the frame lands. Frames with --ad > 4 get a "far" class (visibility hidden). On first paint --d/--ad fall back to 3, so the deck flies in from the tunnel depth on load.
• Past frames (d < 0) are clamped to translateZ(+900px): 4× the viewport, in front of the camera. They go to opacity 0 (delayed .2s so they fade while enlarging), blur 14px, and visibility hidden once the transition ends. Transition on every frame: transform 1.1s cubic-bezier(.65,0,.25,1), opacity .8s ease, filter 1s ease. Moving one slide dollies the whole tunnel: the active frame blows past the lens, the next one sharpens into place, and the ones behind it each step one notch closer. Going back, the previous frame drops in from in front of the lens.
• Inside a frame. top row with "02 / 07" on the left (the frame's own number, set by JS, tabular) and the deck name on the right, .8rem #7f8189; the title at clamp(2.2rem, 4.6vw, 5rem) weight 800 letter-spacing -.03em line-height 1 (the cover: clamp(3rem, 7vw, 8rem), vertically centred); the muted lede; then a .body column (flex 1, content centred vertically) holding the objects. Inside a frame rings are clamp(6rem, 9.4vw, 9rem), stat values clamp(2rem, 3.4vw, 3.6rem), carousel items min-height 9rem, so rings + stats and the timeline fit at 1280×720.
• Objects. body data-reveal-delay="900" data-animate-delay="900". The lede and objects fade and rise (14px) 90ms apart starting 900ms after a move, i.e. as the frame lands; rings and count-ups start then too.
• Depth rail. fixed right (1.6vw from the edge), vertically centred, one button per slide built from data-title: the title in .75rem #7f8189 right-aligned, then a 36px slot holding a 20px × 2px tick anchored to the right in 20% ink. Active rung: tick scaleX(1.8) to 36px in #5b8cff, title in #f3f3f1; done rungs are brighter than future ones; hover brightens; visible focus ring in the accent. Clicking a rung flies to that slide.
• HUD. bottom-left hint "→ fly forward" in #7f8189 that fades once you leave slide 1; a 2px #5b8cff progress line along the very bottom edge, transform scaleX(var(--progress)) with transform-origin left, transition 1.1s on the same fly easing.
• Under 760px the rail is hidden, frames are 92vw wide with auto height (max 84vh) and scroll internally, depth 600px. With prefers-reduced-motion every transition is instant: the active frame simply appears sharp at z=0.

Navigation. → ↓ Space PageDown fly forward; ← ↑ PageUp fly back; mouse wheel / trackpad moves one slide per gesture (debounced 750ms); clicking a rail rung jumps; Home/End; number keys 1-9.