/** * Global motion seam. js/plugins/motion.js toggles data-motion on : * full (default) | slow | off. * * `slow` retimes the shared duration tokens rather than touching individual * rules - every transition already written against var(--dur-fast) / * var(--dur-slow) (css/theme.css's controls fade, this file's own badge) * slows automatically, and so will any future one that reuses the tokens. * * `off` stops CSS-driven animation/transition outright, universally. It * cannot reach a requestAnimationFrame-driven animation (js/layouts/ * stat-wall.js's count-up) - that reads the same data-motion attribute * itself, via js/plugins/layouts.js's ctx(). */ html[data-motion="slow"] { --dur-fast: 420ms; --dur-slow: 1400ms; --dur-stagger: 300ms; } /* The rule below zeroes durations, not delays - a cascade's stagger would still step the cards one after another, so off zeroes the token too. */ html[data-motion="off"] { --dur-stagger: 0ms; } html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } /* `off` is also the performance escape hatch, not only a motion control, and this is the half that matters on bad hardware. backdrop-filter is by a wide margin the most expensive thing in this deck's CSS: every .tile, .hero-card and .card-face carries blur(18px) and every code block blur(12px), each of which promotes a composited layer and forces a backdrop read. It also ACCUMULATES over a session - the layouts' `display: grid !important` keeps slides in the render tree after Reveal would otherwise cull them, so the blurred layers of every bento slide already visited stay live. Integrated graphics driving an external projector is exactly where that shows up, so pressing M to `off` drops the blur along with the motion and leaves the glass as a flat translucent surface. Nothing moves, nothing re-reads a backdrop, and the deck still looks like itself. */ html[data-motion="off"] .reveal .tile, html[data-motion="off"] .reveal .hero-card, html[data-motion="off"] .reveal .card-face, html[data-motion="off"] .reveal pre, html[data-motion="off"] .reveal .slide-number, html[data-motion="off"] .card-overlay-panel, html[data-motion="off"] #deck-badge { backdrop-filter: none; } /* Transient readout so a presenter toggling live sees what changed - shown for 1.2s (js/lib/badge.js) after M, T, W, -, = or 0. */ #deck-badge { position: fixed; right: var(--space-3); top: var(--space-3); z-index: 20; padding: 4px 10px; border: var(--stroke-w) solid var(--stroke); border-radius: 999px; background: var(--surface-glass); backdrop-filter: blur(12px); font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; color: var(--text-muted); opacity: 0; pointer-events: none; transition: opacity var(--dur-fast) var(--ease); } #deck-badge.is-visible { opacity: 1; }