/* ============================================
   ANIMATIONS — Keyframes, Transitions, Effects
   ============================================ */

/* ── Keyframes ── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

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

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

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

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

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

@keyframes scaleOut {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(.92); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .5; }
}

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

@keyframes glow {
  0%, 100% {
    box-shadow: 0 0 12px rgba(var(--primary-rgb),.4), 0 0 28px rgba(var(--primary-rgb),.12);
  }
  50% {
    box-shadow: 0 0 22px rgba(var(--primary-rgb),.8), 0 0 50px rgba(var(--primary-rgb),.28);
  }
}

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

@keyframes spin {
  to { transform: rotate(360deg); }
}

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

@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33%       { transform: translateY(-12px) rotate(1deg); }
  66%       { transform: translateY(-6px) rotate(-1deg); }
}

@keyframes counterUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

@keyframes progressFill {
  from { width: 0; }
}

@keyframes toastSlideIn {
  from { opacity: 0; transform: translateX(100%); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes toastSlideOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(100%); }
}

@keyframes neonPulse {
  0%, 100% {
    box-shadow:
      0 0 8px rgba(var(--primary-rgb),.55),
      0 0 20px rgba(var(--primary-rgb),.28),
      0 0 40px rgba(var(--primary-rgb),.11);
  }
  50% {
    box-shadow:
      0 0 14px rgba(var(--primary-rgb),.9),
      0 0 35px rgba(var(--primary-rgb),.48),
      0 0 65px rgba(var(--primary-rgb),.2);
  }
}

@keyframes heartbeat {
  0%   { transform: scale(1); }
  14%  { transform: scale(1.12); }
  28%  { transform: scale(1); }
  42%  { transform: scale(1.08); }
  70%  { transform: scale(1); }
  100% { transform: scale(1); }
}

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

/* ── Utility animation classes ── */
.animate-fade-in      { animation: fadeIn .3s ease both; }
.animate-slide-up     { animation: slideUp .4s ease both; }
.animate-slide-down   { animation: slideDown .3s ease both; }
.animate-slide-in     { animation: slideIn .3s ease both; }
.animate-scale-in     { animation: scaleIn .3s ease both; }
.animate-pulse        { animation: pulse 2s ease infinite; }
.animate-bounce       { animation: bounce 1s ease infinite; }
.animate-glow         { animation: glow 2s ease infinite; }
.animate-float        { animation: float 4s ease-in-out infinite; }
.animate-neon-pulse   { animation: neonPulse 2.5s ease infinite; }
.animate-heartbeat    { animation: heartbeat 1.4s ease infinite; }
.animate-spin         { animation: spin .7s linear infinite; }

/* Stagger children */
.stagger-children > * {
  animation: slideUp .4s ease both;
}
.stagger-children > *:nth-child(1) { animation-delay: 0ms; }
.stagger-children > *:nth-child(2) { animation-delay: 60ms; }
.stagger-children > *:nth-child(3) { animation-delay: 120ms; }
.stagger-children > *:nth-child(4) { animation-delay: 180ms; }
.stagger-children > *:nth-child(5) { animation-delay: 240ms; }
.stagger-children > *:nth-child(6) { animation-delay: 300ms; }
.stagger-children > *:nth-child(7) { animation-delay: 360ms; }
.stagger-children > *:nth-child(8) { animation-delay: 420ms; }

/* ── Page transition ── */
.page-enter {
  animation: pageEnter .35s cubic-bezier(.25,.46,.45,.94) both;
}

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

.page-exit {
  animation: pageExit .2s ease both;
}

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

/* ── Neon hover effects ── */
.neon-hover {
  transition: box-shadow var(--transition), border-color var(--transition);
}

.neon-hover:hover {
  box-shadow: var(--neon-glow);
  border-color: rgba(var(--primary-rgb), .4);
}

/* ── Glow text ── */
.glow-text {
  color: var(--primary);
  text-shadow: 0 0 20px rgba(var(--primary-rgb), .4);
}

/* ── Gradient text ── */
.gradient-text {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Skeleton shimmer ── */
.skeleton-shimmer {
  background: linear-gradient(
    90deg,
    var(--surface-2) 0%,
    var(--surface-3) 40%,
    var(--surface-2) 80%,
    var(--surface-2) 100%
  );
  background-size: 300% 100%;
  animation: shimmer 1.8s ease-in-out infinite;
}

/* ── Ripple effect ── */
.ripple {
  position: relative;
  overflow: hidden;
}

.ripple__circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.3);
  transform: scale(0);
  animation: ripple .6s linear;
  pointer-events: none;
}

/* ── Transition helpers ── */
.transition       { transition: all var(--transition); }
.transition-fast  { transition: all var(--transition-fast); }
.transition-slow  { transition: all var(--transition-slow); }
.transition-none  { transition: none !important; }

/* ── Timer warning pulse ── */
.timer--warning {
  animation: timerPulse 1s ease infinite;
  color: var(--error) !important;
}

@keyframes timerPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .6; }
}

/* ── Timer urgent / critical states ── */
@keyframes timer-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.6; }
}

.timer--urgent {
  color: #EF4444 !important;
}

.timer--critical {
  color: #EF4444 !important;
  animation: timer-pulse 1s ease-in-out infinite;
  font-weight: 700;
}

/* ── Progress bar animation ── */
.progress-animated .progress-bar__fill {
  animation: progressFill .8s cubic-bezier(.25,.46,.45,.94) both;
}

/* ── Hover scale ── */
.hover-scale {
  transition: transform var(--transition);
}
.hover-scale:hover {
  transform: scale(1.03);
}

/* ── Hover lift ── */
.hover-lift {
  transition: transform var(--transition), box-shadow var(--transition);
}
.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

/* ── Entrance delays ── */
.delay-100  { animation-delay: 100ms; }
.delay-200  { animation-delay: 200ms; }
.delay-300  { animation-delay: 300ms; }
.delay-400  { animation-delay: 400ms; }
.delay-500  { animation-delay: 500ms; }

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