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

.light {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  background: rgba(99, 102, 241, 0.5);
  box-shadow:
    0 0 25px 8px rgba(99, 102, 241, 0.4),
    0 0 60px 15px rgba(236, 72, 153, 0.25),
    0 0 100px 25px rgba(99, 102, 241, 0.1);
  top: 100vh;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.light:nth-child(2n) {
  background: rgba(236, 72, 153, 0.5);
  box-shadow:
    0 0 25px 8px rgba(236, 72, 153, 0.4),
    0 0 60px 15px rgba(99, 102, 241, 0.25),
    0 0 100px 25px rgba(236, 72, 153, 0.1);
}

.light:nth-child(3n) {
  background: rgba(20, 184, 166, 0.5);
  box-shadow:
    0 0 25px 8px rgba(20, 184, 166, 0.4),
    0 0 60px 15px rgba(99, 102, 241, 0.25),
    0 0 100px 25px rgba(20, 184, 166, 0.1);
}

[data-theme="light"] .light {
  background: rgba(99, 102, 241, 0.35);
  box-shadow:
    0 0 20px 6px rgba(99, 102, 241, 0.3),
    0 0 50px 12px rgba(236, 72, 153, 0.2),
    0 0 80px 20px rgba(99, 102, 241, 0.08);
}

[data-theme="light"] .light:nth-child(2n) {
  background: rgba(236, 72, 153, 0.35);
  box-shadow:
    0 0 20px 6px rgba(236, 72, 153, 0.3),
    0 0 50px 12px rgba(99, 102, 241, 0.2);
}

[data-theme="light"] .light:nth-child(3n) {
  background: rgba(20, 184, 166, 0.35);
  box-shadow:
    0 0 20px 6px rgba(20, 184, 166, 0.3),
    0 0 50px 12px rgba(99, 102, 241, 0.2);
}

.x1 { animation: floatUp 4s infinite linear; left: 10%; }
.x2 { animation: floatUp 7s infinite linear; left: 15%; transform: scale(1.6); }
.x3 { animation: floatUp 2.5s infinite linear; left: -15%; transform: scale(0.5); }
.x4 { animation: floatUp 4.5s infinite linear; left: -34%; transform: scale(1.2); }
.x5 { animation: floatUp 8s infinite linear; left: -57%; transform: scale(2.2); }
.x6 { animation: floatUp 3s infinite linear; left: -81%; transform: scale(0.8); }
.x7 { animation: floatUp 5.3s infinite linear; left: 37%; transform: scale(3.2); }
.x8 { animation: floatUp 4.7s infinite linear; left: 62%; transform: scale(1.7); }
.x9 { animation: floatUp 4.1s infinite linear; left: 85%; transform: scale(0.9); }

@keyframes floatUp {
  0%   { top: 110vh; opacity: 0; }
  10%  { opacity: 1; }
  50%  { top: 50vh; opacity: 0.7; }
  90%  { opacity: 1; }
  100% { top: -15vh; opacity: 0; }
}

@media (max-width: 768px) {
  .x2, .x5, .x7, .x9 { display: none; }
}