/* Native motion layer — scroll reveals, brand marquee, hover shine. No framework, no new deps. Tokens centralised here; everything respects prefers-reduced-motion and degrades to the static layout without JS. */ :root { --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --reveal-distance: 18px; --reveal-duration: 0.55s; --marquee-duration: 34s; --shine: rgba(255, 253, 249, 0.45); /* surface/cream highlight */ } /* --- Scroll reveal ------------------------------------------------------- `.has-reveal` is set on by an inline head script *before* paint, so without JS (class never added) nothing is ever hidden. */ @media (prefers-reduced-motion: no-preference) { .has-reveal .reveal { opacity: 0; transform: translateY(var(--reveal-distance)); } .has-reveal .reveal.is-in { opacity: 1; transform: none; transition: opacity var(--reveal-duration) var(--ease-out), transform var(--reveal-duration) var(--ease-out); } } /* --- Brand marquee ------------------------------------------------------- */ .marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); } .marquee__track { display: flex; width: max-content; will-change: transform; } @media (prefers-reduced-motion: no-preference) { .marquee__track { animation: marquee var(--marquee-duration) linear infinite; } .marquee:hover .marquee__track { animation-play-state: paused; } } @keyframes marquee { to { transform: translateX(-50%); } } /* --- Hover shine on card media ------------------------------------------ */ .shine { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 32%, var(--shine) 48%, transparent 64%); transform: translateX(-130%); z-index: 1; } @media (prefers-reduced-motion: no-preference) { .group:hover .shine { transform: translateX(130%); transition: transform 0.85s var(--ease-out); } }