/* =========================================================
   ANIMATIONS
   Restrained, reusable motion utilities. Applied via classes
   or a small IntersectionObserver in main.js (adds .is-visible).
   ========================================================= */

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

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

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Card hover lift — used for product/blog/certification cards */
.hover-lift {
  transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}

/* Marquee-style auto-slide used by certification slider */
.auto-slide-track {
  display: flex;
  gap: var(--space-3);
  animation: none; /* JS toggles a running class once initialized */
}

.auto-slide-track.is-running {
  animation: slide-left linear infinite;
}

@keyframes slide-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}