/* Desktop scroll-scrubbed art (2026-09-28). Every rule here is scoped to >760px AND html[data-motion=scroll] (the default, set in ); '?motion=timed' falls back to the original desktop behaviour untouched. Mobile scrub styles live in mobile.css. Driven by scrub.js. */ /* The pin wrappers around #inventory and #live-chat do nothing unless desktop scroll mode is on. */ .d-pin{display:contents} @media(min-width:761px){ /* The art's entrance follows scroll, so the play-on-view transition would only make it lag. */ html[data-motion=scroll] .js-motion .poster:not(.hero)>.cutout.reveal-x{transition:none} /* 03 inventory: listings and inbox rows ease in each time a filter or tab shows them. */ html[data-motion=scroll] .inventory-art .listing,html[data-motion=scroll] .inventory-art .inbox-row{animation:d-in .45s var(--ease)} @keyframes d-in{from{opacity:0;transform:translateY(10px)}} /* 05 CRM: the walk-in card travels to the next stage (offsets from scrub.js; lifted while moving). */ html[data-motion=scroll] .crm-art .customer.d-mover{position:relative;z-index:2;translate:var(--dx,0px) var(--dy,0px);rotate:calc(var(--lift,0) * -2deg);scale:calc(1 + var(--lift,0) * .03);transition:box-shadow .35s ease} html[data-motion=scroll] .crm-art .customer.d-mover.is-moving{box-shadow:0 22px 44px rgba(12,13,12,.3)} /* 06 tools: shot progress fills and the work-order steps tick with scroll. */ html[data-motion=scroll] .tools-art .capture-progress i{background:#595959;transition:background .3s ease} html[data-motion=scroll] .tools-art .capture-progress i.is-done{background:#ebebeb} html[data-motion=scroll] .work-order .rule-list li span{transition:opacity .3s ease} html[data-motion=scroll] .work-order .rule-list li.d-off span{opacity:.15} html[data-motion=scroll] .capture .vp-img{transform-origin:50% 55%} } /* Pinning: the section holds (position:sticky) while its scene plays through the wrapper's spacer. --pin-top comes from scrub.js so a section taller than the viewport sticks with its bottom on screen. */ @media(min-width:761px) and (prefers-reduced-motion:no-preference){ html[data-motion=scroll] .d-pin{display:block;position:relative} html[data-motion=scroll] .d-pin>.poster{position:sticky;top:var(--pin-top,0px)} html[data-motion=scroll] .d-pin::after{content:'';display:block;height:var(--pin)} html[data-motion=scroll] .d-pin--inventory{--pin:1400px} html[data-motion=scroll] .d-pin--chat{--pin:1800px} }