/* =====================================================================
   THUGS(red) BBS - CRT monitor effects
   Layers live inside #glass, above .term. Toggled by #btn-crt / config.
   ===================================================================== */

#glass > [id^="fx-"] {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  border-radius: var(--glass-radius);
  overflow: hidden;
}

/* scanlines --------------------------------------------------------- */
#fx-scanlines {
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,calc(.22 * var(--crt-intensity))) 3px,
    rgba(0,0,0,calc(.22 * var(--crt-intensity))) 3px
  );
  mix-blend-mode: multiply;
  opacity: .9;
}

/* aperture-grille RGB shimmer */
#fx-scanlines::after {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    to right,
    rgba(255,0,0,.06) 0, rgba(255,0,0,.06) 1px,
    rgba(0,255,0,.04) 1px, rgba(0,255,0,.04) 2px,
    rgba(0,0,255,.06) 2px, rgba(0,0,255,.06) 3px
  );
  mix-blend-mode: screen;
}

/* vignette + glass curvature shading ------------------------------- */
#fx-vignette {
  background:
    radial-gradient(ellipse at 50% 45%,
      rgba(0,0,0,0) 55%,
      rgba(0,0,0,.35) 82%,
      rgba(0,0,0,.75) 100%);
  box-shadow:
    inset 0 0 6vmin 2vmin rgba(0,0,0,.55);
}

/* phosphor bloom -------------------------------------------------- */
#fx-glow {
  background: radial-gradient(ellipse at 50% 42%,
    rgba(120,255,190,calc(.05 * var(--crt-intensity))) 0%,
    rgba(0,0,0,0) 70%);
  mix-blend-mode: screen;
}

/* flicker ------------------------------------------------------------ */
#fx-flicker {
  background: rgba(120,255,190,.02);
  mix-blend-mode: screen;
  animation: crt-flicker .13s steps(2) infinite;
}
@keyframes crt-flicker {
  0%   { opacity: .10; }
  50%  { opacity: .16; }
  100% { opacity: .11; }
}

/* rolling refresh bar --------------------------------------------- */
#fx-roll {
  background: linear-gradient(to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.035) 45%,
    rgba(255,255,255,.06) 50%,
    rgba(255,255,255,.035) 55%,
    rgba(255,255,255,0) 100%);
  height: 26%;
  animation: crt-roll 7s linear infinite;
  mix-blend-mode: screen;
}
@keyframes crt-roll {
  0%   { transform: translateY(-40%); }
  100% { transform: translateY(420%); }
}

/* power-on / power-off animation --------------------------------- */
.term { transition: filter .2s ease; }

#crt.powering-on #glass .term {
  animation: crt-power-on 1100ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes crt-power-on {
  0%   { transform: scale(1, .003); filter: brightness(6) blur(1px); opacity: 0; }
  8%   { transform: scale(1, .006); opacity: 1; }
  45%  { transform: scale(1.01, .02); filter: brightness(3); }
  70%  { transform: scale(1, 1); filter: brightness(1.4); }
  100% { transform: scale(1, 1); filter: brightness(1); }
}

#crt.powering-off #glass .term {
  animation: crt-power-off 420ms ease-in both;
}
@keyframes crt-power-off {
  0%   { transform: scale(1,1); filter: brightness(1); }
  60%  { transform: scale(1, .004); filter: brightness(8); }
  100% { transform: scale(.6, .001); filter: brightness(20); opacity: 0; }
}

/* de-gauss wobble on demand ------------------------------------- */
#crt.degauss #glass .term { animation: crt-degauss 700ms ease-out; }
@keyframes crt-degauss {
  0%   { filter: hue-rotate(0) saturate(3); transform: skewX(0); }
  20%  { filter: hue-rotate(30deg) saturate(4); transform: skewX(1.2deg) scale(1.01); }
  40%  { transform: skewX(-1deg) scale(.995); }
  70%  { transform: skewX(.4deg); }
  100% { filter: none; transform: none; }
}

/* ---------------------------------------------------------------------
   Interactive control panel: the two knobs and the power button are cut
   from the monitor photo and overlaid so they can turn / press for real.
   Coordinates are % of #crt, matched to media/images/monitor.png.
   --------------------------------------------------------------------- */
#panel { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
#panel > * { pointer-events: auto; }

.knob {
  position: absolute;
  width: 3.35%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%) rotate(var(--a, 20deg));
  border: 0;
  padding: 0;
  border-radius: 50%;
  background: url("/media/images/knob.png") center/100% 100% no-repeat;
  cursor: ns-resize;
  filter: brightness(.9) contrast(1.05);
  transition: filter .15s ease;
  touch-action: none;
}
.knob:hover   { filter: brightness(1.15) contrast(1.1); }
.knob:active  { filter: brightness(1.3); }
.knob:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

#knob-bright   { left: 71.9%; top: 83.4%; }
#knob-contrast { left: 78.3%; top: 83.3%; }

#power-btn {
  position: absolute;
  left: 65.3%;
  top: 83.3%;
  width: 2.6%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border: 0;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
}
#power-btn .led {
  width: 46%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #4a1114, #2a0a0c 70%);
  box-shadow: inset 0 0 3px #000;
  transition: background .3s ease, box-shadow .3s ease;
}
#crt.on #power-btn .led {
  background: radial-gradient(circle at 38% 32%, #ff7a7a, #d21f2f 55%, #6b0f16 100%);
  box-shadow: 0 0 10px 3px rgba(226,34,59,.75), inset 0 0 3px rgba(255,180,180,.6);
  animation: led-pulse 4s ease-in-out infinite;
}
#power-btn:active { transform: translate(-50%, -50%) scale(.92); }
@keyframes led-pulse { 50% { box-shadow: 0 0 14px 4px rgba(226,34,59,.95), inset 0 0 3px rgba(255,200,200,.7); } }

/* the knobs: BRIGHTNESS drives brightness, CONTRAST drives colour saturation
   (0 = a mono CRT in black & white, ~1 = normal, up to punchy) */
.term {
  filter: brightness(var(--user-brightness, 1)) saturate(var(--user-saturate, 1.05));
}
#crt.off #glass .term,
#crt.off #fx-scanlines,
#crt.off #fx-glow,
#crt.off #fx-roll { opacity: 0 !important; }
#crt.off #glass { background: #040507; }

/* FX master switch */
#crt.no-crt #fx-scanlines,
#crt.no-crt #fx-vignette,
#crt.no-crt #fx-glow,
#crt.no-crt #fx-flicker,
#crt.no-crt #fx-roll { display: none; }
#crt.no-crt .term { text-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  #fx-flicker, #fx-roll { animation: none; }
  #fx-flicker { opacity: .12; }
  #crt.powering-on #glass .term { animation: none; }
}

/* small screens: drop the heaviest blends for perf */
@media (max-width: 640px) {
  #fx-flicker, #fx-roll { display: none; }
}