Showcase.

Layout

• One fixed full-bleed stage (#232730, overflow hidden); every slide is an absolutely positioned layer inside it (inset 0), with a 5vw side and 6vh top/bottom margin (--px / --py). Chrome is shared, not per slide: a small tracked wordmark "STUDIO." top-left (0.8rem, weight 600, letter-spacing .2em), a three-line menu glyph top-right (a real button that slides in an index of all slide titles from the right), a bare "→" arrow button mid-right (data-goto = next index, hidden on the last slide), and bottom-left a 12vw × 3px progress track filled to calc(var(--progress) * 100%) in #ff6a1f with a tiny "02 / 07" label (0.68rem, letter-spacing .14em, #8d919c). A "→ next" hint sits bottom-centre on the cover only.
• Ghost type. each slide holds <div class="ghost" aria-hidden="true"> with its own title on two lines (break with <br>), positioned absolute right:-6vw top:8vh, right-aligned, font-size clamp(9rem, 22vw, 26rem), weight 700, line-height .85, letter-spacing -.03em, colour color-mix(in oklab, #ece6da 4%, #232730) so it is barely lighter than the stage, user-select none, cropped by the stage edge. It is the back layer (z-index 0).
• The ring. ONE shared <div class="ring-accent"> on the stage (z-index 1, between the ghost and the content): 18vw circle outline, border 1.1vw solid #ff6a1f, no fill. Its transform is translate(calc(var(--rx) * 1vw - 50%), calc(var(--ry) * 1vh - 50%)) scale(var(--rs)) with transition transform 1s cubic-bezier(.65,0,.25,1). Every slide declares its own ring placement inline, style="--rx:66;--ry:40;--rs:1" (viewport percent centre and scale); on deck:change the script copies the active slide's three values onto the ring, so the ring glides and resizes to a deliberate place on every slide: behind the hero on the cover, tucked behind the top card's corner, a spotlight around the first ring chart (--rs .95), small top-right, peeking out from behind a bottom panel, behind the "after" column, and huge and cut off bottom-right on the closing slide (--rx:94;--ry:86;--rs:2.4). Rings never sit under text.
• Content layer (z-index 2): the title at left:5vw top:31vh, clamp(2.6rem, 5vw, 5.4rem), weight 600, line-height 1.05, max-width 10ch, #ece6da, two lines; a hero zone at left:46vw width:36vw from top:12vh down to calc(6vh + 11rem) from the bottom (flex column, centred) that holds the slide's one main object; two small panels (class panel left / panel right) at bottom-left and bottom-right, bottom: calc(6vh + 2.6rem), max-width 32ch, padding 1.4rem 1.6rem, radius 16px, opaque surface color-mix(in oklab, #232730 95%, #ece6da), a 0.95rem weight-600 one-line heading plus a 0.85rem muted line (max 26ch). The left panel carries the lede, the right panel a short secondary note ("Chapter three." + one line). Both panels carry class="reveal" so they arrive last.
• Cover hero. a .frame placeholder restyled as a matte product silhouette: height 100%, aspect-ratio 5/8, max-width 24vw, radius 2.4rem on top, no border, background a charcoal cylinder gradient (linear-gradient 90deg from color-mix(#232730 55%, black) darkened at the edges to #ece6da 9% at 30%) with a soft radial highlight at the top. Hero contents on other slides use opaque surfaces: cards stacked as one compact column (padding .95rem 1.15rem), ring charts at --size clamp(6rem, 8.5vw, 9rem) top-aligned at 30vh, the timeline anchored above the panels spanning the full width, the quote carousel, the compare pair (hero widened to 40vw), or a bullet list. Stats go inside a wide left panel (30rem, three columns).
• Transition, in order: the outgoing layer fades and drifts 3vw toward its side (opacity 0, translateX(calc(var(--d) * 3vw)), .5s cubic-bezier(.4,0,.6,1)); the ghost of every slide parallaxes with translateX(calc(var(--d) * 18vw)) and opacity calc(1 - var(--ad)) over 1.1s cubic-bezier(.22,1,.36,1) so titles slide past like a back wall; the ring glides 1s; the incoming layer appears instantly but its title lines rise out of an overflow mask (each line wrapped in .line > span, translateY(110%) → 0, .8s cubic-bezier(.22,1,.36,1), delays .25s and .34s); the hero fades and settles (opacity 0→1, translateY(24px) scale(.97) → none, .7s/.9s, delay .45s); reveal objects stagger from 700ms (body data-reveal-delay="700" data-animate-delay="700"), the two panels last.
• Under 760px the layer becomes a scrolling column: title, full-width hero, stacked panels; ghost at 26vw; the arrow hides.

Navigation. → ↓ Space PageDown next; ← ↑ PageUp prev; mouse wheel / trackpad one slide per gesture (debounced 750ms); the mid-right arrow button advances; the menu glyph opens a slide index whose rows jump (Escape closes); Home/End; number keys 1-9.