/*
	Coverbroker - Platzhalter.

	Tiefes Schwarz, Satoshi, Platin mit einem kuehlen Cyan als Licht. Hier darf es lauter sein - ein Schriftzug,
	der die ganze Breite nimmt, und ein Feld dahinter, das atmet.
*/

@font-face {
	font-family: 'Satoshi';
	src: url('/fonts/Satoshi-Variable.woff2') format('woff2');
	font-weight: 300 900;
	font-style: normal;
	font-display: swap;
}

:root {
	--grund: #030406;
	--text: #eef1f5;
	--platin: #b9c2cc;
	--leise: #6c7682;
	--licht: #79c8e8;
	--linie: rgba(185, 194, 204, 0.18);
	color-scheme: dark;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
	margin: 0;
	background: var(--grund);
	color: var(--text);
	font-family: 'Satoshi', system-ui, sans-serif;
	-webkit-font-smoothing: antialiased;
	overflow: hidden;
	/*
		Die Seite scrollt nicht. Waagrechtes Wischen und schnelles Tippen
		sollen bei der Seite ankommen (versteckte Gesten in eier.js), nicht
		als Zoom per Doppeltipp enden; mit zwei Fingern zoomen bleibt.
	*/
	touch-action: pan-y pinch-zoom;
	-webkit-touch-callout: none;
	-webkit-tap-highlight-color: transparent;
}

.feld {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

/* Ein Schleier von unten und vom Rand: das Feld laeuft ins Schwarz aus. */
body::after {
	content: '';
	position: fixed;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(120% 70% at 50% 45%, transparent 40%, var(--grund) 100%),
		linear-gradient(transparent 70%, var(--grund));
}

.buehne {
	position: relative;
	z-index: 1;
	min-height: 100%;
	min-height: 100dvh;
	display: grid;
	place-content: center;
	justify-items: center;
	padding: 24px 16px;
	gap: clamp(28px, 5vh, 56px);
}

/* ------------------------------------------------------------ Der Schriftzug */

/*
	"cover" duenn, "broker" schwer - Schutz und Handel, Luft und Gewicht.
	schrift.js laesst eine Welle aus Gewicht durch die Buchstaben laufen und,
	mit der Maus, die Buchstaben unter dem Zeiger schwerer werden. Die
	Variable-Satoshi traegt 300 bis 900 stufenlos.
*/
.marke {
	margin: 0;
	display: flex;
	align-items: baseline;
	font-size: clamp(3.4rem, 14.2vw, 15rem);
	line-height: 0.9;
	letter-spacing: -0.045em;
	white-space: nowrap;
	user-select: none;
	-webkit-user-select: none;
}

.wort { display: inline-flex; }

.wort-cover { font-weight: 300; color: var(--platin); }
.wort-broker { font-weight: 900; color: var(--text); }

.buchstabe {
	display: inline-block;
	font-weight: var(--w, inherit);
	/*
		Die Schrift ist eng gesetzt; Glyphen ragen ueber ihren Kasten hinaus.
		Der Hintergrund, aus dem die Buchstaben gemalt werden, endet aber am
		Kasten - ohne diesen Puffer fehlte rechts an r, k, e ein Streifen.
		Innenabstand und gleich grosser negativer Aussenabstand: der Kasten
		waechst, der Satz bleibt.
	*/
	padding: 0.18em 0.14em;
	margin: -0.18em -0.14em;
	/*
		Zwei Ebenen: oben ein heller Streifen, darunter die Farbe des Worts.
		schrift.js schiebt den Streifen so, dass er als EIN Lichtzug ueber
		das ganze Wort laeuft - nicht als Strich in jedem Buchstaben.
	*/
	background:
		linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, 0.95) 46%, #8fd6f2 50%, rgba(255, 255, 255, 0.95) 54%, transparent 62%) var(--bx, -9999px) 0 / var(--bw, 100px) 100% no-repeat,
		linear-gradient(currentColor, currentColor);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* Am Telefon zweizeilig: so bleibt der Schriftzug riesig. */
@media (max-width: 640px) {
	.marke {
		flex-direction: column;
		align-items: center;
		font-size: min(31vw, 9rem);
		line-height: 0.84;
	}
}

/* Die Linie unter dem Schriftzug: ein Horizont, der aufgeht. */
.horizont {
	width: min(560px, 70vw);
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--licht), transparent);
	opacity: 0.7;
}

/* ---------------------------------------------------------------- Kanaele */

/* Telegram als Pille mit Wort, X daneben als runder Knopf nur mit Zeichen. */
.kanaele {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
}
.kanal-x {
	width: 48px;
	padding: 0;
	justify-content: center;
}

.kanal {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding: 0 22px;
	border: 1px solid var(--linie);
	border-radius: 999px;
	color: var(--platin);
	text-decoration: none;
	font-size: 0.78rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	background: none;
	transition: color 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.kanal svg { fill: currentColor; flex: none; }
.kanal:hover,
.kanal:focus-visible {
	color: var(--text);
	border-color: var(--licht);
	box-shadow: 0 0 32px -8px var(--licht);
	outline: none;
}

/* ---------------------------------------------------------------- Auftritt */

/*
	Erst geht der Horizont auf, dann steigen die Buchstaben aus ihm: aus der
	Unschaerfe, weit gesperrt, ganz leicht - und ziehen sich zum Wort
	zusammen. Danach erscheint der Weg zu Telegram.
*/
@media (prefers-reduced-motion: no-preference) {
	.js .buchstabe {
		animation: aufstieg 1.5s cubic-bezier(0.16, 1, 0.3, 1) both;
		animation-delay: calc(0.5s + var(--i) * 0.07s);
	}
	.js .horizont { animation: horizont 1.4s cubic-bezier(0.16, 1, 0.3, 1) both; }
	.js .kanal { animation: auftauchen 1s ease-out both; animation-delay: 2s; }
	.js .kanal-x { animation-delay: 2.25s; }
}

@keyframes aufstieg {
	from {
		opacity: 0;
		filter: blur(18px);
		/* Von der Mitte weg gesperrt, ueber transform: das Wort bleibt stehen. */
		transform: translate(calc(var(--d) * 0.16em), 0.45em) scaleY(1.6);
	}
	60% { opacity: 1; filter: blur(0); }
	to { opacity: 1; filter: blur(0); transform: none; }
}

@keyframes horizont {
	from { transform: scaleX(0); opacity: 0; }
	to { transform: scaleX(1); opacity: 0.7; }
}

@keyframes auftauchen {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------ Versteckt */

/*
	Kurz eine fremde Haltung (eier.js setzt die Klasse fuer ein paar
	Sekunden): Versalien, weit gesperrt, mittleres Gewicht - ruhig, wie eine
	Wortmarke, die man von irgendwoher kennt. Kleiner, damit sie passt.
*/
.marke {
	transition: font-size 0.9s cubic-bezier(0.16, 1, 0.3, 1), letter-spacing 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.ei-rose .marke {
	font-size: clamp(1.6rem, 5.4vw, 5.6rem);
	letter-spacing: 0.32em;
	text-transform: uppercase;
}
.ei-rose .buchstabe { font-weight: 560; }
.ei-rose .wort-cover { color: var(--text); }
@media (max-width: 640px) {
	.ei-rose .marke { font-size: 11vw; letter-spacing: 0.28em; }
}

@media (prefers-reduced-motion: reduce) {
	.feld { display: none; }
}