/* ============================================================ HyaPak — immersive.css (motion layer v2) Mobile-first · accessible · lightweight. Pairs with immersive.js. ---------------------------------------------------------- PRINCIPLES • No content is ever hidden unless motion is ALLOWED. Hidden reveal states live behind , which JS adds only when motion is on. No-JS / reduced-motion / Calm => everything is fully visible immediately. • "Calm mode" (html[data-calm]) is a one-tap, persisted user choice for motion-sensitive / autistic visitors. It freezes ALL looping motion site-wide, disables parallax, and makes reveals instant — while keeping the page fully usable. • prefers-reduced-motion is honoured as the DEFAULT for Calm, but visitors can opt back into full motion if they enjoy it. ============================================================ */ /* ============================================================ 0. CALM MODE — the accessibility backbone Set pre-paint by a tiny inline script => no flash. Mirrors the site's own reduced-motion guard so every loop, marquee and ambient gradient stops at once. ============================================================ */ .im-motion-toggle{display:none!important;} html[data-calm] *, html[data-calm] *::before, html[data-calm] *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; } /* Guarantee all content is visible in Calm (nothing waits on a reveal) */ html[data-calm] .reveal, html[data-calm] .m-reveal, html[data-calm] .im-reveal, html[data-calm] .im-line, html[data-calm] [data-im-split] .im-word, html[data-calm] .hero-title--statement .line { opacity: 1 !important; transform: none !important; filter: none !important; } /* Decorative animated backdrops become a calm, static painting */ html[data-calm] .im-subhero-bg *, html[data-calm] .im-progress, html[data-calm] .im-ticker { animation: none !important; } html[data-calm] .im-progress { display: none !important; } /* Same guarantees under OS-level reduced motion */ @media (prefers-reduced-motion: reduce) { .im-ready .im-line, .im-ready .im-reveal, .im-ready [data-im-split] .im-word { opacity: 1 !important; transform: none !important; filter: none !important; } .im-subhero-bg * { animation: none !important; } } /* ============================================================ 1. MOTION TOGGLE — persistent, accessible control Bottom-LEFT (back-to-top owns bottom-right). Real