@charset "UTF-8";
/* =========================================================
   ADKRU LP — Animations
   Reveals laufen nur wenn html.adkru-anim-ready gesetzt ist
   (JS-Ready-Marker). Ohne JS oder bei prefers-reduced-motion
   bleibt der Marker aus -> alle Blöcke sofort sichtbar.

   Tonalität: ADKRU = "richtig Bewegung". Reveals haben
   spürbare Distanzen + leichten Back-Out-Overshoot. Loops
   sind kontinuierlich und deutlich sichtbar, nicht zaghaft.

   Loops laufen auf [data-anim-loop="loop-*"].is-loop-active.
   Das Gating verhindert Konflikt mit Reveal-Transform: erst wenn
   view.js die Klasse setzt (sofort beim Mount wenn kein Reveal,
   sonst nach Reveal-transitionend) startet die animation-Property.

   Scroll-Scrub via @supports (animation-timeline: view()) als
   Progressive Enhancement; Safari fällt auf statisch zurück.
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  /* === Reveals (one-shot on intersection) === */
  /* Easing: cubic-bezier(.34, 1.56, .64, 1) = "back.out" — sanftes Overshoot für Präsenz. */
  html.adkru-anim-ready [data-anim=fade-in],
  html.adkru-anim-ready [data-anim=fly-left],
  html.adkru-anim-ready [data-anim=fly-right],
  html.adkru-anim-ready [data-anim=fly-up] {
    opacity: 0;
    transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: opacity, transform;
  }
  html.adkru-anim-ready [data-anim=fade-in] {
    transform: translateY(48px) scale(0.94);
  }
  html.adkru-anim-ready [data-anim=fly-left] {
    transform: translateX(-160px) scale(0.96);
  }
  html.adkru-anim-ready [data-anim=fly-right] {
    transform: translateX(160px) scale(0.96);
  }
  html.adkru-anim-ready [data-anim=fly-up] {
    transform: translateY(120px) scale(0.96);
  }
  html.adkru-anim-ready [data-anim=expand] {
    transform: scale(0.35);
    transform-origin: center;
  }
  /* Mobile: kürzere Reveal-Distanzen, damit Initial-State nicht
     so weit out-of-viewport schiebt (war wesentlicher Mitverursacher
     des horizontal Overflow vor dem clip-Sicherheitsnetz). */
}
@media (prefers-reduced-motion: no-preference) and (max-width: 767px) {
  html.adkru-anim-ready [data-anim=fade-in] {
    transform: translateY(28px) scale(0.96);
  }
  html.adkru-anim-ready [data-anim=fly-left] {
    transform: translateX(-60px) scale(0.98);
  }
  html.adkru-anim-ready [data-anim=fly-right] {
    transform: translateX(60px) scale(0.98);
  }
  html.adkru-anim-ready [data-anim=fly-up] {
    transform: translateY(60px) scale(0.98);
  }
  html.adkru-anim-ready [data-anim=expand] {
    transform: scale(0.6);
  }
}
@media (prefers-reduced-motion: no-preference) {
  html.adkru-anim-ready [data-anim=fade-in].is-anim-in,
  html.adkru-anim-ready [data-anim=fly-left].is-anim-in,
  html.adkru-anim-ready [data-anim=fly-right].is-anim-in,
  html.adkru-anim-ready [data-anim=fly-up].is-anim-in,
  html.adkru-anim-ready [data-anim=expand].is-anim-in {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: no-preference) {
  /* === Stagger-Up: Parent triggert, direkte Kinder gestaffelt rein === */
  html.adkru-anim-ready [data-anim=stagger-up] > * {
    opacity: 0;
    transform: translateY(70px) scale(0.94);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 767px) {
  html.adkru-anim-ready [data-anim=stagger-up] > * {
    transform: translateY(36px) scale(0.96);
  }
}
@media (prefers-reduced-motion: no-preference) {
  html.adkru-anim-ready [data-anim=stagger-up].is-anim-in > * {
    opacity: 1;
    transform: none;
  }
  html.adkru-anim-ready [data-anim=stagger-up].is-anim-in > *:nth-child(1) {
    transition-delay: 0ms;
  }
  html.adkru-anim-ready [data-anim=stagger-up].is-anim-in > *:nth-child(2) {
    transition-delay: 140ms;
  }
  html.adkru-anim-ready [data-anim=stagger-up].is-anim-in > *:nth-child(3) {
    transition-delay: 280ms;
  }
  html.adkru-anim-ready [data-anim=stagger-up].is-anim-in > *:nth-child(4) {
    transition-delay: 420ms;
  }
  html.adkru-anim-ready [data-anim=stagger-up].is-anim-in > *:nth-child(5) {
    transition-delay: 560ms;
  }
  html.adkru-anim-ready [data-anim=stagger-up].is-anim-in > *:nth-child(6) {
    transition-delay: 700ms;
  }
  html.adkru-anim-ready [data-anim=stagger-up].is-anim-in > *:nth-child(n+7) {
    transition-delay: 840ms;
  }
}
@media (prefers-reduced-motion: no-preference) {
  /* === Loops (gated durch .is-loop-active, view.js setzt es) === */
  /* Wobble: deutliches Hin-und-Her-Wiegen, klar sichtbar */
  @keyframes adkru-wobble {
    0%, 100% {
      transform: rotate(0deg);
    }
    20% {
      transform: rotate(-7deg);
    }
    40% {
      transform: rotate(5deg);
    }
    60% {
      transform: rotate(-5deg);
    }
    80% {
      transform: rotate(6deg);
    }
  }
  [data-anim-loop=loop-wobble].is-loop-active {
    animation: adkru-wobble 2.4s ease-in-out infinite;
    transform-origin: center;
  }
  /* Shake: kontinuierliches schnelles Zittern mit größerem Hub.
     Pulst mit 2.2s Cycle (1s zittern, 1.2s ruhig) damit's nicht
     nervt aber klar auf sich aufmerksam macht. */
  @keyframes adkru-shake-pulse {
    0%, 45%, 100% {
      transform: translate(0, 0) rotate(0);
    }
    47% {
      transform: translate(-6px, 1px) rotate(-3deg);
    }
    50% {
      transform: translate(6px, -1px) rotate(3deg);
    }
    53% {
      transform: translate(-5px, 2px) rotate(-2.5deg);
    }
    56% {
      transform: translate(5px, -2px) rotate(2.5deg);
    }
    59% {
      transform: translate(-4px, 1px) rotate(-2deg);
    }
    62% {
      transform: translate(4px, -1px) rotate(2deg);
    }
    65% {
      transform: translate(-3px, 0) rotate(-1deg);
    }
    68% {
      transform: translate(2px, 0) rotate(1deg);
    }
  }
  [data-anim-loop=loop-shake].is-loop-active {
    animation: adkru-shake-pulse 2.2s ease-in-out infinite;
    transform-origin: center;
  }
  /* Pulse: sanftes Atmen-Skalieren. Subtiler als Bounce, ohne
     Y-Verschiebung. Gut für Hero-CTAs/Logos die "atmen" sollen. */
  @keyframes adkru-pulse {
    0%, 100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.06);
    }
  }
  [data-anim-loop=loop-pulse].is-loop-active {
    animation: adkru-pulse 2s ease-in-out infinite;
    transform-origin: center;
  }
  /* Bounce: kräftiger Sprung mit Squash-Andeutung am Bodenpunkt */
  @keyframes adkru-bounce {
    0%, 100% {
      transform: translateY(0) scaleY(1);
    }
    5% {
      transform: translateY(0) scaleY(0.92);
    }
    45% {
      transform: translateY(-30px) scaleY(1.04);
    }
    55% {
      transform: translateY(-30px) scaleY(1.04);
    }
    95% {
      transform: translateY(0) scaleY(0.92);
    }
  }
  [data-anim-loop=loop-bounce].is-loop-active {
    animation: adkru-bounce 1.4s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    transform-origin: center bottom;
  }
  /* Drift: deutliche schwebende Bewegung, ausladender Pfad */
  @keyframes adkru-drift {
    0%, 100% {
      transform: translate(0, 0) rotate(0);
    }
    25% {
      transform: translate(8px, -10px) rotate(1.5deg);
    }
    50% {
      transform: translate(-6px, -16px) rotate(-1deg);
    }
    75% {
      transform: translate(-10px, -6px) rotate(2deg);
    }
  }
  [data-anim-loop=loop-drift].is-loop-active {
    animation: adkru-drift 6s ease-in-out infinite;
  }
  /* === Scroll-Scrub (Chrome/Firefox; Safari = statisch via @supports-Fallback) === */
  @supports (animation-timeline: view()) {
    @keyframes adkru-rotate-scroll {
      from {
        transform: rotate(-35deg);
      }
      to {
        transform: rotate(35deg);
      }
    }
    [data-anim=scroll-rotate] {
      animation: adkru-rotate-scroll linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
      transform-origin: center;
    }
    @keyframes adkru-parallax-scroll {
      from {
        transform: translateY(120px);
      }
      to {
        transform: translateY(-120px);
      }
    }
    [data-anim=scroll-parallax] {
      animation: adkru-parallax-scroll linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    /* Tablet + Mobile: kleinere Rotations-/Translations-Amplituden,
       damit die transformierte Bounding-Box nicht ueber den Viewport
       ragt. Greift bis 1023px (alles unter Desktop). */
    @media (prefers-reduced-motion: no-preference) and (max-width: 1023px) {
      @keyframes adkru-rotate-scroll-mobile {
        from {
          transform: rotate(-10deg);
        }
        to {
          transform: rotate(10deg);
        }
      }
      [data-anim=scroll-rotate] {
        animation-name: adkru-rotate-scroll-mobile;
      }
      @keyframes adkru-parallax-scroll-mobile {
        from {
          transform: translateY(40px);
        }
        to {
          transform: translateY(-40px);
        }
      }
      [data-anim=scroll-parallax] {
        animation-name: adkru-parallax-scroll-mobile;
      }
    }
  }
}