/* Hochwertige, flüssige Matrix-Bewegung im Monitor */
.hero-art {
  --matrix-pan-x: 0px;
  --matrix-pan-y: 0px;
  transform: translate(calc(-50% + var(--matrix-pan-x)), calc(-50% + var(--matrix-pan-y))) scale(1.012);
  transition: transform .12s linear;
  will-change: transform;
}

.matrix-screen {
  opacity: .94;
  filter: saturate(1.18) contrast(1.08);
  box-shadow: inset 0 0 70px rgba(20, 255, 96, .16);
}

.matrix-screen::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0, rgba(255,255,255,.025) 1px, transparent 1px, transparent 4px),
    radial-gradient(circle at 52% 45%, rgba(69,255,129,.1), transparent 64%);
}

.matrix-screen::after {
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(83,255,139,.15), transparent);
  animation-duration: 3.8s;
}

.matrix-screen canvas {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .hero-art { transition: none; transform: translate(-50%, -50%); }
  .matrix-screen::after { animation: none; }
}

@media (max-width: 600px) {
  .hero-art {
    transform: translate(-50%, 0) scale(1) !important;
    transition: none;
  }

  .matrix-screen {
    filter: saturate(1.08) contrast(1.04);
    box-shadow: inset 0 0 35px rgba(20, 255, 96, .11);
  }
}