/* =========================================================
   sven-jaschke.de — Facelift 2026
   Moderne, auffällige Fassung. Dark glass + Akzent-Gradient.
   ========================================================= */

:root {
	--bg:        #0a0a0c;
	--ink:       #ffffff;
	--muted:     rgba(255, 255, 255, 0.72);
	--accent-1:  #ff2d55;   /* Hot-Red — Nod an das alte #fb2b2b */
	--accent-2:  #ff7a18;   /* Orange */
	--accent-3:  #ff2d9c;   /* Magenta */
	--accent:    linear-gradient(135deg, var(--accent-1), var(--accent-2));
	--glass:     rgba(18, 18, 22, 0.42);
	--glass-brd: rgba(255, 255, 255, 0.14);
	--radius:    24px;
	--ease:      cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: "Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
	font-size: clamp(15px, 1.4vw, 17px);
	line-height: 1.6;
	overflow: hidden;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.visually-hidden {
	position: absolute; width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ---------- Video-Hintergrund (Cover, rein per CSS) ---------- */
#bg {
	position: fixed; inset: 0; z-index: 0;
	overflow: hidden; background: #000;
	opacity: 0;
	transition: opacity 1.2s var(--ease);
	pointer-events: none;
}
body.yt-ready #bg { opacity: 1; }

#bg iframe {
	position: absolute; top: 50%; left: 50%;
	width: 100vw; height: 56.25vw;            /* 16:9 */
	min-height: 100vh; min-width: 177.78vh;    /* immer voll bedecken */
	transform: translate(-50%, -50%);
	border: 0; pointer-events: none;
}

/* ---------- Overlay: Vignette + wandernder Akzent-Glow ---------- */
#overlay {
	position: fixed; inset: 0; z-index: 1;
	pointer-events: none;
	background:
		radial-gradient(120% 90% at 50% 0%, transparent 40%, rgba(0,0,0,0.35) 100%),
		linear-gradient(180deg, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.10) 35%, rgba(0,0,0,0.55) 100%);
}
#overlay::before {
	content: "";
	position: absolute; inset: -20%;
	background:
		radial-gradient(38% 38% at 22% 28%, rgba(255,45,85,0.22), transparent 60%),
		radial-gradient(42% 42% at 82% 72%, rgba(255,45,156,0.18), transparent 60%);
	/* kein blur()-Filter: die Verläufe sind schon weich, und ein
	   animierter Vollbild-Blur über dem Video kostet massiv Performance */
	will-change: transform;
	animation: drift 22s var(--ease) infinite alternate;
}

@keyframes drift {
	0%   { transform: translate3d(-2%, -1%, 0) scale(1); }
	100% { transform: translate3d(3%, 2%, 0) scale(1.12); }
}

/* ---------- Bühne / Karte ---------- */
.stage {
	position: relative; z-index: 2;
	min-height: 100vh; min-height: 100dvh;
	display: grid; place-items: center;
	padding: calc(24px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom));
}

/* Tilt-Wrapper trägt die Einblend-Animation, damit der .card-Transform
   frei für die 3D-Neigung bleibt (sonst nagelt die beendete rise-
   Animation mit fill:both den transform auf none fest). */
.tiltwrap {
	position: relative;
	perspective: 1000px;
	animation: rise 0.9s var(--ease) both;
}

.card {
	position: relative;
	display: flex; flex-direction: column; align-items: center;
	gap: clamp(20px, 3vw, 30px);
	width: min(92vw, 460px);
	padding: clamp(28px, 5vw, 48px) clamp(24px, 5vw, 44px);
	text-align: center;
	background: var(--glass);
	border: 1px solid var(--glass-brd);
	border-radius: var(--radius);
	box-shadow:
		0 30px 80px -20px rgba(0, 0, 0, 0.65),
		inset 0 1px 0 rgba(255, 255, 255, 0.14);
	-webkit-backdrop-filter: blur(14px) saturate(135%);
	backdrop-filter: blur(14px) saturate(135%);
	transition: transform 0.3s var(--ease);
}

/* dünne Akzentlinie oben auf der Karte */
.card::before {
	content: "";
	position: absolute; left: 50%; top: -1px; transform: translateX(-50%);
	width: 64%; height: 2px; border-radius: 2px;
	background: var(--accent);
	opacity: 0.9;
	box-shadow: 0 0 22px rgba(255, 45, 85, 0.55);
}

@keyframes rise {
	from { opacity: 0; transform: translateY(22px) scale(0.98); filter: blur(6px); }
	to   { opacity: 1; transform: none; filter: none; }
}

/* ---------- Logo ---------- */
.logo {
	width: clamp(120px, 26vw, 200px);
	height: auto;
	filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.55));
	animation: float 6s ease-in-out infinite;
}
@keyframes float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-9px); }
}

/* ---------- Links ---------- */
.links {
	display: flex; flex-direction: column; align-items: center;
	gap: 16px; width: 100%;
}

.link {
	color: var(--ink);
	text-decoration: none;
	letter-spacing: 0.2px;
}

/* Mail-Link: animierter Gradient-Unterstrich */
.link--mail {
	position: relative;
	font-size: clamp(15px, 2.2vw, 18px);
	color: var(--muted);
	padding-bottom: 3px;
	transition: color 0.3s var(--ease);
}
.link--mail::after {
	content: "";
	position: absolute; left: 0; bottom: 0;
	width: 100%; height: 2px; border-radius: 2px;
	background: var(--accent);
	transform: scaleX(0); transform-origin: left;
	transition: transform 0.45s var(--ease);
}
.link--mail:hover, .link--mail:focus-visible { color: #fff; }
.link--mail:hover::after, .link--mail:focus-visible::after { transform: scaleX(1); }

/* Closed area: Ghost-Pill, füllt sich mit Akzent */
.link--closed {
	display: inline-flex; align-items: center; gap: 9px;
	padding: 11px 22px;
	font-size: 14px; font-weight: 600; letter-spacing: 0.4px;
	text-transform: uppercase;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	background: rgba(255, 255, 255, 0.04);
	color: #fff;
	overflow: hidden; position: relative; isolation: isolate;
	transition: border-color 0.35s var(--ease), transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.link--closed::before {
	content: "";
	position: absolute; inset: 0; z-index: -1;
	background: var(--accent);
	opacity: 0; transform: scale(1.1);
	transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.link--closed:hover, .link--closed:focus-visible {
	border-color: transparent;
	transform: translateY(-2px);
	box-shadow: 0 14px 30px -10px rgba(255, 45, 85, 0.6);
}
.link--closed:hover::before, .link--closed:focus-visible::before { opacity: 1; transform: scale(1); }

.lock {
	width: 12px; height: 10px; position: relative; display: inline-block;
	border: 2px solid currentColor; border-radius: 2px; margin-top: 4px;
}
.lock::before {
	content: ""; position: absolute; left: 50%; top: -7px; transform: translateX(-50%);
	width: 8px; height: 8px; border: 2px solid currentColor; border-bottom: 0;
	border-radius: 6px 6px 0 0;
}

/* ---------- Ton-Steuerung (Segmented Control) ---------- */
.sound {
	position: fixed; z-index: 3;
	right: calc(18px + env(safe-area-inset-right));
	bottom: calc(18px + env(safe-area-inset-bottom));
	display: inline-flex; align-items: center; gap: 12px;
	padding: 6px 16px 6px 6px;
	border-radius: 999px;
	background: var(--glass);
	border: 1px solid var(--glass-brd);
	-webkit-backdrop-filter: blur(10px) saturate(135%);
	backdrop-filter: blur(10px) saturate(135%);
	box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.7);
	animation: rise 0.9s var(--ease) 0.25s both;
}

/* Mute-Umschalter */
.mute-btn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; flex: none;
	border: 0; border-radius: 50%; cursor: pointer;
	color: #fff; background: var(--accent);
	box-shadow: 0 6px 18px -6px rgba(255, 45, 85, 0.7);
	transition: color 0.25s var(--ease), background 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.mute-btn svg { display: block; }
.mute-btn.muted {
	color: var(--muted); background: rgba(255, 255, 255, 0.08); box-shadow: none;
}
.mute-btn:hover { color: #fff; }
.mute-btn.muted:hover { background: rgba(255, 255, 255, 0.14); }
.mute-btn .ic-off { display: none; }
.mute-btn.muted .ic-on { display: none; }
.mute-btn.muted .ic-off { display: block; }
.mute-btn:focus-visible { outline: 2px solid rgba(255,255,255,0.75); outline-offset: 2px; }

/* Lautstärkeregler */
.vol {
	-webkit-appearance: none; appearance: none;
	width: 112px; height: 6px; border-radius: 999px; cursor: pointer;
	background-color: rgba(255, 255, 255, 0.18);
	background-image: linear-gradient(90deg, var(--accent-1), var(--accent-2));
	background-size: var(--val, 20%) 100%;
	background-repeat: no-repeat;
}
.vol::-webkit-slider-thumb {
	-webkit-appearance: none; appearance: none;
	width: 15px; height: 15px; border-radius: 50%; border: 0;
	background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45); cursor: pointer;
}
.vol::-moz-range-thumb {
	width: 15px; height: 15px; border-radius: 50%; border: 0;
	background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45); cursor: pointer;
}
.vol::-moz-range-track { height: 6px; border-radius: 999px; background: transparent; }
.vol:focus-visible { outline: 2px solid rgba(255,255,255,0.75); outline-offset: 3px; }

/* ---------- Enter-Intro (großer Layer, blurt die Seite) ---------- */
.enter {
	position: fixed; inset: 0; z-index: 10;
	display: grid; place-items: center;
	padding: 24px; text-align: center;
	cursor: pointer; color: #fff;
	background: radial-gradient(120% 120% at 50% 38%, rgba(10,10,12,0.18), rgba(6,6,8,0.55));
	-webkit-backdrop-filter: blur(26px) saturate(130%);
	backdrop-filter: blur(26px) saturate(130%);
	transition:
		opacity 0.8s var(--ease), visibility 0.8s var(--ease),
		-webkit-backdrop-filter 0.8s var(--ease), backdrop-filter 0.8s var(--ease);
	animation: rise 0.9s var(--ease) both;
}
.enter.is-hidden {
	opacity: 0; visibility: hidden; pointer-events: none;
	-webkit-backdrop-filter: blur(0px) saturate(100%);
	backdrop-filter: blur(0px) saturate(100%);
}
.enter__inner { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.enter__eyebrow {
	font-size: 12px; font-weight: 500;
	letter-spacing: 4px; text-transform: uppercase;
	color: var(--muted);
}
.enter__cta {
	font-size: clamp(40px, 9vw, 88px); font-weight: 700;
	line-height: 1.02; letter-spacing: -1px;
	max-width: 12ch; text-wrap: balance;
	background: linear-gradient(135deg, #ffffff 0%, #ffd9c7 42%, var(--accent-1) 74%, var(--accent-3) 100%);
	-webkit-background-clip: text; background-clip: text;
	color: transparent; -webkit-text-fill-color: transparent;
	filter: drop-shadow(0 10px 44px rgba(255, 45, 85, 0.35));
}

/* =========================================================
   GIMMICKS
   ========================================================= */

/* Cursor-Spotlight — weicher Lichtkegel über dem Video, hinter der Karte */
#spot {
	position: fixed; inset: 0; z-index: 1; pointer-events: none;
	opacity: 0; transition: opacity 0.5s var(--ease);
	background: radial-gradient(260px circle at var(--mx, 50vw) var(--my, 42vh),
		rgba(255, 255, 255, 0.10), rgba(255, 45, 85, 0.10) 42%, transparent 68%);
}
body.g-spot #spot { opacity: 1; }

/* Film-Grain — feines, bewegtes Korn */
#grain {
	position: fixed; inset: -50%; z-index: 1; pointer-events: none;
	opacity: 0; mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body.g-grain #grain { opacity: 0.08; animation: grain 0.5s steps(4) infinite; }
@keyframes grain {
	0%{transform:translate(0,0)} 25%{transform:translate(-3%,2%)} 50%{transform:translate(2%,-3%)}
	75%{transform:translate(-2%,-2%)} 100%{transform:translate(3%,3%)}
}

/* Eigener Cursor — Punkt + Ring, Ring wächst über Links/Buttons */
#dot, #ring {
	position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none;
	border-radius: 50%; display: none;
}
#dot {
	width: 7px; height: 7px; background: #fff;
	transform: translate(calc(var(--x, 0px) - 50%), calc(var(--y, 0px) - 50%));
}
#ring {
	width: 34px; height: 34px; border: 1.5px solid rgba(255, 255, 255, 0.65);
	transform: translate(calc(var(--x, 0px) - 50%), calc(var(--y, 0px) - 50%)) scale(1);
	transition: transform 0.12s ease-out, width 0.2s, height 0.2s, border-color 0.2s;
}
#ring.big { width: 52px; height: 52px; border-color: var(--accent-1); }
body.g-cursor #dot, body.g-cursor #ring { display: block; }
body.g-cursor, body.g-cursor * { cursor: none !important; }

/* Konfetti-Canvas (Logo-Easter-Egg + Konami) */
#fx { position: fixed; inset: 0; z-index: 50; pointer-events: none; }

/* Logo-Spin (Easter-Egg) */
.logo.spin { animation: spin 0.7s var(--ease); }
@keyframes spin { to { transform: rotate(360deg) scale(1.05); } }

/* Toast */
.toast {
	position: fixed; left: 50%; bottom: 84px; z-index: 30;
	transform: translateX(-50%) translateY(20px);
	padding: 10px 18px; border-radius: 999px;
	background: rgba(12, 12, 15, 0.85); border: 1px solid var(--glass-brd);
	font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap;
	opacity: 0; pointer-events: none;
	transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Party-Modus (Konami-Code) */
body.party #overlay { animation: party 3s linear infinite; }
@keyframes party { to { filter: hue-rotate(360deg); } }

/* ---------- Mobile ---------- */
@media (max-width: 520px) {
	.sound { right: 50%; transform: translateX(50%); }
	.vol { width: 92px; }
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
	#bg { opacity: 1; }
}