/* ============================================================
   DIERENS VERHUUR — ANIMATIONS CSS
   ============================================================ */

/* ---- Scroll-animaties ---- */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.animate-on-scroll.from-left {
  transform: translateX(-32px);
}
.animate-on-scroll.from-left.is-visible {
  transform: translateX(0);
}
.animate-on-scroll.from-right {
  transform: translateX(32px);
}
.animate-on-scroll.from-right.is-visible {
  transform: translateX(0);
}

/* Stagger kinderen */
[data-stagger] > *:nth-child(1)  { transition-delay: 0s; }
[data-stagger] > *:nth-child(2)  { transition-delay: 0.08s; }
[data-stagger] > *:nth-child(3)  { transition-delay: 0.16s; }
[data-stagger] > *:nth-child(4)  { transition-delay: 0.24s; }
[data-stagger] > *:nth-child(5)  { transition-delay: 0.32s; }
[data-stagger] > *:nth-child(6)  { transition-delay: 0.4s; }

/* Respects user motion preference */
@media (prefers-reduced-motion: reduce) {
  .animate-on-scroll {
    opacity: 1;
    transform: none;
    transition: none;
  }
  [data-stagger] > * { transition-delay: 0s; }
  .card-hover { transition: none; }
  .product-card__img { transition: none; }
}

/* ---- Loading spinner ---- */
@keyframes drv-spin {
  to { transform: rotate(360deg); }
}
.fa-spin {
  animation: drv-spin 0.75s linear infinite;
}

/* ---- Pulse (voor succes-indicator) ---- */
@keyframes drv-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* ---- Hero afbeelding langzaam zoomen ---- */
@keyframes drv-hero-zoom {
  from { transform: scale(1.08); }
  to   { transform: scale(1); }
}
.hero__bg {
  animation: drv-hero-zoom 12s ease-out forwards;
}
@media (prefers-reduced-motion: reduce) {
  .hero__bg { animation: none; }
}