/* ========================================================================= ZENI — FX LAYER Additive motion / polish. Loads AFTER styles.css. Nothing in here redefines existing classes — only extends via new selectors and state classes. ========================================================================= */ /* ------------------------------------------------------------------------- 1. SCROLL PROGRESS RAIL Injected into by script-fx.js as:

z-index 9: above page content, below nav (z-index 10) ------------------------------------------------------------------------- */ .fx-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 9; pointer-events: none; background: transparent; } .fx-progress__bar { width: 100%; height: 100%; transform: scaleX(0); transform-origin: left center; background: linear-gradient( 90deg, rgba(240, 240, 250, 0.0) 0%, rgba(240, 240, 250, 0.6) 40%, var(--spectral-white) 100% ); will-change: transform; } /* ------------------------------------------------------------------------- 2. NAV BACKGROUND FADE-IN ON SCROLL Enhance .nav only when the fx `is-scrolled` class is present. 300ms transition so it feels smooth either direction. ------------------------------------------------------------------------- */ .nav { transition: background-color 300ms ease, backdrop-filter 300ms ease, -webkit-backdrop-filter 300ms ease, border-color 300ms ease; border-bottom: 1px solid transparent; } .nav.is-scrolled { background-color: rgba(0, 0, 0, 0.7); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom-color: rgba(240, 240, 250, 0.08); } /* ------------------------------------------------------------------------- 3. PARALLAX on .scene__bg Pure CSS prep: help the compositor with will-change when the scene is flagged active by JS. The actual transform is applied inline by JS. ------------------------------------------------------------------------- */ .scene.is-fx-active .scene__bg { will-change: transform; } /* ------------------------------------------------------------------------- 4. MAGNETIC GHOST BUTTONS Script toggles .fx-magnet-moving on the button while the cursor is inside it (instant follow). When not moving, we have a smooth return. ------------------------------------------------------------------------- */ .btn { transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1); will-change: transform; } .btn.fx-magnet-moving { transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease; } /* ------------------------------------------------------------------------- 5. HEADLINE SHIMMER ON REVEAL Activates only when the parent [data-reveal] already carries .is-visible (handled by the existing reveal observer in script.js). A single 800ms sweep of a subtle diagonal gradient across the headline. Very low peak opacity (~0.25) — has to feel like a lens flare, not a flag. ------------------------------------------------------------------------- */ [data-reveal].headline, [data-reveal] .headline { position: relative; } [data-reveal].headline::after, [data-reveal] .headline::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient( 110deg, rgba(240, 240, 250, 0) 30%, rgba(240, 240, 250, 0.25) 50%, rgba(240, 240, 250, 0) 70% ); background-size: 250% 100%; background-position: 120% 0; mix-blend-mode: screen; opacity: 0; } [data-reveal].is-visible.headline::after, [data-reveal].is-visible .headline::after { animation: fx-sheen 800ms cubic-bezier(0.2, 0.8, 0.2, 1) 220ms 1 forwards; } @keyframes fx-sheen { 0% { opacity: 0; background-position: 120% 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; background-position: -20% 0; } } /* ------------------------------------------------------------------------- REDUCED MOTION — kill every fx ------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .fx-progress { display: none; } .nav { transition: none; } .scene.is-fx-active .scene__bg { will-change: auto; transform: none !important; } .btn { transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease; transform: none !important; will-change: auto; } [data-reveal].is-visible.headline::after, [data-reveal].is-visible .headline::after { animation: none; opacity: 0; } }