/**
 * TypeRush - Animations & Micro-Interactions CSS
 * Phase 12: Micro-Animations & Accessibility
 *
 * @package TypeRush
 */

/* ════════════════════════════════════════════════════════════
   1. KEYFRAMES
   ════════════════════════════════════════════════════════════ */

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

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

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

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

@keyframes modalScaleIn {
  0% {
    opacity: 0;
    transform: scale(0.94) translateY(12px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

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

@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(226, 183, 20, 0.4);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(226, 183, 20, 0);
  }
}

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

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

@keyframes resultHeroPop {
  0% {
    opacity: 0;
    transform: scale(0.85);
  }
  70% {
    transform: scale(1.04);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* ════════════════════════════════════════════════════════════
   2. MICRO-INTERACTIONS & TRANSITIONS
   ════════════════════════════════════════════════════════════ */

/* Config buttons active / hover bounce & glow */
.config-btn {
  transition: color 0.18s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.18s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.15s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.config-btn:hover {
  transform: translateY(-1px);
}

.config-btn:active {
  transform: scale(0.96) !important;
}

.config-btn.active {
  transform: translateY(0);
}

/* Navigation buttons micro-animation */
.nav-icon-btn, .footer-link, .footer-theme-btn {
  transition: color 0.18s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.18s ease;
}

.nav-icon-btn:hover, .footer-theme-btn:hover {
  transform: translateY(-2px);
}

.nav-icon-btn:active {
  transform: scale(0.92);
}

/* Restart button rotation animation */
.restart-btn {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              color 0.2s ease,
              background-color 0.2s ease !important;
}

.restart-btn:hover {
  transform: rotate(45deg) scale(1.1);
}

.restart-btn:active {
  transform: rotate(180deg) scale(0.95);
}

/* Result screen sequential entrance */
.results-container.show .results-hero {
  animation: resultHeroPop 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.results-container.show .hero-stat:nth-child(1) {
  animation: slideUpIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
}

.results-container.show .hero-stat:nth-child(2) {
  animation: slideUpIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both;
}

.results-container.show .hero-stat:nth-child(3) {
  animation: slideUpIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.18s both;
}

.results-container.show .hero-stat:nth-child(4) {
  animation: slideUpIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.24s both;
}

.results-container.show .results-chart-box {
  animation: slideUpIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.22s both;
}

.results-container.show .results-substats-row {
  animation: slideUpIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}

.results-container.show .results-actions {
  animation: slideUpIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.36s both;
}

/* Settings panel drawer cubic-bezier slide */
.settings-drawer {
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.25s ease !important;
}

/* Modals smooth pop */
.tr-modal {
  animation: modalBackdropFadeIn 0.22s ease both;
}

.tr-modal-dialog, .command-palette-container, .auth-modal-box {
  animation: modalScaleIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Accessible Focus Rings */
:focus-visible {
  outline: 2px solid var(--main-color, #e2b714) !important;
  outline-offset: 3px !important;
  border-radius: 4px;
}

button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
  outline: none !important;
}

/* ════════════════════════════════════════════════════════════
   3. ACCESSIBILITY — REDUCED MOTION PREFERENCE
   ════════════════════════════════════════════════════════════ */

@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;
  }

  .caret {
    transition: none !important;
  }

  .results-container.show .results-hero,
  .results-container.show .hero-stat,
  .results-container.show .results-chart-box,
  .results-container.show .results-substats-row,
  .results-container.show .results-actions {
    animation: none !important;
  }
}