/* =============================================================================
   GSW ANIMATIONS LIBRARY v1.0.0
   Scroll-triggered entrance animations for Bricks Builder
   
   Klassen werden über den Bricks Class-Field gesetzt.
   JS (IntersectionObserver) fügt .gsw-visible hinzu, wenn das Element
   ins Viewport scrollt. Alle Animationen laufen dann über CSS.
   ============================================================================= */


/* --- Custom Properties (global überschreibbar) ----------------------------- */

:root {
  --gsw-duration:      700ms;
  --gsw-ease:          cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --gsw-distance:      36px;
  --gsw-scale-in:      0.93;
  --gsw-scale-out:     1.07;
  --gsw-stagger-step:  120ms;
  --gsw-i:             0;    /* Stagger-Index: gesetzt per Bricks {query_loop_index},
                                data-gsw-index, oder JS-Auto-Count */
}


/* =============================================================================
   ENTRANCE ANIMATIONS (scroll-triggered)
   ============================================================================= */

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

.gsw-fade,
.gsw-fade-up,
.gsw-fade-down,
.gsw-fade-left,
.gsw-fade-right,
.gsw-zoom-in,
.gsw-zoom-out,
.gsw-blur-in {
  opacity: 0;
  transition:
    opacity  var(--gsw-duration) var(--gsw-ease),
    transform var(--gsw-duration) var(--gsw-ease),
    filter   var(--gsw-duration) var(--gsw-ease);

  /* Stagger-Delay: greift auf --gsw-i zurück (default 0 = kein Delay) */
  transition-delay: calc(var(--gsw-i, 0) * var(--gsw-stagger-step));
}


/* --- Initiale Transforms pro Klasse ---------------------------------------- */

.gsw-fade-up    { transform: translateY(var(--gsw-distance)); }
.gsw-fade-down  { transform: translateY(calc(var(--gsw-distance) * -1)); }
.gsw-fade-left  { transform: translateX(var(--gsw-distance)); }   /* kommt von rechts */
.gsw-fade-right { transform: translateX(calc(var(--gsw-distance) * -1)); } /* kommt von links */
.gsw-zoom-in    { transform: scale(var(--gsw-scale-in)); }
.gsw-zoom-out   { transform: scale(var(--gsw-scale-out)); }
.gsw-blur-in    { transform: translateY(16px); filter: blur(8px); }


/* --- Visible State: JS addet .gsw-visible ---------------------------------- */

.gsw-fade.gsw-visible,
.gsw-fade-up.gsw-visible,
.gsw-fade-down.gsw-visible,
.gsw-fade-left.gsw-visible,
.gsw-fade-right.gsw-visible,
.gsw-zoom-in.gsw-visible,
.gsw-zoom-out.gsw-visible,
.gsw-blur-in.gsw-visible {
  opacity: 1;
  transform: none;
  filter: none;
}


/* =============================================================================
   KEN BURNS (always-on, kein Scroll-Trigger)
   Auf den Bild-Container setzen, nicht auf das img selbst.
   ============================================================================= */

@keyframes gsw-ken-burns {
  0%   { transform: scale(1)    translate(0%, 0%); }
  33%  { transform: scale(1.06) translate(-0.8%, -0.6%); }
  66%  { transform: scale(1.04) translate(0.5%, -0.8%); }
  100% { transform: scale(1)    translate(0%, 0%); }
}

.gsw-ken-burns {
  overflow: hidden;
}

.gsw-ken-burns > img,
.gsw-ken-burns img {
  animation: gsw-ken-burns 14s ease-in-out infinite;
  will-change: transform;
}

/* Wenn direkt auf ein <img> gesetzt (z.B. Bricks Image-Element) */
img.gsw-ken-burns {
  animation: gsw-ken-burns 14s ease-in-out infinite;
  will-change: transform;
}


/* =============================================================================
   DURATION MODIFIER
   ============================================================================= */

.gsw-duration-fast { --gsw-duration: 380ms; }
.gsw-duration-slow { --gsw-duration: 1100ms; }


/* =============================================================================
   MANUAL DELAY MODIFIER (additiv zum Stagger-Delay)
   Nützlich wenn man ein einzelnes Element etwas später reinkommen lassen will.
   ============================================================================= */

.gsw-delay-1 { transition-delay: calc(var(--gsw-i, 0) * var(--gsw-stagger-step) + 100ms); }
.gsw-delay-2 { transition-delay: calc(var(--gsw-i, 0) * var(--gsw-stagger-step) + 200ms); }
.gsw-delay-3 { transition-delay: calc(var(--gsw-i, 0) * var(--gsw-stagger-step) + 350ms); }
.gsw-delay-4 { transition-delay: calc(var(--gsw-i, 0) * var(--gsw-stagger-step) + 500ms); }
.gsw-delay-5 { transition-delay: calc(var(--gsw-i, 0) * var(--gsw-stagger-step) + 700ms); }


/* =============================================================================
   REDUCED MOTION – Barrierefreiheit
   Nutzer mit aktiviertem "Reduced Motion" sehen keine Bewegung,
   aber Inhalte sind sofort sichtbar.
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {

  .gsw-fade,
  .gsw-fade-up,
  .gsw-fade-down,
  .gsw-fade-left,
  .gsw-fade-right,
  .gsw-zoom-in,
  .gsw-zoom-out,
  .gsw-blur-in {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }

  .gsw-ken-burns > img,
  .gsw-ken-burns img,
  img.gsw-ken-burns {
    animation: none;
  }
}