/* css/scene.css — сквозной фон аркадного зала (пол + корпус), без «неонового клипа». */

.background-layer,
.decor-layer,
.taymi-layer {
  pointer-events: none;
  user-select: none;
}

.background-layer {
  position: fixed;
  inset: 0;
  z-index: var(--z-background);
  overflow: hidden;
  background-color: var(--color-bg);
}

/* Лёгкая фосфорная виньетка CRT, не фиолетовое облако */
.background-layer__glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 100% 85% at 50% 42%, transparent 40%, rgba(0, 0, 0, 0.55) 88%),
    radial-gradient(ellipse 70% 50% at 50% 108%, rgba(30, 42, 28, 0.35), transparent 52%);
  opacity: 1;
  animation: pt-bg-glow-drift 32s ease-in-out infinite alternate;
}

/* Пол аркады: перспективная сетка, приглушённые линии */
.background-layer__grid {
  position: absolute;
  left: -55%;
  right: -55%;
  top: -8%;
  bottom: -50%;
  transform-origin: 50% 0%;
  transform: perspective(380px) rotateX(74deg) scale(1.28);
  background-image:
    linear-gradient(rgba(82, 92, 78, 0.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(72, 82, 72, 0.14) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse 58% 48% at 50% 38%, #000 18%, transparent 70%);
  opacity: 0.55;
  animation: pt-grid-scroll 26s linear infinite;
}

/* Едва заметные блики (не magenta/cyan споты) */
.background-layer__leak {
  position: absolute;
  width: min(48vw, 360px);
  height: min(100vh, 720px);
  filter: blur(48px);
  opacity: 0.12;
  mix-blend-mode: overlay;
}

.background-layer__leak--cyan {
  left: -6%;
  top: 22%;
  background: radial-gradient(circle at 45% 45%, rgba(140, 160, 140, 0.5), transparent 62%);
  animation: pt-leak-float-a 22s ease-in-out infinite;
}

.background-layer__leak--magenta {
  right: -10%;
  bottom: 0%;
  background: radial-gradient(circle at 50% 55%, rgba(90, 72, 92, 0.45), transparent 58%);
  animation: pt-leak-float-b 26s ease-in-out infinite;
}

.decor-layer {
  position: fixed;
  inset: 0;
  z-index: var(--z-decor);
  overflow: hidden;
}

/* Рамка автомата по краям viewport */
.decor-layer__side {
  position: absolute;
  top: 10%;
  bottom: 12%;
  width: 8px;
  border-radius: 0;
  opacity: 0.85;
  background: linear-gradient(
    180deg,
    var(--arcade-bezel-outer),
    var(--arcade-bezel-mid) 35%,
    #1a1828 70%,
    var(--arcade-bezel-outer)
  );
  box-shadow:
    inset 2px 0 0 rgba(255, 255, 255, 0.04),
    inset -2px 0 0 rgba(0, 0, 0, 0.5);
  animation: pt-side-drift 18s ease-in-out infinite alternate;
}

.decor-layer__side--left {
  left: max(4px, env(safe-area-inset-left, 0px));
}

.decor-layer__side--right {
  right: max(4px, env(safe-area-inset-right, 0px));
  animation-delay: -6s;
}

@keyframes pt-side-drift {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(0, -16px, 0);
  }
}

.decor-layer__scan-beam {
  position: absolute;
  left: -20%;
  width: 140%;
  height: 3px;
  top: 28%;
  background: rgba(95, 255, 143, 0.06);
  opacity: 0.9;
  animation: pt-decor-scan 14s ease-in-out infinite;
}

.decor-layer__particles {
  position: absolute;
  inset: 0;
  opacity: 0.07;
  background-image:
    radial-gradient(circle at 10% 30%, rgba(255, 255, 255, 0.35) 0 1px, transparent 1.5px),
    radial-gradient(circle at 78% 62%, rgba(200, 200, 210, 0.25) 0 1px, transparent 1.5px);
  background-size: 240px 240px, 320px 280px;
  animation: pt-sparks-drift 6s steps(5, end) infinite;
}

/* ТЗ §15 glitch — редкие «срывы» строк разверстки, без постоянного шума */
.decor-layer__glitch {
  position: absolute;
  inset: -2%;
  pointer-events: none;
  opacity: 1;
  mix-blend-mode: soft-light;
  background:
    linear-gradient(
      90deg,
      rgba(255, 60, 180, 0.06),
      transparent 22%,
      rgba(60, 255, 200, 0.05),
      transparent 76%
    ),
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.04) 0 1px,
      transparent 1px 3px,
      rgba(0, 0, 0, 0.08) 3px 4px,
      transparent 4px 7px
    );
  animation: pt-glitch-burst 9s steps(1, end) infinite;
}

@keyframes pt-glitch-burst {
  0%,
  92%,
  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0) skewX(0deg);
    clip-path: inset(0 0 0 0);
    filter: hue-rotate(0deg);
  }
  92.8% {
    opacity: 0.55;
    transform: translate3d(-5px, 2px, 0) skewX(-2deg);
    clip-path: inset(12% 0 58% 0);
    filter: hue-rotate(90deg);
  }
  93.1% {
    opacity: 0.42;
    transform: translate3d(8px, -4px, 0) skewX(3deg);
    clip-path: inset(46% 0 28% 0);
    filter: hue-rotate(-70deg);
  }
  93.7% {
    opacity: 0;
    transform: translate3d(0, 0, 0) skewX(0deg);
    clip-path: inset(0 0 0 0);
    filter: hue-rotate(0deg);
  }
}

#app[data-screen="boot"] .decor-layer__particles {
  opacity: 0.12;
  animation-duration: 2.6s;
}

#app[data-screen="boot"] .background-layer__grid {
  opacity: 0.72;
  animation-duration: 16s;
}

@keyframes pt-bg-glow-drift {
  0% {
    transform: translate3d(-1%, 0, 0);
  }
  100% {
    transform: translate3d(1%, 0, 0);
  }
}

@keyframes pt-grid-scroll {
  from {
    background-position: 0 0, 0 0;
  }
  to {
    background-position: 0 400px, 40px 40px;
  }
}

@keyframes pt-leak-float-a {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(7%, -5%, 0);
  }
}

@keyframes pt-leak-float-b {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(-7%, 6%, 0);
  }
}

@keyframes pt-decor-scan {
  0%,
  100% {
    transform: translate3d(-4%, 0, 0);
    opacity: 0.25;
  }
  50% {
    transform: translate3d(4%, 22vh, 0);
    opacity: 0.65;
  }
}

@keyframes pt-sparks-drift {
  0% {
    transform: translate3d(0, 0, 0);
  }
  33% {
    transform: translate3d(-22px, 14px, 0);
  }
  66% {
    transform: translate3d(20px, -18px, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .background-layer__glow,
  .background-layer__grid,
  .background-layer__leak,
  .decor-layer__scan-beam,
  .decor-layer__particles,
  .decor-layer__glitch,
  .decor-layer__side {
    animation: none !important;
  }

  .decor-layer__glitch {
    opacity: 0 !important;
    visibility: hidden;
  }

  .decor-layer__particles {
    opacity: 0.04;
  }

  .background-layer__grid {
    opacity: 0.35;
  }
}