/* ---------- Eigene Werte ---------- */

:root {
	--unyer-einblenden-weg: 2.5rem;
	--unyer-einblenden-kurve: cubic-bezier(0.22, 1, 0.36, 1);
	--unyer-auftakt: 700ms;
	--unyer-auftakt-schritt: 70ms;
}

/* ---------- Einblenden ---------- */

@keyframes unyer-einblenden {
	from {
		opacity: 0;
		translate: 0 var(--unyer-einblenden-weg);
	}
}

@keyframes unyer-einblenden-titel {
	from {
		opacity: 0;
		translate: calc(-1.5 * var(--unyer-einblenden-weg)) 0;
	}
}

@keyframes unyer-einblenden-kreis {
	from {
		opacity: 0;
		scale: 0.85;
		rotate: -6deg;
	}
}

@keyframes unyer-einblenden-bild {
	from {
		opacity: 0;
		clip-path: inset(100% 0 0 0);
		scale: 1.08;
	}

	to {
		clip-path: inset(0);
	}
}

@keyframes unyer-bogen {
	from {
		opacity: 0;
		rotate: -120deg;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.unyer-bewegt .unyer-einblenden:not(.is-sichtbar) {
		opacity: 0;
	}

	.unyer-bewegt .unyer-einblenden.is-sichtbar {
		animation: unyer-einblenden var(--wp--custom--duration--reveal) var(--unyer-einblenden-kurve) var(--unyer-einblenden-verzoegerung, 0ms) backwards;
	}

	.unyer-bewegt .unyer-einblenden--titel.is-sichtbar {
		animation-name: unyer-einblenden-titel;
	}

	.unyer-bewegt .unyer-einblenden--kreis.is-sichtbar {
		animation-name: unyer-einblenden-kreis;
	}

	.unyer-bewegt .unyer-einblenden--bild.is-sichtbar {
		animation-name: unyer-einblenden-bild;
		animation-duration: calc(1.4 * var(--wp--custom--duration--reveal));
	}

	.unyer-bewegt .unyer-story.is-sichtbar .unyer-story__bogen {
		animation: unyer-bogen calc(1.6 * var(--wp--custom--duration--reveal)) var(--unyer-einblenden-kurve) calc(var(--unyer-einblenden-verzoegerung, 0ms) + 150ms) backwards;
	}
}

/* ---------- Auftakt beim Laden ---------- */

@keyframes unyer-auftakt-oben {
	from {
		opacity: 0;
		translate: 0 -0.75rem;
	}
}

@keyframes unyer-auftakt-hoch {
	from {
		opacity: 0;
		translate: 0 2rem;
	}
}

@keyframes unyer-auftakt-zoom {
	from {
		scale: calc(var(--unyer-banner-zoom, 1) + 0.08);
	}
}

@keyframes unyer-auftakt-kreis {
	from {
		opacity: 0;
		scale: 0.9;
		rotate: -8deg;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.unyer-header__logo {
		animation: unyer-auftakt-oben var(--unyer-auftakt) var(--unyer-einblenden-kurve) backwards;
	}

	.unyer-header__nav .wp-block-navigation__container > .wp-block-navigation-item,
	.unyer-header__search {
		animation: unyer-auftakt-oben var(--unyer-auftakt) var(--unyer-einblenden-kurve) backwards;
		animation-delay: calc(150ms + var(--unyer-auftakt-stufe, 0) * var(--unyer-auftakt-schritt));
	}

	.unyer-header__nav .wp-block-navigation-item:nth-child(2) { --unyer-auftakt-stufe: 1; }
	.unyer-header__nav .wp-block-navigation-item:nth-child(3) { --unyer-auftakt-stufe: 2; }
	.unyer-header__nav .wp-block-navigation-item:nth-child(4) { --unyer-auftakt-stufe: 3; }
	.unyer-header__nav .wp-block-navigation-item:nth-child(5) { --unyer-auftakt-stufe: 4; }
	.unyer-header__search { --unyer-auftakt-stufe: 5; }

	.unyer-banner .unyer-banner__claim {
		animation: unyer-auftakt-hoch calc(1.4 * var(--unyer-auftakt)) var(--unyer-einblenden-kurve) 250ms backwards;
	}

	.unyer-banner > :is(.wp-block-cover__image-background, .wp-block-cover__video-background) {
		animation: unyer-auftakt-zoom calc(2.6 * var(--unyer-auftakt)) var(--unyer-einblenden-kurve) backwards;
	}

	.unyer-hero__media img {
		animation: unyer-auftakt-kreis calc(1.6 * var(--unyer-auftakt)) var(--unyer-einblenden-kurve) 200ms backwards;
	}

	.unyer-event__kopf > *,
	.unyer-hero .wp-block-post-title {
		animation: unyer-auftakt-hoch var(--unyer-auftakt) var(--unyer-einblenden-kurve) backwards;
	}

	.unyer-event__kopf > :nth-child(2) { animation-delay: 80ms; }
	.unyer-event__kopf > :nth-child(3) { animation-delay: 160ms; }
	.unyer-event__kopf > :nth-child(4) { animation-delay: 240ms; }
}

/* ---------- Parallaxe ---------- */

@keyframes unyer-parallaxe {
	to {
		translate: 0 6%;
	}
}

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.unyer-banner > :is(.wp-block-cover__image-background, .wp-block-cover__video-background) {
			--unyer-banner-zoom: 1.15;
			scale: var(--unyer-banner-zoom);
			animation:
				unyer-auftakt-zoom calc(2.6 * var(--unyer-auftakt)) var(--unyer-einblenden-kurve) backwards,
				unyer-parallaxe linear both;
			animation-timeline: auto, view();
			animation-range: normal, exit;
		}
	}
}

/* ---------- Bilder im Kreis ---------- */

@media (prefers-reduced-motion: no-preference) {
	.unyer-raster__bild,
	.unyer-kachel__bild {
		transition: scale calc(1.2 * var(--wp--custom--duration--reveal)) var(--unyer-einblenden-kurve);
	}

	.unyer-raster__link:is(:hover, :focus-visible) .unyer-raster__bild,
	.unyer-kachel:is(:hover, :has(a:focus-visible)) .unyer-kachel__bild {
		scale: 1.08;
	}
}

.unyer-raster__bild,
.unyer-kachel__bild {
	position: relative;
	z-index: 0;
}

.unyer-raster__abdeckung,
.unyer-kachel__overlay {
	position: relative;
	z-index: 1;
}

.unyer-raster__kreis,
.unyer-kachel__medium {
	isolation: isolate;
}

/* ---------- Zähler ---------- */

.unyer-zaehler {
	font-variant-numeric: tabular-nums;
}