/* Approved small refinements: keep the card layout, reduce only mobile art. */
@media (max-width: 600px) {
  .project-atlas { width: 86px !important; height: 86px !important; }
}
@media (max-width: 370px) {
  .project-atlas { width: 70px !important; height: 70px !important; }
}

/* Sparse ambient highlights. No canvas, listeners, downloads or hit targets. */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: -30px 0;
  z-index: 2;
  pointer-events: none;
  user-select: none;
  background-repeat: no-repeat;
  opacity: .48;
  animation: netium-specks-drift 24s ease-in-out infinite alternate;
}
body::before {
  background-image:
    radial-gradient(circle at 7% 18%, #d6ff3899 0 1px, transparent 2.5px),
    radial-gradient(circle at 93% 32%, #d6ff3870 0 1.2px, transparent 3px),
    radial-gradient(circle at 17% 68%, #d6ff3890 0 .8px, transparent 2px),
    radial-gradient(circle at 86% 89%, #d6ff3880 0 1px, transparent 2.5px);
}
body::after {
  background-image:
    radial-gradient(circle at 39% 9%, #d6ff3860 0 .8px, transparent 2px),
    radial-gradient(circle at 68% 52%, #d6ff3860 0 1px, transparent 2.5px),
    radial-gradient(circle at 48% 93%, #d6ff3870 0 .8px, transparent 2px);
  animation-duration: 31s;
  animation-delay: -11s;
}
@keyframes netium-specks-drift {
  from { transform: translate3d(0, 12px, 0); }
  to { transform: translate3d(6px, -12px, 0); }
}
@media (max-width: 600px) {
  body::after { display: none; }
  body::before { opacity: .35; animation-duration: 30s; }
}
@media (prefers-reduced-motion: reduce), (forced-colors: active) {
  body::before, body::after { display: none; animation: none; }
}