/* ==========================================================================
   ANIMATIONS — Micro-interactions, Transitions, Scroll Reveals
   ========================================================================== */

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

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

/* --- Scroll Reveal --- */
.reveal {
  opacity: 0;
  transition: opacity 0.25s ease;
}
.reveal.is-visible { opacity: 1; }

.reveal-stagger > * {
  opacity: 0;
  transition: opacity 0.25s ease;
}
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 80ms; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 160ms; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 240ms; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 320ms; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 400ms; }
.reveal-stagger.is-visible > * { opacity: 1; }

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

/* --- Image Zoom --- */
.img-zoom { overflow: hidden; border-radius: var(--radius-lg); }
.img-zoom img { transition: transform 0.5s ease; }
.img-zoom:hover img { transform: scale(1.05); }

/* --- Skeleton Loading --- */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton {
  background: linear-gradient(90deg, var(--color-bg-alt) 25%, #e8e8e8 50%, var(--color-bg-alt) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease infinite;
  border-radius: var(--radius-sm);
}

/* --- Respect reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal, .reveal-stagger > * { opacity: 1; transform: none; }
}