/* ============================================================================= HWR Anim — scroll reveal system (styles) Pair with hwr-anim.js + the inline guard snippet. BEM-ish, hwr- prefixed, framework-agnostic. Built for Bricks Builder. ============================================================================= */ /* The guard snippet adds `.hwr-anim` to *before paint* ONLY when motion is allowed. If JS never runs, the CDN is blocked, or the user prefers reduced motion, NONE of these hidden states apply and content is simply visible. Fail-safe by design. */ /* Baseline hidden state for anything tagged to animate. */ html.hwr-anim [data-anim] { opacity: 0; will-change: opacity, transform; } /* Special-case hidden states for presets that should NOT start invisible. */ html.hwr-anim [data-anim="line-x"] { opacity: 1; transform: scaleX(0); transform-origin: left center; } html.hwr-anim [data-anim="line-y"] { opacity: 1; transform: scaleY(0); transform-origin: top center; } html.hwr-anim [data-anim="reveal"] { clip-path: inset(0 0 100% 0); } /* ----------------------------------------------------------------------------- HERO — pure-CSS reveal (no JS dependency; protects LCP). The hero animates on load via CSS keyframes, so the largest hero element paints immediately and NEVER waits on the anime.js download. The JS engine skips these elements. Per-item stagger comes from --hwr-i, stamped by a tiny synchronous inline script (see README) or set by hand in Bricks. --------------------------------------------------------------------------- */ html.hwr-anim [data-anim-hero] [data-anim] { animation: hwr-hero-in 0.84s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(var(--hwr-i, 0) * 90ms + 120ms); } html.hwr-anim [data-anim-hero] [data-anim="fade"] { --hwr-ty: 0; } html.hwr-anim [data-anim-hero] [data-anim="fade-down"] { --hwr-ty: -28px; } html.hwr-anim [data-anim-hero] [data-anim="fade-left"] { --hwr-ty: 0; --hwr-tx: 28px; } html.hwr-anim [data-anim-hero] [data-anim="fade-right"] { --hwr-ty: 0; --hwr-tx: -28px; } html.hwr-anim [data-anim-hero] [data-anim="scale-in"] { --hwr-ty: 0; --hwr-s: 0.96; } @keyframes hwr-hero-in { from { opacity: 0; transform: translate3d(var(--hwr-tx, 0), var(--hwr-ty, 28px), 0) scale(var(--hwr-s, 1)); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } } /* After the engine boots we drop will-change to keep the compositor light. */ html.hwr-anim--ready [data-anim] { will-change: auto; } /* Hard guarantee: reduced-motion users see the final state, no transforms, no animation, no waiting on JS. */ @media (prefers-reduced-motion: reduce) { html [data-anim], html.hwr-anim [data-anim], html.hwr-anim [data-anim-hero] [data-anim] { opacity: 1 !important; transform: none !important; clip-path: none !important; animation: none !important; } }