/* #1640: фірмовий фон «атоми» лише з токенів: крапка 1px кожні 24px і акцентна 1,6px кожні 96px.
   Паралакс іде за камерою полотна на 0,5x; will-change лише під час пану; рух вимикає prefers-reduced-motion. */

.vy-atoms {
  background-image:
    radial-gradient(circle, var(--atom-dot-strong) 1.6px, transparent 2px),
    radial-gradient(circle, var(--atom-dot) 1px, transparent 1.4px);
  background-size: 96px 96px, 24px 24px;
}

.canvas-stage .canvas-viewport::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, var(--atom-dot-strong) 1.6px, transparent 2px),
    radial-gradient(circle, var(--atom-dot) 1px, transparent 1.4px);
  background-size: 96px 96px, 24px 24px;
  background-position:
    calc(var(--cam-x, 0px) * 0.5) calc(var(--cam-y, 0px) * 0.5),
    calc(var(--cam-x, 0px) * 0.5) calc(var(--cam-y, 0px) * 0.5);
}

.canvas-stage.is-panning .canvas-viewport::before {
  will-change: background-position;
}

@media (prefers-reduced-motion: reduce) {
  .canvas-stage .canvas-viewport::before {
    background-position: 0 0, 0 0;
  }
}