/* ==========================================================================
hero3d.css — 3D-Klangraum hinter dem Startbereich der Gast-Startseite
==========================================================================
Nutzer 2026-10-19 (Vorbild getartcraft.com, eigene Umsetzung): „Der
hintergrund soll mehr 3d sein und beim teaser reinkommen mit übergang“.
Nur app.html im Gast-Zweig lädt diese Datei, NACH css/teaser.css.
Alle Werte aus tokens.css; eigene Größen stehen als --hero3d-* oben.
Aufbau von #lock-section (.has-hero3d):
.lock-inner Startbereich, z-index 1, liegt über der Szene
.hero3d Hülle der Szene (#hero3d, aria-hidden), absolut ab dem
Abschnittsanfang. Höhe setzt das Skript: im Betrieb
Startbereich + Szene 1 des Teasers + eine Bildschirmhöhe,
statisch genau der Startbereich.
.hero3d-stage klebt (sticky) im Bild, solange die Hülle reicht
.hero3d-poster statisches Bild: Horizontlicht, Bodenraster,
Spektrum-Silhouette (Fallback ohne JS/WebGL und bei
reduzierter Bewegung)
canvas die WebGL-Szene (hero3d-scene.js), blendet ein
.hero3d-scrim Abdunklung hinter dem Text für den Kontrast
.nct-scroll der Teaser, z-index 1, durchsichtig über der Szene
Kein position: fixed und keine negativen Ränder: die Hülle endet mit
ihrer Höhe, „Nach oben“ und die Fußzeile bleiben frei (siehe teaser.css).
========================================================================== */
.lock-screen.has-hero3d {
--hero3d-horizon: 34%; /* Lage des Horizonts im Bild (Poster) */
--hero3d-title: clamp(2.5rem, 1.4rem + 4.2vw, 4.75rem);
--hero3d-scrim: color-mix(in srgb, var(--bg) 74%, transparent);
position: relative;
isolation: isolate;
}
.lock-screen.has-hero3d > .lock-inner,
.lock-screen.has-hero3d > .nct-scroll {
position: relative;
z-index: 1;
}
.lock-screen.has-hero3d > .teaser-autoscroll { z-index: 3; }
.hero3d {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100%; /* ohne JS: Abschnitt = Startbereich */
z-index: 0;
pointer-events: none;
}
html:not(.no-js) .hero3d { height: 100vh; height: 100svh; }
.hero3d-stage {
position: sticky;
top: 0;
height: 100vh;
height: 100svh;
overflow: hidden;
contain: strict;
}
.hero3d:is([data-state="static"], [data-state="failed"]) .hero3d-stage {
position: absolute;
inset: 0;
height: auto;
}
.hero3d-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
opacity: 0;
transition: opacity 1.2s var(--ease);
}
.hero3d[data-state="live"] .hero3d-canvas { opacity: 1; }
/* Abdunklung hinter Überschrift und Einleitung: hält den Text bei jeder
Lage der Säulen über 7:1 (Einleitung --text-secondary). */
.hero3d-scrim {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 46% 40% at 50% 34%, var(--hero3d-scrim) 0%, color-mix(in srgb, var(--bg) 50%, transparent) 55%, transparent 100%),
linear-gradient(to bottom, color-mix(in srgb, var(--bg) 35%, transparent), transparent 22%, transparent 78%, color-mix(in srgb, var(--bg) 60%, transparent));
}
/* ---- Statisches Bild ------------------------------------------------------ */
.hero3d-poster {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 34% 16% at 50% var(--hero3d-horizon), color-mix(in srgb, var(--tone-5) 22%, transparent), transparent 70%),
radial-gradient(ellipse 80% 38% at 50% calc(var(--hero3d-horizon) + 4%), color-mix(in srgb, var(--tone-1) 20%, transparent), transparent 72%),
radial-gradient(ellipse 120% 60% at 50% 110%, color-mix(in srgb, var(--tone-3) 10%, transparent), transparent 70%);
}
/* Boden: Raster in Perspektive, läuft zum Horizont aus. */
.hero3d-poster::before {
content: "";
position: absolute;
left: -60%;
right: -60%;
top: var(--hero3d-horizon);
height: 140%;
transform-origin: 50% 0;
transform: perspective(420px) rotateX(66deg);
background-image:
linear-gradient(to right, color-mix(in srgb, var(--tone-2) 34%, transparent) 1px, transparent 1px),
linear-gradient(to bottom, color-mix(in srgb, var(--tone-2) 26%, transparent) 1px, transparent 1px);
background-size: 46px 46px;
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 60%, transparent 100%);
mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 60%, transparent 100%);
}
/* Spektrum-Silhouette am Horizont: Pegel in der Tonleiter, Gasse in der
Mitte frei, nach oben ausgeblendet. Form aus einer SVG-Maske (inline,
keine fremde Quelle). */
.hero3d-poster::after {
content: "";
position: absolute;
left: 4%;
right: 4%;
bottom: calc(100% - var(--hero3d-horizon) - 2px);
height: clamp(50px, 11vh, 110px);
background: linear-gradient(to top, color-mix(in srgb, var(--tone-4) 70%, transparent), color-mix(in srgb, var(--tone-1) 45%, transparent));
opacity: 0.38;
-webkit-mask: url("data:image/svg+xml,") center bottom / 100% 100% no-repeat;
mask: url("data:image/svg+xml,") center bottom / 100% 100% no-repeat;
}
/* Läuft die Szene, tritt das Poster zurück: Boden, Pegel und Licht zeichnet
WebGL, die Ferne läuft in --bg aus. Ein helleres Horizontlicht dahinter
ließe die fernen Säulen als dunkle Kante stehen. */
.hero3d-poster { transition: opacity 1.2s var(--ease); }
.hero3d[data-state="live"] .hero3d-poster { opacity: 0; }
/* ---- Startbereich über der Szene ----------------------------------------- */
.lock-screen.has-hero3d .lock-inner {
max-width: calc(880px + 2 * var(--page-pad-x));
}
.lock-screen.has-hero3d .lock-title {
font-size: var(--hero3d-title);
line-height: 1.02;
letter-spacing: -0.03em;
max-width: 13ch;
}
.lock-screen.has-hero3d .lock-lead { max-width: 34em; }
/* Örtliche Abdunklung direkt hinter Slogan und Einleitung (zusätzlich zur
großen in .hero3d-scrim, die an der Bildmitte hängt): sie wandert mit dem
Text, egal wie hoch der Startbereich auf dem Gerät ist. z-index -1 liegt
im Stapelkontext von .lock-inner, also über der Szene, unter dem Text. */
.lock-screen.has-hero3d :is(.lock-claim, .lock-lead) { position: relative; }
.lock-screen.has-hero3d :is(.lock-claim, .lock-lead)::before {
content: "";
position: absolute;
inset: calc(var(--space-6) * -1) calc(var(--space-12) * -1);
z-index: -1;
pointer-events: none;
background: radial-gradient(closest-side, color-mix(in srgb, var(--bg) 90%, transparent) 0%, color-mix(in srgb, var(--bg) 82%, transparent) 62%, transparent 100%);
}
/* Während der Kamerafahrt hebt sich der Text und blendet aus (--hero-p
setzt hero3d-scene.js, 0 oben … 1 am Teaser-Anfang). Nur wenn die Szene
läuft und Bewegung erwünscht ist; sonst steht der Text normal. */
@media (prefers-reduced-motion: no-preference) {
.lock-screen.hero3d-live > .lock-inner {
opacity: clamp(0, calc(1.35 - var(--hero-p, 0) * 1.5), 1);
transform: translateY(calc(var(--hero-p, 0) * -56px)) scale(calc(1 - var(--hero-p, 0) * 0.035));
transform-origin: 50% 25%;
}
}
@media (max-width: 759.98px) {
.lock-screen.has-hero3d { --hero3d-horizon: 30%; }
.lock-screen.has-hero3d .lock-title { max-width: 11ch; }
.hero3d-poster::before { background-size: 34px 34px; }
}
/* Weniger Transparenz / mehr Kontrast: keine Szene, kein Bild, nur der
ruhige Grund (wie das Kachelraster, style.css). */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
.hero3d { display: none; }
}
/* „Teaser ansehen“ steht über der leuchtenden Spur: Kreis deckend, Text mit
weichem Schatten im Grundton, damit beides über jeder Lage lesbar bleibt. */
.lock-screen.has-hero3d .lock-more { position: relative; text-shadow: 0 0 10px var(--bg), 0 0 3px var(--bg); }
.lock-screen.has-hero3d .lock-more::before {
content: "";
position: absolute;
inset: calc(var(--space-4) * -1) calc(var(--space-8) * -1);
z-index: -1;
pointer-events: none;
background: radial-gradient(closest-side, color-mix(in srgb, var(--bg) 92%, transparent) 0%, color-mix(in srgb, var(--bg) 85%, transparent) 60%, transparent 100%);
}
.lock-screen.has-hero3d .lock-more svg { background: color-mix(in srgb, var(--panel-elevated) 92%, transparent); }
.lock-screen.has-hero3d .lock-more:hover svg { background: var(--surface-3); }
/* Sekundärknöpfe sind sonst halbdurchsichtig (--fill-2). Über bewegten,
leuchtenden Säulen schwankte damit ihr Kontrast; hier deckend in den
gleichen Tönen wie Menüs (--panel-elevated, beim Überfahren --surface-3).
Weiß darauf 15,5:1 bzw. 14:1. */
.lock-screen.has-hero3d .btn-secondary { background: var(--panel-elevated); }
.lock-screen.has-hero3d .btn-secondary:hover { background: var(--surface-3); }