/* ============================================
   JSR Balcony Safety Nets — Animations
   Exact Reference Site Behavior
   ============================================ */

/* ── Marquee Scroll (Reference: continuous left scroll) ── */
@keyframes marqueeScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── Ticker Gallery Scroll ── */
@keyframes tickerScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── Fade In Up (For scroll reveals) ── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Fade In Scale ── */
@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}

/* ── WhatsApp Pulse Glow ── */
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 4px 15px rgba(37,211,102,0.4); }
  50% { box-shadow: 0 4px 25px rgba(37,211,102,0.7), 0 0 40px rgba(37,211,102,0.3); }
}

/* ── Hero slide scale (parallax-like zoom) ── */
@keyframes heroZoom {
  from { transform: scale(1); }
  to { transform: scale(1.08); }
}

/* ── Progress bar shimmer ── */
@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* ── Floating button ring pulse (expanding outward) ── */
@keyframes ringPulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: 0.5; }
  100% { transform: scale(1.3); opacity: 0; }
}

/* ── Call button shake/ring ── */
@keyframes floatBtnRing {
  0%, 100% { transform: rotate(0deg); }
  10% { transform: rotate(14deg); }
  20% { transform: rotate(-14deg); }
  30% { transform: rotate(10deg); }
  40% { transform: rotate(-8deg); }
  50% { transform: rotate(4deg); }
  60%, 100% { transform: rotate(0deg); }
}

/* ── WhatsApp button pulse ── */
@keyframes floatBtnPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

/* ── Mobile CTA pulse ── */
@keyframes mobileCtaPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(229,79,62,0.4); }
  50% { box-shadow: 0 0 0 8px rgba(229,79,62,0); }
}