/* ============================================================
   scroll-animations.css
   Eingangsanimationen per Klasse – kompatibel mit allen Page Buildern
   Präfix: anim- (verhindert Konflikte mit Elementor, Divi, WPBakery)
   ============================================================ */

/* ------------------------------------------------------------
   BASIS-SETUP
   Alle Elemente mit einer anim-* Klasse starten im
   "unsichtbaren" Zustand. Erst wenn JS die Klasse
   .is-visible hinzufügt, läuft die Animation.
   ------------------------------------------------------------ */

[class*="anim-"] {
  transition-property: opacity, transform, filter;
  transition-timing-function: ease-out;
  transition-duration: 0.65s;      /* Globale Dauer – in JS überschreibbar */
  transition-delay: 0s;
  will-change: opacity, transform;
}

/* Sonderfall: blur braucht filter */
.anim-blur-in {
  transition-property: opacity, filter;
}

/* Bereits sichtbar → keine Transformation */
[class*="anim-"].is-visible {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

/* Reduced Motion: Animationen deaktivieren für Nutzer, die das wünschen */
@media (prefers-reduced-motion: reduce) {
  [class*="anim-"] {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}


/* ------------------------------------------------------------
   FADE-IN VARIANTEN (mit Bewegung aus einer Richtung)
   ------------------------------------------------------------ */

.anim-fade-in {
  opacity: 0;
}

/* Von unten nach oben (häufigste, natürlichste Animation) */
.anim-fade-in-up {
  opacity: 0;
  transform: translateY(40px);
}

/* Von oben nach unten */
.anim-fade-in-down {
  opacity: 0;
  transform: translateY(-40px);
}

/* Von links nach rechts */
.anim-fade-in-left {
  opacity: 0;
  transform: translateX(-50px);
}

/* Von rechts nach links */
.anim-fade-in-right {
  opacity: 0;
  transform: translateX(50px);
}

/* Diagonal: unten-links */
.anim-fade-in-up-left {
  opacity: 0;
  transform: translate(-30px, 30px);
}

/* Diagonal: unten-rechts */
.anim-fade-in-up-right {
  opacity: 0;
  transform: translate(30px, 30px);
}


/* ------------------------------------------------------------
   ZOOM / SCALE VARIANTEN
   ------------------------------------------------------------ */

/* Einzoomen aus kleiner Position */
.anim-zoom-in {
  opacity: 0;
  transform: scale(0.8);
}

/* Auszoomen aus zu großer Position */
.anim-zoom-out {
  opacity: 0;
  transform: scale(1.15);
}

/* Skalierung ohne Fade – für starke visuelle Elemente */
.anim-scale-up {
  opacity: 0;
  transform: scale(0.92);
}


/* ------------------------------------------------------------
   SLIDE VARIANTEN (ohne Fade – reine Bewegung)
   ------------------------------------------------------------ */

.anim-slide-up {
  opacity: 0;
  transform: translateY(60px);
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

.anim-slide-left {
  opacity: 0;
  transform: translateX(-70px);
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

.anim-slide-right {
  opacity: 0;
  transform: translateX(70px);
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}


/* ------------------------------------------------------------
   SONSTIGE ANIMATIONEN
   ------------------------------------------------------------ */

/* Blur-Auflösung: gut für Bilder, Hero-Elemente */
.anim-blur-in {
  opacity: 0;
  filter: blur(12px);
}

/* Flip auf X-Achse: gut für Karten, Highlights */
.anim-flip-x {
  opacity: 0;
  transform: perspective(600px) rotateX(25deg);
}

/* Flip auf Y-Achse */
.anim-flip-y {
  opacity: 0;
  transform: perspective(600px) rotateY(25deg);
}

/* Leichte Rotation beim Einblenden */
.anim-rotate-in {
  opacity: 0;
  transform: rotate(-8deg) scale(0.92);
}


/* ------------------------------------------------------------
   DELAY-KLASSEN
   Für gestaffelte Animationen in Reihen/Spalten.
   Einfach zusätzlich zur Animations-Klasse hinzufügen.
   Beispiel: <div class="anim-fade-in-up anim-delay-200">
   ------------------------------------------------------------ */

.anim-delay-100  { transition-delay: 0.1s; }
.anim-delay-200  { transition-delay: 0.2s; }
.anim-delay-300  { transition-delay: 0.3s; }
.anim-delay-400  { transition-delay: 0.4s; }
.anim-delay-500  { transition-delay: 0.5s; }
.anim-delay-600  { transition-delay: 0.6s; }
.anim-delay-800  { transition-delay: 0.8s; }
.anim-delay-1000 { transition-delay: 1.0s; }


/* ------------------------------------------------------------
   DURATION-KLASSEN
   Überschreibt die globale Animationsdauer pro Element.
   Beispiel: <div class="anim-fade-in anim-duration-400">
   ------------------------------------------------------------ */

.anim-duration-300  { transition-duration: 0.3s; }
.anim-duration-400  { transition-duration: 0.4s; }
.anim-duration-600  { transition-duration: 0.6s; }
.anim-duration-800  { transition-duration: 0.8s; }
.anim-duration-1000 { transition-duration: 1.0s; }
.anim-duration-1500 { transition-duration: 1.5s; }


/* ------------------------------------------------------------
   EASING-KLASSEN
   ------------------------------------------------------------ */

.anim-ease-in      { transition-timing-function: ease-in; }
.anim-ease-in-out  { transition-timing-function: ease-in-out; }
.anim-ease-spring  { transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
.anim-ease-bounce  { transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }