/**
 * arrival.css – „Cineastische Ankunft" (Signature-Feature Startseite).
 *
 * Baut auf dem bestehenden Intro (motion.css, .svk-intro) auf und ersetzt
 * dessen Timing durch eine filmische Sequenz. Wird NACH motion.css geladen,
 * überschreibt daher gezielt einzelne Animationen (gleiche Spezifität).
 *
 * Ablauf (Gesamtdauer bis Wappenflug 3,6 s, inkl. FLIP-Flug ~4,5 s):
 *   0,00 s  Luftbild dunkel, leichter Zoom startet
 *   0,18 s  Flutlichtmast 1 flackert an   ┐
 *   0,48 s  Mast 2                        │  jeder ~0,8 s Flacker → warm an
 *   0,78 s  Mast 3                        │
 *   1,05 s  Mast 4                        ┘  alle an bei ~1,85 s
 *   0,25 s  Luftbild hellt auf (Dunkel-Layer blendet aus)
 *   1,45 s  Overline
 *   1,60 s  Wappen materialisiert (Scale 0.85 → 1, Blur → scharf)
 *   2,30 s  Glanz-Sweep über das Wappen
 *   2,35 s  Claim, 2,50 s Subline
 *   3,60 s  FLIP-Flug des Wappens in den Header (intro.js, unverändert)
 *
 * Alle Farben stammen aus den Tokens in theme.css. Keine Bilddateien für die
 * Lichtkegel – reine radial-/linear-gradients.
 * prefers-reduced-motion: Das Intro wird von intro.js komplett übersprungen;
 * die Regeln am Dateiende sind der zusätzliche Sicherheitsgurt.
 */

/* ===================== Bühne: Luftbild + Verdunkelung ===================== */

/* Etwas ruhigerer, längerer Zoom als im Basis-Intro (läuft über die
   gesamte Sequenz inkl. Wappenflug weiter). */
.svk-intro__bild {
	animation: svk-arrival-zoom 4.6s var(--ease) forwards;
	will-change: transform;
}

/* Der Flutlicht-/Abdunkel-Verlauf aus motion.css zieht jetzt synchron mit den
   Masten an, statt erst nach 3 s. */
.svk-intro__bild::after {
	animation: svk-arrival-ambient 1.9s ease 0.25s forwards;
}

/* Zusätzliche Nacht-Ebene: liegt über dem Luftbild und blendet aus, während
   die Masten angehen → „das Licht geht an". Nur opacity (GPU-günstig). */
.svk-intro__dunkel {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: var(--sv-nachtblau);
	opacity: 0.82;
	animation: svk-arrival-hell 1.75s ease 0.25s forwards;
}

/* ===================== Flutlichtmasten ===================== */
.svk-intro__masten {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

.svk-mast {
	position: absolute;
	top: 0;
	left: var(--mast-x, 50%);
	width: var(--mast-w, 30vw);
	height: var(--mast-h, 78%);
	transform: translateX(-50%);
	opacity: 0;
	will-change: opacity;
	animation: svk-arrival-mast 0.8s ease var(--mast-delay, 0s) forwards;
}

/* Lichtkegel: schmal an der Lampe, breit auf dem Rasen. */
.svk-mast::before {
	content: "";
	position: absolute;
	inset: 0;
	/* Weicher Lichtschein statt hartkantigem Kegel — wirkt echter. */
	background: radial-gradient(
		62% 78% at 50% 0%,
		rgba(243, 230, 104, 0.15) 0%,
		rgba(243, 230, 104, 0.06) 38%,
		rgba(243, 230, 104, 0) 72%
	);
	filter: blur(22px);
}

/* Die Lampe selbst: warmer Glühpunkt am oberen Rand. */
.svk-mast::after {
	content: "";
	position: absolute;
	top: -6%;
	left: 50%;
	width: 22%;
	padding-top: 22%;
	transform: translateX(-50%);
	border-radius: 50%;
	background: radial-gradient(
		circle at 50% 50%,
		rgba(255, 255, 255, 0.55) 0%,
		rgba(243, 230, 104, 0.38) 30%,
		rgba(243, 230, 104, 0) 72%
	);
	filter: blur(6px);
}

.svk-mast--1 {
	--mast-x: 8%;
	--mast-w: 30vw;
	--mast-h: 74%;
	--mast-delay: 0.18s;
}

.svk-mast--2 {
	--mast-x: 33%;
	--mast-w: 26vw;
	--mast-h: 86%;
	--mast-delay: 0.48s;
}

.svk-mast--3 {
	--mast-x: 66%;
	--mast-w: 26vw;
	--mast-h: 86%;
	--mast-delay: 0.78s;
}

.svk-mast--4 {
	--mast-x: 92%;
	--mast-w: 30vw;
	--mast-h: 74%;
	--mast-delay: 1.05s;
}

/* ===================== Inhalt: Overline, Wappen, Claim ===================== */

/* Das Sammel-Fade aus motion.css wird abgelöst – jedes Element hat jetzt
   seinen eigenen Einsatz in der Sequenz. */
.svk-intro__content {
	opacity: 1;
	transform: none;
	animation: none;
}

.svk-intro__overline {
	opacity: 0;
	animation: svk-arrival-fade 0.5s var(--ease) 1.45s forwards;
}

/* Wappen-Wrapper trägt die „Materialisierung" (Scale + Blur + Glanz).
   WICHTIG: Die Animation läuft auf dem WRAPPER, nie auf dem <img> selbst –
   sonst würde die animation-fill-mode-Deklaration den inline gesetzten
   transform des FLIP-Flugs (intro.js) überschreiben und der Flug bliebe
   stehen. Das <img> bleibt animationsfrei. */
.svk-intro__logo-wrap {
	position: relative;
	display: block;
	width: clamp(96px, 20vw, 160px);
	margin: 0 auto 1rem;
	opacity: 0;
	will-change: transform, filter, opacity;
	animation: svk-arrival-wappen 0.9s var(--ease) 1.6s forwards;
}

.svk-intro__logo-wrap .svk-intro__logo {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
}

/* Glanz-Sweep: heller Streifen wandert einmal über das Wappen. */
.svk-intro__logo-wrap::after {
	content: "";
	position: absolute;
	inset: -4%;
	border-radius: 50%;
	clip-path: circle(50% at 50% 50%);
	background-image: linear-gradient(
		105deg,
		rgba(255, 255, 255, 0) 38%,
		rgba(255, 255, 255, 0.8) 50%,
		rgba(255, 255, 255, 0) 62%
	);
	background-repeat: no-repeat;
	background-size: 260% 100%;
	background-position: -80% 0;
	opacity: 0;
	pointer-events: none;
	animation: svk-arrival-glanz 0.8s var(--ease) 2.3s forwards;
}

.svk-intro__claim {
	opacity: 0;
	animation: svk-arrival-fade 0.55s var(--ease) 2.35s forwards;
}

.svk-intro__sub {
	opacity: 0;
	animation: svk-arrival-fade 0.55s var(--ease) 2.5s forwards;
}

/* Skip-Button und Bildnachweis bleiben ab Sekunde 0 sichtbar und bedienbar. */
.svk-intro__skip,
.svk-intro__credit {
	opacity: 1;
	animation: none;
}

.svk-intro__skip {
	z-index: 3;
}

/* ===================== Keyframes ===================== */
@keyframes svk-arrival-zoom {
	from {
		transform: scale(1.02);
	}

	to {
		transform: scale(1.16);
	}
}

@keyframes svk-arrival-ambient {
	from {
		opacity: 0.12;
	}

	to {
		opacity: 1;
	}
}

@keyframes svk-arrival-hell {
	from {
		opacity: 0.82;
	}

	to {
		opacity: 0.08;
	}
}

/* Kurzes Flackern, dann warmes Durchbrennen – wie eine echte Halogenlampe. */
@keyframes svk-arrival-mast {
	0% {
		opacity: 0;
	}

	10% {
		opacity: 0.5;
	}

	16% {
		opacity: 0.04;
	}

	26% {
		opacity: 0.72;
	}

	33% {
		opacity: 0.1;
	}

	46% {
		opacity: 0.9;
	}

	58% {
		opacity: 0.52;
	}

	100% {
		opacity: 1;
	}
}

@keyframes svk-arrival-fade {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes svk-arrival-wappen {
	0% {
		opacity: 0;
		transform: scale(0.85);
		filter: blur(14px) brightness(2.2);
	}

	45% {
		opacity: 1;
	}

	70% {
		transform: scale(1.03);
		filter: blur(2px) brightness(1.25);
	}

	100% {
		opacity: 1;
		transform: scale(1);
		filter: blur(0) brightness(1);
	}
}

@keyframes svk-arrival-glanz {
	0% {
		opacity: 0;
		background-position: -80% 0;
	}

	25% {
		opacity: 1;
	}

	100% {
		opacity: 0;
		background-position: 180% 0;
	}
}

/* ===================== Reduced Motion =====================
 * intro.js entfernt das Overlay bei reduce ohnehin komplett – hier steht
 * zusätzlich der statische Endzustand, falls das Overlay je gerendert wird. */
@media (prefers-reduced-motion: reduce) {
	.svk-intro__bild,
	.svk-intro__bild::after,
	.svk-intro__dunkel,
	.svk-mast,
	.svk-intro__overline,
	.svk-intro__logo-wrap,
	.svk-intro__logo-wrap::after,
	.svk-intro__claim,
	.svk-intro__sub {
		animation: none !important;
	}

	.svk-intro__bild {
		transform: none;
	}

	.svk-intro__bild::after,
	.svk-intro__overline,
	.svk-intro__claim,
	.svk-intro__sub,
	.svk-mast {
		opacity: 1;
	}

	.svk-intro__logo-wrap {
		opacity: 1;
		transform: none;
		filter: none;
	}

	.svk-intro__logo-wrap::after {
		opacity: 0;
	}

	.svk-intro__dunkel {
		opacity: 0.08;
	}
}