/* ==========================================================================
   SUN CITY — Keyframes & motion utility classes
   ========================================================================== */

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}

@keyframes scroll-drip {
  0% { top: -100%; }
  60%, 100% { top: 100%; }
}

@keyframes float-panel {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes line-sweep {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ---- Generic reveal utility, driven by scroll.js adding .is-visible ---- */
[data-reveal] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s var(--ease-cinematic), transform 1s var(--ease-cinematic);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal-delay="1"] { transition-delay: 0.08s; }
[data-reveal-delay="2"] { transition-delay: 0.16s; }
[data-reveal-delay="3"] { transition-delay: 0.24s; }
[data-reveal-delay="4"] { transition-delay: 0.32s; }
[data-reveal-delay="5"] { transition-delay: 0.4s; }

/* Per-character hero title entrance, animated via JS adding this class */
.hero__title .char {
  opacity: 0;
  filter: blur(14px);
  transform: translateY(60%) scale(1.06);
}

.hero__title.is-revealed .char {
  animation: char-in 1.1s var(--ease-cinematic) forwards;
}

@keyframes char-in {
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
  }
}

.countdown__value.is-ticking {
  animation: tick-flash 0.4s var(--ease-soft);
}

@keyframes tick-flash {
  0% { opacity: 0.35; transform: translateY(-4px); filter: blur(2px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* Notify success state */
.notify__form.is-success .notify__input { opacity: 0.4; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { transition: opacity 0.01s linear; transform: none; }
  .panel { animation: none; }
  .footer__line { animation: none; }
  .hero__scroll-line::after { animation: none; }
  html { scroll-behavior: auto; }
}