/**
 * intro.css – Anfangssequenz der Startseite.
 *
 * Gezeigt wird eine echte Aufnahme vom Sportpark Epprath (Standbild aus dem
 * Vereins-Drohnenvideo), in mehreren Ebenen aufbereitet:
 *
 *   intro-nacht      Platz bei Nacht, Flutlicht aus
 *   intro-licht-1/2/3 dieselbe Aufnahme mit einem, zwei, drei angeschalteten
 *                    Masten – nacheinander eingeblendet ergibt das ein
 *                    Flutlicht, das wirklich "angeht"
 *   intro-dunst      Dunst in den Lichtkegeln (mit Alphakanal)
 *   intro-unschaerfe stark weichgezeichnete Fassung für den Schärfezug
 *
 * Regeln (bewusst eng gehalten):
 *   - höchstens 3 Sekunden, danach ist die Seite frei
 *   - jederzeit per Klick, Tipp, Esc oder Leertaste überspringbar
 *   - nur einmal pro Sitzung
 *   - ohne Ton
 *   - animiert werden ausschließlich transform und opacity
 *   - bei prefers-reduced-motion läuft nur eine kurze Einblendung des Wappens
 *   - die Seite dahinter lädt die ganze Zeit normal weiter
 */

.sk-intro {
	position: fixed;
	inset: 0;
	z-index: 2000;
	overflow: hidden;
	background: #05080f;
	display: grid;
	place-items: center;
	cursor: pointer;
}
.sk-intro[hidden] { display: none; }

/* Während das Intro läuft, steht die Seite dahinter still. */
.sk-intro-laeuft { overflow: hidden; }

/* ---- Szene ---------------------------------------------------- */

.sk-intro__szene {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

/* Kamerafahrt: langsam heranfahrend, endet ruhig. */
.sk-intro__kamera {
	position: absolute;
	inset: 0;
	transform: scale(1.14) translate3d(0, 1.2%, 0);
	animation: sk-intro-kamera 2.9s cubic-bezier(0.16, 0.7, 0.2, 1) forwards;
}
@keyframes sk-intro-kamera {
	to { transform: scale(1) translate3d(0, 0, 0); }
}

.sk-intro__ebene {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 58%;
}

/* Flutlicht: Mast für Mast, jeweils mit kurzem Zucken beim Zünden. */
.sk-intro__ebene--l1,
.sk-intro__ebene--l2,
.sk-intro__ebene--l3 { opacity: 0; }
.sk-intro__ebene--l1 { animation: sk-intro-zuenden 0.55s ease-out 0.22s forwards; }
.sk-intro__ebene--l2 { animation: sk-intro-zuenden 0.55s ease-out 0.56s forwards; }
.sk-intro__ebene--l3 { animation: sk-intro-zuenden 0.55s ease-out 0.88s forwards; }
@keyframes sk-intro-zuenden {
	0%   { opacity: 0; }
	18%  { opacity: 0.55; }
	28%  { opacity: 0.3; }
	46%  { opacity: 0.92; }
	58%  { opacity: 0.7; }
	100% { opacity: 1; }
}

/* Dunst zieht erst auf, wenn Licht da ist, in das er sich legen kann. */
.sk-intro__ebene--dunst {
	opacity: 0;
	animation: sk-intro-dunst 1.9s ease-out 0.7s forwards;
}
@keyframes sk-intro-dunst {
	from { opacity: 0; }
	to   { opacity: 0.85; }
}

/* Schärfezug: die weichgezeichnete Fassung liegt oben und verschwindet. */
.sk-intro__ebene--blur {
	opacity: 1;
	animation: sk-intro-schaerfe 0.85s cubic-bezier(0.3, 0.7, 0.2, 1) forwards;
}
@keyframes sk-intro-schaerfe {
	from { opacity: 1; }
	to   { opacity: 0; }
}

/* Abdunklung an den Rändern, damit Wappen und Zeile sauber sitzen. */
.sk-intro__vignette {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(70% 60% at 50% 62%, rgba(5, 8, 15, 0) 0%, rgba(5, 8, 15, 0.55) 78%, rgba(5, 8, 15, 0.85) 100%),
		linear-gradient(180deg, rgba(11, 18, 48, 0.4) 0%, rgba(11, 18, 48, 0) 35%, rgba(11, 18, 48, 0.55) 100%);
}

/* ---- Wappen ---------------------------------------------------- */

.sk-intro__mitte {
	position: relative;
	z-index: 1;
	display: grid;
	justify-items: center;
	gap: 1rem;
	padding: 1.5rem;
	text-align: center;
}

.sk-intro__wappen {
	width: clamp(110px, 20vw, 200px);
	height: auto;
	opacity: 0;
	transform: scale(0.94);
	animation: sk-intro-wappen 0.7s cubic-bezier(0.16, 0.7, 0.2, 1) 1.12s forwards;
	filter: drop-shadow(0 10px 30px rgba(3, 6, 20, 0.6));
}
@keyframes sk-intro-wappen {
	from { opacity: 0; transform: scale(0.94); }
	to   { opacity: 1; transform: scale(1); }
}

/* Lichtschein hinter dem Wappen */
.sk-intro__schein {
	position: absolute;
	top: 50%;
	left: 50%;
	width: clamp(260px, 42vw, 520px);
	aspect-ratio: 1;
	transform: translate(-50%, -62%) scale(0.8);
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(255, 244, 196, 0.35) 0%, rgba(242, 194, 48, 0.12) 45%, rgba(242, 194, 48, 0) 100%);
	opacity: 0;
	pointer-events: none;
	animation: sk-intro-schein 1.1s ease-out 1.0s forwards;
}
@keyframes sk-intro-schein {
	from { opacity: 0; transform: translate(-50%, -62%) scale(0.8); }
	to   { opacity: 1; transform: translate(-50%, -62%) scale(1); }
}

.sk-intro__zeile {
	margin: 0;
	font-family: var(--sk-schrift-unter, "Barlow Condensed", sans-serif);
	font-weight: 600;
	font-size: clamp(0.95rem, 0.85rem + 0.5vw, 1.15rem);
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: #f2f5fc;
	opacity: 0;
	transform: translate3d(0, 6px, 0);
	animation: sk-intro-zeile 0.6s ease-out 1.45s forwards;
	text-shadow: 0 2px 18px rgba(3, 6, 20, 0.7);
}
@keyframes sk-intro-zeile {
	to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* ---- Überspringen ---------------------------------------------- */

.sk-intro__skip {
	position: absolute;
	z-index: 2;
	right: clamp(1rem, 3vw, 2rem);
	bottom: clamp(1rem, 3vw, 2rem);
	font-family: var(--sk-schrift-unter, "Barlow Condensed", sans-serif);
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #ffffff;
	background: rgba(11, 18, 48, 0.55);
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 999px;
	padding: 0.6em 1.2em;
	cursor: pointer;
}
.sk-intro__skip:hover { background: rgba(11, 18, 48, 0.8); }
.sk-intro__skip:focus-visible { outline: 3px solid var(--sk-gelb, #e4d24a); outline-offset: 3px; }

/* ---- Abgang: Wappen fliegt in die Kopfzeile -------------------- */

.sk-intro.is-abgang { pointer-events: none; }
.sk-intro.is-abgang .sk-intro__szene,
.sk-intro.is-abgang .sk-intro__zeile,
.sk-intro.is-abgang .sk-intro__schein,
.sk-intro.is-abgang .sk-intro__skip {
	opacity: 0;
	transition: opacity 0.45s ease;
}
.sk-intro.is-abgang { background: transparent; transition: background-color 0.45s ease; }

/* Das fliegende Wappen wird von intro.js an den Body gehängt. */
.sk-intro-flug {
	position: fixed;
	z-index: 2100;
	margin: 0;
	pointer-events: none;
	transition: transform 0.55s cubic-bezier(0.5, 0, 0.2, 1), opacity 0.35s ease 0.28s;
	transform-origin: top left;
}
.sk-intro-flug.is-weg { opacity: 0; }

/* ---- Weniger Bewegung: nur eine kurze Einblendung -------------- */

@media (prefers-reduced-motion: reduce) {
	.sk-intro { background: #0b1230; }
	.sk-intro__szene { display: none; }
	.sk-intro__kamera,
	.sk-intro__ebene--l1,
	.sk-intro__ebene--l2,
	.sk-intro__ebene--l3,
	.sk-intro__ebene--dunst,
	.sk-intro__ebene--blur,
	.sk-intro__schein { animation: none; }
	.sk-intro__wappen {
		opacity: 0;
		transform: none;
		animation: sk-intro-nur-blende 0.5s ease-out forwards;
	}
	.sk-intro__zeile {
		transform: none;
		animation: sk-intro-nur-blende 0.5s ease-out 0.15s forwards;
	}
	.sk-intro.is-abgang { transition: none; }
	.sk-intro-flug { transition: opacity 0.3s ease; }
	@keyframes sk-intro-nur-blende {
		to { opacity: 1; }
	}
}