/* ===== Keyframes ===== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(2rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

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

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-glow); }
  50% { box-shadow: 0 0 0 8px transparent; }
}

/* ===== Scroll-driven animations ===== */
@supports (animation-timeline: view()) {
  .reveal,
  .timeline-item,
  .project-card,
  .cert-item,
  .metric {
    opacity: 0;
    animation: fadeInUp linear both;
    animation-timeline: view();
  }

  .reveal        { transform: translateY(2rem);   animation-range: entry 0% entry 25%; }
  .timeline-item { transform: translateY(1rem);   animation-range: entry 0% entry 20%; }
  .project-card  { transform: translateY(1.5rem); animation-range: entry 0% entry 25%; }
  .cert-item     { transform: translateY(0.5rem); animation-range: entry 0% entry 30%; }
  .metric        { transform: translateY(1rem);   animation-range: entry 0% entry 40%; }
}

/* ===== Fallback for browsers without scroll-driven animations ===== */
@supports not (animation-timeline: view()) {
  .reveal,
  .timeline-item,
  .project-card,
  .cert-item,
  .metric {
    animation: fadeInUp 0.6s ease both;
  }
}

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