/* ============================================================================
   Dr. Lorenz – Appear-Animationen
   ----------------------------------------------------------------------------
   Inhalte blenden beim Scrollen einmalig weich von unten ein. Vorbild ist das
   DELTACON-Theme. Unterschied: Die Klassen stehen nicht in den Vorlagen,
   sondern appear.js vergibt sie beim Laden. So wirkt es auch auf Seiten, die
   schon angelegt sind, und der Kunde muss nichts pflegen.

   Aufbau:
     1. Startzustand, nur unter .lz-js (setzt ein Inline-Skript im <head>).
        Ohne JavaScript ist die Seite sofort vollständig sichtbar.
     2. Endzustand über .is-in, gesetzt vom IntersectionObserver.
     3. Abschaltungen: reduzierte Bewegung und Druck.

   Animiert werden nur opacity und transform: kein Layout, kein Layout-Shift.
   Diese Datei wird bewusst nicht in den Blockeditor geladen.
   ========================================================================== */

:root {
  --lz-appear-distance: 14px;
  --lz-appear-duration: 700ms;
  --lz-appear-ease: cubic-bezier(.16, 1, .3, 1);
  --lz-appear-stagger: 70ms;
}

/* -------------------------------------------------------- 1. Startzustand -- */
.lz-js .lz-appear {
  opacity: 0;
  transform: translate3d(0, var(--lz-appear-distance), 0);
  transition:
    opacity var(--lz-appear-duration) var(--lz-appear-ease) var(--lz-appear-delay, 0ms),
    transform var(--lz-appear-duration) var(--lz-appear-ease) var(--lz-appear-delay, 0ms);
}

/* ---------------------------------------------------------- 2. Endzustand -- */
.lz-js .lz-appear.is-in {
  opacity: 1;
  transform: none;
}

/* Nach dem Durchlauf keine Transition mehr, sonst animieren spätere
   Zustandswechsel (Hover, aufklappende FAQ) ungewollt mit. */
.lz-js .lz-appear.is-done {
  transition: none;
}

/* Staffelung: appear.js vergibt --lz-i je Geschwister. Deckel bei 8, damit
   lange Listen unten nicht sekundenlang warten. */
.lz-js .lz-appear[style*="--lz-i"] {
  --lz-appear-delay: calc(min(var(--lz-i, 0), 8) * var(--lz-appear-stagger));
}

/* ------------------------------------------------------ 3. Abschaltungen ---- */
@media (prefers-reduced-motion: reduce) {
  .lz-js .lz-appear {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

@media print {
  .lz-js .lz-appear {
    opacity: 1 !important;
    transform: none !important;
  }
}