/* Bewegung.
 *
 * Alles hier ist Zierde. Der Grundzustand ohne jedes Gate ist der
 * Endzustand: voll sichtbar. Ein Browser ohne Scroll-Driven-Animations
 * sieht deshalb eine statische Seite, nie eine leere. Das ist der Grund
 * fuer den @supports-Block, nicht Gewohnheit.
 *
 * Kein GSAP: die Seite haette sonst 70 KB gzip Animationsbibliothek fuer
 * Effekte, die CSS deklarativ erledigt. Sollte spaeter echte Choreografie
 * dazukommen (Pinning, Scrub, FLIP), ist das neu zu bewerten.
 */

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

	/* --- Eintritt beim Laden -------------------------------------------
	 *
	 * Die H1 ist bewusst NICHT dabei. Sie ist der wahrscheinlichste
	 * LCP-Kandidat neben dem Hero-Bild, und ein Element, das eine halbe
	 * Sekunde auf opacity 0 steht, verschiebt die Messung genau um diese
	 * halbe Sekunde. Der Rest blendet kurz auf, nicht laenger.
	 */

	.hero__claim,
	.hero .kicker,
	.hero__lede,
	.hero .cta-paar,
	.hero__marker {
		opacity: 1;
		translate: 0 0;
		transition: opacity 380ms var(--kurve), translate 380ms var(--kurve);
	}

	@starting-style {
		.hero__claim,
		.hero .kicker,
		.hero__lede,
		.hero .cta-paar,
		.hero__marker {
			opacity: 0;
			translate: 0 14px;
		}
	}

	.hero .kicker    { transition-delay: 40ms; }
	.hero__lede      { transition-delay: 90ms; }
	.hero .cta-paar  { transition-delay: 140ms; }
	.hero__marker    { transition-delay: 190ms; }

	.hero__runter { animation: lico-wippen 2.4s var(--kurve) infinite; }

	@keyframes lico-wippen {
		0%, 100% { translate: -50% 0; opacity: 0.55; }
		50%      { translate: -50% 7px; opacity: 1; }
	}

	/* --- Reveal beim Scrollen ------------------------------------------- */

	@supports (animation-timeline: view()) {

		/* Achtung beim Anlegen neuer Sektionen: ein Vorfahr mit
		 * `overflow: hidden` ist ein Scroll-Container, und `view()` misst
		 * gegen den naechsten Scroll-Container statt gegen die Seite. Der
		 * Reveal darin friert auf einem festen Wert ein, sichtbar als
		 * dauerhaft blasser Block. Deshalb steht in components.css
		 * `overflow: clip`. Nachmessen mit scripts/reveal-messen.py.
		 */

		.sektion__kopf,
		.leistung--gross,
		.leistung.karte,
		.leistung__bild,
		.dazu,
		.fall,
		.schritt,
		.staerke,
		.zg__eintrag,
		.zahlen li,
		.pumpe__text,
		.pumpe__fakt,
		.gebiet__label,
		.gebiet__staedte,
		.abschluss__innen > * {
			animation: lico-auf linear both;
			animation-timeline: view();
			animation-range: entry var(--auf-start, 10%) cover var(--auf-ende, 38%);
		}

		/* Gestaffelt innerhalb einer Gruppe. --i setzt das Template.
		 *
		 * NICHT ueber animation-delay: bei einer fortschrittsbasierten
		 * Zeitachse ignoriert der Browser die Verzoegerung, alle Karten
		 * einer Reihe liefen deshalb exakt gleichzeitig. Der Versatz
		 * gehoert in die animation-range.
		 *
		 * Gedeckelt bei drei Schritten: --i laeuft ueber die ganze Liste
		 * weiter, ohne Deckel braeuchte die achte Karte einen so spaeten
		 * Bereich, dass sie erst am oberen Bildrand fertig waere. Reihen
		 * staffeln sich ohnehin von selbst ueber ihre Scrollposition,
		 * gebraucht wird der Versatz nur innerhalb einer Reihe.
		 */
		.leistung.karte,
		.fall,
		.staerke,
		.zg__eintrag,
		.schritt,
		.pumpe__fakt,
		.zahlen li {
			--versatz: min(var(--i, 0) * 4%, 12%);
			--auf-start: calc(10% + var(--versatz));
			--auf-ende: calc(38% + var(--versatz));
		}

		@keyframes lico-auf {
			from { opacity: 0; translate: 0 38px; }
			to   { opacity: 1; translate: 0 0; }
		}

		/* Kopfleiste verdichtet sich, sobald gescrollt wird.
		   Ersetzt den klassischen Scroll-Listener vollstaendig. */
		.kopf {
			animation: lico-kopf linear both;
			animation-timeline: scroll(root);
			animation-range: 0 140px;
		}

		@keyframes lico-kopf {
			from {
				background-color: color-mix(in oklab, var(--flaeche) 20%, transparent);
				border-bottom-color: transparent;
			}
			to {
				background-color: color-mix(in oklab, var(--flaeche) 92%, transparent);
				border-bottom-color: var(--linie);
			}
		}

		/* Sehr dezenter Versatz der Hintergrundbilder. */
		.hero__bild img,
		.abschluss__bild img {
			animation: lico-drift linear both;
			animation-timeline: view();
			animation-range: cover;
		}

		@keyframes lico-drift {
			from { scale: 1.06; }
			to   { scale: 1; }
		}
	}
}

/* Wer weniger Bewegung will, bekommt keine. Ohne Ausnahme. */
/* Reduzierte Bewegung heisst: keine Bewegung, nicht keine Rueckmeldung.
 * Ein pauschales transition-duration: 1ms nimmt auch das Aufhellen beim
 * Hover und den Fokus-Ring die Zeit zum Erscheinen. Deshalb bleiben Farb-
 * und Deckkraft-Wechsel erhalten, nur Verschiebungen und Ablauf-Animationen
 * fallen weg. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation: none !important;
		transition-property: background-color, border-color, color, opacity, fill !important;
		transition-duration: 120ms !important;
		scroll-behavior: auto !important;
	}
	*:hover, *:focus-visible {
		translate: none !important;
		transform: none !important;
	}
	html { scroll-behavior: auto; }
}