/* css/arcade.css — аркадный CRT-слой (ТЗ §15, §16), без потери читаемости */

.crt-stack {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: var(--z-crt);
  overflow: hidden;
}

.crt-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 95% 70% at 50% 45%, rgba(72, 96, 72, 0.07), transparent 62%),
    radial-gradient(ellipse 120% 55% at 50% 118%, rgba(0, 0, 0, 0.38), transparent 55%);
  mix-blend-mode: multiply;
  opacity: 1;
}

.crt-scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.42) 0 2px,
    transparent 2px 4px
  );
  opacity: 0.38;
  mix-blend-mode: multiply;
  animation: crt-scan-drift 10s linear infinite;
}

@keyframes crt-scan-drift {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(3px);
  }
}

.noise-overlay {
  position: absolute;
  inset: -35%;
  opacity: 0.075;
  background-image:
    radial-gradient(circle at 12% 20%, rgba(255, 255, 255, 0.35) 0 0.5px, transparent 1px),
    radial-gradient(circle at 82% 64%, rgba(0, 0, 0, 0.4) 0 0.5px, transparent 1px),
    radial-gradient(circle at 44% 88%, rgba(255, 255, 255, 0.22) 0 0.5px, transparent 1px);
  background-size: 130px 130px, 180px 180px, 95px 95px;
  animation: crt-noise-flicker 0.45s steps(5, end) infinite;
}

@keyframes crt-noise-flicker {
  0% {
    transform: translate3d(0, 0, 0);
  }
  25% {
    transform: translate3d(-2px, 1px, 0);
  }
  50% {
    transform: translate3d(2px, -1px, 0);
  }
  75% {
    transform: translate3d(1px, 2px, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

.crt-vignette {
  position: absolute;
  inset: 0;
  border-radius: 0;
  box-shadow:
    inset 0 0 min(200px, 38vw) rgba(0, 0, 0, 0.58),
    inset 0 0 3px rgba(0, 0, 0, 0.85);
}

.terminal-line {
  margin: 0 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: clamp(15px, 2.4vw, 17px);
  line-height: 1.55;
  letter-spacing: 0.02em;
  color: var(--color-green-term);
  text-shadow:
    1px 1px 0 rgba(0, 0, 0, 0.88),
    0 0 10px rgba(95, 255, 143, 0.12);
  overflow-wrap: anywhere;
  word-break: normal;
}

.terminal-line:last-child {
  margin-bottom: 0;
}

.terminal-line::before {
  content: "> ";
  color: var(--color-brand-soft);
}

.boot-hud {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-4);
}

.boot-lamps {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-6);
  border: 1px solid rgba(244, 243, 255, 0.14);
  border-radius: var(--radius-md);
  background: rgba(0, 0, 0, 0.42);
  box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.45), var(--glow-soft);
}

.lamp {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  opacity: 0.92;
  box-shadow: 0 0 14px currentColor;
  animation: pt-lamp-idle 1.35s ease-in-out infinite;
}

.lamp--r {
  color: #ff3e6c;
  background: radial-gradient(circle at 28% 28%, #fff6f9 0%, #ff3e6c 42%);
}

.lamp--y {
  color: #ffd23f;
  background: radial-gradient(circle at 28% 28%, #fffaf0 0%, #ffd23f 45%);
  animation-delay: 0.18s;
}

.lamp--g {
  color: #58ffa9;
  background: radial-gradient(circle at 28% 28%, #f0fff8 0%, #58ffa9 45%);
  animation-delay: 0.36s;
}

.lamp--m {
  color: #ff3ea5;
  background: radial-gradient(circle at 28% 28%, #fff5fb 0%, #ff3ea5 46%);
  animation-delay: 0.54s;
}

/* ТЗ §8.5 / §14 — лампы на расчёте мигают быстрее */
#screen-boot.screen--boot-active .lamp {
  animation-duration: 0.42s;
}

@keyframes pt-lamp-idle {
  0%,
  100% {
    opacity: 0.45;
    filter: brightness(0.72);
  }
  50% {
    opacity: 1;
    filter: brightness(1.18);
  }
}

/* Boot: подсветка лампы по строке терминала */
#screen-boot.screen--boot-active .boot-lamps[data-active="0"] .lamp:not(.lamp--r),
#screen-boot.screen--boot-active .boot-lamps[data-active="1"] .lamp:not(.lamp--y),
#screen-boot.screen--boot-active .boot-lamps[data-active="2"] .lamp:not(.lamp--g),
#screen-boot.screen--boot-active .boot-lamps[data-active="3"] .lamp:not(.lamp--m) {
  opacity: 0.38;
  filter: brightness(0.62);
  animation: none;
}

#screen-boot.screen--boot-active .boot-lamps[data-active="0"] .lamp--r,
#screen-boot.screen--boot-active .boot-lamps[data-active="1"] .lamp--y,
#screen-boot.screen--boot-active .boot-lamps[data-active="2"] .lamp--g,
#screen-boot.screen--boot-active .boot-lamps[data-active="3"] .lamp--m {
  opacity: 1;
  filter: brightness(1.35);
  animation: pt-lamp-boot-pulse 0.52s steps(4, end);
}

@keyframes pt-lamp-boot-pulse {
  0%,
  100% {
    transform: scale(1);
    filter: brightness(1.35);
  }
  50% {
    transform: scale(1.08);
    filter: brightness(1.55);
  }
}

@media (prefers-reduced-motion: reduce) {
  .crt-scanlines {
    animation: none;
    opacity: 0.22;
  }

  .noise-overlay {
    animation: none;
    opacity: 0.028;
  }

  .lamp {
    animation: none;
    opacity: 0.85;
  }

  #screen-boot.screen--boot-active .boot-lamps[data-active] .lamp {
    animation: none !important;
    opacity: 0.85 !important;
    filter: none !important;
    transform: none !important;
  }
}