/* ============================================================ motion.css — reveals, the neon power-on, scroll-linked effects. Note the html[data-js="on"] guard on the reveal start state: the attribute is stamped by the blocking inline script in , so with JavaScript disabled nothing is ever hidden, and with it enabled there is no flash of visible-then-hidden content. ============================================================ */ html[data-js="on"] [data-reveal] { opacity: 0; transition: opacity 620ms cubic-bezier(0.22, 1, 0.36, 1), transform 620ms cubic-bezier(0.22, 1, 0.36, 1), clip-path 620ms cubic-bezier(0.22, 1, 0.36, 1); transition-delay: calc(var(--i, 0) * 1ms); } html[data-js="on"] [data-reveal="up"] { transform: translateY(26px); } html[data-js="on"] [data-reveal="left"] { transform: translateX(-26px); } html[data-js="on"] [data-reveal="right"] { transform: translateX(26px); } html[data-js="on"] [data-reveal="scale"] { transform: scale(0.965); } html[data-js="on"] [data-reveal="clip"] { clip-path: inset(0 0 100% 0); } html[data-js="on"] [data-reveal].is-in { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } /* ------------------------------------------------------------------ The power-on flicker (spec §8.3) Two or three irregular stutters, then a steady glow. Once, never looped: the class is added by IntersectionObserver and the element is unobserved immediately after. ------------------------------------------------------------------ */ @keyframes power-on { 0% { opacity: 0.15; filter: brightness(0.35); } 9% { opacity: 0.95; filter: brightness(1.35); } 14% { opacity: 0.2; filter: brightness(0.4); } 27% { opacity: 1; filter: brightness(1.5); } 33% { opacity: 0.35; filter: brightness(0.55); } 41% { opacity: 0.9; filter: brightness(1.2); } 47% { opacity: 0.5; filter: brightness(0.8); } 62% { opacity: 1; filter: brightness(1.25); } 100% { opacity: 1; filter: brightness(1); } } .neon.is-lit { animation: power-on 620ms ease-out 1 both; } /* ------------------------------------------------------------------ Hero ------------------------------------------------------------------ */ @keyframes logo-on { 0% { opacity: 0; filter: brightness(0.2) saturate(0.4); } 18% { opacity: 0.85; filter: brightness(1.6) saturate(1.2); } 26% { opacity: 0.3; filter: brightness(0.5) saturate(0.7); } 44% { opacity: 1; filter: brightness(1.45) saturate(1.3); } 52% { opacity: 0.6; filter: brightness(0.85) saturate(1); } 100% { opacity: 1; filter: brightness(1) saturate(1); } } html[data-js="on"] .hero__logo { animation: logo-on 900ms ease-out 1 both; } /* Scroll-linked recede as the hero leaves. Progressive enhancement: the page is complete and correct without it. */ @keyframes hero-recede { from { transform: scale(1); opacity: 1; } to { transform: scale(0.82); opacity: 0; } } @supports (animation-timeline: view()) { html[data-js="on"] .hero__logo { animation: logo-on 900ms ease-out 1 both, hero-recede linear both; animation-timeline: auto, view(); animation-range: normal, exit 0% exit 100%; } } /* ------------------------------------------------------------------ Motion off — the OS setting and CONFIG.motion.enabled = false must have exactly the same effect. ------------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; } } html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } html[data-motion="off"] [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; }