/*
 * Scrollgetriebene Bewegung für die Projektliste.
 * Liegt bewusst unverarbeitet in public/, damit der CSS-Minifier
 * animation-timeline nicht in die Kurzschreibweise zieht (die Chrome sonst verwirft).
 * Ohne Unterstützung oder bei reduzierter Bewegung bleibt alles im fertigen Zustand.
 * Die Linie unter den Projekten läuft über eine Klasse (Home.astro), nicht hier.
 */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		html:not([data-motion='paused']) .work__item {
			view-timeline-name: --work;
			view-timeline-axis: block;
		}

		html:not([data-motion='paused']) .work__media .cover,
		html:not([data-motion='paused']) .work__media .cover > *,
		html:not([data-motion='paused']) .work__caption {
			animation-timeline: --work;
			animation-fill-mode: both;
			animation-duration: auto;
			animation-timing-function: cubic-bezier(0.2, 0.7, 0.1, 1);
		}

		/* Fläche öffnet sich aus der Mitte, das Bild setzt sich */
		html:not([data-motion='paused']) .work__media .cover {
			animation-name: work-reveal;
			animation-range: entry 0% cover 35%;
		}
		html:not([data-motion='paused']) .work__media .cover > * {
			animation-name: work-settle;
			animation-timing-function: linear;
			animation-range: entry 0% cover 45%;
		}
		/* Name und Kurzsatz kommen herein */
		html:not([data-motion='paused']) .work__caption {
			animation-name: work-rise;
			animation-range: entry 30% cover 40%;
		}
	}
}

@keyframes work-reveal {
	from { clip-path: inset(10% 8% 10% 8% round 6px); }
	to { clip-path: inset(0 0 0 0 round 6px); }
}
@keyframes work-settle {
	from { transform: scale(1.08); }
	to { transform: scale(1); }
}
@keyframes work-rise {
	from { opacity: 0; transform: translateY(1.25rem); }
	to { opacity: 1; transform: none; }
}

/* Leistungen-Fächer: Inhalt gleitet auf (wo der Browser es kann, sonst klappt er sofort) */
@supports (interpolate-size: allow-keywords) {
	@media (prefers-reduced-motion: no-preference) {
		html:not([data-motion='paused']) .services {
			interpolate-size: allow-keywords;
		}
		html:not([data-motion='paused']) .service::details-content {
			block-size: 0;
			overflow: clip;
			opacity: 0;
			transition:
				block-size 500ms cubic-bezier(0.2, 0.7, 0.1, 1),
				opacity 400ms ease,
				content-visibility 500ms allow-discrete;
		}
		html:not([data-motion='paused']) .service[open]::details-content {
			block-size: auto;
			opacity: 1;
		}
	}
}