.scene--gravity-chaos .bubble { animation-duration: calc(var(--duration) * .62); }

.scene--gravity-down .bubble {
  animation-name: gravity-fall;
}

.scene--gravity-wind-left .bubble,
.scene--gravity-wind-right .bubble {
  top: var(--top);
  bottom: auto;
}

.scene--gravity-wind-left .bubble { animation-name: gravity-wind-left; }
.scene--gravity-wind-right .bubble { animation-name: gravity-wind-right; }

.gravity-chaos-label {
  position: absolute;
  z-index: 40;
  top: max(18px, env(safe-area-inset-top));
  left: 50%;
  margin: 0;
  padding: 9px 16px;
  transform: translateX(-50%);
  border: 1px solid rgb(255 255 255 / 32%);
  border-radius: 99px;
  background: rgb(255 255 255 / 10%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #fff;
  font-size: clamp(13px, 3.8vw, 16px);
  white-space: nowrap;
  pointer-events: none;
  animation: gravity-label 700ms ease-out both;
}

@keyframes gravity-fall {
  0% { transform: translate3d(-50%, -135vh, 0) scale(var(--scale)); opacity: 0; }
  8% { opacity: .92; }
  36% { transform: translate3d(calc(-50% - var(--sway) * .5), -92vh, 0) scale(calc(var(--scale) * 1.02)); }
  68% { transform: translate3d(calc(-50% + var(--sway)), -48vh, 0) scale(var(--scale)); opacity: .9; }
  100% { transform: translate3d(calc(-50% - var(--sway) * .25), 12vh, 0) scale(calc(var(--scale) * .92)); opacity: 0; }
}

@keyframes gravity-wind-left {
  0% { transform: translate3d(105vw, -50%, 0) scale(var(--scale)); opacity: 0; }
  8% { opacity: .92; }
  38% { transform: translate3d(50vw, calc(-50% + var(--sway)), 0) scale(var(--scale)); }
  70% { transform: translate3d(-20vw, calc(-50% - var(--sway) * .5), 0) scale(calc(var(--scale) * 1.04)); opacity: .9; }
  100% { transform: translate3d(-115vw, calc(-50% + var(--sway) * .25), 0) scale(var(--scale)); opacity: 0; }
}

@keyframes gravity-wind-right {
  0% { transform: translate3d(-115vw, -50%, 0) scale(var(--scale)); opacity: 0; }
  8% { opacity: .92; }
  38% { transform: translate3d(-45vw, calc(-50% - var(--sway)), 0) scale(var(--scale)); }
  70% { transform: translate3d(25vw, calc(-50% + var(--sway) * .5), 0) scale(calc(var(--scale) * 1.04)); opacity: .9; }
  100% { transform: translate3d(110vw, calc(-50% - var(--sway) * .25), 0) scale(var(--scale)); opacity: 0; }
}

@keyframes gravity-label {
  0% { opacity: 0; transform: translate(-50%, -10px) scale(.95); }
  25%, 75% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -5px) scale(.98); }
}

@media (prefers-reduced-motion: reduce) {
  .scene--gravity-chaos .bubble { animation-duration: calc(var(--duration) * 1.05); }
  .gravity-chaos-label { animation: none; }
}