/* ============================================================
   contextmaxx — bubbles.css
   The spa aesthetic. Rising bubble animation.
   PROTECTED — see ADR-012 in docs/DECISIONS.md before modifying.
   This is product identity, not decoration.
   ============================================================ */

.bubbles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.bubble {
  position: absolute;
  bottom: -80px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 32% 36%,
    rgba(255, 255, 255, 0.18),
    rgba(0, 212, 170, 0.06)
  );
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.08);
  will-change: transform, opacity;
  animation:
    bubble-rise  var(--rise-dur,  14s) var(--rise-delay,  0s) linear  infinite,
    bubble-sway  var(--sway-dur,   5s) var(--sway-delay,  0s) ease-in-out infinite alternate;
}

/* Shimmer overlay on each bubble */
.bubble::after {
  content: '';
  position: absolute;
  top: 18%;
  left: 22%;
  width: 28%;
  height: 28%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  filter: blur(2px);
}

@keyframes bubble-rise {
  0%   { transform: translateY(0);     opacity: 0; }
  5%   { opacity: 1; }
  90%  { opacity: 0.6; }
  100% { transform: translateY(-110vh); opacity: 0; }
}

@keyframes bubble-sway {
  0%   { margin-left: 0; }
  100% { margin-left: var(--sway-dist, 18px); }
}

/* --- Individual bubbles: position, size, timing ------------ */
/* Layout: varied left positions ensure good coverage without collision */

.b1  { left:  3%; width: 14px; height: 14px; --rise-dur: 12s; --rise-delay: -3s;  --sway-dur: 4.2s; --sway-dist:  12px; }
.b2  { left:  8%; width: 22px; height: 22px; --rise-dur: 18s; --rise-delay: -8s;  --sway-dur: 6.1s; --sway-dist:  20px; }
.b3  { left: 15%; width:  9px; height:  9px; --rise-dur:  9s; --rise-delay: -1s;  --sway-dur: 3.4s; --sway-dist:   8px; }
.b4  { left: 22%; width: 35px; height: 35px; --rise-dur: 22s; --rise-delay: -15s; --sway-dur: 7.3s; --sway-dist:  26px; }
.b5  { left: 28%; width: 12px; height: 12px; --rise-dur: 11s; --rise-delay: -6s;  --sway-dur: 5.0s; --sway-dist:  10px; }
.b6  { left: 35%; width: 18px; height: 18px; --rise-dur: 16s; --rise-delay: -12s; --sway-dur: 4.7s; --sway-dist:  16px; }
.b7  { left: 42%; width:  8px; height:  8px; --rise-dur:  8s; --rise-delay: -4s;  --sway-dur: 3.1s; --sway-dist:   6px; }
.b8  { left: 49%; width: 28px; height: 28px; --rise-dur: 20s; --rise-delay: -9s;  --sway-dur: 8.2s; --sway-dist:  24px; }
.b9  { left: 56%; width: 11px; height: 11px; --rise-dur: 10s; --rise-delay: -2s;  --sway-dur: 4.0s; --sway-dist:   9px; }
.b10 { left: 62%; width: 40px; height: 40px; --rise-dur: 25s; --rise-delay: -18s; --sway-dur: 9.4s; --sway-dist:  32px; }
.b11 { left: 68%; width: 16px; height: 16px; --rise-dur: 14s; --rise-delay: -7s;  --sway-dur: 5.5s; --sway-dist:  14px; }
.b12 { left: 74%; width:  7px; height:  7px; --rise-dur:  8s; --rise-delay: -5s;  --sway-dur: 3.0s; --sway-dist:   6px; }
.b13 { left: 80%; width: 24px; height: 24px; --rise-dur: 19s; --rise-delay: -11s; --sway-dur: 6.8s; --sway-dist:  20px; }
.b14 { left: 85%; width: 10px; height: 10px; --rise-dur: 10s; --rise-delay: -3s;  --sway-dur: 4.1s; --sway-dist:   8px; }
.b15 { left: 90%; width: 32px; height: 32px; --rise-dur: 23s; --rise-delay: -16s; --sway-dur: 7.9s; --sway-dist:  28px; }
.b16 { left: 12%; width: 45px; height: 45px; --rise-dur: 28s; --rise-delay: -20s; --sway-dur:10.2s; --sway-dist:  36px; }
.b17 { left: 38%; width:  6px; height:  6px; --rise-dur:  7s; --rise-delay: -1s;  --sway-dur: 2.9s; --sway-dist:   5px; }
.b18 { left: 55%; width: 20px; height: 20px; --rise-dur: 17s; --rise-delay: -13s; --sway-dur: 6.3s; --sway-dist:  18px; }
.b19 { left: 72%; width: 13px; height: 13px; --rise-dur: 11s; --rise-delay: -8s;  --sway-dur: 4.6s; --sway-dist:  11px; }
.b20 { left: 95%; width: 29px; height: 29px; --rise-dur: 21s; --rise-delay: -14s; --sway-dur: 8.7s; --sway-dist:  24px; }

/* Dim on reduced motion */
@media (prefers-reduced-motion: reduce) {
  .bubble { animation: none; opacity: 0.08; }
}