/* Chocolaterie Fleur — scroll-onthul-animaties (proposal, site-breed). * * Zelfde aanpak als Sjon Bedden: elementen met [data-anim] starten verborgen en * krijgen .is-inview zodra ze in beeld scrollen (IntersectionObserver in * theme.js). De CSS regelt de transitie. Alleen transform/opacity → geen layout- * reflow, wél 60fps. Feel afgestemd op de zachte, elegante huisstijl van Fleur: * korte afstand, zachte ease-out settle (dezelfde curve als de knop-hover-lift). * * VEILIGHEID: alles is gescopet onder .fleur-anim (die klasse zet een piepklein * inline-scriptje in meteen op ). Draait het JS niet (uitgezet / * fout), dan ontbreekt .fleur-anim en blijft ALLE content gewoon zichtbaar — de * animatie is puur progressive enhancement, nooit een voorwaarde om iets te zien. * * TOEGANKELIJKHEID: het hele blok zit achter prefers-reduced-motion:no-preference, * dus wie "minder beweging" heeft ingesteld ziet alles direct, zonder verschuiving. */ @media (prefers-reduced-motion: no-preference) { /* Veiligheidsklep: een horizontale slide (slide-left/right) mag nooit een horizontale paginascroll veroorzaken. .site-main klipt de tijdelijke uitsteek (zelfde patroon als checkout.css/assortiment.css). */ .fleur-anim .site-main { overflow-x: clip; } /* — Basis: verborgen beginstand + de terug-naar-normaal transitie. — */ .fleur-anim [data-anim] { opacity: 0; transition: opacity 0.7s ease, transform 0.85s cubic-bezier(0.22, 0.61, 0.36, 1); /* Per-element vertraging optioneel via style="--anim-delay:.15s". */ transition-delay: var(--anim-delay, 0s); will-change: opacity, transform; } /* — Richtingsvarianten (suffix = kant waar 't vandaan komt). — */ .fleur-anim [data-anim="fade-up"] { transform: translateY(30px); } .fleur-anim [data-anim="fade-down"] { transform: translateY(-30px); } .fleur-anim [data-anim="slide-left"] { transform: translateX(-46px); } /* komt van links */ .fleur-anim [data-anim="slide-right"]{ transform: translateX(46px); } /* komt van rechts */ .fleur-anim [data-anim="zoom"] { transform: scale(0.94); } /* zacht inzoomen (beeld) */ .fleur-anim [data-anim="fade"] { transform: none; } /* alleen opacity */ /* — Onthuld: alles terug naar rust. — */ .fleur-anim [data-anim].is-inview { opacity: 1; transform: none; } /* Na afloop de will-change loslaten (spaart geheugen op lange pagina's). */ .fleur-anim [data-anim].is-inview { will-change: auto; } /* — Getrapte reeks (stagger): één trigger op de container, de directe kinderen verschijnen na elkaar (~90ms per item). Generiek herbruikbaar op elk raster/lijst — geen per-blok CSS nodig. Keyframe-animatie (backwards fill) i.p.v. transition, zodat een eventuele hover-transitie op het kind daarna gewoon blijft werken. — */ .fleur-anim [data-anim="stagger"] { opacity: 1; /* de container zelf niet vervagen ... */ transform: none; transition: none; will-change: auto; } .fleur-anim [data-anim="stagger"] > * { will-change: opacity, transform; } /* Beginstand van de kinderen tot de container in beeld komt. */ .fleur-anim [data-anim="stagger"]:not(.is-inview) > * { opacity: 0; transform: translateY(30px); } .fleur-anim [data-anim="stagger"].is-inview > * { animation: fleur-anim-fade-up 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) backwards; } .fleur-anim [data-anim="stagger"].is-inview > *:nth-child(1) { animation-delay: 0s; } .fleur-anim [data-anim="stagger"].is-inview > *:nth-child(2) { animation-delay: 0.09s; } .fleur-anim [data-anim="stagger"].is-inview > *:nth-child(3) { animation-delay: 0.18s; } .fleur-anim [data-anim="stagger"].is-inview > *:nth-child(4) { animation-delay: 0.27s; } .fleur-anim [data-anim="stagger"].is-inview > *:nth-child(5) { animation-delay: 0.36s; } .fleur-anim [data-anim="stagger"].is-inview > *:nth-child(6) { animation-delay: 0.45s; } .fleur-anim [data-anim="stagger"].is-inview > *:nth-child(7) { animation-delay: 0.54s; } .fleur-anim [data-anim="stagger"].is-inview > *:nth-child(n + 8) { animation-delay: 0.6s; } @keyframes fleur-anim-fade-up { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } } /* — Mobiel/staande tablet: tweekoloms-secties stapelen tot één kolom, dus een horizontale slide slaat nergens meer op (en zou net buiten beeld kunnen uitsteken). Val daar terug op een verticale fade-up. — */ @media (max-width: 981px) { .fleur-anim [data-anim="slide-left"], .fleur-anim [data-anim="slide-right"] { transform: translateY(30px); } } }