/*
 * Stilprofil „bewegung“: wie viel sich auf der Seite bewegt (E-053).
 *
 * Zweck: „Motion narrative“ und „Microinteraction“ aus Elisas Entwurf als
 * Stufe für alle Abschnitte. Die Site wählt in `site.config.json` unter
 * `stil.bewegung`; der Build schreibt `data-bewegung` an `<html>`:
 *
 *   lebendig    nichts hiervon greift – Karten heben sich beim Darüberfahren,
 *               wie vor E-053
 *   ruhig       nichts hebt sich, nichts schwebt; für Seiten, die ganz still
 *               stehen sollen
 *   erzaehlend  Inhalte gleiten beim Scrollen herein (`scripts-client/
 *               bewegung.js`), Knöpfe und Karten geben beim Antippen nach
 *
 * Accessibility First: Wer „weniger Bewegung“ eingestellt hat, sieht in jeder
 * Stufe eine stehende Seite. Die allgemeine Regel in `base.css` schaltet
 * Übergänge ab; hier kommt dazu, dass nichts unsichtbar bleiben darf.
 *
 * Zusammenspiel: wird nach `base.css` geladen. Das Einblenden greift nur,
 * wenn das Skript `bewegung-an` an `<html>` gesetzt hat – ohne Skript ist
 * alles sichtbar.
 */

/* ---- ruhig ---------------------------------------------------------------- */

[data-bewegung='ruhig'] :is(.card, .category, .galerie-kachel, .step):hover {
  transform: none;
}

[data-bewegung='ruhig'] .signature-frame {
  animation: none;
}

/* Das Fotoband startet dann gar nicht erst (scripts-client/fotoband.js). */

/* ---- erzaehlend: Rückmeldung beim Antippen --------------------------------
   Ein kurzes Nachgeben zeigt auf dem Telefon, dass der Finger getroffen hat –
   die Rolle, die der Hover-Effekt am Bildschirm spielt. */

[data-bewegung='erzaehlend'] :is(.btn, .card, .category, .galerie-kachel) {
  transition:
    transform 0.27s var(--bewegung-kurve),
    box-shadow 0.27s ease,
    background 0.27s ease;
}

[data-bewegung='erzaehlend'] .btn:active {
  transform: scale(0.965);
}

[data-bewegung='erzaehlend'] :is(.card, .category, .galerie-kachel):active {
  transform: scale(0.99);
}

/* ---- erzaehlend: Einblenden beim Scrollen -------------------------------- */

/* Der Übergang gilt nur für das Hereinkommen. Hätte auch das Verstecken
   einen, sähe man beim Laden alles einmal ausblenden. */
[data-bewegung='erzaehlend'].bewegung-an [data-erscheint]:not(.ist-sichtbar) {
  opacity: 0;
  transform: translateY(17px);
}

[data-bewegung='erzaehlend'].bewegung-an [data-erscheint].ist-sichtbar {
  transition:
    opacity var(--bewegung-dauer) var(--bewegung-kurve),
    transform var(--bewegung-dauer) var(--bewegung-kurve);
}

/* Karten nebeneinander kommen kurz nacheinander, nicht als Block. */
[data-bewegung='erzaehlend'].bewegung-an :is(.card, .category, .galerie-kachel, .step).ist-sichtbar:nth-of-type(3n + 2) {
  transition-delay: 0.12s;
}

[data-bewegung='erzaehlend'].bewegung-an :is(.card, .category, .galerie-kachel, .step).ist-sichtbar:nth-of-type(3n) {
  transition-delay: 0.24s;
}

@media (prefers-reduced-motion: reduce) {
  [data-bewegung] [data-erscheint] {
    opacity: 1 !important;
    transform: none !important;
  }
}