/* ============================================
   ANIMATIES — De Blaoskaffers
   ============================================ */

/* ─── Hero Reveal ─────────────────────────── */
@keyframes heroReveal {
  from { opacity: 0; transform: translateY(50px); }
  to   { opacity: 1; transform: translateY(0);    }
}

@keyframes heroRevealLeft {
  from { opacity: 0; transform: translateX(-60px); }
  to   { opacity: 1; transform: translateX(0);     }
}

@keyframes heroRevealRight {
  from { opacity: 0; transform: translateX(60px); }
  to   { opacity: 1; transform: translateX(0);    }
}

@keyframes heroScaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1);    }
}

/* ─── Scroll Reveal ───────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.75s var(--ease-out-quart),
              transform 0.75s var(--ease-out-quart);
}

.reveal.zichtbaar {
  opacity: 1;
  transform: translateY(0);
}

.reveal-links {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.7s var(--ease-out-quart),
              transform 0.7s var(--ease-out-quart);
}
.reveal-links.zichtbaar { opacity: 1; transform: translateX(0); }

.reveal-rechts {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.7s var(--ease-out-quart),
              transform 0.7s var(--ease-out-quart);
}
.reveal-rechts.zichtbaar { opacity: 1; transform: translateX(0); }

.reveal-schaal {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.7s var(--ease-out-quart),
              transform 0.7s var(--ease-out-quart);
}
.reveal-schaal.zichtbaar { opacity: 1; transform: scale(1); }

/* Stagger delays */
.stagger-1 { transition-delay: 0ms;   }
.stagger-2 { transition-delay: 120ms; }
.stagger-3 { transition-delay: 240ms; }
.stagger-4 { transition-delay: 360ms; }
.stagger-5 { transition-delay: 480ms; }
.stagger-6 { transition-delay: 600ms; }

/* ─── Stat Counters ───────────────────────── */
@keyframes statReveal {
  from { opacity: 0; transform: translateY(48px) scale(0.9); }
  to   { opacity: 1; transform: translateY(0)     scale(1);   }
}

.stat-item {
  opacity: 0;
  transform: translateY(48px) scale(0.9);
  transition: opacity 0.7s var(--ease-out-quart),
              transform 0.7s var(--ease-out-quart);
}
.stat-item.zichtbaar {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ─── Scroll-gedreven lijn ────────────────── */
@keyframes lineGrow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ─── Scroll arrow bounce ─────────────────── */
@keyframes scrollBounce {
  0%, 100% { transform: translateY(0);   opacity: 1; }
  50%       { transform: translateY(8px); opacity: 0.5; }
}

/* ─── FAQ open/close ──────────────────────── */
@keyframes faqOpen {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* ─── Slide in overlay ───────────────────── */
@keyframes slideInRight {
  from { transform: translateX(100%); }
  to   { transform: translateX(0);    }
}

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

/* ─── Pulse accent ────────────────────────── */
@keyframes pulseDot {
  0%, 100% { transform: scale(1);    opacity: 1;   }
  50%       { transform: scale(1.4); opacity: 0.6; }
}

/* ─── Nav entrance (stagger reveal bij pageload) ── */
@keyframes navSlideDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.nav-logo  { animation: navSlideDown 0.6s var(--ease-out-quart) 0.05s both; }
.nav-links { animation: navSlideDown 0.6s var(--ease-out-quart) 0.2s both; }
.nav-cta   { animation: navSlideDown 0.6s var(--ease-out-quart) 0.35s both; }