.bg-fx {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.bg-fx canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.42;
}

.bg-fx__shimmer {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    105deg,
    transparent 36%,
    rgba(30, 144, 255, 0.035) 42%,
    rgba(143, 119, 255, 0.055) 50%,
    rgba(255, 139, 84, 0.035) 58%,
    transparent 64%
  );
  background-size: 260% 100%;
  animation: bg-shimmer 16s ease-in-out infinite;
}

.bg-fx__vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(ellipse 90% 70% at 50% 40%, transparent 25%, rgba(7, 7, 17, 0.55) 100%),
    linear-gradient(180deg, rgba(7, 7, 17, 0.35) 0%, transparent 18%, transparent 82%, rgba(7, 7, 17, 0.5) 100%);
}

@keyframes bg-shimmer {
  0%, 100% { background-position: 130% 0; }
  50% { background-position: -130% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .bg-fx__shimmer { animation: none; }
  .bg-fx canvas { opacity: 0.22; }
}

nav, main, footer {
  position: relative;
  z-index: 1;
}