/* ===================================================================
   ANIMATIONS — keyframes + reveal-on-scroll base states.
   GSAP handles the opening transition & scroll reveals from app.js;
   these keyframes cover lightweight CSS-only motion (floats, pulses).
   =================================================================== */

@keyframes float-petal {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-18px) rotate(8deg); }
}
.petal { animation: float-petal 6s ease-in-out infinite; }
.petal-2 { animation-delay: 1.2s; }
.petal-3 { animation-delay: 2.4s; }
.petal-4 { animation-delay: 3.6s; }

@keyframes float-decor {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
.decor-float { animation: float-decor 5s ease-in-out infinite; }
.decor-2, .decor-tr, .decor-bl { animation-delay: 1.8s; }
.decor-br { animation-delay: 0.9s; }

@keyframes hero-balloon-bob {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-16px) rotate(3deg); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.6; }
}

@keyframes bounce-scroll {
  0%, 100% { transform: translate(-50%, 0); opacity: 0.6; }
  50% { transform: translate(-50%, 6px); opacity: 1; }
}
.scroll-hint { animation: bounce-scroll 2s ease-in-out infinite; }

/* Elements start hidden/offset; app.js reveals them with GSAP/IntersectionObserver.
   If JS fails to load for any reason, this fallback fades them in via CSS only. */
.reveal-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Prediction confirmation pop */
@keyframes pop-select {
  0% { transform: scale(1); }
  40% { transform: scale(1.12); }
  100% { transform: scale(1); }
}
.prediction-btn.just-selected { animation: pop-select 0.4s ease; }

/* Reveal section entrance */
@keyframes reveal-pop {
  0% { transform: scale(0.6); opacity: 0; }
  60% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.reveal-pop-in { animation: reveal-pop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); }

/* Opening illustration: gentle continuous float */
@keyframes illustration-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(-1.5deg); }
}
.opening-illustration svg { animation: illustration-float 4.5s ease-in-out infinite; }

/* Balloon release: rises from the bottom of the screen with a gentle sway,
   fading out once it drifts above the viewport. Balloons that "pop" are
   removed by app.js partway through and replaced with a burst (below). */
@keyframes balloon-rise {
  0% { transform: translateY(0) translateX(0) rotate(-4deg); opacity: 0; }
  6% { opacity: 1; }
  50% { transform: translateY(-58vh) translateX(var(--sway, 20px)) rotate(4deg); }
  100% { transform: translateY(-118vh) translateX(0) rotate(-4deg); opacity: 0.85; }
}

/* Balloon pop burst: a small ring of confetti dots scattering outward */
@keyframes pop-burst {
  0% { transform: translate(-50%, -50%) scale(0.4); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.3); opacity: 0; }
}

/* Confetti piece (created dynamically in JS) */
.confetti-piece {
  position: fixed;
  top: -20px;
  width: 8px;
  height: 14px;
  z-index: 400;
  pointer-events: none;
  animation: confetti-fall linear forwards;
}
@keyframes confetti-fall {
  to { transform: translateY(110vh) rotate(600deg); opacity: 0.9; }
}

/* Respect reduced-motion preference: strip heavy motion, keep simple fades */
@media (prefers-reduced-motion: reduce) {
  .petal, .decor-float, .scroll-hint, .music-btn.playing .music-icon, .opening-illustration svg {
    animation: none !important;
  }
  .balloon-wrap, .pop-particle {
    display: none !important;
  }
  .hero-balloon, .hero-sparkle {
    animation: none !important;
  }
  .reveal-up {
    transition: opacity 0.3s ease !important;
    transform: none !important;
  }
  .prediction-btn.just-selected, .reveal-pop-in {
    animation: none !important;
  }
  * {
    scroll-behavior: auto !important;
  }
}