/* =====================================================================
   Caritas Herne – Kleine Animationen
   ---------------------------------------------------------------------
   Dauern und Kurven kommen aus den Token in tokens/design-tokens.css,
   Abschnitt 8 (--duration-*, --easing-*). Diese Datei vorher laden.
   Einbinden und Zuordnung der Klassen zu den Bauteilen: LIESMICH.md.

   Grundregel: Jede Bewegung steht in
   @media (prefers-reduced-motion: no-preference). Ist im System
   „Bewegung reduzieren“ eingestellt, greift keine Regel dieser Datei,
   alles ist sofort sichtbar (WCAG 2.3.3). Auch Hover-Übergänge.

   Klassen:
   .anim-intro       blendet ein und rutscht 16 px von oben herein,
                     gestaffelt über style="--i: 0, 1, 2 …"
   .anim-headline    wie .anim-intro, dazu eine Maske, die den Text
                     von oben nach unten aufdeckt
   .anim-reveal      wie .anim-headline, für Karten; jede Karte trägt
                     dazu selbst .anim-on-scroll
   .anim-pop         Prozess-Ziffer wächst auf, gestaffelt über --i
   .anim-on-scroll   Zusatz: startet erst, wenn das Element ins Bild
                     kommt oder Fokus bekommt (braucht animationen.js)
   .anim-arrow       Link, dessen Pfeil bei Hover und Fokus rutscht;
                     .anim-arrow--zurueck rutscht nach links
   .anim-card        Karte, deren Bild bei Hover und Fokus leicht zoomt
   .anim-press       Button, der sich beim Klicken leicht eindrückt

   Für TYPO3: Resources/Public/Css/animationen.css, nach den Layout-
   Dateien laden. Dazu animationen.js im <head> OHNE defer.
   ===================================================================== */

/* --- Keyframes ------------------------------------------------------- */

@keyframes anim-fade-in {
  from { opacity: 0; }
}

@keyframes anim-slide-in {
  from { translate: 0 -16px; }
}

/* Verlaufsmaske wandert nach unten und deckt den Text zeilenweise auf.
   Am Ende „none“, damit keine Maske stehen bleibt. */
@keyframes anim-headline-mask {
  from {
    mask-image: linear-gradient(#000 30%, transparent 70%);
    mask-size: 100% 300%;
    mask-position: 0 100%;
  }
  99% {
    mask-image: linear-gradient(#000 30%, transparent 70%);
    mask-size: 100% 300%;
    mask-position: 0 0;
  }
  to {
    mask-image: none;
  }
}

@keyframes anim-pop {
  from { scale: 0; }
}

/* --- Nur bei erlaubter Bewegung -------------------------------------- */

@media (prefers-reduced-motion: no-preference) {

  /* 1. Einstieg: blendet ein und rutscht leicht von oben herein */
  .anim-intro {
    animation:
      anim-fade-in  var(--duration-normal) var(--easing-enter) backwards,
      anim-slide-in var(--duration-normal) var(--easing-enter) backwards;
    animation-delay: calc(var(--i, 0) * var(--duration-stagger));
  }

  /* 2. Überschrift: wie .anim-intro, langsamer, mit Masken-Aufdeckung.
        3. Karte erscheint genauso (.anim-reveal). Ohne --i, denn jede
        Karte trägt selbst .anim-on-scroll: Nebeneinander kommen sie
        gleichzeitig ins Bild, untereinander (Mobil) erscheint jede
        für sich. */
  :is(.anim-headline, .anim-reveal) {
    animation:
      anim-fade-in       var(--duration-normal) var(--easing-enter) backwards,
      anim-slide-in      var(--duration-slow)   var(--easing-enter) backwards,
      anim-headline-mask var(--duration-slow)   var(--easing-enter) backwards;
    animation-delay: calc(var(--i, 0) * var(--duration-stagger));
  }

  /* 4. Prozess-Ziffer wächst auf, gestaffelt wie .anim-intro */
  .anim-pop {
    animation:
      anim-fade-in var(--duration-fast) var(--easing-enter) backwards,
      anim-pop     var(--duration-slow) var(--easing-enter) backwards;
    animation-delay: calc(var(--i, 0) * var(--duration-stagger));
  }

  /* 5. Erst starten, wenn sichtbar: animationen.js setzt .anim-js auf
        <html> und .is-visible auf das Element. Bis dahin steht die
        Animation pausiert auf ihrem Startbild. Ohne JS laufen sie beim
        Laden ab, der Inhalt ist danach in jedem Fall sichtbar. */
  .anim-js .anim-on-scroll:not(.is-visible),
  .anim-js .anim-on-scroll:not(.is-visible) :is(.anim-intro, .anim-headline, .anim-reveal, .anim-pop) {
    animation-play-state: paused;
  }

  /* 6. Pfeil rutscht 8 px in Leserichtung, bei „zurück“ nach links.
        Fokus zeigt dasselbe wie Hover. */
  .anim-arrow .anim-arrow__icon {
    display: inline-block;
    transition: translate var(--duration-normal) var(--easing-enter);
  }

  .anim-arrow:is(:hover, :focus-visible, :has(:focus-visible)) .anim-arrow__icon {
    translate: 8px 0;
  }

  .anim-arrow--zurueck:is(:hover, :focus-visible, :has(:focus-visible)) .anim-arrow__icon {
    translate: -8px 0;
  }

  /* 7. Bild in der Karte zoomt leicht. Die Karte schneidet ab
        (overflow: hidden), das Teaserbild hat Radius 0. */
  .anim-card img {
    transition: scale var(--duration-slow) var(--easing-enter);
  }

  .anim-card:is(:hover, :focus-visible, :has(:focus-visible)) img {
    scale: 1.03;
  }

  /* 8. Button drückt sich beim Klicken ein */
  .anim-press {
    transition: scale var(--duration-fast) var(--easing-enter);
  }

  .anim-press:active {
    scale: 0.97;
  }
}

/* --- Druck: keine Bewegung, alles sichtbar ---------------------------- */

@media print {
  :is(.anim-intro, .anim-headline, .anim-reveal, .anim-pop, .anim-on-scroll,
      .anim-arrow, .anim-card, .anim-press),
  :is(.anim-intro, .anim-headline, .anim-reveal, .anim-pop, .anim-on-scroll,
      .anim-arrow, .anim-card, .anim-press) * {
    animation: none !important;
    transition: none !important;
  }
}