htlm,
body {
	height: 100%;
}

body {
	margin: 0;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
		sans-serif;
	background: radial-gradient(
		circle at 10% 0,
		#3b1f5f,
		#05010a 55%,
		#020308 100%
	);
	color: #f5f0ff;
	transition: transform 0.8s ease, filter 0.8s ease;
	transform-origin: center;
}

/* während Transition: Kamera leicht reinzoomen + mehr Glow */
body.is-transitioning {
	transform: scale(1.02);
	filter: blur(1.5px) brightness(1.15) saturate(1.2);
}

/* Vollbild-Overlay für die Transition */
#page-transition {
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
	opacity: 0;

	background: radial-gradient(
			circle at 15% 15%,
			rgba(160, 120, 255, 0.15),
			transparent 55%
		),
		radial-gradient(
			circle at 80% 85%,
			rgba(0, 180, 255, 0.18),
			transparent 60%
		),
		radial-gradient(circle at 50% 50%, #05010a 0%, #020008 55%, #000 100%);
	overflow: hidden;
}

/* Aktiv: Overlay blendet ein, dann wieder aus */
#page-transition.is-active {
	animation: overlayPulse 2.6s ease-out forwards;
}

/* Haupt-Rauchschicht – deckt fast den ganzen Screen ab */
#page-transition::before {
	content: "";
	position: absolute;
	top: -30%;
	bottom: -30%;
	left: -10%;
	right: -10%;

	/* grosser Rauchkörper, der stärker zur rechten Seite leuchtet */
	background: radial-gradient(
		circle at 85% 50%,
		rgba(240, 225, 255, 0) 0%,
		rgba(240, 225, 255, 0.8) 10%,
		rgba(203, 162, 255, 1) 24%,
		rgba(138, 90, 255, 1) 38%,
		rgba(52, 20, 120, 1) 55%,
		rgba(7, 2, 20, 1) 70%,
		rgba(0, 0, 0, 0) 95%
	);

	filter: blur(30px);
	mix-blend-mode: screen;
	opacity: 0.95;
	background-size: 200% 160%;

	animation: smokeSweepMain 2.3s ease-out forwards;
}

/* Zweite Schicht – feine Details + Scanlines, aber grossflächig */
#page-transition::after {
	content: "";
	position: absolute;
	top: -35%;
	bottom: -35%;
	left: -5%;
	right: -5%;

	background: radial-gradient(
			circle at 80% 50%,
			transparent 0%,
			rgba(140, 210, 255, 0.55) 14%,
			rgba(90, 180, 255, 0.9) 26%,
			rgba(20, 50, 110, 1) 44%,
			transparent 85%
		),
		repeating-linear-gradient(
			0deg,
			rgba(255, 255, 255, 0.12) 0px,
			rgba(255, 255, 255, 0.04) 1px,
			rgba(0, 0, 0, 0) 3px,
			rgba(0, 0, 0, 0) 5px
		);

	filter: blur(22px);
	mix-blend-mode: screen;
	opacity: 0.85;

	background-size: 220% 170%, 100% 100%;
	animation: smokeSweepSecondary 2.4s ease-out forwards,
		chromaShift 1.4s ease-in-out infinite alternate;
}

/* Overlay: kurzes Aufblitzen, dann halten, dann ausblenden */
@keyframes overlayPulse {
	0% {
		opacity: 0;
	}
	10% {
		opacity: 1;
	}
	70% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

/* Haupt-Rauch – grosser Block, der von rechts weit über den Screen hinaus zieht */
@keyframes smokeSweepMain {
	0% {
		transform: translateX(60%) scaleX(1.1) skewX(-4deg);
		background-position: 100% 50%;
		opacity: 0;
	}
	20% {
		opacity: 1;
	}
	50% {
		transform: translateX(0%) scaleX(1.02) skewX(-1deg);
		background-position: 65% 48%;
	}
	85% {
		transform: translateX(-55%) scaleX(1.08) skewX(3deg);
		background-position: 25% 52%;
		opacity: 0.95;
	}
	100% {
		transform: translateX(-90%) scaleX(1.15) skewX(5deg);
		background-position: 0% 50%;
		opacity: 0;
	}
}

/* Zweite Schicht – leicht versetzt, aber ebenfalls grossflächig */
@keyframes smokeSweepSecondary {
	0% {
		transform: translateX(45%) scaleX(1.05) skewX(-3deg);
		background-position: 100% 50%, 0 0;
		opacity: 0;
	}
	22% {
		opacity: 0.85;
	}
	55% {
		transform: translateX(5%) scaleX(1) skewX(-1deg);
		background-position: 70% 48%, 0 0;
	}
	90% {
		transform: translateX(-60%) scaleX(1.06) skewX(3deg);
		background-position: 20% 52%, 0 0;
		opacity: 0.8;
	}
	100% {
		transform: translateX(-95%) scaleX(1.1) skewX(4deg);
		background-position: 0% 50%, 0 0;
		opacity: 0;
	}
}

/* leichter Farbschimmer / Chromatic Aberration */
@keyframes chromaShift {
	0% {
		filter: drop-shadow(0 0 4px rgba(130, 200, 255, 0.6));
	}
	100% {
		filter: drop-shadow(-4px 0 6px rgba(130, 200, 255, 0.5))
			drop-shadow(4px 0 6px rgba(200, 140, 255, 0.7));
	}
}

/* Optional: Button-Stil (Bluemap) */
.transition-link {
	display: inline-block;
	margin-top: 2rem;
	padding: 0.9rem 1.8rem;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	background: radial-gradient(
		circle at 0 0,
		#7b5cff,
		#251645 60%,
		#12061f 100%
	);
	color: #fdf9ff;
	text-decoration: none;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	font-size: 0.85rem;

	transition: transform 0.25s ease, box-shadow 0.25s ease,
		border-color 0.25s ease;
}

.transition-link:hover {
	transform: translateY(-2px) scale(1.02);
	box-shadow: 0 0 25px rgba(125, 90, 255, 0.7);
	border-color: rgba(255, 255, 255, 0.6);
}