/* ========================================================================== Candor Concrete — scroll motion layer (v2) Progressive enhancement: only active when is set by JS. Without JS, or with reduced-motion, all content is fully visible. ========================================================================== */ /* Reveal-on-scroll elements start hidden + offset, settle when .is-in is added */ html.anim [data-rv]{ opacity:0; transform:translateY(30px); } html.anim [data-rv].is-in{ opacity:1; transform:none; transition:opacity .72s cubic-bezier(.22,.7,.2,1), transform .72s cubic-bezier(.22,.7,.2,1); transition-delay:var(--rvd,0ms); } /* Hero + interior page-head content rises in on load */ html.anim .hero .wrap>*, html.anim .page-head .wrap>*{ opacity:0; transform:translateY(24px); } html.anim .hero .wrap>.is-in, html.anim .page-head .wrap>.is-in{ opacity:1; transform:none; transition:opacity .8s ease, transform .8s cubic-bezier(.22,.7,.2,1); transition-delay:var(--rvd,0ms); } /* Hero background: gentle parallax drift + slow standing zoom */ html.anim .hero::before{ transform:translate3d(0,var(--sy,0px),0) scale(1.08); } /* Respect users who prefer less motion — show everything, kill transforms */ @media (prefers-reduced-motion:reduce){ html.anim [data-rv], html.anim .hero .wrap>*, html.anim .page-head .wrap>*{ opacity:1 !important; transform:none !important; transition:none !important; } html.anim .hero::before{ transform:scale(1.03) !important; } } /* On phones, drop the parallax translate (keeps scroll smooth) */ @media (max-width:720px){ html.anim .hero::before{ transform:scale(1.05) !important; } }