/* ============================================================
   is7 game — Crimson Pulse: Animations & Motion
   ============================================================ */

/* ---- Keyframes ---- */
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-18px); } }
@keyframes pulseGlow { 0%,100% { transform: scale(1); opacity: 0.75; } 50% { transform: scale(1.12); opacity: 1; } }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes fabPulse {
  0% { box-shadow: 0 10px 30px rgba(34,158,217,0.5), 0 0 0 0 rgba(34,158,217,0.5); }
  70% { box-shadow: 0 10px 30px rgba(34,158,217,0.5), 0 0 0 16px rgba(34,158,217,0); }
  100% { box-shadow: 0 10px 30px rgba(34,158,217,0.5), 0 0 0 0 rgba(34,158,217,0); }
}
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } }

/* ---- Scroll reveal (IntersectionObserver adds .is-visible) ---- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); will-change: opacity, transform; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal--left { transform: translateX(-30px); }
.reveal--left.is-visible { transform: translateX(0); }
.reveal--right { transform: translateX(30px); }
.reveal--right.is-visible { transform: translateX(0); }
.reveal--scale { transform: scale(0.94); }
.reveal--scale.is-visible { transform: scale(1); }

/* Stagger children */
.stagger > * { opacity: 0; transform: translateY(24px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
.stagger.is-visible > * { opacity: 1; transform: translateY(0); }
.stagger.is-visible > *:nth-child(1) { transition-delay: 0.05s; }
.stagger.is-visible > *:nth-child(2) { transition-delay: 0.12s; }
.stagger.is-visible > *:nth-child(3) { transition-delay: 0.19s; }
.stagger.is-visible > *:nth-child(4) { transition-delay: 0.26s; }
.stagger.is-visible > *:nth-child(5) { transition-delay: 0.33s; }
.stagger.is-visible > *:nth-child(6) { transition-delay: 0.40s; }
.stagger.is-visible > *:nth-child(7) { transition-delay: 0.47s; }
.stagger.is-visible > *:nth-child(8) { transition-delay: 0.54s; }

/* Count-up placeholder shimmer */
.counting { background: linear-gradient(90deg, #fff 25%, #ff9b96 50%, #fff 75%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; }

/* Shimmer skeleton for lazy images */
.img-skeleton { background: linear-gradient(90deg, var(--color-surface) 25%, var(--color-surface-2) 50%, var(--color-surface) 75%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }

/* Button gradient sweep on hover */
.btn--primary { position: relative; overflow: hidden; }
.btn--primary::after {
  content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-20deg); transition: left 0.6s var(--ease-out);
}
.btn--primary:hover::after { left: 140%; }

/* Entry animation for hero elements */
.hero__badge { animation: fadeUp 0.7s var(--ease-out) both; }
.hero h1 { animation: fadeUp 0.8s var(--ease-out) 0.1s both; }
.hero__lead { animation: fadeUp 0.8s var(--ease-out) 0.2s both; }
.hero__actions { animation: fadeUp 0.8s var(--ease-out) 0.3s both; }
.hero__mock { animation: scaleIn 1s var(--ease-out) 0.2s both; }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .stagger > * { opacity: 1 !important; transform: none !important; }
  .phone-frame, .hero__glow, .hero__ring, .tg-fab, .marquee__track { animation: none !important; }
  .game-card--featured::before { animation: none !important; }
}