/* =============================================
   Animations — Subtle, Professional
   ============================================= */

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

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

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

@keyframes pulse-glow {
  0% { box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0.3); }
  70% { box-shadow: 0 0 0 8px rgba(var(--primary-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0); }
}

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

@keyframes pageFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.995);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Utility Animation Classes */
.animate-fade-in {
  animation: fadeIn var(--transition-normal) forwards;
}

.animate-slide-up {
  animation: slideUpFade 400ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

.animate-scale-in {
  animation: scaleIn 350ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

.animate-page-in {
  animation: pageFadeIn 350ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

/* Staggered List Animation */
.stagger-1 { animation-delay: 40ms; }
.stagger-2 { animation-delay: 80ms; }
.stagger-3 { animation-delay: 120ms; }
.stagger-4 { animation-delay: 160ms; }
.stagger-5 { animation-delay: 200ms; }
.stagger-6 { animation-delay: 240ms; }
.stagger-7 { animation-delay: 280ms; }
.stagger-8 { animation-delay: 320ms; }

/* Skeleton Loading */
.skeleton {
  background: linear-gradient(90deg,
    rgba(255,255,255,0.04) 25%,
    rgba(255,255,255,0.08) 37%,
    rgba(255,255,255,0.04) 63%
  );
  background-size: 800px 100%;
  animation: shimmer 1.8s infinite linear;
  border-radius: var(--radius-md);
}

.theme-light .skeleton {
  background: linear-gradient(90deg,
    rgba(0,0,0,0.04) 25%,
    rgba(0,0,0,0.07) 37%,
    rgba(0,0,0,0.04) 63%
  );
  background-size: 800px 100%;
}

/* Page Transitions — Smooth cross-fade */
.page-transition-enter {
  opacity: 0;
  transform: translateY(6px);
}

.page-transition-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 280ms cubic-bezier(0.25, 0.1, 0.25, 1),
              transform 280ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

.page-transition-exit {
  opacity: 1;
}

.page-transition-exit-active {
  opacity: 0;
  transition: opacity 180ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Main content fade for route changes */
.main-content {
  transition: opacity 200ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* View Transitions API (native support) */
::view-transition-old(root) {
  animation: 200ms ease-out both fadeOut;
}

::view-transition-new(root) {
  animation: 280ms ease-out both fadeIn;
}

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