/*
Theme Name: WunderMama
Theme URI: https://wunder-mama.de
Description: Child-Theme für Twenty Twenty-Five. Übernimmt Farben, Schriften und Button-Stil der bisherigen wunder-mama.de (OceanWP/Elementor), ohne den Plugin-Ballast. Schriften sind lokal eingebunden.
Author: netztaucher
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 7.4
Text Domain: wundermama
*/

/* Parallax-Hero: das Original fixierte den Hintergrund erst ab 1025px.
   Darunter (und generell auf iOS, das fixed ignoriert) bleibt er normal
   scrollend, sonst schneidet das Bild auf Mobilgeräten falsch an. */
.wp-block-cover.has-parallax {
	background-attachment: scroll;
}

@media (min-width: 1025px) {
	.wp-block-cover.has-parallax {
		background-attachment: fixed;
	}
}

/* (Seitenrand kommt aus --wm-gutter / content-size, keine Kind-Paddings noetig) */

/* Icon-Sektionen: weisses SVG im blauen Kreis, 50px Symbol in 100px Kreis. */
.wm-icon {
	display: flex;
	justify-content: center;
	margin-bottom: 1.25rem;
}

.wm-icon__circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100px;
	height: 100px;
	padding: 25px;
	border-radius: 50%;
	background: #517FAD;
	box-sizing: border-box;
}

.wm-icon__circle svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* Medienreihen sitzen auf demselben Raster wie der uebrige Inhalt.
   !important, weil die has-global-padding-Regel oben ebenfalls !important
   traegt und sonst gewinnt — die Reihen stuenden dann auf 0. */
.wp-block-group.wm-media-row {
	padding-left: var(--wm-gutter) !important;
	padding-right: var(--wm-gutter) !important;
}

@media (min-width: 900px) {
	/* Medienreihen folgen dem 10%-Raster der uebrigen Seite. Frueher liefen
	   Video und Text bis an den Bildschirmrand (1:1 zum Original); mit dem
	   durchgehenden Seitenrand wirkte das wie ein Fehler. */
	.wm-media-row > .wp-block-columns {
		max-width: none;
		margin-left: 0;
		margin-right: 0;
		gap: 3rem;
	}

	.wm-media-row .wp-block-column {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

/* Hero-Overlay im Original: 47%. dimRatio kennt nur 10er-Schritte, und die
   Core-Regel fuer has-background-dim-50 ist spezifischer — daher hier
   ausdruecklich mit derselben Klassenkombination ueberschrieben. */
.wp-block-cover.wm-hero .wp-block-cover__background.has-background-dim.has-background-dim-50 {
	opacity: 0.47;
}

/* Trenner im Original: kurzer, kräftiger Balken in Markenblau — kein
   durchgehender Strich. Zentriert, in Spalten linksbündig. */
.wp-block-separator.wm-rule {
	width: 60px;
	height: 4px;
	border: 0;
	background: #517FAD;
	opacity: 1;
	margin: 1.25rem auto 1.75rem;
}

.wp-block-separator.wm-rule.wm-rule--left {
	margin-left: 0;
}

/* Namenszeile unter dem Video: kursiv mit senkrechtem Strich. */
.wm-eyebrow {
	border-left: 4px solid #517FAD;
	padding-left: 1rem;
	margin-top: 1.25rem;
}

/* Header: auf der Startseite als sticky Leiste ueber dem Hero, dunkel
   hinterlegt damit Logo und Menue auf jedem Bildausschnitt lesbar bleiben.
   Auf Unterseiten sticky in Weiss. */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 20;
}

body.home .wp-site-blocks > header.wp-block-template-part {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background: rgba(255, 255, 255, 0.78);
	backdrop-filter: blur(12px) saturate(1.2);
	-webkit-backdrop-filter: blur(12px) saturate(1.2);
	border-bottom: 1px solid rgba(81, 127, 173, 0.16);
}

/* Der erste Block traegt TT5s Block-Gap (1.2rem) als margin-block-start.
   Da main kein Padding hat, schiebt dieser Margin main nach unten und ueber
   dem Hero blieb ein 19px-Streifen frei. */
main.wp-block-group,
main.wp-block-group > :first-child,
.wp-site-blocks > main:first-child {
	margin-top: 0 !important;
	margin-block-start: 0 !important;
}

/* Header und Footer-Streifen folgen dem Raster des Inhalts: 10% Rand, ab
   grossen Monitoren aber bündig zum auf 1600px begrenzten Inhalt — sonst
   staende das Logo weiter aussen als jede Überschrift darunter. */
.wm-header,
.wm-footer-strip {
	padding-left: var(--wm-gutter) !important;
	padding-right: var(--wm-gutter) !important;
}

/* Mehr Luft nach oben in der Leiste. */
body.home .wm-header {
	padding-top: 2.25rem;
	padding-bottom: 1.5rem;
}

body:not(.home) .wm-header {
	background: #fff;
	border-bottom: 1px solid #E8ECF1;
}

/* Leiste schrumpft beim Scrollen: weniger Hoehe, kleineres Logo, kraeftigerer
   Grund. Scroll-getrieben statt per JS — laeuft im Compositor und braucht
   keinen Scroll-Listener. Die ersten 180px Scrollweg sind der Uebergang. */
@supports (animation-timeline: scroll()) {
	@media (min-width: 861px) {
		body.home .wp-site-blocks > header.wp-block-template-part {
			animation: wm-bar-solid linear both;
			animation-timeline: scroll(root block);
			animation-range: 0 180px;
		}

		body.home .wm-header {
			animation: wm-bar-shrink linear both;
			animation-timeline: scroll(root block);
			animation-range: 0 180px;
		}

		body.home .wm-header .wp-block-site-logo img {
			animation: wm-logo-shrink linear both;
			animation-timeline: scroll(root block);
			animation-range: 0 180px;
			transition: none;
		}
	}

	@keyframes wm-bar-solid {
		from { background-color: rgba(255, 255, 255, 0.78); }
		to   { background-color: rgba(255, 255, 255, 0.96); }
	}

	@keyframes wm-bar-shrink {
		from { padding-top: 2.25rem; padding-bottom: 1.5rem; }
		to   { padding-top: 0.7rem;  padding-bottom: 0.7rem; }
	}

	@keyframes wm-logo-shrink {
		from { width: 300px; }
		to   { width: 190px; }
	}
}

@media (prefers-reduced-motion: reduce) {
	body.home .wp-site-blocks > header.wp-block-template-part,
	body.home .wm-header,
	body.home .wm-header .wp-block-site-logo img {
		animation: none !important;
	}
}

/* Die WP-Adminbar schiebt den Body nach unten, einen absolut gesetzten
   Header aber nicht — ohne diese Korrektur liegt sie auf Logo und Menue. */
body.admin-bar.home .wp-site-blocks > header.wp-block-template-part {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar.home .wp-site-blocks > header.wp-block-template-part {
		top: 46px;
	}
}

/* Navigation */
.wm-nav__list {
	display: flex;
	align-items: center;
	gap: 2rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.wm-nav__list a {
	font-size: 16px;
	text-decoration: none;
	color: #517FAD;
	white-space: nowrap;
	transition: opacity 0.2s;
}

body.home .wm-nav__list a {
	color: #517FAD;
	text-shadow: none;
}

.wm-nav__list a:hover {
	opacity: 0.75;
}

.wm-nav__cta {
	background: #517FAD;
	color: #fff !important;
	padding: 0.7em 1.4em;
	border-radius: 24px;
	font-family: Raleway, sans-serif;
	font-weight: 600;
	text-shadow: none !important;
}

body.home .wm-nav__cta {
	background: #517FAD;
	border: 1px solid #517FAD;
	color: #fff !important;
}

.wm-nav__checkbox,
.wm-nav__burger {
	display: none;
}

@media (max-width: 860px) {
	.wm-nav__burger {
		display: flex;
		flex-direction: column;
		gap: 5px;
		cursor: pointer;
		padding: 0.5rem;
	}

	.wm-nav__burger span {
		display: block;
		width: 26px;
		height: 2px;
		background: #517FAD;
	}

	body.home .wm-nav__burger span {
		background: #517FAD;
	}

	.wm-nav__list {
		display: none;
		position: absolute;
		right: 1.5rem;
		top: 100%;
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
		background: #fff;
		padding: 1.25rem 1.75rem;
		border-radius: 12px;
		box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16);
	}

	.wm-nav__checkbox:checked ~ .wm-nav__list {
		display: flex;
	}

	body.home .wm-nav__list a {
		color: #517FAD;
		text-shadow: none;
	}
}

/* Unterseiten: schmalerer Satzspiegel, Tabelle im Markenlook. */
.wm-subpage .wp-block-table td,
.wm-subpage .wp-block-table th {
	border: 1px solid #E1E6EC;
	padding: 0.7em 0.9em;
	font-size: 16px;
}

.wm-subpage .wp-block-table th {
	background: #F5F7FA;
	color: #517FAD;
	font-weight: 600;
}

/* ==========================================================================
   Mobil (bis 860px)
   Das Original war auf dem Handy nie sauber; hier wird es bewusst neu
   gedacht statt eins zu eins geschrumpft.
   ========================================================================== */
@media (max-width: 860px) {
	/* Header: eine Zeile, Logo klein, Burger rechts. */
	/* Mobil: helle Leiste im Dokumentfluss. Das blaue Logo braucht hellen
	   Grund, und die Adminbar ist unter 783px NICHT fixiert — ein fixer
	   Offset wuerde beim Scrollen als Luecke stehenbleiben. */
	body.home .wp-site-blocks > header.wp-block-template-part,
	.wp-site-blocks > header.wp-block-template-part {
		position: sticky !important;
		top: 0 !important;
		background: rgba(255, 255, 255, 0.88);
		backdrop-filter: blur(12px) saturate(1.2);
		-webkit-backdrop-filter: blur(12px) saturate(1.2);
		border-bottom: 1px solid rgba(81, 127, 173, 0.16);
		box-shadow: 0 2px 12px rgba(12, 20, 30, 0.06);
	}

	body.home .wm-header {
		padding-block: 0.9rem !important;
	}

	body.home .wm-nav__list a {
		color: #517FAD;
		text-shadow: none;
	}

	body.home .wm-nav__burger span {
		background: #517FAD;
	}

	body.home .wm-nav__cta {
		background: #517FAD;
		border-color: #517FAD;
		color: #fff !important;
	}

	.wm-header {
		flex-wrap: nowrap !important;
		padding-block: 0.9rem !important;
		gap: 1rem;
	}

	.wm-header .wp-block-site-logo {
		flex: 0 1 auto;
	}

	.wm-header .wp-block-site-logo img {
		width: 190px !important;
		max-width: 52vw;
		height: auto;
	}

	/* Im aufgeklappten Menue steht der CTA auf weissem Panel — dort muss er
	   wieder blau sein, sonst ist weisse Schrift auf Weiss unsichtbar. */
	.wm-nav__list .wm-nav__cta,
	body.home .wm-nav__list .wm-nav__cta {
		background: #517FAD;
		border-color: #517FAD;
		color: #fff !important;
		width: 100%;
		justify-content: center;
		text-align: center;
	}

	/* Hero: etwas niedriger, Bildausschnitt auf Mutter+Kind statt Bildmitte. */
	.wp-block-cover.wm-hero,
	.wp-block-cover.has-parallax {
		min-height: 88vh !important;
	}

	.wm-hero .wp-block-cover__image-background {
		object-position: 68% center;
	}

	.wm-hero h1,
	.wp-block-cover.has-parallax h2 {
		max-width: 100%;
		padding-inline: 0.5rem;
	}

	/* Spalten sicher untereinander, Video ueber volle Breite. */
	.wm-media-row .wp-block-columns {
		flex-direction: column !important;
		gap: 1.5rem !important;
	}

	.wm-media-row .wp-block-column {
		flex-basis: 100% !important;
		padding: 0 !important;
	}

	.wm-media-row .wp-block-column:not(:has(.wp-block-embed)) {
		padding: 0 1.25rem !important;
	}

	.wm-media-row .wp-block-embed figure,
	.wm-media-row .wp-block-embed {
		margin: 0;
	}

	/* Typo: Sektionstitel und Lead eine Stufe kleiner, Zeilen enger. */
	.wp-block-group h2[style*="35px"],
	.wp-block-group h3[style*="35px"],
	.wm-subpage h2[style*="35px"] {
		font-size: 26px !important;
		line-height: 1.25;
	}

	.wp-block-group p[style*="23px"],
	.wp-block-group h2[style*="23px"] {
		font-size: 19px !important;
	}

	.wp-block-group p[style*="20px"],
	.wm-subpage p[style*="18px"] {
		font-size: 17px !important;
	}

	.wp-block-group[style*="padding-top:4rem"],
	.wp-block-group[style*="padding-top:3rem"] {
		padding-top: 2.5rem !important;
		padding-bottom: 2.5rem !important;
	}

	/* Icons etwas kleiner. */
	.wm-icon__circle {
		width: 76px;
		height: 76px;
		padding: 18px;
	}

	/* Trenner mittig unter zentrierten Titeln bleibt, links bleibt links. */
	.wm-rule {
		margin-top: 1rem;
		margin-bottom: 1.25rem;
	}

	/* Buttons: fingerfreundlich, volle Breite bei langem Text. */
	.wp-block-button__link.wp-element-button {
		padding: 0.95em 1.6em;
		font-size: 16px;
		min-height: 48px;
		display: inline-flex;
		align-items: center;
	}

	/* Tabellen scrollen horizontal statt zu quetschen. */
	.wm-subpage .wp-block-table {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.wm-subpage .wp-block-table table {
		min-width: 520px;
	}

	.wm-subpage .wp-block-table td,
	.wm-subpage .wp-block-table th {
		font-size: 15px;
		padding: 0.6em 0.7em;
	}

	/* Unterseiten: mehr Luft am Rand, kleinere Titel. */
	.wm-subpage {
		padding: 2rem 1.25rem 3rem !important;
	}

	/* Footer gestapelt und zentriert. */
	.wm-footer-strip {
		flex-direction: column;
		gap: 1.25rem;
		text-align: center;
		padding-block: 1.75rem !important;
	}

	.wm-footer-links {
		justify-content: center;
		gap: 1.25rem;
	}
}

/* ==========================================================================
   Amelia-Buchungsdialog auf Mobil: volle Flaeche
   Gemessen bei 390x844: Dialog korrekt 390x844, aber .am-fs__wrapper nur
   342px breit (Padding im Dialog-Body) und mit fixer Hoehe 844px bei 76px
   Versatz — dadurch ragt der Inhalt unten heraus und wird von
   overflow:hidden der inneren Container abgeschnitten.
   ========================================================================== */
@media (max-width: 767px) {
	.amelia-v2-booking .el-dialog,
	.am-dialog-popup .el-dialog {
		width: 100% !important;
		max-width: 100% !important;
		height: 100% !important;
		max-height: 100% !important;
		margin: 0 !important;
		border-radius: 0 !important;
	}

	.amelia-v2-booking .el-dialog__body,
	.am-dialog-popup .el-dialog__body {
		padding: 0 !important;
		height: calc(100% - 60px) !important;
		max-height: none !important;
	}

	/* Fixhoehe des Panels durch 100% ersetzen — der Dialog-Body ist bereits
	   viewporthoch, 100% erbt das ohne Viewport-Einheit (kein iOS-dvh-Fall). */
	.amelia-v2-booking #amelia-container.am-fs__wrapper,
	.amelia-v2-booking .am-fs__wrapper {
		width: 100% !important;
		max-width: 100% !important;
		height: 100% !important;
		max-height: 100% !important;
		margin: 0 !important;
		border-radius: 0 !important;
	}

	.amelia-v2-booking .am-fs__main-mobile,
	.amelia-v2-booking .am-fs__main-inner {
		height: 100% !important;
		max-height: 100% !important;
	}
}

/* Bestaetigungsseite: die vier Kalender-Kacheln (Google/Outlook/Yahoo/Apple)
   stehen mobil 2x2 und schieben die Termindaten aus dem Bild. Eine Reihe mit
   vier gleich breiten Kacheln passt und macht den Rest sichtbar.
   Die inneren Klassen der Amelia-Komponente sind minifiziert, deshalb greift
   die Regel ueber den Wrapper und dessen direkte Kinder. */
@media (max-width: 767px) {
	.am-fs__congrats-main-atc > div,
	.am-fs__congrats-main-atc > ul {
		display: flex !important;
		flex-wrap: nowrap !important;
		justify-content: center !important;
		gap: 6px !important;
	}

	.am-fs__congrats-main-atc > div > *,
	.am-fs__congrats-main-atc > ul > li {
		flex: 1 1 0 !important;
		min-width: 0 !important;
		margin: 0 !important;
	}

	/* Echte Klassen (am DOM gemessen): -cals-cards ist das Grid,
	   -cals-card die einzelne Kachel mit Icon-Span und <p>. */
	.am-fs-sb-cs-cals-cards {
		display: flex !important;
		flex-wrap: nowrap !important;
		align-items: stretch !important;
		gap: 6px !important;
	}

	.am-fs-sb-cs-cals-card {
		flex: 1 1 0 !important;
		min-width: 0 !important;
		margin: 0 !important;
		padding: 10px 2px !important;
	}

	/* "Outlook" ist das laengste Label und brach auf zwei Zeilen um. */
	.am-fs-sb-cs-cals-card p {
		font-size: 11px !important;
		line-height: 1.2 !important;
		white-space: nowrap !important;
		margin: 4px 0 0 !important;
	}

	.am-fs__congrats-main-atc a,
	.am-fs__congrats-main-atc button,
	.am-fs__congrats-main-atc [class*="item"] {
		width: 100% !important;
		padding: 10px 4px !important;
		font-size: 12px !important;
		line-height: 1.2 !important;
		white-space: nowrap !important;
	}

	.am-fs__congrats-main-atc img,
	.am-fs__congrats-main-atc svg {
		width: 22px !important;
		height: 22px !important;
	}
}

/* Sehr schmale Geraete. */
@media (max-width: 400px) {
	.wm-hero h1 {
		font-size: 23px !important;
	}

	.wm-nav__cta {
		padding: 0.6em 1.1em;
	}
}

/* Preisspalte darf nicht umbrechen — "31,50 €" auf zwei Zeilen liest sich
   wie zwei Angaben. */
.wm-subpage .wp-block-table td:nth-child(2) {
	white-space: nowrap;
	text-align: right;
	font-weight: 500;
	color: #517FAD;
}

.wm-subpage .wp-block-table td:first-child {
	font-weight: 500;
}

/* Footer-Logo ist die helle Variante auf blauem Grund. */
.wm-footer-strip {
	min-height: 120px;
}

.wm-footer-strip figure {
	margin: 0;
}

.wm-footer-links {
	margin: 0;
	display: flex;
	gap: 1.75rem;
	flex-wrap: wrap;
}

.wm-footer-links a {
	color: #fff;
	text-decoration: none;
}

.wm-footer-links a:hover {
	text-decoration: underline;
}

/* CTA-Buttons tragen im Original ein Chevron hinter dem Text. */
.wp-block-button__link.wp-element-button::after {
	content: "\203A";
	margin-left: 0.6em;
	font-weight: 400;
}

/* ==========================================================================
   Seitenraster — EINE Quelle fuer alle Kanten
   Vorher hatten Logo (20px), Text (40px) und Video (60px) drei verschiedene
   Kanten, weil Header-Padding, Content-Size und Gruppen-Padding aus
   verschiedenen Regeln stammten. Jetzt richtet sich alles an --wm-gutter aus.
   ========================================================================== */
:root {
	/* bis ~2000px: 10% der Breite; darueber so viel, dass der Inhalt bei
	   1600px stehenbleibt */
	--wm-gutter: max(10vw, calc((100vw - 1600px) / 2));
	--wp--style--global--content-size: calc(100vw - 2 * var(--wm-gutter));
	--wp--style--global--wide-size: calc(100vw - 2 * var(--wm-gutter));

}

/* TT5 setzt --wp--style--root--padding-* auf BODY (clamp(30px,5vw,50px)),
   nicht auf :root — ein Override auf :root wird davon ueberschrieben, weil
   body naeher am Element steht. Deshalb hier auf body und auf den Gruppen
   selbst: der Seitenrand kommt ausschliesslich aus --wm-gutter. */
body {
	--wp--style--root--padding-left: 0px;
	--wp--style--root--padding-right: 0px;
}

.wp-block-group.has-global-padding {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Medienreihen tragen ebenfalls has-global-padding. Die Regel darueber steht
   spaeter im Stylesheet als die wm-media-row-Regel und gewinnt bei gleicher
   Spezifitaet — deshalb hier mit beiden Klassen (hoehere Spezifitaet). */
.wp-block-group.has-global-padding.wm-media-row {
	padding-left: var(--wm-gutter) !important;
	padding-right: var(--wm-gutter) !important;
}

@media (max-width: 860px) {
	:root {
		/* 10vw waeren auf dem Handy nur ~39px Rand bei sehr schmalem Text —
		   dort ein fester, kleinerer Rand. */
		--wm-gutter: 1.25rem;
	}
}

/* --------------------------------------------------------------------------
   Beitraege im Landingpage-Stil (Vorlage: Video-Beitrag)
   -------------------------------------------------------------------------- */
.wm-kicker {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: 0.5rem;
}

.wm-quote {
	border-left: 4px solid #517FAD;
	background: #F5F7FA;
	margin: 2.5rem 0;
	padding: 1.75rem 1.75rem 1.5rem;
	border-radius: 0 8px 8px 0;
}

.wm-quote p {
	font-size: 23px;
	font-style: italic;
	color: #517FAD;
	line-height: 1.45;
	margin: 0;
}

.wm-quote cite {
	display: block;
	margin-top: 0.9rem;
	font-size: 16px;
	font-style: normal;
	color: #737373;
}

.wm-takeaways {
	font-size: 20px;
	color: #737373;
	line-height: 1.7;
	padding-left: 1.2em;
}

.wm-takeaways li {
	margin-bottom: 0.5rem;
}

.wm-takeaways li::marker {
	color: #517FAD;
}

/* Video im Beitrag: gleiche Anmutung wie auf der Startseite. */
.wm-subpage .wp-block-embed figcaption,
.wp-block-embed figcaption {
	font-size: 15px;
	color: #737373;
	text-align: left;
}

@media (max-width: 860px) {
	.wm-quote {
		padding: 1.25rem 1.25rem 1rem;
		margin: 1.75rem 0;
	}

	.wm-quote p {
		font-size: 19px;
	}

	.wm-takeaways {
		font-size: 17px;
	}
}

/* Hero: langsamer Ken-Burns auf dem Bild, Text und Button gestaffelt
   eingeblendet. Der Zoom startet bei 1 und läuft nach aussen, damit an den
   Kanten nichts aufblitzt. */
.wp-block-cover.wm-hero {
	overflow: hidden;
}

/* Der Hero-Text bricht im Original auf zwei Zeilen um; ohne Begrenzung
   liefe er über die volle Containerbreite von 1270px. */
.wp-block-cover.wm-hero h1,
.wp-block-cover.has-parallax h2 {
	max-width: 900px;
	margin-inline: auto;
}

/* Hero-Bild: langsamer Zoom (zeitbasiert) als Grundzustand. */
.wp-block-cover.wm-hero .wp-block-cover__image-background {
	animation: wm-kenburns 24s ease-out forwards;
	transform-origin: 60% 40%;
	will-change: transform;
	height: 118%;
	top: -9%;
}

/* Wo der Browser scroll-gekoppelte Animationen kann, ersetzt echtes Parallax
   den Zoom: Das Bild wandert beim Scrollen langsamer als die Seite. Das wirkt
   weicher als background-attachment:fixed und funktioniert auch auf iOS. */
@supports (animation-timeline: scroll()) {
	.wp-block-cover.wm-hero .wp-block-cover__image-background {
		animation: wm-hero-parallax linear both;
		animation-timeline: scroll(root block);
		animation-range: 0 100vh;
	}

	@keyframes wm-hero-parallax {
		from { transform: translateY(-6%) scale(1.06); }
		to   { transform: translateY(6%) scale(1.12); }
	}
}

.wp-block-cover.wm-hero .wp-block-cover__inner-container > * {
	animation: wm-rise 0.9s cubic-bezier(0.2, 0.7, 0.3, 1) backwards;
}

.wp-block-cover.wm-hero .wp-block-cover__inner-container > :first-child {
	animation-delay: 0.15s;
}

.wp-block-cover.wm-hero .wp-block-cover__inner-container > * + * {
	animation-delay: 0.55s;
}

@keyframes wm-kenburns {
	from { transform: scale(1); }
	to   { transform: scale(1.12); }
}

@keyframes wm-rise {
	from { opacity: 0; transform: translateY(1.25rem); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-cover.wm-hero .wp-block-cover__image-background,
	.wp-block-cover.wm-hero .wp-block-cover__inner-container > * {
		animation: none;
	}
}