/* ============================================================
   Inlaadanimaties: elementen komen in beeld terwijl je scrollt
   ============================================================ */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .75s cubic-bezier(.16,1,.3,1),transform .75s cubic-bezier(.16,1,.3,1);transition-delay:var(--rd,0ms);will-change:opacity,transform}
[data-reveal].is-in{opacity:1;transform:none}

/* de hero laadt direct, zonder op scroll te wachten */
[data-reveal-now]{opacity:0;transform:translateY(22px);animation:revealIn .8s cubic-bezier(.16,1,.3,1) forwards;animation-delay:var(--rd,0ms)}
@keyframes revealIn{to{opacity:1;transform:none}}

/* nooit horizontaal laten schuiven of klikken blokkeren */
[data-reveal],[data-reveal-now]{backface-visibility:hidden}

@media (prefers-reduced-motion:reduce){
  [data-reveal],[data-reveal-now]{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}
}

/* hover-lift moet blijven werken nadat het element is ingeladen
   ([data-reveal].is-in{transform:none} zou 'm anders overschrijven) */
.button[data-reveal].is-in:hover,
a.button[data-reveal].is-in:hover,
.button[data-reveal-now]:hover,
a.button[data-reveal-now]:hover{transform:translateY(-3px)}