/** * Scroll-triggered animation — "entrance" preset. * Cards/sections fade/slide in once they cross the viewport * (see storefront-scroll-entrance.js). * Only active while [data-cms-scroll-anim="entrance"] is on . * * Hide only after JS sets [data-cms-scroll-ready] AND the node is not yet * .is-inview. First-viewport targets are marked .is-inview before ready, so * menu navigations do not flash white empty cells over a transparent canvas. * * Specificity intentionally beats skin `.m-template-* * { transition-duration:0.01ms }` * under prefers-reduced-motion (merchant §8 opt-in). */ body[data-cms-scroll-anim="entrance"][data-cms-scroll-ready] .cms-scroll-target:not(.is-inview) { opacity: 0; transform: translateY(48px) scale(0.94); transition-property: opacity, transform !important; transition-duration: 700ms !important; transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1) !important; transition-delay: var(--cms-scroll-delay, 0ms) !important; will-change: opacity, transform; } body[data-cms-scroll-anim="entrance"][data-cms-scroll-ready] .cms-scroll-target.is-inview { opacity: 1; transform: translateY(0) scale(1); transition-property: opacity, transform !important; transition-duration: 700ms !important; transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1) !important; transition-delay: var(--cms-scroll-delay, 0ms) !important; will-change: auto; }