/* ===== SCROLL ANIMATIES ===== */

/* Basis animatie staat */
.animate-fade-up,
.animate-fade-in,
.animate-fade-left {
  opacity: 0;
  transition:
    opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.animate-fade-up    { transform: translateY(1.5rem); }
.animate-fade-in    { transform: translateY(0); }
.animate-fade-left  { transform: translateX(1.5rem); }

/* Zichtbaar - IntersectionObserver voegt deze klasse toe */
.is-visible {
  opacity: 1 !important;
  transform: translate(0) !important;
}

/* Vertragingen */
.delay-1 { transition-delay: 0.10s; }
.delay-2 { transition-delay: 0.20s; }
.delay-3 { transition-delay: 0.30s; }
.delay-4 { transition-delay: 0.40s; }
.delay-5 { transition-delay: 0.50s; }

/* ===== STAGGER VOOR GRIDS ===== */
/* JS voegt automatisch --stagger-index CSS var toe */
.stagger-item {
  opacity: 0;
  transform: translateY(1.25rem);
  transition:
    opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--stagger-index, 0) * 80ms);
}

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

/* ===== HOVER EFFECTEN ===== */
.hover-lift {
  transition: transform var(--transition-spring), box-shadow var(--transition-base);
}

.hover-lift:hover {
  transform: translateY(-0.25rem);
  box-shadow: var(--shadow-lg);
}

/* ===== NAV ANCHOR SMOOTH SCROLL ===== */
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-height);
}

/* ===== FOCUS STIJLEN ===== */
:focus-visible {
  outline: 0.1875rem solid var(--color-primary-dark);
  outline-offset: 0.125rem;
  border-radius: 0.125rem;
}

/* ===== PREFERS REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .animate-fade-up,
  .animate-fade-in,
  .animate-fade-left,
  .stagger-item {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .btn,
  .card,
  .pricing-card,
  .portfolio-card {
    transition: none;
  }

  .hover-lift:hover {
    transform: none;
  }
}