@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.1); }
}

@keyframes shieldPulse {
  0%, 100% {
    opacity: 1;
    box-shadow:
      0 0 8px 2px rgba(68, 136, 255, 0.5),
      0 0 20px 6px rgba(68, 136, 255, 0.25),
      inset 0 0 12px 3px rgba(68, 136, 255, 0.15);
  }
  50% {
    opacity: 0.7;
    box-shadow:
      0 0 12px 4px rgba(68, 136, 255, 0.7),
      0 0 30px 10px rgba(68, 136, 255, 0.35),
      inset 0 0 16px 5px rgba(68, 136, 255, 0.2);
  }
}

@keyframes shieldExpiring {
  0%, 100% {
    opacity: 1;
    box-shadow:
      0 0 8px 2px rgba(255, 140, 50, 0.5),
      0 0 20px 6px rgba(255, 140, 50, 0.25),
      inset 0 0 12px 3px rgba(255, 140, 50, 0.15);
  }
  50% {
    opacity: 0.35;
    box-shadow:
      0 0 4px 1px rgba(255, 80, 30, 0.4),
      0 0 10px 3px rgba(255, 80, 30, 0.15),
      inset 0 0 6px 2px rgba(255, 80, 30, 0.1);
  }
}

@keyframes shieldRippleBurst {
  0% {
    transform: scale(1);
    opacity: 0.9;
  }
  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}

@keyframes shieldBlockShake {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-5px, 3px); }
  20% { transform: translate(5px, -3px); }
  30% { transform: translate(-4px, -4px); }
  40% { transform: translate(4px, 3px); }
  50% { transform: translate(-3px, 2px); }
  60% { transform: translate(3px, -2px); }
  70% { transform: translate(-2px, 3px); }
  80% { transform: translate(2px, -1px); }
}

@keyframes screenShake {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-3px, 2px); }
  50% { transform: translate(3px, -2px); }
  75% { transform: translate(-2px, -3px); }
}

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

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

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

@keyframes scaleIn {
  from { transform: scale(0.5); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

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

@keyframes skinPreviewReveal {
  0% { opacity: 0.3; filter: brightness(1.3); }
  100% { opacity: 1; filter: brightness(1); }
}

/* ── Title screen epic animations ────────────────────── */

@keyframes titleLogoReveal {
  0% {
    opacity: 0;
    transform: scale(0.7);
    filter: brightness(2) blur(8px);
  }
  60% {
    opacity: 1;
    transform: scale(1.04);
    filter: brightness(1.3) blur(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: brightness(1) blur(0);
  }
}

@keyframes titleLogoFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-0.375rem); }
}

@keyframes titleGlow {
  0%, 100% {
    filter: drop-shadow(0 0 0.5rem rgba(68, 136, 255, 0.3))
            drop-shadow(0 0 1.5rem rgba(68, 136, 255, 0.15));
  }
  50% {
    filter: drop-shadow(0 0 1rem rgba(68, 136, 255, 0.5))
            drop-shadow(0 0 2.5rem rgba(68, 136, 255, 0.3));
  }
}

@keyframes titleTaglineFade {
  0% { opacity: 0; transform: translateY(0.5rem); }
  100% { opacity: 0.7; transform: translateY(0); }
}

@keyframes menuItemSlideUp {
  0% {
    opacity: 0;
    transform: translateY(1.5rem);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes titleParticle {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0);
  }
  20% {
    opacity: 0.7;
    transform: translateY(-1rem) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-4rem) scale(0.3);
  }
}

@keyframes titleShimmerBar {
  0% { background-position: -150% 0; }
  100% { background-position: 250% 0; }
}

/* ── Sub-screen entrance animations ─────────────────── */

@keyframes screenBackBtnSlide {
  0% { opacity: 0; transform: translateX(-1.5rem); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes screenHeaderDrop {
  0% { opacity: 0; transform: translateY(-1rem) scale(0.9); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes screenContentStagger {
  0% { opacity: 0; transform: translateY(0.75rem); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes screenContentStaggerLocked {
  0% { opacity: 0; transform: translateY(0.75rem); }
  100% { opacity: 0.45; transform: translateY(0); }
}

@keyframes screenFadeSlideUp {
  0% { opacity: 0; transform: translateY(1rem); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ── Overlay entrance animations ────────────────────── */

@keyframes overlayBackdropIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes overlayContentPop {
  0% {
    opacity: 0;
    transform: scale(0.6) translateY(1.5rem);
  }
  50% {
    opacity: 1;
    transform: scale(1.05) translateY(-0.25rem);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes overlaySlideUp {
  0% {
    opacity: 0;
    transform: translateY(2rem);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes overlayStatPop {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  60% {
    opacity: 1;
    transform: scale(1.15);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes overlayBtnStagger {
  0% {
    opacity: 0;
    transform: translateY(1rem) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ── Particle variety: sideways drift ───────────────── */

@keyframes titleParticleDrift {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0);
  }
  15% {
    opacity: 0.8;
    transform: translate(0.5rem, -0.5rem) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-2rem, -5rem) scale(0.2);
  }
}

@keyframes titleParticleFloat {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0);
  }
  10% {
    opacity: 0.6;
    transform: translateY(-0.5rem) scale(1);
  }
  50% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: translateY(-6rem) scale(0.15);
  }
}

@keyframes titleParticleGlow {
  0%, 100% { box-shadow: 0 0 3px 1px currentColor; }
  50% { box-shadow: 0 0 8px 3px currentColor; }
}

/* ── Utility classes ────────────────────────────────── */

.shake { animation: screenShake 0.3s ease; }
.shield-shake { animation: shieldBlockShake 0.35s ease; }
.fade-in { animation: fadeIn 0.3s ease; }
.fade-out { animation: fadeOut 0.3s ease; }
.slide-up { animation: slideUp 0.3s ease; }
.scale-in { animation: scaleIn 0.3s ease; }

/* Sub-screen entrance: back button */
.anim-back-btn {
  opacity: 0;
  animation: screenBackBtnSlide 0.25s cubic-bezier(0.16, 1, 0.3, 1) 0.05s forwards;
}

/* Sub-screen entrance: screen header */
.anim-header {
  opacity: 0;
  animation: screenHeaderDrop 0.3s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
}

/* Sub-screen entrance: staggered content item (set --stagger-i via inline style) */
.anim-stagger {
  opacity: 0;
  animation: screenContentStagger 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(0.12s + var(--stagger-i, 0) * 0.03s);
}

/* Overlay entrance: the backdrop itself */
.anim-overlay-in {
  animation: overlayBackdropIn 0.2s ease forwards;
}

/* Overlay entrance: the content card */
.anim-overlay-content {
  opacity: 0;
  animation: overlayContentPop 0.35s cubic-bezier(0.16, 1, 0.3, 1) 0.08s forwards;
}

/* Overlay entrance: stat number */
.anim-overlay-stat {
  opacity: 0;
  animation: overlayStatPop 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
}

/* Overlay entrance: staggered buttons */
.anim-overlay-btn {
  opacity: 0;
  animation: overlayBtnStagger 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

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