/* ============================================
   TOK COMMUNITY — ANIMATIONS
   ============================================ */

@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulseDot { 0%, 100% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(1.6); opacity: 0.4; } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes waBounce { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.fade-up-1 { animation: fadeUp 0.6s ease both; }
.fade-up-2 { animation: fadeUp 0.7s 0.1s ease both; }
.fade-up-3 { animation: fadeUp 0.7s 0.2s ease both; }
.fade-up-4 { animation: fadeUp 0.7s 0.3s ease both; }

.wa-float { animation: waBounce 2s ease infinite; }

.route-dot {
  position: absolute; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 12px var(--gold), 0 0 24px var(--gold);
  animation: pulseDot 2.5s ease-in-out infinite;
}

/* Scroll-reveal: JS adds .is-visible via IntersectionObserver for the
   fade-up-on-scroll effect (see main.js, which also has a 3s safety-net
   timeout). This pure-CSS fallback is the last line of defense: if JS
   never runs at all (disabled/blocked/crawler), content still becomes
   visible after a brief delay instead of staying permanently hidden. */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.5s ease, transform 0.5s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* No-JS fallback only: if the page never executes any JS, nothing will
   ever add .is-visible, so plain CSS reveals everything after a short
   delay. When JS *does* run, main.js's first paint happens well before
   this delay, so is-visible/IntersectionObserver always wins in practice. */
@media (scripting: none) {
  .reveal { animation: revealFallback 0.6s 0.3s ease forwards; }
}
@keyframes revealFallback { to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}