/* crt.css — reine Optik: Scanlines, Flimmern, Vignette, Woelbung. Alles hier ist Deko und darf ausfallen; die Bedienbarkeit haengt nicht davon ab. Abschaltbar per (Befehl: crt off). */ #scanlines, #vignette { position: absolute; inset: 0; pointer-events: none; z-index: 10; } /* Feine horizontale Zeilenstruktur eines Lochmasken-Monitors. */ #scanlines { background: repeating-linear-gradient( to bottom, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0.28) 3px, rgba(0, 0, 0, 0.28) 4px ); animation: flicker 6.4s infinite; } /* Dunkle Ecken plus ein Hauch Reflexion oben links. */ #vignette { background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.55) 100%), linear-gradient(115deg, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0) 35%); } /* Sehr dezent — ein sichtbar zuckendes Bild wird nach zwei Minuten anstrengend. */ @keyframes flicker { 0%, 96%, 100% { opacity: 1; } 97% { opacity: 0.88; } 98% { opacity: 1; } 99% { opacity: 0.94; } } /* Einschaltmoment: Bild faehrt aus einem hellen Strich auf. */ #crt.power-on #terminals { animation: power-on 620ms ease-out; } @keyframes power-on { 0% { transform: scaleY(0.004) scaleX(1.2); filter: brightness(6); opacity: 0.9; } 38% { transform: scaleY(0.02) scaleX(1.05); filter: brightness(3); } 70% { transform: scaleY(1) scaleX(1); filter: brightness(1.5); } 100% { transform: scaleY(1) scaleX(1); filter: brightness(1); } } body[data-crt="off"] #scanlines, body[data-crt="off"] #vignette { display: none; } body[data-crt="off"] .term { text-shadow: none; } @media (prefers-reduced-motion: reduce) { #scanlines { animation: none; } #crt.power-on #terminals { animation: none; } } /* ------------------------------------------------------- Nachglimmen ------ * * Eine Spur, wie sie traeger Phosphor beim Scrollen zieht. * * Die Zeile steht still — was nachzieht, ist ihr Leuchten. Dafuer wird der * Text mehrfach untereinander geschattet, jedes Abbild schwaecher und * unschaerfer als das davor: zusammen ergibt das einen Streifen nach unten, * dorthin, wo die Zeichen beim Hochscrollen hergekommen sind. Der Streifen * verblasst binnen einer knappen halben Sekunde. * * Nur Textschatten, kein Klon und keine zweite Ebene — es aendert nichts am * Layout und laesst die Zeile an ihrem Platz. Wer den Effekt nicht mag, * schaltet ihn mit `crt glow off` ab. */ @keyframes phosphor-smear { 0% { text-shadow: 0 0.16em 0.04em color-mix(in srgb, var(--fg) 72%, transparent), 0 0.34em 0.07em color-mix(in srgb, var(--fg) 52%, transparent), 0 0.54em 0.11em color-mix(in srgb, var(--fg) 34%, transparent), 0 0.76em 0.16em color-mix(in srgb, var(--fg) 20%, transparent), 0 1.00em 0.22em color-mix(in srgb, var(--fg) 10%, transparent), 0 0 6px var(--glow); } /* Traege: die Spur haelt lange fast ihre Staerke und geht erst zum Schluss weg. Ein linearer Verlauf sah aus, als wuerde sie weggewischt. */ 45% { text-shadow: 0 0.16em 0.06em color-mix(in srgb, var(--fg) 62%, transparent), 0 0.34em 0.10em color-mix(in srgb, var(--fg) 44%, transparent), 0 0.54em 0.14em color-mix(in srgb, var(--fg) 28%, transparent), 0 0.76em 0.19em color-mix(in srgb, var(--fg) 16%, transparent), 0 1.00em 0.25em color-mix(in srgb, var(--fg) 8%, transparent), 0 0 6px var(--glow); } 75% { text-shadow: 0 0.16em 0.11em color-mix(in srgb, var(--fg) 32%, transparent), 0 0.34em 0.17em color-mix(in srgb, var(--fg) 20%, transparent), 0 0.54em 0.23em color-mix(in srgb, var(--fg) 10%, transparent), 0 0.76em 0.29em transparent, 0 1.00em 0.35em transparent, 0 0 6px var(--glow); } 100% { text-shadow: 0 0.16em 0.16em transparent, 0 0.34em 0.22em transparent, 0 0.54em 0.28em transparent, 0 0.76em 0.34em transparent, 0 1.00em 0.40em transparent, 0 0 6px var(--glow); } } body[data-crt="on"][data-glow="on"] .line.fresh { animation: phosphor-smear 900ms cubic-bezier(0.32, 0, 0.67, 0); } /* Wer die Bewegung im Betriebssystem abbestellt hat, bekommt sie auch hier * nicht — das ist kein Effekt, auf den jemand verzichten muesste. */ @media (prefers-reduced-motion: reduce) { body[data-crt="on"][data-glow="on"] .line.fresh { animation: none; } }