/* ==========================================================================
   FW-Animations — Scroll-getriggerte Einblende-Effekte
   --------------------------------------------------------------------------
   Anwendung:
     1) Per Shortcode:    [animate effekt=fade-up]Inhalt[/animate]
     2) Per HTML-Klasse:  <div class="fw-animate fw-animate--fade-up">…</div>
     3) Per data-attribut: <div data-animate="fade-up">…</div>
                          (das JS wandelt das in die Klasse um)

   Optional (alle drei Varianten):
     data-fw-delay="200"      → Verzögerung in ms vor Start (max 3000)
     data-fw-duration="800"   → Dauer der Animation in ms (max 3000)
     data-fw-once="0"         → wenn 0, animiert wieder beim Re-Eintritt
                                in den Viewport (Default = einmalig)

   Trigger:
     IntersectionObserver fügt `.is-visible` hinzu, sobald das Element zu
     mindestens 12 % im Viewport sichtbar ist. Nur dann startet die
     Animation — kein Flackern beim Laden.

   Accessibility:
     `prefers-reduced-motion: reduce` ⇒ Animation entfällt komplett, das
     Element ist sofort sichtbar (opacity:1, transform:none).
   ========================================================================== */

/* Initial-Zustand (vor Trigger): unsichtbar + transformiert */
.fw-animate {
  opacity: 0;
  transform: translateY(0) translateX(0) scale(1) rotate(0);
  transition-property: opacity, transform;
  transition-duration: var(--fw-anim-duration, 700ms);
  transition-timing-function: cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--fw-anim-delay, 0ms);
  will-change: opacity, transform;
}

/* Trigger-Zustand (im Viewport): sichtbar + Endposition */
.fw-animate.is-visible {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1) rotate(0);
}

/* ===== Effekte: Initial-Transform pro Variante ============================ */

/* Fade — nur Opacity */
.fw-animate--fade-in            { /* startet schon mit opacity:0, kein Transform */ }

/* Slide / Fade-from-direction */
.fw-animate--fade-up            { transform: translateY(28px); }
.fw-animate--fade-down          { transform: translateY(-28px); }
.fw-animate--fade-left          { transform: translateX(36px); }   /* Bewegung von rechts → links */
.fw-animate--fade-right         { transform: translateX(-36px); }  /* Bewegung von links → rechts */

/* Stronger slide (kein Fade-in, nur Bewegung) */
.fw-animate--slide-up           { transform: translateY(60px); }
.fw-animate--slide-down         { transform: translateY(-60px); }

/* Zoom / Scale */
.fw-animate--zoom-in            { transform: scale(.85); }
.fw-animate--zoom-out           { transform: scale(1.18); }
.fw-animate--scale-in           { transform: scale(.6); }

/* Rotation */
.fw-animate--rotate             { transform: rotate(-12deg) scale(.92); }
.fw-animate--flip               { transform: rotateY(85deg); }

/* Bounce-Out (mit anderer Easing-Kurve) */
.fw-animate--bounce             { transform: scale(.5); transition-timing-function: cubic-bezier(.34, 1.56, .64, 1); }

/* ===== Stagger: child-Elemente nacheinander einblenden ==================== */
/* Wird bei einem Wrapper mit .fw-animate--stagger automatisch durchgereicht.
   Das JS setzt die delays auf direkten Kindern. */
.fw-animate--stagger > .fw-animate {
  /* Delays werden per inline `style="--fw-anim-delay: …"` vom JS gesetzt */
}

/* ===== Reduced-Motion: keine Animation, sofort sichtbar =================== */
@media (prefers-reduced-motion: reduce) {
  .fw-animate,
  .fw-animate.is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ===== Editor-Vorschau: Im Quill-Editor sofort sichtbar zeigen, sonst
   wäre der Inhalt im Editor unsichtbar (keine Scroll-Trigger im Editor). */
.ql-editor .fw-animate {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  outline: 1px dashed rgba(37, 99, 235, .35);
  outline-offset: 4px;
  position: relative;
}
.ql-editor .fw-animate::before {
  content: '✨ ' attr(data-animate-label);
  position: absolute;
  top: -.6rem;
  left: .4rem;
  font-size: .7rem;
  background: rgba(37, 99, 235, .9);
  color: #fff;
  padding: .05rem .4rem;
  border-radius: 4px;
  font-family: ui-sans-serif, system-ui, sans-serif;
  pointer-events: none;
  z-index: 1;
}