/* ========================================================================== Squarely — Scroll motion (homepage) MASTER SWITCH: in index.html • data-motion="on" → reveal + parallax enabled • data-motion="off" → fully static (or just remove the attribute) Auto-disabled for users with "reduce motion" set in their OS. How it works: an inline script in adds `.motion-ready` to only when motion is on + supported. Every rule below is gated on that class, so removing the switch (or this file) instantly reverts the page. ========================================================================== */ /* Shared reveal easing: a gentle spring "overshoot" so elements pop into place */ .motion-ready [data-reveal], .motion-ready [data-reveal-group] > * { --rv-dur: 0.95s; --rv-ease: cubic-bezier(0.34, 1.32, 0.44, 1); /* slight overshoot */ } /* ---- Reveal on scroll: single elements ---- */ /* Elements hinge up from the bottom in 3D, rising + un-blurring into place. */ .motion-ready [data-reveal] { opacity: 0; transform: perspective(1200px) translateY(70px) rotateX(-14deg) scale(0.94); transform-origin: 50% 100%; filter: blur(10px); transition: opacity 0.6s ease, transform var(--rv-dur) var(--rv-ease), filter 0.6s ease; will-change: opacity, transform, filter; } .motion-ready [data-reveal].in { opacity: 1; transform: none; filter: none; } /* Directional / scale variants (opt in: data-reveal="left|right|scale"). X offset (36px) stays under the desktop container padding (40px) so the pre-reveal transform never spills past the viewport (no horizontal scroll). */ .motion-ready [data-reveal="left"] { transform: perspective(1200px) translateX(-36px) rotateY(12deg); } .motion-ready [data-reveal="right"] { transform: perspective(1200px) translateX(36px) rotateY(-12deg); } .motion-ready [data-reveal="scale"] { transform: scale(0.86); filter: blur(10px); } .motion-ready [data-reveal="left"].in, .motion-ready [data-reveal="right"].in, .motion-ready [data-reveal="scale"].in { transform: none; } /* On stacked (mobile) layouts, side padding is only ~22px, so fall back to the vertical hinge reveal to avoid any horizontal overflow from the X offset. */ @media (max-width: 760px) { .motion-ready [data-reveal="left"], .motion-ready [data-reveal="right"] { transform: perspective(1200px) translateY(70px) rotateX(-14deg) scale(0.94); transform-origin: 50% 100%; } } /* ---- Reveal on scroll: groups (children stagger in) ---- */ .motion-ready [data-reveal-group] > * { opacity: 0; transform: perspective(1200px) translateY(70px) rotateX(-14deg) scale(0.94); transform-origin: 50% 100%; filter: blur(10px); transition: opacity 0.6s ease, transform var(--rv-dur) var(--rv-ease), filter 0.6s ease; will-change: opacity, transform, filter; } .motion-ready [data-reveal-group].in > * { opacity: 1; transform: none; filter: none; } .motion-ready [data-reveal-group].in > *:nth-child(2) { transition-delay: 0.10s; } .motion-ready [data-reveal-group].in > *:nth-child(3) { transition-delay: 0.20s; } .motion-ready [data-reveal-group].in > *:nth-child(4) { transition-delay: 0.30s; } .motion-ready [data-reveal-group].in > *:nth-child(5) { transition-delay: 0.40s; } .motion-ready [data-reveal-group].in > *:nth-child(6) { transition-delay: 0.50s; } .motion-ready [data-reveal-group].in > *:nth-child(7) { transition-delay: 0.60s; } .motion-ready [data-reveal-group].in > *:nth-child(8) { transition-delay: 0.70s; } /* ---- Parallax (offset set by js via --py) ---- */ .motion-ready [data-parallax] { transform: translate3d(0, var(--py, 0px), 0); will-change: transform; } /* hero lines keep their centering translate; compose parallax into the Y */ .motion-ready .home-hero__lines[data-parallax] { transform: translate(-50%, calc(-50% + var(--py, 0px))); } /* ---- Scroll progress bar (injected by main.js) ---- */ .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; transform: scaleX(var(--sp, 0)); transform-origin: 0 50%; background: linear-gradient(90deg, #3fa285 0%, #aada91 55%, #cfe2f3 100%); z-index: 2000; pointer-events: none; }