/* ═══════════════════════════════════════════════════════════════════════════
   ANIMATIONS — Beach Bash '26
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── GPU ACCELERATION HINTS — keep animations buttery ─── */
.cloud, .sun__core, .sun__rays, .palm, .wave-svg, .ferris__spokes, .ferris__cars, .car-svg, .ticker__track, .billboard__lights {
  will-change: transform;
}

/* ─── Hero clouds ─── */
@keyframes drift {
  0%   { transform: translateX(0); }
  100% { transform: translateX(110vw); }
}
.cloud--1 { animation: drift 90s linear infinite; }
.cloud--2 { animation: drift 130s linear infinite; animation-delay: -40s; }
.cloud--3 { animation: drift 110s linear infinite; animation-delay: -70s; }

/* ─── Sun core pulse + rotating rays ─── */
@keyframes sun-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.18); }
}
@keyframes sun-rays-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.sun__core { animation: sun-pulse 4s ease-in-out infinite; }
.sun__rays { animation: sun-rays-rotate 50s linear infinite; }

/* ─── Hero waves — visibly slide back and forth ─── */
@keyframes wave-slide-l {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-12%); }
}
@keyframes wave-slide-r {
  0%, 100% { transform: translateX(-12%); }
  50%      { transform: translateX(0); }
}
.wave-svg--back  { animation: wave-slide-l 14s ease-in-out infinite; }
.wave-svg--mid   { animation: wave-slide-r 11s ease-in-out infinite; }
.wave-svg--front { animation: wave-slide-l  8s ease-in-out infinite; }

/* ─── Palm sway — DRAMATIC ─── */
@keyframes palm-sway-l {
  0%, 100% { transform: rotate(-12deg); }
  50%      { transform: rotate(2deg); }
}
@keyframes palm-sway-r {
  0%, 100% { transform: rotate(12deg) scaleX(-1); }
  50%      { transform: rotate(-2deg) scaleX(-1); }
}
.palm--left  { animation: palm-sway-l 5s ease-in-out infinite; }
.palm--right { animation: palm-sway-r 5s ease-in-out infinite; animation-delay: -2.5s; }

/* ─── Hero scroll cue ─── */
@keyframes scroll-pulse {
  0%, 100% { opacity: 0.4; transform: scaleY(1); }
  50%      { opacity: 1;   transform: scaleY(1.4); }
}
.scroll__line { animation: scroll-pulse 2.4s ease-in-out infinite; transform-origin: top; }

/* ─── Hero title fade-up ─── */
@keyframes hero-rise {
  0%   { opacity: 0; transform: translateY(28px); filter: blur(6px); }
  100% { opacity: 1; transform: translateY(0);    filter: blur(0); }
}
.hero__eyebrow { animation: hero-rise 1s ease-out 0.1s both; }
.line--1       { animation: hero-rise 1s ease-out 0.25s both; }
.line--2       { animation: hero-rise 1s ease-out 0.45s both; }
.line--3       { animation: hero-rise 1.2s ease-out 0.6s both; }
.hero__sub     { animation: hero-rise 1s ease-out 0.85s both; }
.countdown     { animation: hero-rise 1s ease-out 1s both; }
.hero__cta     { animation: hero-rise 1s ease-out 1.15s both; }
.hero__where   { animation: hero-rise 1s ease-out 1.3s both; }

/* ─── Big "100" pop + float ─── */
@keyframes hundred-glow {
  0%, 100% { text-shadow: 0 6px 32px rgba(0,0,0,0.25), 0 0 60px rgba(255,215,0,0.45); }
  50%      { text-shadow: 0 6px 32px rgba(0,0,0,0.25), 0 0 120px rgba(255,215,0,0.85); }
}
@keyframes float-100 {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}
.line--3 {
  animation:
    hero-rise 1.2s ease-out 0.6s both,
    hundred-glow 4s ease-in-out 2s infinite,
    float-100 5s ease-in-out 2s infinite;
}

/* ─── Ticker scroll ─── */
@keyframes ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ─── Ferris wheel spin ─── */
@keyframes ferris-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ─── Cars driving across ─── */
@keyframes car-cruise {
  0%   { transform: translateX(-300px); }
  100% { transform: translateX(calc(100vw + 100px)); }
}

/* ─── Countdown number tick ─── */
@keyframes cd-tick {
  0%   { transform: scale(1.0); }
  20%  { transform: scale(1.18); color: var(--neon-pink); }
  100% { transform: scale(1.0); }
}
.cd__num.is-tick { animation: cd-tick 0.6s ease-out; }

/* ─── Neon flicker (used by retro.css billboard) ─── */
@keyframes neon-flicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% {
    text-shadow:
      0 0 4px var(--cream),
      0 0 10px var(--neon-pink),
      0 0 20px var(--neon-pink),
      0 0 40px var(--neon-pink),
      0 0 80px var(--neon-pink);
    opacity: 1;
  }
  20%, 24%, 55% {
    text-shadow: none;
    opacity: 0.8;
  }
}

/* ─── Billboard chase lights ─── */
@keyframes lights-chase {
  0%   { background-position: 0 0; }
  100% { background-position: 60px 0; }
}

/* ─── Section reveal on scroll (set by JS) ─── */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal:nth-child(2) { transition-delay: 0.08s; }
.reveal:nth-child(3) { transition-delay: 0.16s; }
.reveal:nth-child(4) { transition-delay: 0.24s; }
.reveal:nth-child(5) { transition-delay: 0.32s; }
.reveal:nth-child(6) { transition-delay: 0.4s; }

/* ─── Star sparkle in CTA bg ─── */
@keyframes sparkle {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}
.cta-final::before { animation: sparkle 4s ease-in-out infinite; }

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.1ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}