/* ========================================================================= Mimoda — scroll-onthul-animaties (site-breed), zelfde aanpak als Fleur/Sjon. Elementen met [data-anim] starten verborgen en krijgen .is-inview zodra ze in beeld scrollen (IntersectionObserver in theme.js). Alleen transform/opacity → 60fps, geen reflow. Alles gescopet onder .mimoda-anim (klasse staat vóór de eerste paint op ); draait het JS niet, dan blijft alles gewoon zichtbaar. Volledig achter prefers-reduced-motion: no-preference (toegankelijkheid). ========================================================================= */ @media (prefers-reduced-motion: no-preference) { /* Horizontale slides mogen nooit horizontale paginascroll veroorzaken. */ .mimoda-anim .mimoda-content { overflow-x: clip; } .mimoda-anim [data-anim] { opacity: 0; transition: opacity 0.7s ease, transform 0.85s cubic-bezier(0.22, 0.61, 0.36, 1); transition-delay: var(--anim-delay, 0s); will-change: opacity, transform; } .mimoda-anim [data-anim="fade-up"] { transform: translateY(30px); } .mimoda-anim [data-anim="fade-down"] { transform: translateY(-30px); } .mimoda-anim [data-anim="slide-left"] { transform: translateX(-46px); } .mimoda-anim [data-anim="slide-right"] { transform: translateX(46px); } .mimoda-anim [data-anim="zoom"] { transform: scale(0.94); } .mimoda-anim [data-anim="fade"] { transform: none; } .mimoda-anim [data-anim].is-inview { opacity: 1; transform: none; will-change: auto; } /* Getrapte reeks (stagger): kinderen verschijnen na elkaar. */ .mimoda-anim [data-anim="stagger"] { opacity: 1; transform: none; transition: none; will-change: auto; } .mimoda-anim [data-anim="stagger"] > * { will-change: opacity, transform; } .mimoda-anim [data-anim="stagger"]:not(.is-inview) > * { opacity: 0; transform: translateY(30px); } .mimoda-anim [data-anim="stagger"].is-inview > * { animation: mimoda-anim-fade-up 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) backwards; } .mimoda-anim [data-anim="stagger"].is-inview > *:nth-child(1) { animation-delay: 0s; } .mimoda-anim [data-anim="stagger"].is-inview > *:nth-child(2) { animation-delay: 0.09s; } .mimoda-anim [data-anim="stagger"].is-inview > *:nth-child(3) { animation-delay: 0.18s; } .mimoda-anim [data-anim="stagger"].is-inview > *:nth-child(4) { animation-delay: 0.27s; } .mimoda-anim [data-anim="stagger"].is-inview > *:nth-child(5) { animation-delay: 0.36s; } .mimoda-anim [data-anim="stagger"].is-inview > *:nth-child(6) { animation-delay: 0.45s; } .mimoda-anim [data-anim="stagger"].is-inview > *:nth-child(7) { animation-delay: 0.54s; } .mimoda-anim [data-anim="stagger"].is-inview > *:nth-child(n + 8) { animation-delay: 0.6s; } @keyframes mimoda-anim-fade-up { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } } /* Mobiel: tweekoloms stapelt → horizontale slide wordt verticale fade-up. */ @media (max-width: 981px) { .mimoda-anim [data-anim="slide-left"], .mimoda-anim [data-anim="slide-right"] { transform: translateY(30px); } } }