/* ============================================================
   BALLOONS module styles — namespaced with .pop-*
   Ambient background balloons (z 100-199) + the pop-stage game
   and wish-balloon finale (z 400-499, sequential, never overlap).
   ============================================================ */

/* ---------- 1. Ambient balloons ---------- */

.pop-ambient-wrap {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  overflow: hidden;
  z-index: 100;
  pointer-events: none;
}

.pop-ambient {
  position: absolute;
  bottom: -220px;
  animation-name: pop-rise;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-play-state: paused;
  opacity: 0;
  transition: opacity 1s ease;
  pointer-events: none;
  will-change: transform;
}

.pop-ambient-wrap.pop-live .pop-ambient {
  opacity: 0.85;
  animation-play-state: running;
}

.pop-ambient-sway,
.pop-ambient-rot {
  width: 100%;
  height: 100%;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-play-state: paused;
}

.pop-ambient-wrap.pop-live .pop-ambient-sway,
.pop-ambient-wrap.pop-live .pop-ambient-rot {
  animation-play-state: running;
}

.pop-ambient-sway {
  animation-name: pop-sway;
}

.pop-ambient-rot {
  animation-name: pop-rock;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transform-origin: 50% 12%;
}

@keyframes pop-rise {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-135vh); }
}

@keyframes pop-sway {
  from { transform: translateX(calc(var(--pop-sway, 20px) * -1)); }
  to   { transform: translateX(var(--pop-sway, 20px)); }
}

@keyframes pop-rock {
  from { transform: rotate(calc(var(--pop-rock, 6deg) * -1)); }
  to   { transform: rotate(var(--pop-rock, 6deg)); }
}

/* ---------- 2. Pop stage ---------- */

.pop-stage {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 400;
  overflow: hidden;
}

.pop-target {
  position: absolute;
  transform: translate(-50%, -50%);
}

.pop-target-bob {
  width: 100%;
  height: 100%;
  animation-name: pop-bob;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  position: relative;
}

@keyframes pop-bob {
  from { transform: translateY(0); }
  to   { transform: translateY(calc(var(--pop-bob, 10px) * -1)); }
}

.pop-target-visual {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.pop-target:hover .pop-target-visual {
  transform: scale(1.08);
}

.pop-target-visual.pop-burst {
  animation: pop-burst-anim 0.26s ease-out forwards;
}

@keyframes pop-burst-anim {
  0%   { transform: scale(1);    opacity: 1; }
  40%  { transform: scale(1.4);  opacity: 1; }
  100% { transform: scale(1.75); opacity: 0; }
}

.pop-target-label {
  position: absolute;
  top: 32%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72%;
  text-align: center;
  font-family: 'Signika', sans-serif;
  font-weight: 700;
  font-size: clamp(16px, 3.4vw, 26px);
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.55), 0 0 6px rgba(0,0,0,0.25);
  pointer-events: none;
  line-height: 1.1;
}

/* golden balloon emphasis */

.pop-target-golden .pop-target-bob {
  position: relative;
}

.pop-target-golden .pop-target-bob::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 38%;
  width: 78%;
  height: 46%;
  transform: translate(-50%, -50%) scale(1);
  background: radial-gradient(circle, rgba(255,215,0,0.9) 0%, rgba(255,205,60,0.4) 45%, rgba(255,205,60,0) 75%);
  filter: blur(6px);
  z-index: 0;
  animation: pop-golden-glow 1.8s ease-in-out infinite;
}

@keyframes pop-golden-glow {
  0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.18); }
}

.pop-target-golden .pop-target-visual {
  animation: pop-golden-tint 2.2s ease-in-out infinite;
}

@keyframes pop-golden-tint {
  0%, 100% {
    filter: sepia(0.5) saturate(2.2) hue-rotate(-8deg) brightness(1.05)
            drop-shadow(0 0 8px rgba(255,205,60,0.9));
  }
  50% {
    filter: sepia(0.7) saturate(2.6) hue-rotate(-4deg) brightness(1.18)
            drop-shadow(0 0 18px rgba(255,225,120,1));
  }
}

/* pop shards */

.pop-shard {
  position: fixed;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  margin-top: -4px;
  background: #fff;
  border-radius: 1px;
  z-index: 405;
  pointer-events: none;
  animation: pop-shard-fly 0.6s ease-out forwards;
}

@keyframes pop-shard-fly {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--pop-shard-x, 60px), var(--pop-shard-y, 60px)) rotate(var(--pop-shard-rot, 180deg)); opacity: 0; }
}

/* message card */

.pop-card {
  position: fixed;
  /* Anchored to a reserved band above the button row rather than dead centre.
     layoutPositions() keeps balloons out of this band, so a balloon can never
     be sliced in half by the card, and the message is never covered. */
  bottom: 13vh;
  left: 50%;
  transform: translate(-50%, 0) scale(0.9);
  max-width: min(560px, 86vw);
  padding: 20px 28px;
  border-radius: 18px;
  background: rgba(255,255,255,0.94);
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
  text-align: center;
  font-family: 'Signika', sans-serif;
  font-weight: 700;
  font-size: clamp(17px, 2.6vw, 26px);
  color: #4a2e2e;
  z-index: 450;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.3s ease;
}

.pop-card:empty {
  display: none;
}

.pop-card.pop-card-visible {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.pop-card.pop-card-golden {
  background: linear-gradient(135deg, rgba(255,246,214,0.98), rgba(255,224,140,0.96));
  box-shadow: 0 12px 46px rgba(242, 179, 0, 0.55);
  color: #6b4a06;
  font-size: clamp(19px, 3vw, 30px);
}

.pop-card.pop-card-finale {
  font-size: clamp(22px, 3.6vw, 34px);
  color: var(--bd-berry);
}

/* ---------- 3. Wish balloons (finale) ---------- */

.pop-wish-wrap {
  position: fixed;
  top: 0; left: 0;
  width: 0; height: 0;
  z-index: 410;
  pointer-events: none;
}

.pop-wish {
  position: fixed;
  opacity: 0;
  transform: translateY(30px) scale(0.85);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transition: left 0.75s cubic-bezier(.2,.8,.2,1), top 0.75s cubic-bezier(.2,.8,.2,1),
              opacity 0.6s ease, transform 0.6s ease;
}

.pop-wish-wrap.pop-wish-active .pop-wish {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.pop-wish-letter {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  text-align: center;
  text-transform: uppercase;
  font-family: 'Signika', sans-serif;
  font-weight: 700;
  font-size: 50px;
  text-shadow: 3px 3px 0 #fff, -1px -1px 0 #fff;
  opacity: 0;
  transition: opacity 0.6s ease;
  white-space: nowrap;
}

.pop-wish-wrap.pop-letters-in .pop-wish-letter {
  opacity: 1;
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .pop-ambient,
  .pop-ambient-sway,
  .pop-ambient-rot,
  .pop-target-bob,
  .pop-target-golden .pop-target-bob::before,
  .pop-target-golden .pop-target-visual {
    animation-duration: 3.5s;
  }
  .pop-target-visual.pop-burst {
    animation-duration: 0.4s;
  }
}

/* ---------- small screens ---------- */

@media (max-width: 480px) {
  .pop-target-label {
    font-size: clamp(13px, 4vw, 20px);
  }
  .pop-card {
    padding: 14px 18px;
    font-size: clamp(15px, 3.6vw, 20px);
  }
}