/* Reusable floating dot background (footer-like, no grid) */
.dots-layer{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  overflow: visible;
}

.dots-item{ position: absolute; }
.dots-item--a{ left: 6%; top: 2%; }
.dots-item--b{ right: 2%; top: -16%; }
.dots-item--c{ left: 60%; top: 18%; transform: translateX(-50%); }
.dots-item--d{ left: 10%; top: 52%; }
.dots-item--e{ right: 18%; top: 58%; }
.dots-item--f{ left: 24%; top: 64%; }
.dots-item--g{ left: 32%; top: -2%; }
.dots-item--h{ left: 32%; top: 44%; }
.dots-item--i{ left: 50%; top: 74%; transform: translateX(-50%); }

.dots-blob{
  border-radius: 9999px;
  background:
    radial-gradient(circle at 35% 30%,
      color-mix(in srgb, var(--bubble-color) 70%, transparent 30%),
      color-mix(in srgb, var(--bubble-color) 25%, transparent 75%) 45%,
      transparent 70%);
  opacity: 0.45;
  mix-blend-mode: normal;
  filter: saturate(1.02) brightness(0.92);
  box-shadow:
    inset calc(var(--fx, 0px) * -0.6) calc(var(--fy, 0px) * -0.6) 22px rgba(255, 255, 255, 0.2),
    inset calc(var(--fx, 0px) * 0.8) calc(var(--fy, 0px) * 0.8) 32px rgba(0, 0, 0, 0.22),
    calc(var(--fx, 0px) * 0.6) calc(var(--fy, 0px) * 0.6) 22px rgba(0, 0, 0, 0.09);
  animation: none;
  -webkit-mask-image: radial-gradient(circle, #000 0 42%, transparent 100%);
  mask-image: radial-gradient(circle, #000 0 42%, transparent 100%);
}

 :root[data-theme="dark"] .dots-blob,
 :root.dark .dots-blob{
  opacity: 0.2;
  background:
    radial-gradient(circle at 35% 30%,
      color-mix(in srgb, var(--bubble-color) 48%, transparent 52%),
      transparent 65%);
  filter: saturate(1) brightness(1);
  mix-blend-mode: screen;
  border: 1px solid color-mix(in srgb, var(--bubble-color) 18%, transparent 82%);
  box-shadow: none;
  -webkit-mask-image: radial-gradient(circle, #000 0 50%, transparent 100%);
  mask-image: radial-gradient(circle, #000 0 50%, transparent 100%);
}

.dots-blob::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 30% 28%,
      rgba(255, 255, 255, 0.65),
      rgba(255, 255, 255, 0.18) 34%,
      rgba(255, 255, 255, 0) 52%),
    radial-gradient(circle at 72% 70%,
      rgba(255, 255, 255, 0.14),
      rgba(255, 255, 255, 0) 48%);
  mix-blend-mode: screen;
  pointer-events: none;
}

.dots-blob::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 30% 35%,
      rgba(255, 120, 200, 0.18),
      rgba(255, 120, 200, 0) 55%),
    radial-gradient(circle at 70% 40%,
      rgba(120, 220, 255, 0.18),
      rgba(120, 220, 255, 0) 58%),
    radial-gradient(circle at 55% 70%,
      rgba(120, 255, 180, 0.16),
      rgba(120, 255, 180, 0) 60%),
    radial-gradient(circle at 40% 75%,
      rgba(255, 210, 120, 0.16),
      rgba(255, 210, 120, 0) 62%);
  opacity: 0.28;
  filter: blur(12px);
  mix-blend-mode: screen;
  animation: bubble-spin 16s linear infinite reverse;
  pointer-events: none;
}

:root[data-theme="dark"] .dots-blob::before{ opacity: 0.4; }
:root[data-theme="dark"] .dots-blob::after{
  opacity: 0.95;
  filter: blur(14px);
}

.dots-blob--xl{ width: 320px; height: 320px; }
.dots-blob--lg{ width: 260px; height: 260px; }
.dots-blob--sm{ width: 130px; height: 130px; }
.dots-blob--xs{ width: 110px; height: 110px; }
.dots-blob--xxs{ width: 80px; height: 80px; }

.dots-blob--a{ --bubble-color: rgba(255, 130, 155, 0.98); }
.dots-blob--b{ --bubble-color: rgba(130, 230, 255, 0.98); }
.dots-blob--c{ --bubble-color: rgba(120, 255, 190, 1); opacity: 0.3; }
.dots-blob--d{ --bubble-color: rgba(255, 210, 120, 0.98); opacity: 0.35; }
.dots-blob--e{ --bubble-color: rgba(170, 140, 255, 0.98); opacity: 0.3; }
.dots-blob--f{ --bubble-color: rgba(120, 255, 210, 0.9); opacity: 0.28; }
.dots-blob--g{ --bubble-color: rgba(255, 160, 210, 0.9); opacity: 0.3; }
.dots-blob--h{ --bubble-color: rgba(120, 220, 255, 0.9); opacity: 0.3; }
.dots-blob--i{ --bubble-color: rgba(255, 210, 120, 0.9); opacity: 0.28; }

@media (max-width: 640px){
  .dots-item--c{ display: none; }
  .dots-item--d{ display: none; }
  .dots-item--f{ display: none; }
  .dots-item--h{ display: none; }
  .dots-item--i{ display: none; }
  .dots-item--a{ left: -30px; top: 18px; }
  .dots-item--b{ right: -40px; top: 100px; }
  .dots-blob--xl{ width: 260px; height: 260px; }
  .dots-blob--lg{ width: 210px; height: 210px; }
}

@keyframes bubble-spin{
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce){
  .dots-blob::after{ animation: none; }
}