/*! * r8-animations.css — the CSS half of the Rejuven8 animation system. * Only hover states and guards live here. Scroll/entrance motion is JS-driven * so that content is NEVER hidden when JavaScript is unavailable. */ /* ── Hero paint gate ───────────────────────────────────────────────────── The tiny inline script in adds html.r8-js before first paint (and removes it within 3s if the animation JS fails to boot). This hides ONLY hero children until the intro timeline takes over — eliminating the paint-flash-then-hide flinch on page load. All other elements are handled purely in JS: nothing the visitor can already see is ever hidden. */ html.r8-js body:not(.elementor-editor-active) .r8-hero:not(.r8-in) > * { opacity: 0; } /* Card hover lift — add .r8-lift in Elementor (Advanced → CSS Classes). */ .r8-lift { transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease; will-change: transform; } .r8-lift:hover, .r8-lift:focus-within { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(15, 23, 42, 0.10); } /* Container variant: lifts the generated cards inside a WooCommerce products grid (the cards themselves can't be classed in Elementor). Add .r8-lift-cards to the container that holds the products widget. */ .r8-lift-cards ul.products li.product { transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease; } .r8-lift-cards ul.products li.product:hover, .r8-lift-cards ul.products li.product:focus-within { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(15, 23, 42, 0.10); } /* Same lift for Elementor Loop Grid / Posts widget cards (COA tiles, research article cards) — add .r8-lift-cards to the widget, as with products. */ .r8-lift-cards :is(.elementor-loop-container, .elementor-posts-container) > * { transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease; } .r8-lift-cards :is(.elementor-loop-container, .elementor-posts-container) > *:hover, .r8-lift-cards :is(.elementor-loop-container, .elementor-posts-container) > *:focus-within { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(15, 23, 42, 0.10); } /* ── Scroll-driven choreography (native path) ──────────────────────────── When the browser supports CSS scroll-driven animations (Safari 26+, Chrome 115+), the JS boot adds html.r8-sda and these rules take over .r8-fade-up / .r8-fade / .r8-stagger entirely. Each element's entrance progress is LINKED TO ITS OWN POSITION in the viewport (view timeline): scroll slowly and it reveals slowly with you; stop and it holds; reverse and it breathes back. Runs on the compositor thread — main-thread jank cannot step it, at any scroll speed. Design notes: · Keyframes animate `translate` + `opacity` — NOT `transform` — so the hover-lift transitions (which use transform) compose instead of being overridden by the animation's fill. · Distances, easing, and reveal window come from wp-admin → Rejuven8 → Animations via the --r8-* custom properties printed in (defaults inline below). Row staggering + the bottom-of-page completion guarantee are applied per element by applyRanges() in r8-animations.js. · The JS engine detects the same support flag and skips these classes to avoid double animation; hero/counters/parallax remain JS-driven. */ @media (prefers-reduced-motion: no-preference) { @keyframes r8-sda-rise { from { opacity: 0; translate: 0 var(--r8-rise-y, 26px); } to { opacity: 1; translate: 0 0; } } @keyframes r8-sda-fade { from { opacity: 0; } to { opacity: 1; } } /* Singles: rise + fade from the viewport edge until ~a third of the way up the screen — the reveal travels WITH the scroll, visibly. */ html.r8-sda body:not(.elementor-editor-active) .r8-fade-up { animation-name: r8-sda-rise; animation-duration: auto; animation-timing-function: var(--r8-anim-ease, cubic-bezier(0.45, 0.05, 0.35, 1)); animation-fill-mode: both; animation-timeline: view(); animation-range: entry 0% cover var(--r8-reveal-end, 30%); } /* Fade-only: used on large containers — spans 65% of the element's own entry so even viewport-tall blocks reveal progressively but fully. */ html.r8-sda body:not(.elementor-editor-active) .r8-fade { animation-name: r8-sda-fade; animation-duration: auto; animation-timing-function: var(--r8-anim-ease, cubic-bezier(0.45, 0.05, 0.35, 1)); animation-fill-mode: both; animation-timeline: view(); animation-range: entry 0% entry 65%; } /* Cascades: each child rides its OWN view timeline, so stacked children reveal one after another purely by position — a true scroll-linked stagger. Elementor inner wrappers and grid plumbing are skipped; WooCommerce cards are targeted directly at any nesting depth. */ html.r8-sda body:not(.elementor-editor-active) .r8-stagger > *:not(.e-con-inner):not(.elementor-widget-wrap):not(:has(ul.products, .elementor-loop-container, .elementor-posts-container)), html.r8-sda body:not(.elementor-editor-active) .r8-stagger > :is(.e-con-inner, .elementor-widget-wrap) > *:not(:has(ul.products, .elementor-loop-container, .elementor-posts-container)), html.r8-sda body:not(.elementor-editor-active) .r8-stagger ul.products > li.product, html.r8-sda body:not(.elementor-editor-active) .r8-stagger :is(.elementor-loop-container, .elementor-posts-container) > * { animation-name: r8-sda-rise; animation-duration: auto; animation-timing-function: var(--r8-anim-ease, cubic-bezier(0.45, 0.05, 0.35, 1)); animation-fill-mode: both; animation-timeline: view(); animation-range: entry 0% cover var(--r8-reveal-end, 30%); } } /* Never let an entrance animation hide content on paper. */ @media print { .r8-fade-up, .r8-fade, .r8-stagger *, .r8-hero > * { animation: none !important; opacity: 1 !important; translate: none !important; } } /* Accessibility: no motion for users who asked for none. */ @media (prefers-reduced-motion: reduce) { .r8-lift, .r8-lift:hover, .r8-lift:focus-within, .r8-lift-cards ul.products li.product, .r8-lift-cards ul.products li.product:hover, .r8-lift-cards ul.products li.product:focus-within, .r8-lift-cards :is(.elementor-loop-container, .elementor-posts-container) > *, .r8-lift-cards :is(.elementor-loop-container, .elementor-posts-container) > *:hover, .r8-lift-cards :is(.elementor-loop-container, .elementor-posts-container) > *:focus-within { transition: none; transform: none; box-shadow: none; } }