/* ============================================================
   CRT SCREEN EFFECTS
   Authentic Minitel CRT: cyan phosphor, scanlines, curvature
   ============================================================ */

/* Screen base - deep CRT recess with cyan ambient glow */
.minitel-screen {
  border-radius: var(--screen-radius, 10px);
  box-shadow:
    inset 0 0 0 1px rgba(5, 18, 18, 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -3px 10px rgba(0, 0, 0, 0.55),
    inset 0 0 40px rgba(0, 0, 0, 0.6),
    /* Phosphor ambient glow leaking from screen */
    0 0 30px rgba(48, 255, 255, 0.06),
    0 0 90px rgba(48, 255, 255, 0.035),
    0 0 140px rgba(48, 255, 255, 0.02);
}

/* Darker bezel edge to ground the screen */
.minitel-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.08) 0%,
      rgba(255, 255, 255, 0.02) 12%,
      rgba(0, 0, 0, 0) 78%,
      rgba(0, 0, 0, 0.35) 100%
    ),
    radial-gradient(
      140% 120% at 50% 0%,
      rgba(255, 255, 255, 0.08) 0%,
      rgba(255, 255, 255, 0) 55%
    ),
    radial-gradient(
      140% 120% at 50% 100%,
      rgba(0, 0, 0, 0.45) 0%,
      rgba(0, 0, 0, 0) 60%
    );
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 0 26px rgba(0, 0, 0, 0.4),
    inset 0 -16px 34px rgba(0, 0, 0, 0.55);
}

/* Scanlines */
.crt-scanlines {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  border-radius: inherit;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 2px,
    rgba(0, 0, 0, 0.16) 2px,
    rgba(0, 0, 0, 0.16) 3px
  );
}

/* Scanning bar */
.crt-scanline-bar {
  position: absolute;
  left: 0;
  right: 0;
  height: 6px;
  z-index: 11;
  pointer-events: none;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(48, 255, 255, 0.02) 30%,
    rgba(48, 255, 255, 0.035) 50%,
    rgba(48, 255, 255, 0.02) 70%,
    transparent 100%);
  animation: scanbar 7s linear infinite;
}

@keyframes scanbar {
  0%   { top: -6px; }
  100% { top: 100%; }
}

/* Vignette - very subtle CRT edge darkening */
.crt-vignette {
  position: absolute;
  inset: 0;
  z-index: 12;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(
    ellipse 90% 85% at 50% 50%,
    transparent 66%,
    rgba(0, 6, 6, 0.26) 100%
  );
}

/* Gentle bottom edge shading to seat the screen above the keyboard */
.crt-vignette::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 16%;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.35) 100%
  );
}

/* Glass reflection - disabled (caused visual artifact) */

/* Subtle flicker */
.minitel-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 13;
  pointer-events: none;
  border-radius: inherit;
  animation: flicker 0.12s infinite;
  opacity: 0;
}

@keyframes flicker {
  0%   { opacity: 0; background: rgba(48, 255, 255, 0.005); }
  50%  { opacity: 1; background: rgba(48, 255, 255, 0.01); }
  100% { opacity: 0; background: rgba(48, 255, 255, 0.005); }
}

/* Screen warm-up */
.minitel-screen.warming-up {
  animation: screen-warmup 1.2s ease-out forwards;
}

@keyframes screen-warmup {
  0%   { filter: brightness(0) saturate(0); }
  20%  { filter: brightness(0.2) saturate(0.3); }
  60%  { filter: brightness(0.7) saturate(0.8); }
  100% { filter: brightness(1) saturate(1); }
}

/* Turn-on flash */
.minitel-screen.flash-on .crt-vignette::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 20;
  background: rgba(48, 255, 255, 0.08);
  animation: flash-fade 0.3s ease-out forwards;
  pointer-events: none;
  border-radius: inherit;
}

@keyframes flash-fade {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

/* ---- REDUCED MOTION ---- */
@media (prefers-reduced-motion: reduce) {
  .crt-scanline-bar { animation: none; display: none; }
  .minitel-screen::before { animation: none; display: none; }
  .minitel-screen.warming-up { animation: none; filter: brightness(1); }
  .minitel-screen.flash-on .crt-vignette::after { animation: none; display: none; }
  .crt-scanlines { opacity: 0.3; }
}