/* ========================================================= Parallax + scroll reveal Only active when JS adds .has-js to (so no-JS / print shows everything). Disabled under prefers-reduced-motion. ========================================================= */ /* ---- element drift (blobs, badges, accents) ---- */ [data-par] { will-change: transform; } /* ---- image pan within fixed frame ---- */ .ph[data-par-img] { overflow: hidden; } .ph[data-par-img] img { width: 100%; height: 124%; object-fit: cover; will-change: transform; } /* contain-fit images (icons) shouldn't be oversized */ .badge-heart.ph[data-par-img] img, .ph[data-par-img] img[style*="contain"] { height: 100%; } /* ---- scroll reveal ---- */ .has-js [data-reveal] { opacity: 0; transform: translateY(30px); transition: opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1); transition-delay: var(--reveal-delay, 0ms); } .has-js [data-reveal].reveal-in { opacity: 1; transform: none; } /* failsafe: snap to visible end-state if the transition never advances */ .has-js [data-reveal].reveal-set { opacity: 1 !important; transform: none !important; transition: none !important; } .has-js [data-reveal="scale"] { transform: translateY(30px) scale(.96); } .has-js [data-reveal="scale"].reveal-in { transform: none; } .has-js [data-reveal="left"] { transform: translateX(-40px); } .has-js [data-reveal="left"].reveal-in { transform: none; } .has-js [data-reveal="right"] { transform: translateX(40px); } .has-js [data-reveal="right"].reveal-in { transform: none; } @media (prefers-reduced-motion: reduce) { [data-par], .ph[data-par-img] img { transform: none !important; } .has-js [data-reveal] { opacity: 1 !important; transform: none !important; transition: none; } }