/* BUURTEITJE — mock-motion: snel en doelgericht (geen trage effecten)
   Wordt automatisch toegepast door mock-motion.js op geselecteerde blokken. */
:root { --mo-duur: 380ms; --mo-ease: cubic-bezier(.22,.9,.24,1); }

.mo { opacity: 0; transform: translateY(14px); }
.mo.in { opacity: 1; transform: none; transition: opacity var(--mo-duur) var(--mo-ease), transform var(--mo-duur) var(--mo-ease); }

/* snelle, veerkrachtige hover op knoppen en kaarten */
.btn { transition: transform 170ms cubic-bezier(.22,.9,.24,1), box-shadow 170ms ease, background 170ms ease !important; }
.btn:hover { transform: translateY(-2px) scale(1.015); }
.btn:active { transform: translateY(0) scale(.99); }
.mcard, .gcard, .rcard, .kid, .efact, .calcard, .s3, .rstep, .step, .fcard, .ocard {
  transition: transform 200ms cubic-bezier(.22,.9,.24,1), box-shadow 200ms ease, border-color 200ms ease;
}
.mcard:hover, .gcard:hover, .rcard:hover, .efact:hover, .calcard:hover, .s3:hover, .rstep:hover, .step:hover {
  transform: translateY(-3px); box-shadow: 0 14px 30px rgba(38,37,33,.12);
}

/* sticker die zacht beweegt — één per sectie, zoals afgesproken */
@keyframes mo-bounce { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-5px) rotate(-2deg); } }
.sticker, .scene__card, .bhero__sticker { animation: mo-bounce 3s ease-in-out infinite; }

/* getallen die omhoog tellen krijgen een subtiele nadruk */
.mo-count { display: inline-block; }
.mo-count.in { animation: mo-pop 480ms cubic-bezier(.22,.9,.24,1) both; }
@keyframes mo-pop { 0% { transform: scale(.92); opacity: .3; } 100% { transform: scale(1); opacity: 1; } }

/* secties die binnenkomen: korte stagger, geen lange wachtrijen */
.mo-stagger > * { opacity: 0; transform: translateY(12px); }
.mo-stagger.in > * { animation: mo-up var(--mo-duur) var(--mo-ease) both; }
.mo-stagger.in > *:nth-child(1) { animation-delay: 0ms; }
.mo-stagger.in > *:nth-child(2) { animation-delay: 70ms; }
.mo-stagger.in > *:nth-child(3) { animation-delay: 140ms; }
.mo-stagger.in > *:nth-child(4) { animation-delay: 210ms; }
.mo-stagger.in > *:nth-child(5) { animation-delay: 270ms; }
.mo-stagger.in > *:nth-child(n+6) { animation-delay: 320ms; }
@keyframes mo-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .mo, .mo-stagger > * { opacity: 1 !important; transform: none !important; animation: none !important; }
  .sticker, .scene__card, .bhero__sticker { animation: none !important; }
}
/* hero-afbeelding: komt binnen met een klein veertje (zet zich zachtjes neer) */
@keyframes hero-settle {
  0%   { transform: scale(1.06); }
  62%  { transform: scale(.997); }
  100% { transform: scale(1); }
}
.hero__img img { animation: hero-settle 1300ms cubic-bezier(.22,.9,.24,1) both; }
@media (prefers-reduced-motion: reduce) { .hero__img img { animation: none; } }