/* motion.css — custom cursor + reduced-motion guard. Ported from v3.2. */ .cursor { position: fixed; left: var(--cursor-x); top: var(--cursor-y); z-index: 170; width: 36px; height: 36px; pointer-events: none; transform: translate(-50%, -50%); mix-blend-mode: difference; } .cursor span { position: absolute; inset: 0; border: 1px solid var(--white); border-radius: 50%; } .cursor::before, .cursor::after { content: ""; position: absolute; background: var(--white); } .cursor::before { left: 50%; top: -8px; width: 1px; height: 52px; } .cursor::after { left: -8px; top: 50%; width: 52px; height: 1px; } @media (max-width: 1120px) { .cursor { display: none; } } /* B1 — hero headline reveal. The .hero-anim class is set in only when motion is allowed + JS runs; hero.js splits the H1 into lines, hides those, then removes this class and rises them in. A failsafe in hero.js always removes it, so it can't stick. */ .hero-anim .hero__title h1 { opacity: 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; } .reveal { opacity: 1; transform: none; } .hero__canvas, .cursor { display: none; } /* hold the hero plate still (no parallax) */ .hero .plate__img { transform: none; } }