/* ============================================================================
 * Alpha Archers 2D — animations.css
 * Keyframes and motion classes: menu transitions, button hovers, banners,
 * damage flash, popups, floating elements, toasts and fades.
 * Honors the reduced-motion accessibility setting.
 * ========================================================================== */

/* ----------------------------------------------------------- entry / exit */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

@keyframes slideUp {
  from { opacity: 0; transform: translateY(34px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ------------------------------------------------------------- ambient fx */
@keyframes floatBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes pulseSoft {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

@keyframes titleGlow {
  0%, 100% { text-shadow: 0 4px 30px rgba(0, 0, 0, 0.8), 0 0 22px rgba(62, 198, 168, 0.25); }
  50% { text-shadow: 0 4px 30px rgba(0, 0, 0, 0.8), 0 0 44px rgba(62, 198, 168, 0.55); }
}

@keyframes shimmer {
  from { background-position: -200% 0; }
  to { background-position: 200% 0; }
}

/* Button hover sheen sweep (see .btn::after in ui.css) */
@keyframes sheenSweep {
  0% { left: -80%; opacity: 0; }
  15% { opacity: 1; }
  100% { left: 130%; opacity: 0; }
}

/* Camera switcher: ambient glow breathing + burst on change */
@keyframes cameraPulse {
  0%, 100% { box-shadow: 0 0 10px rgba(62, 198, 168, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1); }
  50% { box-shadow: 0 0 22px rgba(62, 198, 168, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.1); }
}

@keyframes cameraSwitch {
  0% { transform: scale(1); box-shadow: 0 0 34px rgba(158, 240, 220, 1); }
  40% { transform: scale(1.22); }
  100% { transform: scale(1); }
}

/* ------------------------------------------------------------ wave banner */
@keyframes bannerIn {
  0% { opacity: 0; transform: translateX(-50%) scale(1.6); letter-spacing: 0.6em; filter: blur(6px); }
  18% { opacity: 1; transform: translateX(-50%) scale(1); filter: blur(0); }
  80% { opacity: 1; transform: translateX(-50%) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) scale(0.94) translateY(-10px); }
}

.wave-banner.banner-anim {
  animation: bannerIn 2.6s var(--ease-out) both;
}

/* ---------------------------------------------------------------- pop ups */
@keyframes starPop {
  0% { transform: scale(0) rotate(-40deg); }
  70% { transform: scale(1.25) rotate(6deg); }
  100% { transform: scale(1) rotate(0); }
}

@keyframes comboPop {
  0% { transform: scale(1.5); }
  100% { transform: scale(1); }
}

.combo-label.pop {
  animation: comboPop 0.22s var(--ease-bounce) both;
}

@keyframes toastIn {
  from { opacity: 0; transform: translateX(60px) scale(0.9); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

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

/* ------------------------------------------------------------ damage flash */
@keyframes damageFlash {
  0% { box-shadow: inset 0 0 0 9999px rgba(230, 60, 70, 0.22); }
  100% { box-shadow: inset 0 0 0 9999px rgba(230, 60, 70, 0); }
}

/* --------------------------------------------------------- floating text */
@keyframes floatAway {
  0% { opacity: 0; transform: translateY(6px) scale(0.8); }
  12% { opacity: 1; transform: translateY(0) scale(1.06); }
  100% { opacity: 0; transform: translateY(-46px) scale(1); }
}

.float-text {
  animation: floatAway 1.1s var(--ease-out) both;
}

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

body.reduced-motion *,
body.reduced-motion *::before,
body.reduced-motion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.08s !important;
}

body.reduced-motion .wave-banner.banner-anim {
  animation: fadeIn 0.2s ease both;
}

/* ============================================================================
 * Main-menu motion
 * ==========================================================================*/
@keyframes menuHeroIn {
  from { opacity: 0; transform: translateY(-18px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

@keyframes titleDrop {
  0% { opacity: 0; transform: translateY(-46px) scale(1.12); filter: blur(8px); }
  60% { filter: blur(0); }
  100% { opacity: 1; transform: none; filter: blur(0); }
}

@keyframes titleFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes accentPulse {
  0%, 100% {
    text-shadow:
      0 2px 0 rgba(0, 0, 0, 0.5),
      0 0 18px color-mix(in srgb, var(--c-accent) 75%, transparent),
      0 0 52px color-mix(in srgb, var(--c-accent) 45%, transparent),
      0 12px 40px rgba(0, 0, 0, 0.75);
  }
  50% {
    text-shadow:
      0 2px 0 rgba(0, 0, 0, 0.5),
      0 0 30px color-mix(in srgb, var(--c-accent) 95%, transparent),
      0 0 82px color-mix(in srgb, var(--c-accent) 65%, transparent),
      0 12px 40px rgba(0, 0, 0, 0.75);
  }
}

@keyframes playPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.028); }
}

@keyframes railIn {
  from { opacity: 0; transform: translateY(14px) scale(0.94); }
  to { opacity: 1; transform: none; }
}

@keyframes railUnderline {
  from { transform: scaleX(0); opacity: 0; }
  to { transform: scaleX(1); opacity: 1; }
}

@keyframes badgePop {
  0% { transform: scale(0); }
  70% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

@keyframes badgeGlow {
  0%, 100% { box-shadow: 0 0 12px color-mix(in srgb, var(--c-gold) 75%, transparent); }
  50% { box-shadow: 0 0 22px color-mix(in srgb, var(--c-gold) 100%, transparent); }
}

@keyframes tabBodyIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------- backdrop */
@keyframes glowDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(calc(9 * var(--sw)), calc(6 * var(--sh))) scale(1.14); }
  66% { transform: translate(calc(-7 * var(--sw)), calc(9 * var(--sh))) scale(0.92); }
}

@keyframes gridPan {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(74px, 74px, 0); }
}

@keyframes scanSweep {
  from { transform: translateY(calc(-40 * var(--sh))); }
  to { transform: translateY(calc(140 * var(--sh))); }
}

@keyframes shapeRise {
  0% { opacity: 0; transform: translate3d(0, 0, 0); }
  8% { opacity: 0.75; }
  85% { opacity: 0.5; }
  100% { opacity: 0; transform: translate3d(calc(6 * var(--sw)), calc(-128 * var(--sh)), 0); }
}

@keyframes shapeSpin {
  from { rotate: 0deg; }
  to { rotate: 360deg; }
}

/* Portrait gate: a phone tipping into landscape, on a loop */
@keyframes rotateHint {
  0%, 22% { transform: rotate(0deg); }
  45%, 78% { transform: rotate(-90deg); }
  100% { transform: rotate(0deg); }
}

/* ============================================================================
 * Latest Upgrades — draft, reveal, pager, ledger and micro-interaction motion
 * ==========================================================================*/

@keyframes draftIn {
  from { opacity: 0; transform: translateY(26px) scale(0.94); }
  to { opacity: 1; transform: none; }
}

@keyframes boonCardIn {
  from { opacity: 0; transform: translateY(30px) rotateX(20deg); }
  to { opacity: 1; transform: none; }
}

@keyframes boonGlow {
  0%, 100% { box-shadow: 0 0 0 1px var(--rarity), var(--elev-2); }
  50% { box-shadow: 0 0 26px var(--rarity-glow), 0 0 0 1px var(--rarity), var(--elev-2); }
}

/* The reveal: a container that shudders, then bursts. */
@keyframes revealShake {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  20% { transform: translateX(-5px) rotate(-4deg); }
  40% { transform: translateX(5px) rotate(4deg); }
  60% { transform: translateX(-4px) rotate(-3deg); }
  80% { transform: translateX(4px) rotate(3deg); }
}

@keyframes revealBurst {
  0% { transform: scale(1); filter: brightness(1); }
  35% { transform: scale(1.5); filter: brightness(2.6); }
  100% { transform: scale(1.12); filter: brightness(1); }
}

@keyframes revealRing {
  from { opacity: 0.85; transform: scale(0.4); }
  to { opacity: 0; transform: scale(2.6); }
}

@keyframes revealItemIn {
  from { opacity: 0; transform: translateY(14px) scale(0.9); }
  to { opacity: 1; transform: none; }
}

/* Result screens deal their rows out rather than presenting them all at once. */
@keyframes resultRowIn {
  from { opacity: 0; transform: translateX(-14px); }
  to { opacity: 1; transform: none; }
}

@keyframes pageIn {
  from { opacity: 0.25; transform: translateX(10px); }
  to { opacity: 1; transform: none; }
}

@keyframes badgePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(230, 94, 106, 0.55); }
  60% { box-shadow: 0 0 0 7px rgba(230, 94, 106, 0); }
}

@keyframes tipIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 0.85; transform: none; }
}

@keyframes seedBad {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

@keyframes forgeReady {
  0%, 100% { box-shadow: 0 0 0 1px var(--c-accent), var(--elev-1); }
  50% { box-shadow: 0 0 20px var(--c-accent-soft), 0 0 0 1px var(--c-accent), var(--elev-1); }
}

@keyframes nemesisIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: none; }
}

/* Reduced motion: everything above collapses to a plain fade. The site-wide
   rule in this file already zeroes durations; these keep the end state sane. */
@media (prefers-reduced-motion: reduce) {
  .boon-card, .reveal-box, .reveal-item, .result-rows.staged .result-row {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

body.reduced-motion .boon-card,
body.reduced-motion .reveal-box,
body.reduced-motion .reveal-item,
body.reduced-motion .result-rows.staged .result-row {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}