/* Scene specification implemented locally; keep the approved artwork still. */
.scene .scene-art {
  animation: none;
  transform: scale(1);
}

.scene::after { z-index: 2; }

.scene .arcade-chase {
  position: absolute;
  z-index: 1;
  display: block;
  overflow: hidden;
  pointer-events: none;
  opacity: .72;
  background: rgb(198 242 103 / 12%);
  box-shadow: 0 0 7px rgb(198 242 103 / 30%);
  border-radius: 1px;
}

.scene .arcade-chase::before {
  content: "";
  position: absolute;
  pointer-events: none;
  animation: arcade-chase-horizontal 2.2s linear infinite;
}

.scene .arcade-chase--ceiling {
  left: 6%;
  top: 8%;
  width: 23%;
  height: 4px;
}

.scene .arcade-chase--ceiling::before {
  inset: 0 0 0 -48px;
  background: repeating-linear-gradient(90deg,
    #d9ff91 0 12px, transparent 12px 24px,
    #fa5558 24px 36px, transparent 36px 48px);
}

.scene .arcade-chase--left {
  left: 3%;
  top: 35%;
  width: 4px;
  height: 29%;
}

.scene .arcade-chase--rear {
  left: 53%;
  top: 12%;
  width: 3px;
  height: 23%;
  opacity: .55;
}

.scene .arcade-chase--left::before,
.scene .arcade-chase--rear::before {
  inset: -48px 0 0;
  background: repeating-linear-gradient(180deg,
    #fa5558 0 12px, transparent 12px 24px,
    #d9ff91 24px 36px, transparent 36px 48px);
  animation-name: arcade-chase-vertical;
}

.scene .arcade-chase--left::before { animation-direction: reverse; }
.scene .arcade-chase--rear::before { animation-delay: -1.1s; }

/* One repeated segment travels per loop, so the wrap does not flash. */
@keyframes arcade-chase-horizontal {
  from { transform: translateX(0); }
  to { transform: translateX(48px); }
}

@keyframes arcade-chase-vertical {
  from { transform: translateY(0); }
  to { transform: translateY(48px); }
}

html[data-motion="paused"] .scene [data-scene-motion],
html[data-motion="hidden"] .scene [data-scene-motion],
html[data-motion="paused"] .scene [data-scene-motion]::before,
html[data-motion="hidden"] .scene [data-scene-motion]::before {
  animation-play-state: paused;
}

@media (max-width: 700px) {
  .scene .arcade-chase--ceiling {
    left: 8%;
    top: 18px;
    width: 24%;
    height: 3px;
  }

  .scene .arcade-chase--left {
    left: 3%;
    top: 92px;
    width: 3px;
    height: 124px;
  }

  .scene .arcade-chase--rear {
    left: auto;
    right: 4%;
    top: 58px;
    height: 126px;
  }
}