/* ==========================================================================
   Bricks Scroll FX — CSS Framework
   Version: 1.0.0
   Beschreibung: GSAP ScrollTrigger Animationen für Bricks Builder 2.2
   Methodik: BEM (Block Element Modifier)
   ========================================================================== */

/* ==========================================================================
   Block: .scroll-fx
   Basis-Klasse für alle scroll-animierten Elemente
   ========================================================================== */

.scroll-fx {
  will-change: transform, opacity;
}

/* ==========================================================================
   Element: Initiale Zustände (werden via JS gesetzt)
   Hier nur als Fallback / No-JS Sicherheit
   ========================================================================== */

.scroll-fx--hidden {
  visibility: hidden;
}

/* ==========================================================================
   Modifier: Fade-Effekte
   Verwendung: class="scroll-fx scroll-fx--fade-in"
   ========================================================================== */

.scroll-fx--fade-in,
.scroll-fx--fade-in-up,
.scroll-fx--fade-in-down,
.scroll-fx--fade-in-left,
.scroll-fx--fade-in-right {
  /* Initiale Sichtbarkeit wird von GSAP gesteuert */
}

/* ==========================================================================
   Modifier: Bewegungseffekte (ohne Fade)
   Verwendung: class="scroll-fx scroll-fx--slide-up"
   ========================================================================== */

.scroll-fx--slide-up,
.scroll-fx--slide-down,
.scroll-fx--slide-left,
.scroll-fx--slide-right {
  /* Initiale Position wird von GSAP gesteuert */
}

/* ==========================================================================
   Modifier: Skalierung
   ========================================================================== */

.scroll-fx--zoom-in,
.scroll-fx--zoom-out {
  /* Initiale Skalierung wird von GSAP gesteuert */
}

/* ==========================================================================
   Modifier: Rotation
   ========================================================================== */

.scroll-fx--rotate-in,
.scroll-fx--rotate-in-left,
.scroll-fx--rotate-in-right {
  /* Initiale Rotation wird von GSAP gesteuert */
}

/* ==========================================================================
   Modifier: Kombinationseffekte
   ========================================================================== */

.scroll-fx--flip-up,
.scroll-fx--flip-left {
  perspective: 1000px;
}

/* ==========================================================================
   Modifier: Stagger (Kinder nacheinander animieren)
   Verwendung am Parent: class="scroll-fx scroll-fx--stagger"
   ========================================================================== */

.scroll-fx--stagger > * {
  will-change: transform, opacity;
}

/* ==========================================================================
   Modifier: Geschwindigkeit
   ========================================================================== */

.scroll-fx--slow {
  /* duration: 1.4s — gesteuert via JS */
}

.scroll-fx--fast {
  /* duration: 0.4s — gesteuert via JS */
}

/* ==========================================================================
   Modifier: Verzögerung
   ========================================================================== */

.scroll-fx--delay-1 {
  /* delay: 0.1s */
}

.scroll-fx--delay-2 {
  /* delay: 0.2s */
}

.scroll-fx--delay-3 {
  /* delay: 0.3s */
}

.scroll-fx--delay-4 {
  /* delay: 0.4s */
}

.scroll-fx--delay-5 {
  /* delay: 0.5s */
}

/* ==========================================================================
   Modifier: Easing
   ========================================================================== */

.scroll-fx--ease-bounce {
  /* ease: "bounce.out" */
}

.scroll-fx--ease-elastic {
  /* ease: "elastic.out(1, 0.5)" */
}

.scroll-fx--ease-back {
  /* ease: "back.out(1.7)" */
}

/* ==========================================================================
   Responsive Modifier
   Elemente können auf bestimmten Bildschirmgrößen deaktiviert werden

   Verwendung:
     scroll-fx--disable-mobile    → deaktiviert unter 768px
     scroll-fx--disable-tablet    → deaktiviert unter 1024px
     scroll-fx--only-desktop      → nur ab 1025px aktiv
     scroll-fx--only-mobile       → nur unter 768px aktiv

   Alternativ: data-Attribute für feingranulare Kontrolle
     data-scroll-fx-mobile="fade-in"
     data-scroll-fx-tablet="fade-in-up"
     data-scroll-fx-desktop="fade-in-left"
   ========================================================================== */

/* ==========================================================================
   Marker / Debug-Klasse
   ========================================================================== */

.scroll-fx--debug {
  outline: 2px dashed rgba(255, 0, 0, 0.4) !important;
  outline-offset: 2px;
}

.scroll-fx--debug::after {
  content: attr(class);
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(255, 0, 0, 0.8);
  color: #fff;
  font-size: 10px;
  padding: 2px 6px;
  z-index: 9999;
  pointer-events: none;
  white-space: nowrap;
  font-family: monospace;
}

/* ==========================================================================
   Reduced Motion — Barrierefreiheit
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .scroll-fx,
  .scroll-fx--stagger > * {
    transition: none !important;
    animation: none !important;
    will-change: auto !important;
  }
}