/* =====================================================================
   Vision Party Events — animaties
   Subtiel & premium. Alles uitschakelbaar via prefers-reduced-motion.
   ===================================================================== */

/* ---------- Keyframes ---------- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes shine {
  0%   { left: -75%; }
  100% { left: 125%; }
}

/* Zwevende ballonnen — langzaam op en neer + lichte drift */
@keyframes floatBalloon {
  0%   { transform: translateY(0) translateX(0) rotate(-2deg); }
  50%  { transform: translateY(-26px) translateX(10px) rotate(2deg); }
  100% { transform: translateY(0) translateX(0) rotate(-2deg); }
}
@keyframes floatBalloonAlt {
  0%   { transform: translateY(0) translateX(0) rotate(2deg); }
  50%  { transform: translateY(-34px) translateX(-12px) rotate(-3deg); }
  100% { transform: translateY(0) translateX(0) rotate(2deg); }
}
@keyframes sway {
  0%, 100% { transform: rotate(-1.5deg); }
  50%      { transform: rotate(1.5deg); }
}
@keyframes pulseGlow {
  0%, 100% { opacity: .5; }
  50%      { opacity: 1; }
}
@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
/* Gestaffelde vertragingen */
.reveal.delay-1 { transition-delay: .1s; }
.reveal.delay-2 { transition-delay: .2s; }
.reveal.delay-3 { transition-delay: .3s; }
.reveal.delay-4 { transition-delay: .4s; }

/* ---------- Ballonnen laag ---------- */
.balloon-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.balloon {
  position: absolute;
  opacity: .5;
  transform-origin: center bottom;
  animation: floatBalloon 9s ease-in-out infinite;
  will-change: transform;
}
.balloon.alt { animation-name: floatBalloonAlt; }
/* Het touwtje deint mee */
.balloon .string { animation: sway 6s ease-in-out infinite; transform-origin: top center; }

/* Variatie in snelheid/vertraging wordt inline via style meegegeven door balloons.js,
   maar er zijn ook basisklassen als fallback */
.balloon.speed-slow  { animation-duration: 12s; }
.balloon.speed-med   { animation-duration: 9s; }
.balloon.speed-fast  { animation-duration: 7s; }

/* ---------- Kleine accenten ---------- */
.pulse-glow { animation: pulseGlow 3s ease-in-out infinite; }
.spin-slow  { animation: spinSlow 26s linear infinite; }

/* Hover lift utility (kan naast component-specifieke hovers gebruikt worden) */
.hover-lift { transition: transform var(--transition), box-shadow var(--transition); }
.hover-lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

/* Confetti-achtige sterretjes in de bevestiging */
.confirm-box .check-circle { animation: fadeInUp .6s ease; }

/* ---------- prefers-reduced-motion: alles rustig ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .balloon { animation: none !important; }
  .balloon-layer { display: none; }
}