/* ========================================================================== Animations Rule: animate transform + opacity only. Content is visible by default and only *enhanced* by JS, so the site is fully readable with JS disabled. ========================================================================== */ /* JS adds .js to . Without it, reveal elements stay at their natural visible state — no content is ever trapped behind an animation. */ .js [data-reveal] { opacity: 0; transform: translate3d(0, 26px, 0); transition: opacity 620ms var(--e-out), transform 620ms var(--e-out); transition-delay: var(--reveal-delay, 0ms); will-change: transform, opacity; } .js [data-reveal].is-visible { opacity: 1; transform: translate3d(0, 0, 0); } .js [data-reveal="left"] { transform: translate3d(-32px, 0, 0); } .js [data-reveal="right"] { transform: translate3d(32px, 0, 0); } .js [data-reveal="scale"] { transform: scale(.95); } .js [data-reveal="left"].is-visible, .js [data-reveal="right"].is-visible { transform: translate3d(0, 0, 0); } .js [data-reveal="scale"].is-visible { transform: scale(1); } /* Cursor thread trail (desktop hero only) */ .thread-dot { position: fixed; top: 0; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--c-gold-bright); pointer-events: none; z-index: var(--z-raised); opacity: 0; will-change: transform, opacity; } /* ========================================================================== Reduced motion — disable parallax, tilt, drift, trail and all entrances. Everything snaps to its final visible state. ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .js [data-reveal] { opacity: 1 !important; transform: none !important; } .hero__layer { transform: none !important; } .tilt-inner { transform: none !important; } .float-spool { animation: none !important; } .thread-dot { display: none !important; } .hero__scroll svg { animation: none !important; } .sticky-actions__btn--wa svg { animation: none !important; } .stitch-underline path, .process__line path { stroke-dashoffset: 0 !important; transition: none !important; } .btn::after { display: none !important; } }