/* ============================================================ Atheria Core Reveals — module styles Pre-animation states. Activate only after .ath-js-ready on . ============================================================ */ /* ── Reveal (fade + up) ───────────────────────────────────── */ .ath-js-ready .ath-reveal { opacity: 0; transform: translateY(2.5rem); will-change: transform, opacity; animation: ath-reveal-failsafe 0.01s linear 2.5s forwards; } @keyframes ath-reveal-failsafe { to { opacity: 1; transform: none; } } /* ── Image reveal ─────────────────────────────────────────── */ .ath-js-ready .ath-image-reveal { position: relative; overflow: hidden; } .ath-js-ready .ath-image-reveal .ath-image-reveal__media, .ath-js-ready .ath-image-reveal > .elementor-widget-image img, .ath-js-ready .ath-image-reveal img.ath-image-reveal__media { opacity: 0; transform: scale(1.08); will-change: transform, opacity; } /* ── Text reveal ──────────────────────────────────────────── */ .ath-text-reveal { line-height: 1.06 !important; text-wrap: balance; hyphens: manual; } .ath-js-ready .ath-text-reveal__word { display: inline-block; opacity: 0; transform: translateY(0.4em); will-change: transform, opacity; } /* ── Line reveal (blur) ───────────────────────────────────── */ .ath-line-reveal__line { display: block; } .ath-js-ready .ath-line-reveal__line { opacity: 0; transform: translateY(0.5em); filter: blur(10px); will-change: transform, opacity, filter; } /* ── Slide reveal (directional, fade + horizontal slide) ─── */ .ath-js-ready .ath-slide-reveal { opacity: 0; transform: translateX(-3rem); will-change: transform, opacity; } .ath-js-ready .ath-slide-reveal[data-ath-slide-from="right"] { transform: translateX(3rem); } /* ── Scale reveal (pop in) ───────────────────────────────── */ .ath-js-ready .ath-scale-reveal { opacity: 0; transform: scale(0.4); will-change: transform, opacity; } /* ── Blur group (simultaneous, no stagger) ───────────────── */ .ath-js-ready .ath-blur-group-item { opacity: 0; filter: blur(10px); will-change: opacity, filter; } /* ── Stagger ──────────────────────────────────────────────── */ .ath-js-ready .ath-stagger .ath-stagger-item, .ath-js-ready .ath-stagger[data-ath-stagger-auto] > *:not(.e-con-inner), .ath-js-ready .ath-stagger[data-ath-stagger-auto] > .e-con-inner > * { opacity: 0; transform: translateY(2rem); will-change: transform, opacity; } /* ── Magnetic ─────────────────────────────────────────────── */ .ath-magnetic { display: inline-block; will-change: transform; } /* ───────────────────────────────────────────────────────────────────────────── ON-LOAD FADE — the same reveal the Hero Slider uses. A widget marked with .ath-onload-fade starts hidden and fades in once its images have loaded (JS adds .is-ready). A CSS failsafe reveals it after 3s even if JS never runs, so content can never stay stuck hidden. This is an alternative to the scroll-reveal (ath-reveal/ath-stagger) entrance — chosen per-widget. ───────────────────────────────────────────────────────────────────────────── */ .ath-onload-fade { opacity: 0; animation: ath-onload-failsafe 0s linear 3s forwards; } .ath-onload-fade.is-ready { opacity: 1; animation: none; transition: opacity 0.8s ease-out; } body.elementor-editor-active .ath-onload-fade { opacity: 1 !important; animation: none !important; } @keyframes ath-onload-failsafe { to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .ath-onload-fade { opacity: 1 !important; animation: none !important; transition: none !important; } } /* ── Reduced motion / no-JS fallback: force everything visible ── */ .ath-no-motion .ath-reveal, .ath-no-motion .ath-image-reveal .ath-image-reveal__media, .ath-no-motion .ath-image-reveal > .elementor-widget-image img, .ath-no-motion .ath-image-reveal img.ath-image-reveal__media, .ath-no-motion .ath-text-reveal__word, .ath-no-motion .ath-line-reveal__line, .ath-no-motion .ath-blur-group-item, .ath-no-motion .ath-slide-reveal, .ath-no-motion .ath-scale-reveal, .ath-no-motion .ath-stagger .ath-stagger-item, .ath-no-motion .ath-stagger[data-ath-stagger-auto] > *, .ath-no-motion .ath-stagger[data-ath-stagger-auto] > .e-con-inner > * { opacity: 1 !important; transform: none !important; filter: none !important; } /* ── Elementor editor: force all animated elements visible ──── */ .elementor-editor-active .ath-reveal, .elementor-editor-active .ath-image-reveal .ath-image-reveal__media, .elementor-editor-active .ath-image-reveal > .elementor-widget-image img, .elementor-editor-active .ath-text-reveal__word, .elementor-editor-active .ath-line-reveal__line, .elementor-editor-active .ath-blur-group-item, .elementor-editor-active .ath-slide-reveal, .elementor-editor-active .ath-scale-reveal, .elementor-editor-active .ath-stagger .ath-stagger-item, .elementor-editor-active .ath-stagger[data-ath-stagger-auto] > *, .elementor-editor-active .ath-stagger[data-ath-stagger-auto] > .e-con-inner > * { opacity: 1 !important; transform: none !important; filter: none !important; }