/* CRT-Schicht liegt NACH der 3D-Szene: Filter nicht direkt auf .rotor setzen,
   sonst würde der Browser die räumlichen SVG-Tiefenebenen platt rendern. */
:root {
 color-scheme: dark;
 --logo-width: 900px;
 --scanline-strength: .38;
 --aperture-strength: .38;
 --noise-strength: .065;
 --crt-softness: .42px;
}
* { box-sizing: border-box; }
body { margin: 0; background: #080b09; color: #b7c3b9; font: 13px/1.5 system-ui, sans-serif; }
.stage { position: relative; isolation: isolate; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; overflow: hidden; background: radial-gradient(ellipse at 50% 47%, #141e16 0%, #0d130f 42%, #080b09 85%); }
.crt-picture {
 width: 100%; min-height: inherit; display: grid; place-items: center;
 filter: blur(var(--crt-softness)) brightness(1.24) saturate(.86)
   drop-shadow(-1.15px 0 0 #e24c633b) drop-shadow(1.15px 0 0 #61a8ee40)
   drop-shadow(0 0 9px #72bd5261) drop-shadow(0 0 23px #7bc75435);
 animation: phosphor-drift 7s ease-in-out infinite;
}
.scene { width: min(78vw, var(--logo-width)); aspect-ratio: 1266 / 92; perspective: 1500px; }
.rotor { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform-origin: 50% 50%; }
.fallback { display: block; width: 100%; height: 100%; }
.layer { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; backface-visibility: visible; pointer-events: none; }
.crt-overlay { position: absolute; inset: 0; pointer-events: none; }
/* Dunkle horizontale Abtastlinien, bildschirmfest statt auf das Logo geklebt. */
.crt-scanlines {
 z-index: 2; opacity: var(--scanline-strength);
 background: repeating-linear-gradient(0deg, #000 0, #000 .7px, #0000 1.2px, #0000 3px);
}
/* Drei Subpixel pro Streifenperiode – wie die Phosphormaske einer Farbbildröhre. */
.crt-aperture {
 z-index: 3; opacity: var(--aperture-strength); mix-blend-mode: multiply;
 background: repeating-linear-gradient(90deg,
   #ffa6a6 0px, #ffa6a6 1px,
   #a6ffab 1px, #a6ffab 2px,
   #a6b9ff 2px, #a6b9ff 3px);
}
/* Kleine lokale Textur statt rechenintensivem Vollbild-Canvas. */
.crt-grain {
 z-index: 4; inset: -128px; opacity: var(--noise-strength);
 background: url('noise.png') repeat; mix-blend-mode: soft-light;
 animation: grain-drift 1.6s steps(4, end) infinite;
}
/* Langsam wandernde, sehr schwache Helligkeitszone; kein harter Störbalken. */
.crt-roll {
 z-index: 5; inset: -25% 0 auto; height: 22%;
 background: linear-gradient(0deg, transparent, #baffb209 48%, #d7ffd20b 52%, transparent);
 animation: scan-roll 16s linear infinite;
}
.crt-glass {
 z-index: 6;
 background: radial-gradient(ellipse at center, transparent 32%, #00000016 65%, #000000a6 100%),
   linear-gradient(120deg, #ffffff02, transparent 42%, #0000000a);
 box-shadow: inset 0 0 100px #00000033;
}
@keyframes phosphor-drift { 0%, 100% { opacity: 1; } 50% { opacity: .96; } }
@keyframes grain-drift { 0% { transform: translate(0, 0); } 25% { transform: translate(-17px, 23px); } 50% { transform: translate(35px, -11px); } 75% { transform: translate(-29px, -37px); } 100% { transform: translate(0, 0); } }
@keyframes scan-roll { from { top: -25%; } to { top: 110%; } }
.is-paused .crt-picture, .is-paused .crt-overlay { animation-play-state: paused; }
/* Auch vor dem Laden von JavaScript keine zusätzliche Bildschirmbewegung. */
@media (prefers-reduced-motion: reduce) {
 .crt-picture, .crt-overlay { animation: none; }
 .crt-roll { display: none; }
}