/* =====================================================================
   WIENINGER · Lade-Intro  —  wgn-splash.css
   Vollflächiger Oliv-Vorhang, weißes Logo: Skyline wird per clip-path von
   links nach rechts "gezeichnet", dann steigt der Schriftzug auf, eine
   Goldlinie erscheint und der Vorhang hebt sich nach oben.
   Reine CSS-Animation (läuft auch ohne JS). z-index über dem Age-Gate.
   ===================================================================== */

.wgn-splash {
	position: fixed; inset: 0; z-index: 100000;
	display: flex; align-items: center; justify-content: center;
	background: var(--wgn-red, #46462d); /* Token = Oliv (CI 2026) */
	cursor: pointer;
	animation: wgn-splash-lift .9s cubic-bezier(.7, 0, .2, 1) 2.5s forwards;
	will-change: transform;
}
.wgn-splash__logo {
	position: relative;
	width: min(28.75rem, 72vw);
	aspect-ratio: 1000 / 543;
}
.wgn-splash__logo img {
	position: absolute; inset: 0;
	width: 100%; height: 100%; max-width: none;
	display: block;
}
/* Skyline (obere 58 % des Logos) */
.wgn-splash__sky {
	-webkit-clip-path: inset(0 100% 42% 0);
	clip-path: inset(0 100% 42% 0);
	animation: wgn-splash-draw 1.4s cubic-bezier(.45, .05, .3, 1) .25s forwards;
}
/* Schriftzug (untere 42 %) */
.wgn-splash__word {
	-webkit-clip-path: inset(58% 0 0 0);
	clip-path: inset(58% 0 0 0);
	opacity: 0; transform: translateY(.75rem);
	animation: wgn-splash-rise .8s ease-out 1.35s forwards;
}
.wgn-splash__line {
	position: absolute; left: 50%; bottom: -1.6rem;
	height: 2px; width: 0;
	background: var(--wgn-gold-light, #d3bd86);
	transform: translateX(-50%);
	animation: wgn-splash-line .7s ease-out 1.7s forwards;
}

@keyframes wgn-splash-draw {
	to { -webkit-clip-path: inset(0 0 42% 0); clip-path: inset(0 0 42% 0); }
}
@keyframes wgn-splash-rise { to { opacity: 1; transform: none; } }
@keyframes wgn-splash-line { to { width: 4rem; } }
@keyframes wgn-splash-lift { to { transform: translateY(-100%); visibility: hidden; } }

/* Farbvarianten (Einstellungen › Allgemein › Lade-Intro) */
.wgn-splash--paper { background: var(--wgn-paper, #f0ece8); }
.wgn-splash--paper .wgn-splash__line { background: var(--wgn-gold, #84784c); }
.wgn-splash--bordeaux { background: var(--wgn-bordeaux, #831716); }
.wgn-splash--bordeaux .wgn-splash__line { background: var(--wgn-paper, #f0ece8); }

/* Übersprungen (JS) */
.wgn-splash.is-skipped { animation: wgn-splash-fade .3s ease forwards; }
@keyframes wgn-splash-fade { to { opacity: 0; visibility: hidden; } }

/* Schon gesehen in dieser Sitzung / fertig / keine Bewegung gewünscht */
html.wgn-splash-seen .wgn-splash,
.wgn-splash.is-done { display: none; }
@media (prefers-reduced-motion: reduce) {
	.wgn-splash { display: none; }
}