/**
 * FW Animations - Scroll-Triggered Animations
 * JavaScript + CSS basierte Scroll-Animationen (Cross-Browser kompatibel)
 * Version: 1.1.0
 */

/* === ANIMATION SETTINGS (CSS Custom Properties) === */

.anim-fade-out {
  --fade-min-opacity: 0.2; /* End-Opacity (0 = unsichtbar, 1 = vollsichtbar) */
  --fade-move-distance: -20px; /* Bewegung beim Ausblenden */
}

.anim-fade-out.fade-light {
  --fade-min-opacity: 0.5; /* Nur bis 50% ausblenden */
}

.anim-fade-out.fade-strong {
  --fade-min-opacity: 0; /* Komplett ausblenden */
}

.anim-scale-out {
  --scale-min-opacity: 0.1; /* End-Opacity für Scale */
  --scale-min-size: 0.8; /* Minimale Größe (1 = Original) */
}

/* === CUSTOM FADE BEISPIELE === */

.mein-custom-fade {
  --fade-min-opacity: 0.3; /* Bis 30% ausblenden */
  --fade-move-distance: -10px; /* Weniger Bewegung */
}

.fade-subtle {
  --fade-min-opacity: 0.6; /* Sehr sanftes Ausblenden */
  --fade-move-distance: -5px;
}

.fade-dramatic {
  --fade-min-opacity: 0; /* Komplettes Ausblenden */
  --fade-move-distance: -40px; /* Starke Bewegung */
}

/* === INITIAL STATES (Vollständige Sichtbarkeit) === */

.anim-fade-out {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.1s linear, transform 0.1s linear;
}

.anim-fade-in {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.1s linear, transform 0.1s linear;
}

.anim-slide-up {
  transform: translateY(0);
  transition: transform 0.1s linear;
}

.anim-slide-down {
  transform: translateY(0);
  transition: transform 0.1s linear;
}

.anim-parallax-slow {
  transform: translateY(0);
  transition: transform 0.1s linear;
}

.anim-parallax-fast {
  transform: translateY(0);
  transition: transform 0.1s linear;
}

.anim-scale-out {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.1s linear, transform 0.1s linear;
}

/* === ANIMATION STATES (via JavaScript gesetzt) === */

.anim-fade-out.js-active {
  opacity: 0;
  transform: translateY(-20px);
}

.anim-fade-in.js-active {
  opacity: 1;
  transform: translateY(0);
}

.anim-slide-up.js-active {
  transform: translateY(-50px);
}

.anim-slide-down.js-active {
  transform: translateY(50px);
}

.anim-parallax-slow.js-active {
  transform: translateY(-30px);
}

.anim-parallax-fast.js-active {
  transform: translateY(-80px);
}

.anim-scale-out.js-active {
  opacity: 0;
  transform: scale(0.8);
}

/* === TIMING MODIFIKATOREN === */

.anim-timing-slow {
  transition-duration: 0.3s !important;
}

.anim-timing-fast {
  transition-duration: 0.05s !important;
}

.anim-timing-smooth {
  transition-duration: 0.2s !important;
  transition-timing-function: ease-out !important;
}

/* === RESPONSIVE ANPASSUNGEN === */

@media (max-width: 768px) {
  [class*="anim-"] {
    transition-duration: 0.15s !important;
  }
}