/* ========================================================================== METRIX LAB - interactions.css Styling for the JS micro-interactions in js/interactions.js plus the animated hero headline gradient. All motion respects reduced-motion. ========================================================================== */ /* ----- SCROLL-PROGRESS BAR (injected at the top of ) ------------ */ .scroll-progress { position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: var(--z-top); pointer-events: none; background: transparent; } .scroll-progress__bar { display: block; width: 100%; height: 100%; transform: scaleX(0); transform-origin: 0 50%; background: var(--gradient-accent-h); box-shadow: var(--glow-orange-sm); } /* ----- ANIMATED HEADLINE GRADIENT ------------------------------------- */ /* Apply .accent-text--animated alongside .accent-text to make the clipped gradient drift slowly. Falls back to the static gradient if motion is off. */ .accent-text--animated { background-size: 220% 100%; background-position: 0% 50%; animation: accent-pan 6s var(--ease-in-out) infinite alternate; } @keyframes accent-pan { to { background-position: 100% 50%; } } @media (prefers-reduced-motion: reduce) { .accent-text--animated { animation: none; } } @media (forced-colors: active) { .scroll-progress__bar { background: Highlight; } }