/* =========================================================
   Lizard Group – Scroll Reveal System
   - Rollen: banner, title, text, media-container, media
   - Zustand: .is-inview wird per JS gesetzt
   - Elementor-Editor: Inhalte immer sichtbar
   ========================================================= */

/* -------- Defaults (global feinjustieren) -------- */
:root {
  --lg-duration: 1.2s;
  --lg-ease: cubic-bezier(.22, 1, .36, 1);
  --lg-distance-x: 32px;
  --lg-distance-y: 14px;

  --lg-base-delay: .06s;
  --lg-step-delay: .10s;
  --lg-max-delay: 1.10s;

  --lg-threshold: 0.2;
  --lg-root-margin: 0px 0px -10% 0px;
}

/* -------- Keyframes -------- */
@keyframes lgSlideInLeftFade {
  from {
    opacity: 0;
    transform: translateX(calc(var(--lg-distance-x) * -1));
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes lgFadeUp {
  from {
    opacity: 0;
    transform: translateY(var(--lg-distance-y));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================================================
   FRONTEND: Startzustand nur außerhalb des Elementor-Editors
   ========================================================= */

/* Startzustand: unsichtbar nur im Frontend */
body:not(.elementor-editor-active) .lg-reveal:not(.lg-reveal--done) :where(
  .lg-reveal__banner,
  .lg-reveal__title,
  .lg-reveal__text p,
  .lg-reveal__text li,
  .lg-reveal__media-container,
  .lg-reveal__media
) {
  opacity: 0;
  will-change: transform, opacity;
}

/* Slide links: nur im Frontend */
body:not(.elementor-editor-active) .lg-reveal:not(.lg-reveal--done) :where(
  .lg-reveal__banner,
  .lg-reveal__title,
  .lg-reveal__text p,
  .lg-reveal__text li
) {
  transform: translateX(calc(var(--lg-distance-x) * -1));
}

/* Fade up: nur im Frontend */
body:not(.elementor-editor-active) .lg-reveal:not(.lg-reveal--done) :where(
  .lg-reveal__media-container,
  .lg-reveal__media
) {
  transform: translateY(var(--lg-distance-y));
}

/* =========================================================
   Wenn done: sichtbar erzwingen
   ========================================================= */
.lg-reveal.lg-reveal--done :where(
  .lg-reveal__banner,
  .lg-reveal__title,
  .lg-reveal__text p,
  .lg-reveal__text li,
  .lg-reveal__media-container,
  .lg-reveal__media
) {
  opacity: 1;
  transform: none;
  animation: none;
}

/* =========================================================
   Wenn sichtbar: Animationen aktivieren
   ========================================================= */
.lg-reveal.is-inview :where(
  .lg-reveal__banner,
  .lg-reveal__title,
  .lg-reveal__text p,
  .lg-reveal__text li
) {
  animation: lgSlideInLeftFade var(--lg-duration) var(--lg-ease) forwards;
}

.lg-reveal.is-inview .lg-reveal__media-container {
  animation: lgFadeUp var(--lg-duration) var(--lg-ease) forwards;
}

.lg-reveal.is-inview .lg-reveal__media {
  animation: lgFadeUp var(--lg-duration) var(--lg-ease) forwards;
}

/* Optional: nur Container animieren, Medien selbst nicht */
.lg-reveal.lg-reveal--media-container-only.is-inview .lg-reveal__media {
  animation: none;
  opacity: 1;
  transform: none;
}

/* =========================================================
   Elementor-Editor: Inhalte immer sichtbar
   ========================================================= */
body.elementor-editor-active .lg-reveal :where(
  .lg-reveal__banner,
  .lg-reveal__title,
  .lg-reveal__text p,
  .lg-reveal__text li,
  .lg-reveal__media-container,
  .lg-reveal__media
) {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  will-change: auto !important;
}

/* =========================================================
   Barrierefreiheit
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .lg-reveal :where(
    .lg-reveal__banner,
    .lg-reveal__title,
    .lg-reveal__text p,
    .lg-reveal__text li,
    .lg-reveal__media-container,
    .lg-reveal__media
  ) {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}