/* ========================================= spotlight.css — OneSphere Labs Scroll-linked word spotlight (T1) and mouse radial-gradient overlay (T2). ========================================= */ /* ───────────────────────────────────────────── T1 — Word Spotlight Words start dim and are illuminated by JS as their parent element scrolls into view. ───────────────────────────────────────────── */ /* Spotlight elements must be visible — override parent animate-on-scroll opacity compositing */ .animate-on-scroll:has([data-word-spotlight]) { opacity: 1 !important; transform: none !important; transition: none !important; } [data-word-spotlight].animate-on-scroll { opacity: 1 !important; transform: none !important; transition: none !important; } /** * Word spans created by spotlight.js. * Opacity is controlled entirely via inline style.opacity from JS * (direct numeric interpolation for smooth cinematic progression). * The CSS transition provides the 500ms ease so changes feel organic. */ .word-dim { opacity: 0.25; transition: opacity 500ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)); display: inline; } /* Ensure spotlight parent elements are visible (override animate-on-scroll) */ [data-word-spotlight] { color: var(--text-primary); } /* ───────────────────────────────────────────── T2 — Mouse Radial Gradient Overlay A fixed, pointer-events-none layer that renders a soft torch-beam centred on the cursor using CSS custom properties set by spotlight.js on . ───────────────────────────────────────────── */ /** * Default state: hidden. * The overlay is created by JS and only becomes * visible after the first mousemove event. * * z-index: 5 — above page content (z-index 1-2 from * .section-glow, .hero-canvas etc.) but below the * navigation (--z-sticky: 200) and dropdowns (--z-dropdown: 100). * * mix-blend-mode: screen — allows the gradient to * add light to underlying dark content without * obscuring text or interactive elements. * * pointer-events: none — the overlay must never * intercept mouse or touch events. */ .page-spotlight { position: fixed; inset: 0; z-index: 5; pointer-events: none; opacity: 0; transition: opacity 400ms var(--ease-out); mix-blend-mode: screen; /* No static background — JS sets overlay.style.background directly on every mousemove for reliable cross-browser repaint. */ } /** * Active state: overlay is visible. * JS adds this class after the first mousemove. */ .page-spotlight.is-active { opacity: 1; } /* ───────────────────────────────────────────── Mobile considerations On small screens the word-dim effect is softened: a slightly higher base opacity reduces visual noise on dense paragraphs. The page-spotlight overlay is never shown on touch devices (JS guards by pointer type), but the class is included here defensively. ───────────────────────────────────────────── */ @media (max-width: 768px) { .word-dim { /* Higher base opacity on mobile for readability */ opacity: 0.4 !important; } /* Touch devices: overlay is not created by JS, but defend here too */ .page-spotlight { display: none; } } /* ───────────────────────────────────────────── prefers-reduced-motion overrides JS already shows all words at full opacity and skips T2 when reduced motion is active, but the CSS rules here provide a belt-and- suspenders guarantee for cases where the IIFE has not run yet (e.g. JS disabled, slow network before DOMContentLoaded). ───────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .word-dim { opacity: 1 !important; transition: none !important; } .page-spotlight { display: none; } }