/**
 * CRT Terminal Emulator — Styles
 *
 * Phosphor green terminal with CRT effects.
 * Scanlines + vignette via CSS (no canvas overhead).
 * Barrel distortion hint via border-radius + perspective.
 */

/* --- Terminal wrapper --- */

.crt-terminal {
  --crt-bg: #0a0a0a;
  --crt-fg: #44ff44;
  --crt-glow: rgba(68, 255, 68, 0.25);
  --crt-border: #1a3a1a;
  --crt-bezel: #111;

  position: relative;
  margin: 1.5rem 0;
  background: var(--crt-bezel);
  border: 2px solid var(--crt-border);
  border-radius: 12px;
  overflow: hidden;

  /* Subtle outer glow — phosphor bleed */
  box-shadow:
    0 0 20px rgba(51, 255, 51, 0.08),
    0 0 60px rgba(51, 255, 51, 0.04),
    inset 0 0 30px rgba(0, 0, 0, 0.5);
}

/* --- Screen area --- */

.crt-screen {
  position: relative;
  background: var(--crt-bg);
  margin: 6px;
  border-radius: 8px;
  overflow: hidden;

  /* Slight barrel distortion hint */
  /* Perspective + rotateX creates subtle CRT curvature feel */
}

/* --- Canvas --- */

.crt-canvas {
  display: block;
  width: 100%;

  /* No CSS filter — canvas text must stay sharp for readability */
}

/* --- Scanline overlay (CSS-driven, no canvas perf cost) --- */

.crt-scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    rgba(0, 0, 0, 0.04) 2px,
    rgba(0, 0, 0, 0.04) 4px
  );
  z-index: 2;
}

/* --- Vignette overlay --- */

.crt-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    transparent 60%,
    rgba(0, 0, 0, 0.12) 85%,
    rgba(0, 0, 0, 0.3) 100%
  );
  z-index: 3;
}

/* --- Occasional flicker animation --- */

@keyframes crt-flicker {
  0%, 97%, 100% { opacity: 1; }
  97.5% { opacity: 0.92; }
  98% { opacity: 1; }
  98.5% { opacity: 0.96; }
  99% { opacity: 1; }
}

.crt-screen {
  animation: crt-flicker 8s infinite;
}

/* --- Subtle CRT power-on flash --- */

@keyframes crt-power-on {
  0% {
    filter: brightness(3) saturate(0);
    transform: scaleY(0.01);
  }
  20% {
    filter: brightness(2) saturate(0.5);
    transform: scaleY(0.5);
  }
  40% {
    filter: brightness(1.5) saturate(0.8);
    transform: scaleY(1.02);
  }
  60% {
    filter: brightness(1.1);
    transform: scaleY(0.99);
  }
  100% {
    filter: brightness(1);
    transform: scaleY(1);
  }
}

.crt-terminal {
  animation: crt-power-on 0.8s ease-out;
}

/* --- Controls bar --- */

.crt-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #0d0d0d;
  border-top: 1px solid var(--crt-border);
  font-family: "SF Mono", "Fira Code", "Cascadia Code", monospace;
  font-size: 11px;
}

.crt-btn {
  background: transparent;
  border: 1px solid var(--crt-border);
  color: var(--crt-fg);
  font-family: inherit;
  font-size: 11px;
  padding: 4px 10px;
  cursor: pointer;
  border-radius: 3px;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.crt-btn:hover {
  background: rgba(51, 255, 51, 0.08);
  border-color: var(--crt-fg);
}

.crt-btn:active {
  background: rgba(51, 255, 51, 0.15);
}

.crt-status {
  color: #1a7a1a;
  margin-left: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Responsive --- */

@media (max-width: 640px) {
  .crt-terminal {
    margin: 1rem -0.5rem;
    border-radius: 8px;
  }

  .crt-controls {
    flex-wrap: wrap;
  }

  .crt-status {
    width: 100%;
    margin-left: 0;
    margin-top: 4px;
  }
}

/* --- Scrollbar hint (shows scrollable area) --- */

.crt-screen {
  cursor: ns-resize;
}

/* --- Print: hide terminal, show original --- */

@media print {
  .crt-terminal {
    display: none !important;
  }
}