/* Isolated moving-grid treatment for /test/old only. */

html.portfolio-old-grid {
  --old-grid-fine: rgba(8, 78, 168, 0.16);
  --old-grid-major: rgba(8, 104, 255, 0.24);
}

html.portfolio-old-grid .section::after {
  content: "";
  display: block;
  position: absolute;
  inset: -240px;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(var(--old-grid-fine) 1px, transparent 1px),
    linear-gradient(90deg, var(--old-grid-fine) 1px, transparent 1px),
    linear-gradient(var(--old-grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--old-grid-major) 1px, transparent 1px);
  background-size: 48px 48px, 48px 48px, 240px 240px, 240px 240px;
  transform: translate3d(0, 0, 0);
  animation: old-grid-drift 12s linear infinite;
  will-change: transform;
}

@keyframes old-grid-drift {
  to {
    transform: translate3d(240px, 240px, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  html.portfolio-old-grid .section::after {
    animation: none;
    transform: none;
    will-change: auto;
  }
}

@media (prefers-contrast: more) {
  html.portfolio-old-grid {
    --old-grid-fine: rgba(5, 46, 99, 0.22);
    --old-grid-major: rgba(8, 104, 255, 0.32);
  }
}