/**
 * Words in Bubbles — page-shell atmosphere (sky + floating orbs).
 * Play UI chrome lives in the Vite bundle (wib-pond / wib-bubble / etc.).
 */

:root {
  --wib-sky-top: #c4e4ff;
  --wib-sky-mid: #dde7ff;
  --wib-sky-bot: #f3e8ff;
}

body.wib-game-page,
body.wib-game-page #page,
body.wib-game-page .site,
body.wib-game-page .site-content,
body.wib-game-page .ast-container,
body.wib-game-page .entry-content,
.wib-page-shell,
.words-in-bubbles-host,
.words-in-bubbles-host #wib-root {
  background: linear-gradient(180deg, var(--wib-sky-top) 0%, var(--wib-sky-mid) 42%, var(--wib-sky-bot) 100%) !important;
}

.words-in-bubbles-host {
  position: relative;
  isolation: isolate;
}

.words-in-bubbles-host::before,
.words-in-bubbles-host::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.words-in-bubbles-host::before {
  background:
    radial-gradient(circle at 8% 18%, rgba(255, 255, 255, 0.55) 0 28px, transparent 30px),
    radial-gradient(circle at 92% 12%, rgba(167, 139, 250, 0.35) 0 42px, transparent 44px),
    radial-gradient(circle at 78% 78%, rgba(56, 189, 248, 0.28) 0 36px, transparent 38px),
    radial-gradient(circle at 14% 72%, rgba(244, 114, 182, 0.22) 0 48px, transparent 50px),
    radial-gradient(circle at 48% 88%, rgba(251, 191, 36, 0.2) 0 26px, transparent 28px),
    radial-gradient(circle at 55% 22%, rgba(255, 255, 255, 0.35) 0 18px, transparent 20px);
  animation: wib-drift 18s ease-in-out infinite alternate;
}

.words-in-bubbles-host::after {
  background:
    radial-gradient(circle at 30% 40%, rgba(255, 255, 255, 0.18) 0 60px, transparent 62px),
    radial-gradient(circle at 70% 55%, rgba(147, 197, 253, 0.2) 0 80px, transparent 82px);
  animation: wib-drift-alt 22s ease-in-out infinite alternate;
}

.words-in-bubbles-host #wib-root {
  position: relative;
  z-index: 1;
}

@keyframes wib-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(12px, -18px, 0); }
}

@keyframes wib-drift-alt {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-16px, 10px, 0) scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
  .words-in-bubbles-host::before,
  .words-in-bubbles-host::after {
    animation: none !important;
  }
}