/* ============================================================
   Atheria Core Reveals — module styles
   Pre-animation states. Activate only after .ath-js-ready on <html>.
   ============================================================ */

/* ── 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;
}
/* A revealed photo leaves the starting state for its hover effects; :where() keeps the rule's weight as it was. */
.ath-js-ready .ath-image-reveal .ath-image-reveal__media:not(:where([data-ath-reveal-done])),
.ath-js-ready .ath-image-reveal > .elementor-widget-image img:not(:where([data-ath-reveal-done])),
.ath-js-ready .ath-image-reveal img.ath-image-reveal__media:not(:where([data-ath-reveal-done])) {
  opacity: 0;
  transform: scale(1.08);
  will-change: transform, opacity;
  animation: ath-reveal-failsafe 0.01s linear 2.5s forwards;
}
/* The engine marks an unmarked wrapper's photo only when it runs, so until then every photo in it starts hidden. */
.ath-js-ready:not(.ath-no-motion) body:not(.elementor-editor-active) .ath-image-reveal:not(:has(.ath-image-reveal__media)) :is(img, video) {
  opacity: 0;
  transform: scale(1.08);
  animation: ath-reveal-failsafe 0.01s linear 2.5s forwards;
}

/* ── Text reveal ──────────────────────────────────────────── */
.ath-text-reveal {
  line-height: 1.06 !important;
  text-wrap: balance;
  hyphens: manual;
}
.ath-js-ready:not(.ath-no-motion) body:not(.elementor-editor-active) .ath-text-reveal:not([data-ath-split-done]) {
  opacity: 0;
  animation: ath-onload-failsafe 0s linear 2.5s forwards;
}
.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:not(.ath-no-motion) body:not(.elementor-editor-active) .ath-line-reveal:not([data-ath-line-split-done]) {
  opacity: 0;
  animation: ath-onload-failsafe 0s linear 2.5s forwards;
}
.ath-js-ready .ath-line-reveal__line:not([data-ath-blur-done]) {
  opacity: 0;
  transform: translateY(0.5em);
  filter: blur(var(--ath-blur-in-blur));
}

/* ── Slide reveal (directional, fade + horizontal slide) ─── */
.ath-js-ready .ath-slide-reveal {
  opacity: 0;
  transform: translateX(-3rem);
  will-change: transform, opacity;
  animation: ath-reveal-failsafe 0.01s linear 2.5s forwards;
}
.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;
  animation: ath-reveal-failsafe 0.01s linear 2.5s forwards;
}

/* ── Blur in (the element, its children one by one, or a group together) ── */
:root {
  --ath-blur-in-blur: 24px;
  --ath-blur-in-y: 30px;
  --ath-blur-in-duration: 1.2s;
  --ath-blur-in-stagger: 0.15;
}
.ath-blur-group {
  --ath-blur-in-y: 0px;
}
/* The blur itself is set by the tween, so a part the failsafe shows is left with no filter. */
.ath-js-ready .ath-blur-in:not([data-ath-blur-done]),
.ath-js-ready .ath-blur-stagger:not([data-ath-blur-items]) > :not(.e-con-inner):not([data-ath-blur-done]),
.ath-js-ready .ath-blur-stagger:not([data-ath-blur-items]) > .e-con-inner > :not([data-ath-blur-done]),
.ath-js-ready .ath-blur-stagger[data-ath-blur-items] .ath-blur-stagger-item:not([data-ath-blur-done]),
.ath-js-ready .ath-blur-group-item:not([data-ath-blur-done]) {
  opacity: 0;
  translate: 0 var(--ath-blur-in-y);
  animation: ath-blur-failsafe 0.01s linear 2.5s forwards;
}
@keyframes ath-blur-failsafe {
  to { opacity: 1; translate: none; }
}

/* ── 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;
  animation: ath-reveal-failsafe 0.01s linear 2.5s forwards;
}
.ath-js-ready .ath-stagger[data-ath-stagger-from="right"] .ath-stagger-item,
.ath-js-ready .ath-stagger[data-ath-stagger-from="right"][data-ath-stagger-auto] > *:not(.e-con-inner),
.ath-js-ready .ath-stagger[data-ath-stagger-from="right"][data-ath-stagger-auto] > .e-con-inner > * {
  transform: translateX(4rem);
}

/* ── 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;
}

/* Blur targets keep their own transform, so only the entrance's properties are forced. */
.ath-no-motion .ath-blur-in,
.ath-no-motion .ath-blur-stagger:not([data-ath-blur-items]) > *,
.ath-no-motion .ath-blur-stagger:not([data-ath-blur-items]) > .e-con-inner > *,
.ath-no-motion .ath-blur-stagger-item,
.elementor-editor-active .ath-blur-in,
.elementor-editor-active .ath-blur-stagger:not([data-ath-blur-items]) > *,
.elementor-editor-active .ath-blur-stagger:not([data-ath-blur-items]) > .e-con-inner > *,
.elementor-editor-active .ath-blur-stagger-item {
  opacity: 1 !important;
  translate: none !important;
  filter: none !important;
  animation: none !important;
}