/* ---------- Bubble Tunnel scene (js/ui/scenes/bubble.js) ----------
   Full-screen backdrop behind the car and tray. Every animation is transform
   or opacity only so it stays cheap on the iPad Air 2. */
.scene.scene-bubble { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; z-index: 0; }
.scene-bubble-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* Brush rollers: the stripe band slides down one stripe period and loops. */
.scene-bubble-roller-spin { animation: scene-bubble-roll 0.6s linear infinite; }
@keyframes scene-bubble-roll { from { transform: translateY(0); } to { transform: translateY(80px); } }

/* Conveyor: stripes slide left one period (60 units) and loop. */
.scene-bubble-belt-scroll { animation: scene-bubble-belt 0.9s linear infinite; }
@keyframes scene-bubble-belt { from { transform: translateX(0); } to { transform: translateX(-60px); } }

/* Arch bulbs: pink layer blinks over the pale base, alternate bulbs in turn. */
.scene-bubble-bulb-base { fill: #fff6a8; }
.scene-bubble-bulb-on { fill: #ff8fd0; opacity: 0; animation: scene-bubble-blink 1s steps(1, end) infinite; }
.scene-bubble-bulb-on.b0 { animation-delay: 0.5s; }
@keyframes scene-bubble-blink { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 1; } }

/* flashLights(): three rainbow layers per bulb take turns very fast. */
.scene-bubble-bulb-flash { display: none; }
.scene-bubble.lights-flash .scene-bubble-bulb-flash { display: inline; }
.scene-bubble.lights-flash .scene-bubble-bulb-flash circle { opacity: 0; animation: scene-bubble-chase 0.36s steps(1, end) infinite; }
.scene-bubble.lights-flash .scene-bubble-bulb-flash .f1 { animation-delay: -0.12s; }
.scene-bubble.lights-flash .scene-bubble-bulb-flash .f2 { animation-delay: -0.24s; }
@keyframes scene-bubble-chase { 0% { opacity: 1; } 33.33% { opacity: 0; } 100% { opacity: 0; } }

/* Drain: a drop falls from the right roller, then a ripple spreads in the puddle. */
.scene-bubble-drop { animation: scene-bubble-drip 1.8s ease-in infinite; }
@keyframes scene-bubble-drip {
  0% { transform: translateY(0); opacity: 0; }
  10% { transform: translateY(0); opacity: 1; }
  55% { transform: translateY(230px); opacity: 1; }
  56%, 100% { transform: translateY(230px); opacity: 0; }
}
.scene-bubble-ripple {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: scene-bubble-ripple 1.8s ease-out infinite;
}
@keyframes scene-bubble-ripple {
  0%, 55% { transform: scale(0.3); opacity: 0; }
  58% { transform: scale(0.4); opacity: 0.9; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* Floating bubbles: the full-height float column rises past the top while
   the orb inside it sways side to side. */
.scene-bubble-float {
  position: absolute;
  top: 0;
  height: 100%;
  pointer-events: none;
  animation-name: scene-bubble-rise;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.scene-bubble-orb {
  position: absolute;
  top: 100%;
  left: 0;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.85);
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.95) 0 14%, rgba(255,255,255,0.15) 30%, rgba(255,160,230,0.25) 70%, rgba(120,210,255,0.35));
  animation-name: scene-bubble-sway;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes scene-bubble-rise { from { transform: translateY(0); } to { transform: translateY(calc(-100% - 90px)); } }
@keyframes scene-bubble-sway { from { transform: translateX(-20px); } to { transform: translateX(20px); } }

/* Hanging sign under the top beam, swaying from its strings. */
.scene-bubble-sign {
  position: absolute;
  top: max(64px, calc(env(safe-area-inset-top) + 56px));
  left: 0;
  right: 0;
  margin: 0 auto;
  width: max-content;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 18px;
  border: 5px solid var(--ink, #2b1b3d);
  border-radius: 999px;
  background: linear-gradient(90deg, #ff6fb5, #ff9f1c);
  color: #fff;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 0.5px;
  white-space: nowrap;
  text-shadow: 0 3px 0 var(--ink, #2b1b3d);
  box-shadow: 0 6px 0 rgba(43, 27, 61, 0.35);
  transform-origin: 50% -60px;
  animation: scene-bubble-sign-sway 3s ease-in-out infinite alternate;
}
.scene-bubble-sign::before, .scene-bubble-sign::after {
  content: '';
  position: absolute;
  bottom: 100%;
  width: 5px;
  height: 80px;
  background: var(--ink, #2b1b3d);
}
.scene-bubble-sign::before { left: 22%; }
.scene-bubble-sign::after { right: 22%; }
.scene-bubble-sign-dot { flex: none; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--ink, #2b1b3d); }
@keyframes scene-bubble-sign-sway { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }

@media (max-width: 700px), (max-height: 520px) {
  .scene-bubble-sign { font-size: 20px; padding: 6px 14px; }
}

/* PAUSE_SCENE_WHILE_STROKING: wash.js adds .paused while a finger is washing. */
.scene.scene-bubble.paused, .scene.scene-bubble.paused * { animation-play-state: paused; }