/* =====================================================
   NEW GAME PLUS — ANIMATIONS
   ===================================================== */

/* ── Keyframes ─────────────────────────────────────── */

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(32px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeLeft {
  from {
    opacity: 0;
    transform: translateX(-36px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeRight {
  from {
    opacity: 0;
    transform: translateX(36px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes pulseDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.5); opacity: 0.5; }
}

@keyframes scrollThumb {
  0%   { transform: translateY(0); opacity: 1; }
  80%  { transform: translateY(20px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}

@keyframes scanline {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}

@keyframes ringExpand {
  0%   { transform: translate(-50%, -50%) scale(0.6); opacity: 0.5; }
  100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; }
}

@keyframes countFlip {
  0%   { transform: translateY(0);    opacity: 1; }
  40%  { transform: translateY(-10px); opacity: 0; }
  60%  { transform: translateY(10px);  opacity: 0; }
  100% { transform: translateY(0);    opacity: 1; }
}

@keyframes borderGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(115, 36, 236, 0); }
  50%       { box-shadow: 0 0 0 4px rgba(115, 36, 236, 0.25); }
}

@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

@keyframes heroEyebrowSlide {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Scroll Reveal Base States ──────────────────────── */

.reveal-up,
.reveal-left,
.reveal-right {
  opacity: 0;
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-up    { transform: translateY(28px); }
.reveal-left  { transform: translateX(-32px); }
.reveal-right { transform: translateX(32px); }

.reveal-up.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible {
  opacity: 1;
  transform: translate(0);
}

/* Staggered delay support */
.reveal-up[data-delay="80"],
.reveal-left[data-delay="80"],
.reveal-right[data-delay="80"]   { transition-delay: 80ms; }

.reveal-up[data-delay="100"],
.reveal-left[data-delay="100"],
.reveal-right[data-delay="100"]  { transition-delay: 100ms; }

.reveal-up[data-delay="120"],
.reveal-left[data-delay="120"],
.reveal-right[data-delay="120"]  { transition-delay: 120ms; }

.reveal-up[data-delay="150"],
.reveal-left[data-delay="150"],
.reveal-right[data-delay="150"]  { transition-delay: 150ms; }

.reveal-up[data-delay="160"],
.reveal-left[data-delay="160"],
.reveal-right[data-delay="160"]  { transition-delay: 160ms; }

.reveal-up[data-delay="200"],
.reveal-left[data-delay="200"],
.reveal-right[data-delay="200"]  { transition-delay: 200ms; }

.reveal-up[data-delay="240"],
.reveal-left[data-delay="240"],
.reveal-right[data-delay="240"]  { transition-delay: 240ms; }

.reveal-up[data-delay="300"],
.reveal-left[data-delay="300"],
.reveal-right[data-delay="300"]  { transition-delay: 300ms; }

.reveal-up[data-delay="320"],
.reveal-left[data-delay="320"],
.reveal-right[data-delay="320"]  { transition-delay: 320ms; }

.reveal-up[data-delay="400"],
.reveal-left[data-delay="400"],
.reveal-right[data-delay="400"]  { transition-delay: 400ms; }

.reveal-up[data-delay="420"],
.reveal-left[data-delay="420"],
.reveal-right[data-delay="420"]  { transition-delay: 420ms; }

.reveal-up[data-delay="520"],
.reveal-left[data-delay="520"],
.reveal-right[data-delay="520"]  { transition-delay: 520ms; }

/* ── Countdown flip ─────────────────────────────────── */
.countdown-num.flip {
  animation: countFlip 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── FAQ details animation ──────────────────────────── */
.faq__item[open] .faq__icon {
  transform: rotate(45deg);
}

.faq__icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}

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

  .reveal-up,
  .reveal-left,
  .reveal-right {
    opacity: 1;
    transform: none;
  }
}