/* motion.css: ALLE beweging van alle sites. Alleen transform + opacity. Vaste waarden, niet per site aanpassen.
   Klassen:  .m-pop   springt één keer in beeld (motion.js zet .m-in)
             .m-lift  hover: opveren + kantelen; tap: indrukken   (gebruik --r / --hr voor de kanteling)
             .m-press tap: indrukken (knoppen, pillen)
             .m-float trage zweef-lus (maximaal een paar decoratieve plaatjes per pagina; nooit hero/LCP)  + .m-float-2 / .m-float-3 voor variatie
   Zonder JS of met prefers-reduced-motion is alles gewoon zichtbaar en stil. */
:root{--m-spring:cubic-bezier(.34,1.56,.64,1);--m-t:.35s;--m-pop-t:.6s;--m-hover-scale:1.04;--m-hover-rot:2deg;--m-tap:.97;--m-bob:-10px}
@keyframes m-pop{from{opacity:0;transform:scale(.9) rotate(var(--r,0deg))}to{opacity:1;transform:scale(1) rotate(var(--r,0deg))}}
@keyframes m-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(var(--m-bob))}}
.m-lift{transform:rotate(var(--r,0deg))}
@media (prefers-reduced-motion:no-preference){
 .m-lift,.m-press{transition:transform var(--m-t) var(--m-spring),box-shadow .25s ease;-webkit-tap-highlight-color:transparent}
 .m-float{animation:m-bob 7s ease-in-out infinite}
 .m-float-2{animation-duration:9s;animation-delay:-3s}
 .m-float-3{animation-duration:6s;animation-delay:-2s}
 .js-motion .m-pop:not(.m-in){opacity:0;transform:scale(.9) rotate(var(--r,0deg))}
 .js-motion .m-pop.m-in:not(.m-seen){animation:m-pop var(--m-pop-t) var(--m-spring) var(--m-d,0ms) backwards}
 @media (hover:hover){
  .m-lift:hover{transform:rotate(var(--hr,var(--m-hover-rot))) scale(var(--m-hover-scale))}
  .m-press:hover{transform:rotate(-2deg) scale(var(--m-hover-scale))}
 }
 .m-lift:active{transform:rotate(var(--r,0deg)) scale(var(--m-tap))}
 .m-press:active{transform:scale(var(--m-tap))}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{.m-pop{opacity:1!important;transform:none!important}}