/* =============================================================================
   ninetyone Scroll-Animationen für Divi
   Inspiriert von lightshiprv.com
   Version 1.0.0 | ninetyone.de

   Klassen zum Zuweisen in Divi → „CSS-Klasse" im Modul-Tab „Erweitert":

   .nn-fade-up        – Element gleitet sanft von unten rein
   .nn-fade-in         – Element blendet ein (ohne Bewegung)
   .nn-slide-left      – Element gleitet von rechts rein
   .nn-slide-right     – Element gleitet von links rein
   .nn-scale-in        – Element zoomt leicht rein (Bild-Effekt)
   .nn-text-reveal     – Text erscheint Zeile für Zeile von unten
   .nn-parallax        – Parallax-Effekt (Bild bewegt sich langsamer)
   .nn-stagger         – Kinder-Elemente erscheinen nacheinander

   Modifier (kombinierbar):
   .nn-delay-1         – 100ms Verzögerung
   .nn-delay-2         – 200ms Verzögerung
   .nn-delay-3         – 300ms Verzögerung
   .nn-delay-4         – 400ms Verzögerung
   .nn-slow            – Langsamere Animation (1.4s statt 0.9s)
   .nn-fast            – Schnellere Animation (0.5s statt 0.9s)
   ============================================================================= */


/* -----------------------------------------------------------------------------
   Basis: Elemente starten unsichtbar
   ----------------------------------------------------------------------------- */

.nn-fade-up,
.nn-fade-in,
.nn-slide-left,
.nn-slide-right,
.nn-scale-in,
.nn-text-reveal {
  opacity: 0;
  will-change: transform, opacity;
}

/* Sofort sichtbar wenn JS noch nicht geladen oder Animation abgespielt */
.nn-fade-up.nn-visible,
.nn-fade-in.nn-visible,
.nn-slide-left.nn-visible,
.nn-slide-right.nn-visible,
.nn-scale-in.nn-visible,
.nn-text-reveal.nn-visible {
  opacity: 1;
}


/* -----------------------------------------------------------------------------
   1. Fade Up – sanft von unten hochgleiten
   ----------------------------------------------------------------------------- */

.nn-fade-up {
  transform: translateY(60px);
  transition: opacity 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.nn-fade-up.nn-visible {
  transform: translateY(0);
}


/* -----------------------------------------------------------------------------
   2. Fade In – reines Einblenden
   ----------------------------------------------------------------------------- */

.nn-fade-in {
  transition: opacity 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}


/* -----------------------------------------------------------------------------
   3. Slide Left – von rechts reinfahren
   ----------------------------------------------------------------------------- */

.nn-slide-left {
  transform: translateX(80px);
  transition: opacity 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.nn-slide-left.nn-visible {
  transform: translateX(0);
}


/* -----------------------------------------------------------------------------
   4. Slide Right – von links reinfahren
   ----------------------------------------------------------------------------- */

.nn-slide-right {
  transform: translateX(-80px);
  transition: opacity 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.nn-slide-right.nn-visible {
  transform: translateX(0);
}


/* -----------------------------------------------------------------------------
   5. Scale In – leichter Zoom-Effekt (toll für Bilder)
   ----------------------------------------------------------------------------- */

.nn-scale-in {
  transform: scale(0.92);
  transition: opacity 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.nn-scale-in.nn-visible {
  transform: scale(1);
}


/* -----------------------------------------------------------------------------
   6. Text Reveal – Text erscheint von unten (clip-path)
   ----------------------------------------------------------------------------- */

.nn-text-reveal {
  clip-path: inset(100% 0 0 0);
  transform: translateY(20px);
  transition: clip-path 0.8s cubic-bezier(0.77, 0, 0.175, 1),
              transform 0.8s cubic-bezier(0.77, 0, 0.175, 1),
              opacity 0.6s ease;
}

.nn-text-reveal.nn-visible {
  clip-path: inset(0 0 0 0);
  transform: translateY(0);
}


/* -----------------------------------------------------------------------------
   7. Parallax – wird via JS gesteuert (nur Container-Setup)
   ----------------------------------------------------------------------------- */

.nn-parallax {
  overflow: hidden;
  position: relative;
}

.nn-parallax > * {
  will-change: transform;
}


/* -----------------------------------------------------------------------------
   8. Stagger – Kinder erscheinen nacheinander
   ----------------------------------------------------------------------------- */

.nn-stagger > * {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.nn-stagger.nn-visible > *:nth-child(1) { transition-delay: 0s; }
.nn-stagger.nn-visible > *:nth-child(2) { transition-delay: 0.1s; }
.nn-stagger.nn-visible > *:nth-child(3) { transition-delay: 0.2s; }
.nn-stagger.nn-visible > *:nth-child(4) { transition-delay: 0.3s; }
.nn-stagger.nn-visible > *:nth-child(5) { transition-delay: 0.4s; }
.nn-stagger.nn-visible > *:nth-child(6) { transition-delay: 0.5s; }
.nn-stagger.nn-visible > *:nth-child(7) { transition-delay: 0.6s; }
.nn-stagger.nn-visible > *:nth-child(8) { transition-delay: 0.7s; }

.nn-stagger.nn-visible > * {
  opacity: 1;
  transform: translateY(0);
}


/* -----------------------------------------------------------------------------
   Modifier: Verzögerungen
   ----------------------------------------------------------------------------- */

.nn-delay-1 { transition-delay: 0.1s !important; }
.nn-delay-2 { transition-delay: 0.2s !important; }
.nn-delay-3 { transition-delay: 0.3s !important; }
.nn-delay-4 { transition-delay: 0.4s !important; }


/* -----------------------------------------------------------------------------
   Modifier: Geschwindigkeit
   ----------------------------------------------------------------------------- */

.nn-slow.nn-fade-up,
.nn-slow.nn-slide-left,
.nn-slow.nn-slide-right {
  transition-duration: 1.4s;
}

.nn-fast.nn-fade-up,
.nn-fast.nn-slide-left,
.nn-fast.nn-slide-right {
  transition-duration: 0.5s;
}


/* -----------------------------------------------------------------------------
   Reduced Motion: Animationen respektieren
   ----------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .nn-fade-up,
  .nn-fade-in,
  .nn-slide-left,
  .nn-slide-right,
  .nn-scale-in,
  .nn-text-reveal,
  .nn-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
}


/* -----------------------------------------------------------------------------
   Divi Visual Builder: Animationen deaktivieren
   ----------------------------------------------------------------------------- */

body.et-fb .nn-fade-up,
body.et-fb .nn-fade-in,
body.et-fb .nn-slide-left,
body.et-fb .nn-slide-right,
body.et-fb .nn-scale-in,
body.et-fb .nn-text-reveal,
body.et-fb .nn-stagger > * {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
  transition: none !important;
}