/*
 * The skewed panel holds the stripe band followed by solid red.
 * --eu-slant adds room at both edges so the skew cannot expose the page early.
 */
/* Typed stops interpolate smoothly while keeping all stripe edges joined. */
@property --eu-swipe-stop-1 { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --eu-swipe-stop-2 { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --eu-swipe-stop-3 { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --eu-swipe-stop-4 { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --eu-swipe-stop-5 { syntax: "<length>"; inherits: false; initial-value: 0px; }
.eu-swipe {
	--eu-band: 84vw;
	--eu-slant: 20vh;
	position: fixed;
	inset: 0;
	z-index: 100000;
	overflow: hidden;
	pointer-events: none;
	/* "release" lets the hero start as the band's trailing edge comes in (setup.php). */
	animation: eu-swipe-release 0s .95s forwards, eu-swipe-done 0s 1.85s forwards;
}
.eu-swipe::after {
	--eu-swipe-stop-1: 10vw;
	--eu-swipe-stop-2: 12.5vw;
	--eu-swipe-stop-3: 26.5vw;
	--eu-swipe-stop-4: 72vw;
	--eu-swipe-stop-5: 80vw;
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(-1 * var(--eu-band) - var(--eu-slant));
	width: calc(var(--eu-band) + 100vw + 2 * var(--eu-slant));
	background: linear-gradient(90deg,
		var(--eu-red) 0 var(--eu-swipe-stop-1),
		var(--eu-darkred) 0 var(--eu-swipe-stop-2),
		var(--eu-red) 0 var(--eu-swipe-stop-3),
		var(--eu-darkred) 0 var(--eu-swipe-stop-4),
		var(--eu-red) 0 var(--eu-swipe-stop-5),
		var(--eu-darkred) 0 var(--eu-band),
		var(--eu-red) 0);
	transform: skewX(-14deg);
	animation: eu-swipe 1.7s cubic-bezier(.5, 0, .3, 1) .1s forwards,
		eu-swipe-bands 1.7s ease-in-out .1s both;
}
@keyframes eu-swipe { to { transform: translateX(calc(var(--eu-band) + 100vw + 2 * var(--eu-slant))) skewX(-14deg); } }
@keyframes eu-swipe-bands {
	0%, 100% {
		--eu-swipe-stop-1: 10vw;
		--eu-swipe-stop-2: 12.5vw;
		--eu-swipe-stop-3: 26.5vw;
		--eu-swipe-stop-4: 72vw;
		--eu-swipe-stop-5: 80vw;
	}
	32% {
		--eu-swipe-stop-1: 6vw;
		--eu-swipe-stop-2: 7.5vw;
		--eu-swipe-stop-3: 18vw;
		--eu-swipe-stop-4: 76vw;
		--eu-swipe-stop-5: 81vw;
	}
	60% {
		--eu-swipe-stop-1: 14vw;
		--eu-swipe-stop-2: 19vw;
		--eu-swipe-stop-3: 40vw;
		--eu-swipe-stop-4: 66vw;
		--eu-swipe-stop-5: 77vw;
	}
	82% {
		--eu-swipe-stop-1: 5vw;
		--eu-swipe-stop-2: 7vw;
		--eu-swipe-stop-3: 22vw;
		--eu-swipe-stop-4: 74vw;
		--eu-swipe-stop-5: 82vw;
	}
}
@keyframes eu-swipe-release { to { opacity: 1; } }
@keyframes eu-swipe-done { to { visibility: hidden; } }
.eu-swipe-seen .eu-swipe { display: none; }
/* The hero's entrance animations hold their first frame until the page starts to show. */
.eu-swiping .eu-hero,
.eu-swiping .eu-hero * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
	.eu-swipe { display: none; }
}

.eu-hero {
	position: relative;
	overflow: hidden;
	color: #fff;
	isolation: isolate;
	/*
	 * Its texts slide in from below. As a scroll anchor Chrome would compensate for
	 * that on reload and scroll the page down by the slide distance.
	 */
	overflow-anchor: none;
}
.eu-hero, .eu-hero * { box-sizing: border-box; }
.eu-main--landing .eu-hero { margin-block: 0; }

.eu-hero__kicker {
	margin: 0;
	font-size: .85rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.eu-hero__claim {
	background: var(--eu-violet);
	color: #fff;
	padding: 1.25rem 1.5rem;
	max-width: 22rem;
	font-size: 1.0625rem;
	line-height: 1.45;
	box-shadow: var(--eu-shadow-lift);
}
.eu-hero__claim p { margin: 0 0 .9rem; }
.eu-hero__claim p:last-child { margin: 0; }
.eu-hero__button {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	border-bottom: 2px solid #fff;
	padding-bottom: .1rem;
}
.eu-hero__button .eu-icon { transition: transform .25s var(--eu-ease); }
.eu-hero__button:hover { color: #fff; }
.eu-hero__button:hover .eu-icon { transform: translateX(4px); }

.eu-hero__scroll {
	position: absolute;
	z-index: 4;
	left: var(--eu-pad);
	bottom: 1.5rem;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border: 2px solid currentColor;
	color: #fff;
}
.eu-hero__scroll { transition: background .2s, color .2s; }
.eu-hero__scroll:is(:hover, :focus-visible) { background: #fff; color: var(--eu-red-text); }
.eu-hero__scroll .eu-icon { animation: eu-bounce 2s ease-in-out infinite; }
@keyframes eu-bounce { 50% { transform: translateY(5px); } }

.eu-hero--plakat { background: var(--eu-red); }
/*
 * Name and claim are in flow: the claim sits at the bottom, but never higher
 * than just below the name. On wide, short windows the stage grows instead.
 */
.eu-hero__stage {
	position: relative;
	display: flex;
	flex-direction: column;
	row-gap: 2rem;
	--eu-hero-size: clamp(4.5rem, 17.5vw, 19rem);
	min-height: 100svh;
	max-width: 1680px;
	margin: 0 auto;
	padding-top: calc(var(--eu-header-h) + 4.5rem + var(--wp-admin--admin-bar--height, 0px));
}
/*
 * Above the name, with the dash starting where the E does: the E's side bearing
 * is .046em, and its top sits .07em below the line box.
 */
.eu-hero--plakat .eu-hero__kicker {
	position: relative;
	z-index: 3;
	align-self: flex-start;
	margin: 0 var(--eu-pad) calc(-.75rem - .07 * var(--eu-hero-size)) calc(var(--eu-pad) + .046 * var(--eu-hero-size));
	padding-left: 3.25rem;
	color: var(--eu-black);
}
.eu-hero--plakat .eu-hero__kicker::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 2.5rem;
	height: 3px;
	background: currentColor;
}
.eu-hero__title {
	position: relative;
	display: grid;
	margin: 0;
	padding-inline: var(--eu-pad);
	color: #fff;
	font: 900 var(--eu-hero-size)/.8 var(--eu-display);
	letter-spacing: -.05em;
	text-transform: none;
}
.eu-hero__stage:has(> .eu-hero__kicker) { --eu-kicker-room: 2rem; }
.eu-hero__word { display: block; position: relative; z-index: 1; }

.eu-hero__word:nth-child(even) { justify-self: end; z-index: 3; text-shadow: 0 20px 40px rgba(90, 0, 0, .25); }
.eu-hero__cutout {
	position: absolute;
	z-index: 2;
	left: 0;
	right: 0;
	bottom: 0;
	width: fit-content;
	margin-inline: auto;
	/* No higher than the name, so the head stays clear of the kicker above it. */
	height: min(86svh, 70rem, 100svh - var(--eu-header-h) - 4.5rem - var(--wp-admin--admin-bar--height, 0px) - var(--eu-kicker-room, 0px));
	pointer-events: none;
}
.eu-hero__cutout img {
	display: block;
	height: 100%;
	width: auto;
	max-width: none;
	object-fit: contain;
	object-position: bottom;
	filter: drop-shadow(0 30px 40px rgba(80, 0, 0, .35));
}
.eu-hero--plakat .eu-hero__claim {
	position: relative;
	z-index: 3;
	margin: auto var(--eu-pad) clamp(3rem, 12vh, 8rem) auto;
}

@media (prefers-reduced-motion: no-preference) {
	.eu-hero__word { animation: eu-word-in 1s var(--eu-ease) both; animation-delay: calc(.1s + var(--i, 0) * .12s); }
	.eu-hero__cutout { animation: eu-cutout-in 1.1s var(--eu-ease) .15s both; }
	.eu-hero--plakat .eu-hero__claim, .eu-hero--plakat .eu-hero__kicker { animation: eu-rise .9s var(--eu-ease) .55s both; }

	@supports (animation-timeline: scroll()) {
		.eu-hero__word { animation: eu-word-in 1s var(--eu-ease) both, eu-word-left linear both; animation-delay: calc(.1s + var(--i, 0) * .12s), 0s; animation-timeline: auto, scroll(root); animation-range: normal, 0 100svh; }
		.eu-hero__word:nth-child(even) { animation-name: eu-word-in, eu-word-right; }
		.eu-hero__cutout { animation: eu-cutout-in 1.1s var(--eu-ease) .15s both, eu-cutout-scroll linear both; animation-timeline: auto, scroll(root); animation-range: normal, 0 90svh; }
	}
}
/* No opacity in the entrance animations: the name and photo are the largest
   contentful paint, so they must be visible from the first frame. */
@keyframes eu-word-in {
	from { transform: translateY(12%) rotate(-2deg); }
	to { transform: none; }
}
@keyframes eu-cutout-in {
	from { transform: translateY(6%); }
	to { transform: none; }
}
@keyframes eu-word-left { to { translate: -14vw -6vh; } }
@keyframes eu-word-right { to { translate: 14vw -6vh; } }
@keyframes eu-cutout-scroll { to { scale: .86; translate: 0 6%; opacity: 0; } }

@media (max-width: 899px) {
	.eu-hero__stage {
		row-gap: 0;
		padding-top: calc(var(--eu-header-h) + 1.5rem + var(--wp-admin--admin-bar--height, 0px));
	}
	.eu-hero__stage { --eu-hero-size: clamp(4rem, 26vw, 9rem); }
	.eu-hero--plakat .eu-hero__kicker { margin-bottom: calc(1.25rem - .07 * var(--eu-hero-size)); }
	.eu-hero__cutout { position: relative; height: 62svh; margin-top: -10vw; }
	.eu-hero--plakat .eu-hero__claim { margin: -5rem var(--eu-pad) 2rem auto; max-width: min(22rem, 85vw); }
	.eu-hero__scroll { display: none; }
}

.eu-hero--diashow, .eu-hero--video { background: var(--eu-black); min-height: 100svh; }
.eu-hero__media { position: absolute; inset: 0; z-index: -1; }
.eu-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, .7), rgba(0, 0, 0, .1) 55%, rgba(0, 0, 0, .35));
}
.eu-hero__slides, .eu-hero__slide { position: absolute; inset: 0; margin: 0; }
.eu-hero__slide { opacity: 0; transition: opacity 1.4s ease; }
.eu-hero__slide.is-active { opacity: 1; }
.eu-hero__slide img, .eu-hero__video { width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: no-preference) {
	.eu-hero__slide.is-active img { animation: eu-kenburns 9s ease-out both; }
}
@keyframes eu-kenburns { from { transform: scale(1.12); } to { transform: scale(1); } }
.eu-hero__video { position: absolute; inset: 0; }
.eu-hero__overlay {
	position: relative;
	min-height: 100svh;
	max-width: var(--eu-wide);
	margin: 0 auto;
	padding: calc(var(--eu-header-h) + 3rem) var(--eu-pad) clamp(5rem, 14vh, 9rem);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	gap: 1.5rem;
}
.eu-hero__banner {
	margin: 0;
	color: #fff;
	font: 900 clamp(3.5rem, 12vw, 10rem)/.95 var(--eu-display);
	letter-spacing: -.04em;
	rotate: -3deg;
	transform-origin: left bottom;
}
.eu-hero__banner span {
	background: var(--eu-red);
	padding: 0 .18em .06em;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}
@media (prefers-reduced-motion: no-preference) {
	.eu-hero__overlay > * { animation: eu-rise .9s var(--eu-ease) both; }
	.eu-hero__overlay > :nth-child(2) { animation-delay: .12s; }
	.eu-hero__overlay > :nth-child(3) { animation-delay: .24s; }
}
.eu-hero__controls {
	position: absolute;
	right: var(--eu-pad);
	bottom: 1.75rem;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 1rem;
}
.eu-hero__dots { display: flex; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.eu-hero__dots button {
	width: 2.25rem;
	height: .35rem;
	padding: 0;
	border: 0;
	background: rgba(255, 255, 255, .45);
	cursor: pointer;
	transition: background .3s, width .3s;
}
.eu-hero__dots button[aria-current="true"] { background: var(--eu-red); width: 3.5rem; }
.eu-hero--diashow .eu-hero__scroll, .eu-hero--video .eu-hero__scroll { left: 50%; translate: -50% 0; }