/* ============================================================
   LIVELY LAYER — landing-page preview only (port 8180)
   Spring physics, confetti, floating balloons, ken-burns rivers.
   Loaded AFTER style.css; same-specificity rules below win.
   ============================================================ */

:root { --pk: #f1236e; --pu: #6129fe; --or: #f14400; --am: #ffb300; }

/* ---- 1. Reveals pop in with a spring instead of a soft fade ---- */
.reveal {
  transition:
    opacity .55s ease,
    transform .8s cubic-bezier(.34, 1.45, .46, 1);
}

/* ---- 2. Bouncy cards: hover = lift + spring + tiny tilt ---- */
.svc-card,
.pkg-card,
.review-card,
.snack-card,
.stat,
.events-grid > * {
  transition:
    transform .45s cubic-bezier(.34, 1.56, .64, 1),
    box-shadow .45s ease,
    opacity .55s ease;
}
.svc-card:hover,
.pkg-card:hover,
.review-card:hover,
.snack-card:hover,
.events-grid > *:hover {
  transform: translateY(-9px) scale(1.025) rotate(-.5deg);
}
.stat:hover { transform: translateY(-5px) scale(1.04); }

/* photos inside cards keep zooming a beat on hover */
.pkg-card .pkg-photo img,
.svc-card img,
.snack-card .snack-ph img {
  transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}
.pkg-card:hover .pkg-photo img,
.svc-card:hover img,
.snack-card:hover .snack-ph img { transform: scale(1.08) rotate(.6deg); }

/* ---- 3. River photos breathe (ken burns) as they flow ---- */
.river-card img { animation: kbZoom 13s ease-in-out infinite alternate; will-change: transform; }
.river-card:nth-child(odd) img { animation-duration: 17s; animation-delay: -6s; }
.river-card:nth-child(3n) img { animation-duration: 21s; animation-delay: -11s; }
@keyframes kbZoom {
  from { transform: scale(1) translate(0, 0); }
  to   { transform: scale(1.16) translate(-2.5%, -2.5%); }
}

/* ---- 4. Primary CTA breathes a glow so the eye finds it ---- */
.hero-cta .btn-primary,
.sticky-cta .btn-primary {
  animation: ctaGlow 2.8s ease-in-out infinite;
}
@keyframes ctaGlow {
  0%, 100% { box-shadow: 0 10px 26px -10px rgba(241, 35, 110, .45); }
  50%      { box-shadow: 0 16px 42px -8px  rgba(241, 35, 110, .75); }
}

/* ---- 5. Google stars pop in one by one after the hero lands ---- */
.hero-trust .star {
  transform-origin: center;
  animation: starPop .55s cubic-bezier(.34, 1.56, .64, 1) both;
}
.hero-trust .star:nth-child(1) { animation-delay: .9s; }
.hero-trust .star:nth-child(2) { animation-delay: 1.02s; }
.hero-trust .star:nth-child(3) { animation-delay: 1.14s; }
.hero-trust .star:nth-child(4) { animation-delay: 1.26s; }
.hero-trust .star:nth-child(5) { animation-delay: 1.38s; }
@keyframes starPop {
  from { transform: scale(0) rotate(-40deg); opacity: 0; }
  to   { transform: scale(1) rotate(0deg);  opacity: 1; }
}

/* ---- 6. Rotator word gets a springier swap ---- */
.rw { transition: opacity .4s ease, transform .5s cubic-bezier(.34, 1.56, .64, 1); }

/* ---- 7. Marquee sparkles twinkle ---- */
.marquee-group i {
  display: inline-block;
  animation: twinkle 2.4s ease-in-out infinite;
}
.marquee-group i:nth-of-type(4n + 1) { animation-delay: .6s; }
.marquee-group i:nth-of-type(4n + 2) { animation-delay: 1.2s; }
.marquee-group i:nth-of-type(4n + 3) { animation-delay: 1.8s; }
@keyframes twinkle {
  0%, 100% { transform: scale(1) rotate(0deg);   opacity: .65; }
  50%      { transform: scale(1.4) rotate(25deg); opacity: 1; }
}

/* ---- 8. Drifting confetti pieces in the hero (injected by lively.js) ---- */
.drift {
  position: absolute;
  z-index: 1; /* above the photo rivers, below the headline copy */
  pointer-events: none;
  background: var(--c, var(--pk));
  opacity: 0;
  animation: driftFloat var(--dur, 10s) ease-in-out infinite;
  animation-delay: var(--del, 0s);
  will-change: transform, opacity;
}
.drift.round { border-radius: 50%; }
.drift.sq { border-radius: 2px; }
@keyframes driftFloat {
  0%   { transform: translate3d(0, 14px, 0) rotate(0deg);            opacity: 0; }
  18%  { opacity: .5; }
  82%  { opacity: .5; }
  100% { transform: translate3d(var(--sway, 12px), -52px, 0) rotate(var(--spin, 170deg)); opacity: 0; }
}

/* ---- 9. Confetti canvas (fixed overlay, clicks pass through) ---- */
canvas.confetti-fx {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
  pointer-events: none;
  z-index: 9999;
}

/* ---- Respect reduced-motion ---- */
@media (prefers-reduced-motion: reduce) {
  .river-card img,
  .hero-cta .btn-primary,
  .sticky-cta .btn-primary,
  .hero-trust .star,
  .marquee-group i,
  .drift { animation: none !important; }
  .reveal, .svc-card, .pkg-card, .review-card, .stat, .events-grid > * { transition: none !important; }
}