/* ============================================================
   cinematic.css – Pre-Login-Sequenz der Landingpage
   Gehoert zum public-Bundle (siehe include/ng_styles.php).

   Sichtbarkeitsregel: Alles Versteckende haengt an
   html.ng-cinematic-armed. Diese Klasse setzt ng_cinematic_arm.js
   nur, wenn die Sequenz wirklich laufen kann. Ohne JS, ohne WebGL
   oder bei prefers-reduced-motion bleibt die Seite unveraendert.
   ============================================================ */

/* Overlay ist inert, solange die Sequenz nicht scharf ist. */
.ng-cinematic {
	display: none;
}

html.ng-cinematic-armed .ng-cinematic {
	display: block;
	position: fixed;
	inset: 0;
	z-index: 9000;
	background: #000;
	overflow: hidden;
	contain: strict;
}

/* Landing-Chrome und Login-Terminal warten ausserhalb des Bildes. */
html.ng-cinematic-armed [data-cinematic-chrome],
html.ng-cinematic-armed #login-box {
	opacity: 0;
	visibility: hidden;
}

html.ng-cinematic-armed body {
	overflow: hidden;
}

/* rotationX des Login-Drops braucht eine Perspektive am Vorfahren. */
.landing-hero {
	perspective: 1400px;
}

#login-box {
	transform-style: preserve-3d;
	will-change: transform, opacity;
}

/* ── Buehne ─────────────────────────────────────────────── */
.ng-cinematic__stage {
	position: absolute;
	inset: 0;
	opacity: 0;
}

.ng-cinematic__stage canvas {
	display: block;
	width: 100%;
	height: 100%;
}

/* ── Bildfilter ─────────────────────────────────────────── */
.ng-cinematic__vignette,
.ng-cinematic__scanlines,
.ng-cinematic__alert,
.ng-cinematic__tear {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.ng-cinematic__vignette {
	opacity: 0;
	background: radial-gradient(
		ellipse at center,
		rgb(0 0 0 / 0%) 38%,
		rgb(0 0 0 / 55%) 78%,
		rgb(0 0 0 / 92%) 100%
	);
}

.ng-cinematic__scanlines {
	opacity: 0;
	background: repeating-linear-gradient(
		to bottom,
		rgb(255 255 255 / 3.5%) 0 1px,
		rgb(0 0 0 / 0%) 1px 3px
	);
	mix-blend-mode: overlay;
}

/* Roter Alarm-Puls im Konflikt-Moment (Phase 3). */
.ng-cinematic__alert {
	opacity: 0;
	background: radial-gradient(
		ellipse at center,
		rgb(255 0 50 / 0%) 45%,
		rgb(255 0 50 / 22%) 100%
	);
	box-shadow: inset 0 0 220px rgb(255 0 50 / 45%);
}

/* Weisser Riss beim finalen Glitch (Phase 4). */
.ng-cinematic__tear {
	opacity: 0;
	background: linear-gradient(
		92deg,
		rgb(255 255 255 / 0%) 0%,
		rgb(255 255 255 / 85%) 46%,
		rgb(255 0 50 / 75%) 54%,
		rgb(255 255 255 / 0%) 100%
	);
	mix-blend-mode: screen;
}

/* ── Kinetic Typography ─────────────────────────────────── */
/* Unteres Drittel: der Planet behaelt die oberen zwei Drittel des Bildes. */
.ng-cinematic__kinetic {
	position: absolute;
	inset-inline: 0;
	top: 66%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(4px, 0.8vh, 10px);
	padding-inline: 4vw;
	text-align: center;
	pointer-events: none;
	opacity: 0;
}

/* ── Umbruchfreier Satz ─────────────────────────────────────
   Clacon2 ist echtes Monospace: gemessen exakt 0.56em
   Vorschub pro Zeichen inkl. letter-spacing (0.54em Glyphe +
   0.02em Spacing). Damit laesst sich die Schriftgroesse aus der
   Zeichenzahl exakt berechnen, statt umzubrechen.

   ng_index_cinematic.js setzt --ng-slogan-len / --ng-sub-len je
   Beat auf die volle Laenge des Claims – nicht auf den waehrend
   des Tippens wachsenden Text, sonst zappelt die Groesse.
   ─────────────────────────────────────────────────────────── */
.ng-cinematic__cipher,
.ng-cinematic__slogan,
.ng-cinematic__sub {
	white-space: nowrap;
}

.ng-cinematic__cipher {
	font-family: 'Clacon2', ui-monospace, monospace;
	/* Braille kommt aus einer Fallback-Schrift und ist breiter als Clacon2:
	   gemessen ~0.70em Glyphe + 0.32em letter-spacing. */
	font-size: min(1.15rem, 90vw / (var(--ng-cipher-len, 18) * 1.06));
	letter-spacing: 0.32em;
	color: rgb(255 0 50 / 78%);
	text-shadow: 0 0 14px rgb(255 0 50 / 70%);
	min-height: 1.4em;
}

.ng-cinematic__slogan {
	font-family: 'Clacon2', ui-monospace, monospace;
	font-size: min(3.9rem, 90vw / (var(--ng-slogan-len, 20) * 0.56));
	font-weight: 400;
	line-height: 1.04;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	margin-inline: auto;
	color: #fff;
	text-shadow:
		0 0 10px rgb(255 255 255 / 45%),
		0 0 32px rgb(255 0 50 / 85%),
		0 0 70px rgb(255 0 50 / 55%);
	min-height: 1em;
}

.ng-cinematic__sub {
	font-family: 'Clacon2', ui-monospace, monospace;
	/* 0.54em Glyphe + 0.3em letter-spacing = 0.84em Vorschub. */
	font-size: min(1rem, 90vw / (var(--ng-sub-len, 26) * 0.84));
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: rgb(200 200 200 / 72%);
	opacity: 0;
	min-height: 1.2em;
}

/* ── HUD-Ecken ──────────────────────────────────────────── */
.ng-cinematic__hud {
	position: absolute;
	inset: 0;
	padding: clamp(14px, 2.4vw, 34px);
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	font-family: 'Clacon2', ui-monospace, monospace;
	font-size: clamp(0.6rem, 1vw, 0.8rem);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgb(255 0 50 / 72%);
	pointer-events: none;
}

.ng-cinematic__phase {
	text-shadow: 0 0 12px rgb(255 0 50 / 60%);
}

.ng-cinematic__node {
	color: rgb(138 138 138 / 65%);
}

/* ── Skip ───────────────────────────────────────────────── */
.ng-cinematic__skip {
	position: absolute;
	right: clamp(14px, 2.4vw, 34px);
	bottom: clamp(14px, 2.4vw, 34px);
	z-index: 2;
	padding: 0.6em 1.1em;
	font-family: 'Clacon2', ui-monospace, monospace;
	font-size: clamp(0.62rem, 1vw, 0.78rem);
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: rgb(200 200 200 / 78%);
	background: rgb(0 0 0 / 55%);
	border: 1px solid rgb(255 0 50 / 45%);
	border-radius: 2px;
	cursor: pointer;
	transition: color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.ng-cinematic__skip:hover,
.ng-cinematic__skip:focus-visible {
	color: #fff;
	border-color: rgb(255 0 50 / 95%);
	box-shadow: 0 0 18px rgb(255 0 50 / 55%);
	outline: none;
}

/* Phone / Tablet: Skip muss als Touch-Ziel lesbar und groesser sein.
@media (max-width: 1180px) {
	.ng-cinematic__skip {
		padding: 0.9em 1.25em;
		min-height: 52px;
		font-size: clamp(1rem, 4.2vw, 1.15rem);
		letter-spacing: 0.08em;
		line-height: 1.2;
		right: max(12px, env(safe-area-inset-right, 0px));
		bottom: max(16px, env(safe-area-inset-bottom, 0px));
	}
}

/* ── Aufprall-Blitz des Login-Drops ─────────────────────── */
.ng-cinematic-impact {
	position: fixed;
	inset-inline: 0;
	top: 50%;
	height: 2px;
	z-index: 8999;
	opacity: 0;
	pointer-events: none;
	background: linear-gradient(
		90deg,
		rgb(255 0 50 / 0%) 0%,
		rgb(255 0 50 / 90%) 50%,
		rgb(255 0 50 / 0%) 100%
	);
	box-shadow: 0 0 40px 8px rgb(255 0 50 / 55%);
}

/* Nach der Sequenz: Landing-Chrome sanft im Bild halten. */
html.ng-cinematic-done [data-cinematic-chrome] {
	opacity: 1;
	visibility: visible;
}

/* ── Reduzierte Bewegung: Sequenz findet nicht statt ────── */
@media (prefers-reduced-motion: reduce) {
	.ng-cinematic,
	.ng-cinematic-impact {
		display: none !important;
	}

	html.ng-cinematic-armed [data-cinematic-chrome],
	html.ng-cinematic-armed #login-box {
		opacity: 1;
		visibility: visible;
	}

	html.ng-cinematic-armed body {
		overflow: auto;
	}
}