/*
 * Acrum – dezente Animationen (nur Frontend, ohne JavaScript).
 *
 * - Alles nur bei „prefers-reduced-motion: no-preference“.
 * - Einblenden beim Scrollen über CSS Scroll-Driven Animations
 *   (animation-timeline: view()). Browser ohne Unterstützung zeigen die
 *   Inhalte einfach sofort: nichts bleibt versteckt.
 */

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

	html {
		scroll-behavior: smooth;
	}

	/* Hero beim Laden */
	.acrum-hero__inner > * {
		animation: acrum-rise 1.1s var(--acrum-ease) both;
	}
	.acrum-hero__inner > :nth-child(2) { animation-delay: .08s; }
	.acrum-hero__inner > :nth-child(3) { animation-delay: .18s; }
	.acrum-hero__inner > :nth-child(4) { animation-delay: .28s; }

	.acrum-hero::before {
		animation: acrum-glow 18s ease-in-out infinite alternate;
	}
	.acrum-hero .wp-block-cover__image-background {
		animation: acrum-zoom 14s ease-out both;
	}

	/* Hero: drei Leitsätze und Hintergründe im Wechsel (je 6 s, sanft überblendet) */
	.wp-block-cover.acrum-hero .wp-block-cover__inner-container {
		position: static;
	}
	.acrum-hero .acrum-rotator {
		display: grid;
	}
	body:not(.editor-styles-wrapper) .acrum-rotator > .acrum-slide:not(:first-child) {
		display: block;
	}
	.acrum-rotator > .acrum-slide {
		grid-area: 1 / 1;
		animation: acrum-slide 18s ease-in-out infinite both;
	}
	.acrum-hero__slides {
		display: block;
		position: absolute;
		inset: 0;
		z-index: 0;
		max-width: none !important;
		margin: 0 !important;
		pointer-events: none;
	}
	/* Gleiche Abdunklung wie der Cover-Block, damit der Text lesbar bleibt */
	.acrum-hero__slides::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(100deg, rgba(20, 20, 20, .94) 0%, rgba(20, 20, 20, .8) 45%, rgba(20, 20, 20, .4) 100%);
	}
	.acrum-hero__slides > figure {
		position: absolute;
		inset: 0;
		margin: 0;
		animation: acrum-fade 18s ease-in-out infinite both;
	}
	.acrum-hero__slides img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: 0;
	}
	.acrum-rotator > .acrum-slide:nth-child(2),
	.acrum-hero__slides > figure:nth-child(1),
	.acrum-rotator__dots i:nth-child(2)::after {
		animation-delay: -12s;
	}
	.acrum-rotator > .acrum-slide:nth-child(3),
	.acrum-hero__slides > figure:nth-child(2),
	.acrum-rotator__dots i:nth-child(3)::after {
		animation-delay: -6s;
	}

	/* Fortschritt und Pause */
	.acrum-rotator__controls {
		display: flex;
		align-items: center;
		gap: 1rem;
		margin-top: var(--wp--preset--spacing--30);
	}
	.acrum-rotator__dots {
		display: flex;
		gap: .5rem;
	}
	.acrum-rotator__dots i {
		position: relative;
		width: 2.25rem;
		height: 2px;
		overflow: hidden;
		background: rgba(255, 255, 255, .25);
	}
	.acrum-rotator__dots i::after {
		content: "";
		position: absolute;
		inset: 0;
		background: var(--wp--preset--color--accent-light);
		transform-origin: left;
		animation: acrum-progress 18s linear infinite both;
	}
	.acrum-rotator__pause {
		position: relative;
		display: inline-grid;
		place-items: center;
		width: 2rem;
		height: 2rem;
		border: 1px solid rgba(255, 255, 255, .45);
		border-radius: 50%;
		cursor: pointer;
		transition: border-color .2s;
	}
	.acrum-rotator__pause:hover {
		border-color: var(--wp--preset--color--accent-light);
	}
	.acrum-rotator__pause:has(input:focus-visible) {
		outline: 2px solid var(--wp--preset--color--accent-light);
		outline-offset: 2px;
	}
	.acrum-rotator__pause input {
		position: absolute;
		inset: 0;
		margin: 0;
		opacity: 0;
		cursor: pointer;
	}
	.acrum-rotator__pause::before {
		content: "";
		width: 8px;
		height: 10px;
		background: linear-gradient(90deg, currentColor 0 3px, transparent 3px 5px, currentColor 5px);
	}
	.acrum-rotator__pause:has(input:checked)::before {
		width: 9px;
		margin-left: 2px;
		background: currentColor;
		clip-path: polygon(0 0, 100% 50%, 0 100%);
	}
	.acrum-hero:has(.acrum-rotator__pause input:checked) :is(.acrum-slide, .acrum-hero__slides > figure),
	.acrum-hero:has(.acrum-rotator__pause input:checked) .acrum-rotator__dots i::after {
		animation-play-state: paused;
	}

	/* Seitenkopf beim Laden */
	.acrum-page-header > * {
		animation: acrum-rise .8s var(--acrum-ease) both;
	}

	@supports (animation-timeline: view()) {
		.is-style-reveal:not(.acrum-stagger),
		.acrum-stagger > * {
			animation: acrum-reveal linear both;
			animation-timeline: view();
			animation-range: entry 5% cover 30%;
		}
		.acrum-stagger > :nth-child(3n+2) { animation-range: entry 12% cover 35%; }
		.acrum-stagger > :nth-child(3n+3) { animation-range: entry 19% cover 40%; }

		/* „Nach oben“ erscheint nach etwa einem Bildschirm */
		.acrum-top {
			animation: acrum-top linear both;
			animation-timeline: scroll(root);
			animation-range: 60vh 90vh;
		}

		/* Header bekommt beim Scrollen Linie und Schatten */
		.acrum-site-header {
			animation: acrum-header linear both;
			animation-timeline: scroll(root);
			animation-range: 0 120px;
		}
	}
}

/* Ohne Scroll-Timeline: Header-Linie immer zeigen */
@supports not (animation-timeline: scroll()) {
	.acrum-site-header {
		border-bottom-color: var(--wp--preset--color--line);
	}
}

@keyframes acrum-rise {
	from {
		opacity: 0;
		transform: translateY(18px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes acrum-reveal {
	from {
		opacity: 0;
		transform: translateY(var(--wp--custom--motion--distance, 18px));
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes acrum-glow {
	from { transform: translate3d(0, 0, 0) scale(1); }
	to { transform: translate3d(-4%, 3%, 0) scale(1.08); }
}

@keyframes acrum-header {
	to {
		border-bottom-color: var(--wp--preset--color--line);
		box-shadow: 0 6px 24px rgba(20, 20, 20, .06);
	}
}

@keyframes acrum-top {
	from {
		opacity: 0;
		transform: translateY(12px);
		visibility: hidden;
	}
	to {
		opacity: 1;
		transform: none;
		visibility: visible;
	}
}

/* Satz sichtbar im ersten Drittel, sanft ein- und ausgeblendet */
@keyframes acrum-slide {
	0%, 30% {
		opacity: 1;
		transform: none;
		visibility: visible;
	}
	35%, 95% {
		opacity: 0;
		transform: translateY(-10px);
		visibility: hidden;
	}
	100% {
		opacity: 1;
		transform: none;
		visibility: visible;
	}
}

@keyframes acrum-fade {
	0%, 30% { opacity: 1; }
	36%, 94% { opacity: 0; }
	100% { opacity: 1; }
}

@keyframes acrum-progress {
	0% { transform: scaleX(0); }
	33.33% { transform: scaleX(1); }
	33.34%, 100% { transform: scaleX(0); }
}

@keyframes acrum-zoom {
	from { transform: scale(1.04); }
	to { transform: scale(1); }
}