/* ══════════════════════════════════════════════════════════════════════
   BEWEGUNG, AN EINER STELLE
   Neu am 23.09.2026 nach `AUFTRAG-Motion-Interaktion.md`.

   Hier stehen die Zeiten, die Kurven und die Keyframes fuer das ganze
   Theme. Die Bausteine setzen nur noch, welche Bewegung sie brauchen,
   nicht wie schnell und wie weich.

   REGEL: Bewegt werden `opacity` und `transform`, nichts anderes. Wer
   `height` oder `top` animiert, laesst den Browser bei jedem Bild neu
   rechnen, und der Rest der Seite ruckt mit.
   ══════════════════════════════════════════════════════════════════════ */

:root {
	--hhs-ease-out: cubic-bezier(.2, .7, .2, 1);
	--hhs-ease-io: ease-in-out;
	--hhs-t-fast: .15s;   /* Knoepfe, Chips, Kartenrahmen */
	--hhs-t-base: .25s;   /* Farbwechsel, Schalter */
	--hhs-t-slow: .3s;    /* Moduswechsel, Plus-Drehung */
}

/* ── Die Keyframes aus dem Entwurf ────────────────────────────────── */

@keyframes hhsFadeA  { from { opacity: 0; transform: translateY(8px); }  to { opacity: 1; transform: none; } }
@keyframes hhsFadeB  { from { opacity: 0; transform: translateY(8px); }  to { opacity: 1; transform: none; } }
@keyframes hhsStep   { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes hhsIcon   { 0% { transform: scale(.6) rotate(-10deg); } 60% { transform: scale(1.15); } 100% { transform: none; } }
@keyframes hhsPulse  { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@keyframes hhsGlow   { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-5px); } }
@keyframes hhsBlink  { 0%, 100% { transform: scaleY(1); } 45% { transform: scaleY(.1); } 55% { transform: scaleY(1); } }
@keyframes hhsDrive  { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(7px); } }
@keyframes hhsBounce { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-7px); } 60% { transform: translateY(0); } 80% { transform: translateY(-3px); } }
@keyframes hhsSwing  { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-14deg); } 65% { transform: rotate(9deg); } }
@keyframes hhsType   { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08, .94); } }
@keyframes hhsHeart  { 0% { transform: scale(1); } 45% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* ── Einblenden beim Scrollen ─────────────────────────────────────── */

/* NUR MIT SKRIPT. Die Klasse `js` setzt `hh-motion.js`; ohne sie steht
   alles sichtbar da. Sonst bliebe die halbe Seite leer, wenn das
   Skript nicht laedt. */
.js [data-reveal] {
	opacity: 0;
	transform: translateY(16px);
}

.js [data-reveal].is-in {
	animation: hhsStep .5s var(--hhs-ease-out) both;
	animation-delay: calc(var(--i, 0) * .08s);
}

/* ── Seitenwechsel ────────────────────────────────────────────────── */

/* Der Kopf bleibt stehen, nur der Inhalt blendet ueber. Browser ohne
   View Transitions wechseln wie bisher, ohne Schaden. */
@view-transition { navigation: auto; }

@keyframes hhsPageOut { to { opacity: 0; } }
@keyframes hhsPageIn  { from { opacity: 0; transform: translateY(8px); } }

::view-transition-old(root) { animation: hhsPageOut .18s ease-in both; }
::view-transition-new(root) { animation: hhsPageIn .28s var(--hhs-ease-out) both; }

header.wp-block-template-part { view-transition-name: site-header; }
::view-transition-group(site-header) { animation: none; }

/* ── Ankersprünge ─────────────────────────────────────────────────── */

html { scroll-behavior: smooth; }

/* Der Kopf klebt oben und wuerde das Sprungziel sonst verdecken. */
[id] { scroll-margin-top: 96px; }

/* ── Wer weniger Bewegung eingestellt hat ─────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}

	.js [data-reveal] {
		opacity: 1;
		transform: none;
	}

	/* @view-transition gilt nur auf oberster Ebene; verschachtelt war die
	   Regel ungueltig und wurde stillschweigend verworfen, der Seitenwechsel
	   blendete also trotzdem ueber. Die Uebergaenge laufen in einem eigenen
	   Pseudo-Baum, den der Stern weiter oben nicht erreicht. Zwei getrennte
	   Regeln, weil ein Browser ohne (*) sonst die ganze Liste verwirft. */
	::view-transition-group(root),
	::view-transition-old(root),
	::view-transition-new(root) { animation: none !important; }

	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) { animation: none !important; }
}