body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background-image: url("/assets/background_dashboard.png");
  background-size: var(--bg-size, cover);
  background-position: calc(50% + var(--bg-x, 0px)) calc(0% + var(--bg-y, 0px));
  background-repeat: no-repeat;
  filter: url(#water-ripple);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(15, 15, 15, 0) 0%,
    rgba(15, 15, 15, 0) 14%,
    rgba(15, 15, 15, 0.55) 42%,
    rgba(15, 15, 15, 0.78) 100%
  );
}

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

.bg-shimmer-layer {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  mix-blend-mode: soft-light;
  opacity: 0.55;
  background-image:
    radial-gradient(circle at 30% 20%, rgba(150, 190, 255, 0.35), transparent 55%),
    radial-gradient(circle at 75% 70%, rgba(255, 200, 230, 0.3), transparent 55%);
  background-size: 180% 180%, 200% 200%;
  animation: shimmer-drift 18s ease-in-out infinite;
}

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

@keyframes twinkle {
  0%, 100% { opacity: 0.15; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.15); }
}

.bg-particle {
  position: absolute;
  border-radius: 50%;
  background: rgba(236, 234, 229, 0.35);
  filter: blur(1px);
  will-change: transform;
}

.bg-particle--glitter {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.9), rgba(180, 210, 255, 0.25) 60%, transparent 75%);
  filter: blur(2px);
  animation: twinkle 3.2s ease-in-out infinite;
}