/* ============================================
   ANIMATIONS — Scroll Reveal, Hover Effects
   ============================================ */

/*
 * Scroll Reveal — uses @keyframes instead of CSS transition.
 * Why: CSS transition on .reveal permanently overrides .card hover
 * transitions (both set "transform"). With @keyframes + fill-mode
 * "backwards", the animation runs once and then releases control,
 * so component-level hover transitions work at their intended speed.
 */

.reveal {
  opacity: 0;
  transform: translateY(24px);
}

.reveal--visible {
  opacity: 1;
  transform: none;
  animation: revealUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

@keyframes revealUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
}

/* Stagger delays for grid items (60ms gaps → last card at 480ms) */
.reveal--delay-1 { animation-delay: 60ms; }
.reveal--delay-2 { animation-delay: 120ms; }
.reveal--delay-3 { animation-delay: 180ms; }
.reveal--delay-4 { animation-delay: 240ms; }
.reveal--delay-5 { animation-delay: 300ms; }
.reveal--delay-6 { animation-delay: 360ms; }
.reveal--delay-7 { animation-delay: 420ms; }
.reveal--delay-8 { animation-delay: 480ms; }

/* Icon wiggle on hover */
@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  20%      { transform: rotate(-12deg); }
  40%      { transform: rotate(12deg); }
  60%      { transform: rotate(-8deg); }
  80%      { transform: rotate(8deg); }
}

.icon-spin:hover svg {
  animation: wiggle 0.5s ease-in-out;
}

/* Reduced motion override */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
  }

  .reveal--visible {
    animation: none;
  }
}