/* KAMRADEK/OS — Modul CRT: Monitor-Gehäuse, Glas-Ebenen, Scanlines, Flicker/Glitch.
   Die Röhrenform ist reine CSS-Illusion (kein Pixel-Warp). JS: crt.js (Glitch, Toggle). */

/* ---- Monochrom + abgedunkelte Hell-Stufe — NUR im CRT-Modus (CRT-aus behält
   bewusst die Originalfarben, zwei getrennte Modi). Ein echter P1/P3-Monitor kennt
   nur EINE Farbe in Helligkeitsstufen; die helle Stufe wird zusätzlich gesättigt/
   abgedunkelt, damit sie klar als Farbe (nicht Weiß) lesbar ist.
   Spezifität 0,2,0 + spätere Quelle schlägt die Theme-Definitionen in tokens.css. */
:root[data-crt="on"] {
  --phos-bright: #80ff80;   /* P1: klar grün statt blass-weißlich */
  --amber: var(--phos-bright);
  --amber-dim: var(--phos-dim);
  --red: var(--phos-bright);
}
:root[data-theme="amber"][data-crt="on"] {
  --phos-bright: #ffcc80;   /* P3: klar bernstein */
}

@supports (color: color(display-p3 1 1 1)) {
  :root[data-crt="on"] { --phos-bright: color(display-p3 0.5 1 0.5); }
  :root[data-theme="amber"][data-crt="on"] { --phos-bright: color(display-p3 1 0.8 0.5); }
}

/* ---- Gehäuse (Bezel) ---- */

.crt-frame {
  --crt-pad: clamp(18px, 3vmin, 42px);    /* Bezel-Stärke oben/seitlich */
  --crt-chin: clamp(34px, 5.5vmin, 76px); /* breitere Unterkante: Typenschild + LED */
  padding: var(--crt-pad) var(--crt-pad) var(--crt-chin);
  background: linear-gradient(158deg, var(--bezel-hi) 0%, var(--bezel) 46%, var(--bezel-lo) 100%);
  /* Nur Schattenkanten unten/rechts fürs modellierte Plastik — keine helle
     Lichtkante oben (sonst weißer Streifen); Beige läuft bis an den Rand. */
  box-shadow:
    inset 0 -6px 7px -3px color-mix(in srgb, var(--bezel-lo) 65%, #000),
    inset -5px 0 7px -3px color-mix(in srgb, var(--bezel-lo) 65%, #000);
}

/* Chrom-Typenschild, unten mittig auf der Blende */
.crt-badge {
  position: absolute;
  left: 50%;
  bottom: calc(var(--crt-chin) / 2);
  transform: translate(-50%, 50%);
  font-family: system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-style: italic;                 /* 80er-Schräge */
  font-weight: 800;
  font-size: clamp(14px, 2.3vmin, 26px);
  letter-spacing: 0.1em;
  padding-left: 0.1em;
  /* Chrom mit horizontalen Rillen (repeating gradient = geriffeltes Metall) */
  background: repeating-linear-gradient(
    180deg,
    #ffffff 0px,
    #c9c9c9 1.5px,
    #6e6e6e 3px,
    #c9c9c9 4.5px
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.5)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5));
  pointer-events: none;
  user-select: none;
}

/* Physischer Power-Knopf links neben der LED — schaltet die CRT-Effekte.
   Eingedrückt (is-on) = an; den Status zeigt die separate LED, nicht der Button
   (sonst doppelte Anzeige). Das ⏻-Symbol bleibt geprägt/dunkel. */
.crt-power {
  position: absolute;
  right: clamp(46px, 7.5vmin, 96px);
  bottom: calc(var(--crt-chin) / 2);
  transform: translateY(50%);
  width: clamp(44px, 5.2vmin, 64px);
  height: clamp(26px, 3.2vmin, 40px);
  padding: 0;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  display: grid;
  place-items: center;
  /* Flach/bündig, aber klar gerahmt: innere Fuge + breitere äußere Fuge + heller
     Lippenrand setzen den Taster ab (kein nahtloser Übergang). Gedrückt versinkt er. */
  background: color-mix(in srgb, var(--bezel) 78%, var(--bezel-hi));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--bezel-lo) 72%, #000),   /* innere Fuge */
    0 0 0 2px color-mix(in srgb, var(--bezel-lo) 55%, #000),          /* äußere Fuge — breiterer Rand */
    0 0 0 3px color-mix(in srgb, var(--bezel-hi) 55%, var(--bezel)),  /* heller Lippenrand rahmt den Taster */
    inset 0 1px 0 rgba(255, 255, 255, 0.06);                         /* feine obere Innenkante */
}
.crt-power::before {
  content: "⏻";
  font-size: clamp(19px, 2.3vmin, 27px);
  line-height: 1;
  color: color-mix(in srgb, var(--bezel-lo) 55%, #000);
}
.crt-power:active,
.crt-power.is-on {
  box-shadow:
    inset 0 3px 6px -1px rgba(0, 0, 0, 0.85),                       /* reingedrückt = an; Fläche bleibt hell → Symbol sichtbar */
    inset 0 0 0 1px color-mix(in srgb, var(--bezel-lo) 60%, #000);  /* Fuge bleibt */
}

/* Power-LED rechts neben dem Power-Button, auf dessen Mittelhöhe.
   Monitor an = leuchtet in Phosphorfarbe (grün bzw. bernstein), Monitor aus = erloschen. */
.crt-frame::after {
  content: "";
  position: absolute;
  right: clamp(30px, 5vmin, 62px);
  bottom: calc(var(--crt-chin) / 2 - 4px);   /* auf Höhe der Button-Mitte, rechts daneben */
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--phos);
  box-shadow: 0 0 7px var(--phos-glow);
  transition: background 0.4s ease, box-shadow 0.4s ease;
}

/* Monitor aus: LED erlischt — dunkle, unbeleuchtete Linse, kein Glow.
   Kein Standby-Umfärben mehr (das wirkte auf dem Grünschirm als Fremdfarbe). */
html[data-power="off"] .crt-frame::after {
  background: color-mix(in srgb, var(--bezel-hi) 50%, #000);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.6);
}

/* ---- Monitor-Power (physischer Knopf) ----
   Aus = Schwarzbild; die darunterliegende UI scheint als schwache, „eingebrannte"
   Phosphor-Geister durch (radial ungleichmäßig = abgenutzte Röhre). Die Blende mit
   Badge/Knopf/LED bleibt sichtbar — die ist physisch. Der Effekt-Schalter CRT:ON
   ist davon unabhängig. Power wird nicht persistiert: pro Seitenaufruf ist an. */
.crt-poweroff {
  position: absolute;
  inset: 0;
  z-index: calc(var(--z-fx) + 1);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.55s ease;
  background: #020402;   /* Schwarzbild — ein Hauch Grün, wie tote Phosphorschicht */
}

html[data-power="off"] .crt-poweroff {
  opacity: 1;
  pointer-events: auto;
}

/* Röhre ist aus: aktive Effekte (Scanlines, Sync-Roll, Glas) verschwinden, und
   beim Ausblenden flackert/blinkt nichts mehr durch (sonst verrät's das Schwarzbild). */
html[data-power="off"] .crt-fx { display: none; }
html[data-power="off"] .crt-inner { text-shadow: none !important; }
html[data-power="off"] .crt-inner,
html[data-power="off"] .crt-inner *,
html[data-power="off"] .crt-inner *::before,
html[data-power="off"] .crt-inner *::after {
  animation: none !important;
}

/* Eingebrannt bleibt NUR das Logo — an der Default-Stelle des Logo-Stickers
   (right 4% / top 6% des Desktops + Taskbar-Höhe); dort steht es dauernd, dort
   brennt es ein. Entsättigt (grau) und extrem blass. */
html[data-power="off"] .crt-poweroff::after {
  content: "";
  position: absolute;
  right: 4%;
  top: calc(6% + 38px);
  width: 144px;
  height: 146px;
  background: url("/assets/img/logo.png") no-repeat center / contain;
  image-rendering: pixelated;
  /* Matt grün-grau (nicht leuchtend): unbeleuchtete P1-Phosphorschicht hat einen
     kalt-grünen Grau-Stich — nur ein Hauch Farbe, kein Eigenleuchten. */
  filter: grayscale(1) sepia(1) hue-rotate(65deg) saturate(1) brightness(0.8);
  opacity: 0.04;
}

/* Amber-Röhre (P3): eingebranntes Logo bernstein-grau statt grün-grau. */
html[data-theme="amber"][data-power="off"] .crt-poweroff::after {
  filter: grayscale(1) sepia(1) hue-rotate(-12deg) saturate(1) brightness(0.8);
}

/* Ausschalt-Glitch: grüner (Phosphor-)Blitz fällt zur Linie, dann zum Punkt, dann weg.
   Einschalten: derselbe Blitz rückwärts (Punkt → Vollbild), dann findet sich die
   Röhre kurz zitternd/wackelnd ein. `data-powering-on` setzt das JS nur bei Aus→An. */
@media (prefers-reduced-motion: no-preference) {
  html[data-power="off"] .crt-poweroff::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--phos);
    transform-origin: center center;
    animation: kos-crt-collapse 0.5s ease-out forwards;
  }

  html[data-powering-on] .crt-poweroff::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--phos);
    transform-origin: center center;
    animation: kos-crt-bloom 0.5s ease-out forwards;
  }

  /* Warmlauf-Zittern nach dem Bloom (!important schlägt den kos-flicker gleicher
     Spezifität, der weiter unten steht). */
  html[data-powering-on] .crt-inner {
    animation: kos-poweron-wobble 0.6s 0.45s ease-out !important;
  }
}

@keyframes kos-crt-collapse {
  0%   { opacity: 0;    transform: scaleY(1)    scaleX(1); }
  9%   { opacity: 0.85; transform: scaleY(1)    scaleX(1); }
  50%  { opacity: 0.9;  transform: scaleY(0.01) scaleX(1); }     /* zur dünnen Linie */
  82%  { opacity: 0.95; transform: scaleY(0.01) scaleX(0.12); }  /* dünnes, schmales Rechteck statt Klotz */
  100% { opacity: 0;    transform: scaleY(0.01) scaleX(0); }     /* Punkt → weg */
}

/* Einschalten: Punkt → dünne Linie → Vollbild, dann ausblenden (Bild bleibt). */
@keyframes kos-crt-bloom {
  0%   { opacity: 0.95; transform: scaleY(0.01) scaleX(0); }     /* Punkt */
  22%  { opacity: 0.95; transform: scaleY(0.01) scaleX(1); }     /* dünne Linie */
  60%  { opacity: 0.85; transform: scaleY(1)    scaleX(1); }     /* Vollbild */
  100% { opacity: 0;    transform: scaleY(1)    scaleX(1); }
}

/* Warmlauf: kurzer Vertikal-Roll + Sync-Wackeln + Helligkeitspumpen, dann ruhig. */
@keyframes kos-poweron-wobble {
  0%   { transform: translateY(-3px) skewX(0.7deg);   filter: brightness(1.4); }
  18%  { transform: translateY(3px)  skewX(-0.6deg);  filter: brightness(0.78); }
  36%  { transform: translateY(-2px) skewX(0.4deg);   filter: brightness(1.15); }
  54%  { transform: translateY(2px)  skewX(-0.25deg); filter: brightness(0.95); }
  72%  { transform: translateY(-1px) skewX(0.12deg);  filter: brightness(1.05); }
  100% { transform: translateY(0)    skewX(0);        filter: brightness(1); }
}

/* ---- Bildröhre ---- */

/* Gewölbtes Glas: elliptische Ecken + Innenschatten als Tiefen-Illusion.
   Bewusst dezenter als 50%/4% — sonst würde die Taskbar in den Ecken beschnitten. */
.crt-screen {
  border-radius: clamp(22px, 3.6vmin, 42px) / clamp(28px, 4.4vmin, 52px);
  /* Innerer Rahmen „tief", aus 4 gerichteten Wänden gebaut: Bevel als Border —
     oben Schatten, unten leicht heller, Seiten Zwischenstufen = 3D-Schräge in die
     Röhre. Keine helle Linie; außen füllt der flache Bezel bis in die Ecken. */
  border: clamp(13px, 2vmin, 25px) solid var(--bezel);
  border-top-color: color-mix(in srgb, var(--bezel-lo) 50%, #000);
  border-bottom-color: color-mix(in srgb, var(--bezel-hi) 55%, var(--bezel));
  border-left-color: var(--bezel-lo);
  border-right-color: var(--bezel-lo);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.65),                           /* dunkle Innenkante am Glas → Tiefe */
    inset 0 10px 22px -3px rgba(0, 0, 0, 0.88),                    /* tiefer Recess-Schatten oben (−30%) */
    inset 0 0 22px -2px rgba(0, 0, 0, 0.55),                       /* umlaufende Wanne */
    inset 0 0 clamp(24px, 6vmin, 70px) color-mix(in srgb, var(--bg-room) 60%, transparent); /* Vignette (kein Außen-Schlagschatten → versenkt statt aufgesetzt) */
}

/* Phosphor ist in der Röhrenmitte minimal heller */
html[data-crt="on"] .crt-screen {
  background: radial-gradient(
    130% 130% at 50% 44%,
    color-mix(in srgb, var(--phos-faint) 22%, var(--bg)) 0%,
    var(--bg) 60%
  );
}

/* ---- Phosphor-Glow + Flicker ---- */

/* text-shadow ohne Farbe = currentColor: Grün glüht grün, Bernstein bernstein */
html[data-crt="on"] .crt-inner {
  text-shadow: 0 0 4px;
  animation: kos-flicker 6.5s linear infinite;
}

@keyframes kos-flicker {
  0%, 100% { opacity: 1; }
  34% { opacity: 0.988; }
  50% { opacity: 0.997; }
  68% { opacity: 0.986; }
  84% { opacity: 0.994; }
}

/* ---- Effekt-Ebenen (in .crt-fx, pointer-events: none via base.css) ---- */

html[data-crt="off"] .crt-fx { display: none; }

/* EINE Scanline-Ebene: 3px-Raster, 1px sanft abgedunkelt */
.fx-scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0 2px,
    color-mix(in srgb, var(--bg-room) 32%, transparent) 2px 3px
  );
}

/* Sync-Roll: heller Balken wandert alle ~11s über die Röhre (CRT-Klassiker) */
.crt-fx::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -20%;
  height: 16%;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    color-mix(in srgb, var(--phos-bright) 5%, transparent) 55%,
    color-mix(in srgb, var(--phos-bright) 2%, transparent) 70%,
    transparent 100%
  );
  animation: kos-roll 11s linear infinite;
}

@keyframes kos-roll {
  from { transform: translateY(0); }
  to { transform: translateY(880%); }
}

/* EINE Vignette: Ecken dunkler, Mitte frei */
.fx-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    115% 115% at 50% 50%,
    transparent 55%,
    color-mix(in srgb, var(--bg-room) 30%, transparent) 84%,
    color-mix(in srgb, var(--bg-room) 62%, transparent) 100%
  );
}

/* Gewölbte Glasreflexion: breiter Schein + schmalerer Streif oben links */
.fx-glass {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      120% 85% at 16% 6%,
      color-mix(in srgb, var(--phos-bright) 6%, transparent) 0%,
      transparent 55%
    ),
    radial-gradient(
      45% 24% at 30% 5%,
      color-mix(in srgb, var(--phos-bright) 8%, transparent) 0%,
      transparent 72%
    );
}

/* Früher stand hier eine Drag-Pause (Glow+Flicker aus beim Ziehen) gegen
   Safari-Schlieren. Test hat gezeigt: Ursache war die inzwischen entfernte
   Röhren-Wölbung — ohne Warp keine Schlieren, Pause daher entfernt. */

/* ---- Glitch (Klasse setzt crt.js alle 20–45s für 150–350ms) ---- */

@keyframes kos-glitch {
  0% { transform: translateX(0); }
  15% { transform: translateX(-6px) skewX(-0.5deg); }
  32% { transform: translateX(4px); }
  54% { transform: translateX(-3px) skewX(0.4deg); }
  70% { transform: translateX(5px); }
  86% { transform: translateX(-2px); }
  100% { transform: translateX(0); }
}

html[data-crt="on"] #crt-inner.fx-glitch {
  animation:
    kos-flicker 6.5s linear infinite,
    kos-glitch 190ms steps(1, end) infinite;
}

/* Drag-Pause schlägt auch den Glitch (höhere Spezifität als die ID-Regel) */
html[data-dragging][data-crt="on"] #crt-inner.fx-glitch {
  animation: none;
}

/* ---- Seitenwechsel: Röhre kollabiert zur Leuchtzeile (transition.js) ---- */

html[data-navfx-out] .crt-inner {
  animation: kos-collapse 0.28s ease-in forwards;
}

html[data-navfx-in] .crt-inner {
  animation: kos-expand 0.35s ease-out;
}

@keyframes kos-collapse {
  0%   { transform: scaleY(1); filter: brightness(1); }
  55%  { filter: brightness(1.5); }
  100% { transform: scaleY(0.004); filter: brightness(2.6); }
}

@keyframes kos-expand {
  0%   { transform: scaleY(0.004); filter: brightness(2.6); }
  45%  { filter: brightness(1.6); }
  100% { transform: scaleY(1); filter: brightness(1); }
}

/* Lade-Zeile über der kollabierten Röhre */
#nav-fx {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-boot) + 10);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--phos-bright);
  text-shadow: 0 0 6px;
  letter-spacing: 1px;
  pointer-events: none;
}

#nav-fx::after {
  content: "█";
  margin-left: 6px;
  animation: kos-navblink 0.32s steps(1) infinite;
}

@keyframes kos-navblink { 50% { opacity: 0; } }

/* ---- Reduced Motion: Statik (Scanlines, Bezel, Vignette) bleibt ---- */

@media (prefers-reduced-motion: reduce) {
  html[data-crt="on"] .crt-inner,
  html[data-crt="on"] #crt-inner.fx-glitch {
    animation: none;
  }
  .crt-frame::after { transition: none; }
  .crt-fx::after { content: none; } /* Sync-Roll entfällt */
  html[data-navfx-out] .crt-inner,
  html[data-navfx-in] .crt-inner { animation: none; }
  #nav-fx { display: none; }
}

/* ---- Mobil: schmaler Bezel, Effekte am Viewport verankert ---- */

@media (max-width: 900px) {
  .crt-frame {
    --crt-pad: 8px;
    --crt-chin: 8px;
    padding: 8px;
    box-shadow: none;
  }
  .crt-badge, .crt-power { display: none; } /* kein Typenschild/Power-Knopf auf schmalem Rahmen */
  .crt-frame::after { display: none; } /* .crt-frame ist statisch — LED entfällt */
  .crt-screen {
    border-radius: 10px;
    box-shadow: none;
  }
  .crt-fx { position: fixed; } /* Seite scrollt, Glas/Vignette bleiben stehen */
}