/* ══════════════════════════════════════════════════════════════
   CRT MONITOR SYSTEM — ATHENA 2327 WIKI
   Single viewport-locked wrapper. All layers inside.
   Content scrolls beneath. No transform on the fixed element.
   ══════════════════════════════════════════════════════════════ */


/* ── WRAPPER — fixed to viewport, completely click-through ── */
#crt-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9999;
}


/* SCANLINES + DOT MATRIX — drawn by canvas in crt.js (no DPI gradient drift on Windows scaling) */

/* ── VIGNETTE — edge darkening ── */
#crt-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 50% 50%,
    transparent 45%,
    rgba(0, 0, 25, 0.38) 100%
  );
}


/* ── REFRESH RATE SWEEP — electron beam at 60Hz ── */
.crt-refresh {
  position: absolute;
  left: 0;
  right: 0;
  height: 4%;
  min-height: 22px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(70, 130, 255, 0.03) 30%,
    rgba(80, 145, 255, 0.055) 50%,
    rgba(70, 130, 255, 0.03) 70%,
    transparent 100%
  );
  animation: crt-refresh-sweep 0.08s linear infinite;
}

@keyframes crt-refresh-sweep {
  0%   { top: -5%; }
  100% { top: 108%; }
}


/* ── SCREEN GLARE — phosphor glass reflection ── */
.crt-glare {
  position: absolute;
  top: -8%;
  left: -5%;
  width: 60%;
  height: 50%;
  background: radial-gradient(
    ellipse at 30% 25%,
    rgba(160, 210, 255, 0.045) 0%,
    rgba(80, 130, 255, 0.022) 40%,
    transparent 70%
  );
  transform: rotate(-12deg);
}


/* ── MONITOR BEZEL — physical CRT frame inset from all edges ── */
.crt-bezel {
  position: absolute;
  inset: 0;
  border: clamp(6px, 1.4vw, 16px) solid #08080e;
  border-radius: clamp(4px, 0.9vw, 10px);
  box-shadow:
    inset 0 0 0 1px #151526,
    inset 0 0 0 2px #08080e,
    inset 0 0 60px rgba(30, 60, 200, 0.10),
    inset 0 0 20px rgba(20, 50, 200, 0.12);
}


/* ── SCREEN FLICKER — dims whole display on pulse, last in DOM ── */
.crt-screen-flicker {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  animation: crt-screen-flicker 7s steps(1, end) infinite;
}

@keyframes crt-screen-flicker {
  0%, 82%, 100% { opacity: 0; }
  83%  { opacity: 0.10; }
  84%  { opacity: 0; }
  85%  { opacity: 0.22; }
  86%  { opacity: 0.05; }
  87%  { opacity: 0; }
}

/* Legacy class — retained for compatibility */
.crt-flicker { animation: none; }


/* ── REDACTED PLACEHOLDER ── */
.entity-image--redacted {
  position: relative;
  overflow: hidden;
  width: 200px;
  height: 260px;
  background: #060608;
  border: 1px solid var(--color-border-bright);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.entity-image__label {
  position: relative;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--color-blue);
}


/* ── CLICK FLASH — visual feedback on interaction ── */
@keyframes crt-click-flash {
  0%   { filter: brightness(1.6); }
  100% { filter: brightness(1); }
}

.crt-click-flash {
  animation: crt-click-flash 0.14s ease-out;
}


/* ── MOBILE — keep vignette + flicker, drop bezel + glare ── */
@media (max-width: 639px) {
  .crt-bezel, .crt-glare { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .crt-screen-flicker { animation: none; }
  .crt-refresh { display: none; }
}