/* ============================================================================ Deck framework — engine Slide engine layout, idle-CPU guard, reveal, cover frame, nav chrome, overview, TOC, theme toggle. Reads semantic tokens only (see a theme's theme.css); never a theme's own names. Load order: engine → components → theme → talk → presenter. ============================================================================ */ * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } body { font-family: var(--font-body); background: var(--bg); color: var(--text); overflow: hidden; overflow-wrap: break-word; } /* ── Deck engine ── */ .deck { height: 100dvh; overflow-y: auto; scroll-snap-type: y mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; } .slide { height: 100dvh; scroll-snap-align: start; overflow: hidden; position: relative; display: flex; flex-direction: column; justify-content: center; padding: clamp(30px, 5vh, 64px) clamp(30px, 7vw, 120px); isolation: isolate; } .slide > * { position: relative; z-index: 2; } /* ── Idle-CPU guard: animations only tick on the slide that is on screen ── All 23 slides live in the DOM at once, and most of this deck's decorative animations are `infinite`. Without this rule they all repaint for the whole talk — on a machine with hardware acceleration off, that alone can saturate the CPU. `.is-live` (set by SlideEngine.update()) is the ONE current slide; note that `.visible` is useless here because it is never removed once set. One blanket rule rather than 22 edits, so animations added later are covered automatically. */ .slide:not(.is-live) *, .slide:not(.is-live) *::before, .slide:not(.is-live) *::after { animation-play-state: paused !important; } /* reveal animation */ .slide { opacity: 0; transform: translateY(34px) scale(0.985); transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); } .slide.visible { opacity: 1; transform: none; } .slide .reveal { opacity: 0; transform: translateY(18px); transition: opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1); } .slide.visible .reveal { opacity: 1; transform: none; } .slide.visible .reveal:nth-child(1){transition-delay:.06s} .slide.visible .reveal:nth-child(2){transition-delay:.14s} .slide.visible .reveal:nth-child(3){transition-delay:.22s} .slide.visible .reveal:nth-child(4){transition-delay:.30s} .slide.visible .reveal:nth-child(5){transition-delay:.38s} .slide.visible .reveal:nth-child(6){transition-delay:.46s} .slide.visible .reveal:nth-child(7){transition-delay:.54s} @media (prefers-reduced-motion: reduce) { .slide, .slide .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ── Cover frame: the talk supplies the hero (canvas, fallback) behind it ── */ .slide--cover { padding: 0; justify-content: center; align-items: flex-start; } .slide--cover .veil { position: absolute; inset: 0; z-index: 1; background: var(--veil); } .cover-inner { position: relative; z-index: 2; padding: clamp(30px, 5vh, 64px) clamp(36px, 8vw, 130px); } /* ── Nav chrome ── */ .deck-progress { position: fixed; top: 0; left: 0; height: 3px; background: var(--accent); z-index: 100; transition: width .3s ease; pointer-events: none; } /* No backdrop-filter here on purpose. This pill is `position: fixed`, so it sits over every slide for the whole talk, and a blurred backdrop has to be re-blurred by the compositor whenever anything behind it repaints — the one always-present element paying that cost on all 23 slides. A more opaque background reads the same at this size. Overlay panels (overview/TOC) keep their blur: they are transient, and the deck is idle while they are open. */ .deck-dots { position: fixed; right: clamp(10px, 1.8vw, 22px); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 6px; z-index: 100; background: color-mix(in srgb, var(--bg) 88%, transparent); padding: 8px 6px; border-radius: 20px; } .deck-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); opacity: .3; border: none; padding: 0; cursor: pointer; transition: opacity .2s, transform .2s; } .deck-dot:hover { opacity: .6; } .deck-dot.active { opacity: 1; transform: scale(1.5); background: var(--accent); } .deck-counter { position: fixed; bottom: clamp(10px, 1.8vh, 22px); right: clamp(10px, 1.8vw, 22px); font-family: var(--font-mono); font-size: 12px; color: var(--muted); z-index: 100; font-variant-numeric: tabular-nums; } /* Wraps rather than nowrap: the hint list grew when the presenter keys were added, and at 11px mono it is wider than a phone viewport — with body overflow hidden and a centring translate, nowrap clips it at BOTH ends. */ .deck-hints { position: fixed; bottom: clamp(10px, 1.8vh, 22px); left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 11px; color: var(--muted); opacity: .6; z-index: 100; transition: opacity .5s ease; max-width: min(92vw, 760px); text-align: center; line-height: 1.6; } .deck-hints.faded { opacity: 0; pointer-events: none; } /* ── Presenter cues ── Cues now live in cues.js, not in this document, so there is nothing left to leak onto the projector. These rules stay as cheap insurance in case an