/* ============================================================
   animations.css — Effekte lt. 10-INTERACTION-SPEC
   Nur transform / opacity / stroke-dashoffset.
   Progressive Enhancement: Ausgangszustand ist immer sichtbar;
   JS setzt .anim-bereit unmittelbar vor der Animation.
   ============================================================ */

/* E1 – Pulslinien-Draw-on (nur die Grundlinie, nicht der Ruhepuls-Lauf) */
.js .pulse-line[data-puls] path:not(.puls-lauf) {
  stroke-dasharray: 1;
  stroke-dashoffset: 0; /* sichtbar als Default */
}
.js .pulse-line[data-puls].anim-bereit path:not(.puls-lauf) { stroke-dashoffset: 1; }
.js .pulse-line[data-puls].anim-los path:not(.puls-lauf) {
  transition: stroke-dashoffset var(--t-puls) linear;
  stroke-dashoffset: 0;
}

/* E2 – Scroll-Reveal */
.js [data-reveal].anim-bereit { opacity: 0; transform: translateY(16px); }
.js [data-reveal].anim-los {
  opacity: 1; transform: none;
  transition: opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out);
}
.js [data-reveal].anim-los[data-reveal-delay="1"] { transition-delay: 60ms; }
.js [data-reveal].anim-los[data-reveal-delay="2"] { transition-delay: 120ms; }

/* E8 – Bild-Zoom: in components.css (.blog-karte img) */

/* E9 – Formular-Erfolg */
.js .formular-erfolg.anim-los { animation: erfolg-fade 200ms var(--ease-out); }
@keyframes erfolg-fade { from { opacity: 0; } to { opacity: 1; } }

/* ============================================================
   v2 „Ein Takt für alles" (DESIGN.md, Effekt-Katalog V1–V12)
   ============================================================ */

/* V1 – Herzschlag der Satzpunkte: schlägt, wenn der Ruhepuls-Impuls
   die Spitze der Pulslinien passiert (~10 % des Takts).
   inline-block erlaubt einen Umbruch vor dem Punkt → Wort und Punkt stehen im Markup in .wort-punkt. */
.wort-punkt { white-space: nowrap; }
.punkt {
  display: inline-block; transform-origin: 50% 85%;
  animation: punkt-schlag var(--takt) var(--ease-out) var(--takt-start) infinite;
}
@keyframes punkt-schlag {
  0%, 7%   { transform: scale(1); }
  9.5%     { transform: scale(1.5); }
  13%      { transform: scale(0.92); }
  16%, 100% { transform: scale(1); }
}

/* V2 – Headline-Reveal: Zeilen schieben sich aus einer Maske */
.headline-zeilen .zeile { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.headline-zeilen .zeile > span { display: inline-block; animation: zeile-ein var(--t-lang) var(--ease-out) both; }
.headline-zeilen .zeile:nth-child(2) > span { animation-delay: 90ms; }
.headline-zeilen .zeile:nth-child(3) > span { animation-delay: 180ms; }
@keyframes zeile-ein { from { transform: translateY(108%); } to { transform: none; } }
.hero-klein h1 { animation: aufsteigen var(--t-lang) var(--ease-out) both; }
.hero-klein h1.headline-zeilen { animation: none; } /* Unterseiten mit Zeilen-Reveal wie die Startseite */
@keyframes aufsteigen { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* V3 beim Laden: Bilder im Kopf öffnen sich entlang der Logo-Diagonale */
.hero-klein .split-bild img { animation: bild-wipe var(--t-lang) var(--ease-out) 200ms both; }
@keyframes bild-wipe {
  from { clip-path: polygon(0 0, 0 0, 0 0, -16% 100%, -16% 100%); }
  to   { clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 40px, 100% 100%, 0 100%); }
}

/* Hero-Foto setzt sich einmal langsam (kein Endlos-Zoom) */
.hero-medien img { animation: hero-setzen 9s var(--ease-out) both; }
@keyframes hero-setzen { from { transform: scale(1.07); } to { transform: none; } }

/* V3 – Stencil-Wipe: Bilder öffnen sich entlang der Logo-Diagonale.
   Nutzt die Reveal-Klassen; Endzustand = Stencil-Eckschnitt aus layout.css. */
.js .split-bild:not(.video-rahmen)[data-reveal].anim-bereit,
.js .video-rahmen[data-reveal].anim-bereit,
.js .karte-bild[data-reveal].anim-bereit { opacity: 1; transform: none; }
.js .split-bild:not(.video-rahmen)[data-reveal].anim-bereit img,
.js .video-rahmen[data-reveal].anim-bereit {
  clip-path: polygon(0 0, 0 0, 0 0, -16% 100%, -16% 100%);
}
.js .split-bild:not(.video-rahmen)[data-reveal].anim-los img,
.js .video-rahmen[data-reveal].anim-los {
  clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 40px, 100% 100%, 0 100%);
  transition: clip-path var(--t-lang) var(--ease-out);
}
.js .karte-bild[data-reveal].anim-bereit .karte-medien { clip-path: polygon(0 0, 0 0, -16% 100%, -16% 100%); }
.js .karte-bild[data-reveal].anim-los .karte-medien {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: clip-path var(--t-lang) var(--ease-out);
}
.js .karte-bild[data-reveal].anim-los[data-reveal-delay="1"] .karte-medien { transition-delay: 120ms; }

/* V11 – Seitenübergänge (Cross-Document View Transitions, wo unterstützt) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 260ms; animation-timing-function: var(--ease-out); }
.header { view-transition-name: kopf; }

/* V12 – Bewegungs-Schalter: stoppt alle Endlos-Bewegungen, Eintritte zeigen sofort den Endzustand */
html.bewegung-aus .puls-lauf,
html.bewegung-aus .punkt,
html.bewegung-aus .video-play-ring,
html.bewegung-aus .monitor-spur,
html.bewegung-aus .monitor-live::before,
html.bewegung-aus .logo-band-spur,
html.bewegung-aus .scroll-cue,
html.bewegung-aus .hero-medien img,
html.bewegung-aus .headline-zeilen .zeile > span,
html.bewegung-aus .hero-klein h1,
html.bewegung-aus .hintergrund-spur-lauf,
html.bewegung-aus .hero-klein .split-bild img,
html.bewegung-aus .artikel-bild img { animation: none !important; }
html.bewegung-aus .pulse-line .puls-lauf { opacity: 0; }
html.bewegung-aus .scroll-cue { opacity: 0.8; }

/* Laufband ohne Bewegung: alle Logos einmal, umbrochen und ohne Randverlauf */
html.bewegung-aus .logo-band { -webkit-mask-image: none; mask-image: none; }
html.bewegung-aus .logo-band-spur { flex-wrap: wrap; width: auto; justify-content: center; gap: var(--s-5) var(--s-7); }
html.bewegung-aus .logo-band-spur .duplikat,
html.bewegung-aus .logo-band-pause { display: none; }
@media (prefers-reduced-motion: reduce) {
  .logo-band { -webkit-mask-image: none; mask-image: none; }
  .logo-band-spur { flex-wrap: wrap; width: auto; justify-content: center; gap: var(--s-5) var(--s-7); }
  .logo-band-spur .duplikat, .logo-band-pause { display: none; }
}

/* ---- prefers-reduced-motion: zentrale Weiche (Pflicht, 09) ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
  .js .pulse-line[data-puls].anim-bereit path:not(.puls-lauf) { stroke-dashoffset: 0; }
  .js [data-reveal].anim-bereit { opacity: 1; transform: none; }
  .js .split-bild:not(.video-rahmen)[data-reveal].anim-bereit img,
  .js .video-rahmen[data-reveal].anim-bereit { clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 40px, 100% 100%, 0 100%); }
  .js .karte-bild[data-reveal].anim-bereit .karte-medien { clip-path: none; }
  .monitor-spur, .logo-band-spur, .punkt, .video-play-ring, .monitor-live::before, .hintergrund-spur-lauf { animation: none !important; }
  .js .puls-raster.folge-bereit > li, .js .rennprotokoll.folge-bereit > li,
  .js .preisblock .puls-liste.folge-bereit li { opacity: 1; transform: none; }
  .js .puls-raster.folge-bereit > li::before, .js .themen-liste > li.anim-bereit::before { transform: none; }
  .js .puls-raster.folge-bereit .raster-chip path, .js .puls-liste.folge-bereit .pulse-marker path,
  .js .laktat.zeichnen-bereit .laktat-kurve { stroke-dashoffset: 0; }
  .js .beleg-drucker.folge-bereit .beleg { transform: rotate(-1.2deg); }
  @view-transition { navigation: none; }
}