/** * Motion system — M2 (scroll reveal), M3 (card lift), M5 (checker marquee), * M11 (open-now pulse). Cheap only: transform + opacity, 150-450ms, * cubic-bezier(.2,.8,.2,1). Full stop under prefers-reduced-motion. * * No-JS fallback (critical): motion.php adds a `.js` class to as * soon as the page starts loading. Until then — or if JS never runs — * [data-reveal] content stays fully visible. */ html:not(.js) [data-reveal], html:not(.js) [data-reveal-stagger] > * { opacity: 1; transform: none; } @media (prefers-reduced-motion: no-preference) { /* M2 — scroll reveal */ .js [data-reveal], .js [data-reveal-stagger] > * { opacity: 0; transform: translateY(24px); transition: opacity .45s cubic-bezier(.2,.8,.2,1), transform .45s cubic-bezier(.2,.8,.2,1); } .js [data-reveal].is-in, .js [data-reveal-stagger] > *.is-in { opacity: 1; transform: none; } /* M3 — card lift. Hard offset shadow + diagonal shift on hover (2026-09-20, matching the reference mockup) replaces the previous soft blurred lift -- flat/bordered at rest is the point now. */ .bcc-card { transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s cubic-bezier(.2,.8,.2,1); } .bcc-card:hover, .bcc-card:focus-within { transform: translate(-4px, -4px); box-shadow: 6px 6px 0 var(--bcc-purple-900); } .bcc-card img { transition: transform .4s cubic-bezier(.2,.8,.2,1); } .bcc-card:hover img { transform: scale(1.04); } /* M5 — checker marquee. 40s per design/BRIEF.md §12's animation table (was 30s before that reference existed). */ .bcc-marquee__track { animation: bcc-marquee 40s linear infinite; } .bcc-marquee:hover .bcc-marquee__track { animation-play-state: paused; } @keyframes bcc-marquee { to { transform: translateX(-50%); } } /* M11 — open-now pulse */ .bcc-status--open::before { animation: bcc-pulse 2s ease-out infinite; } @keyframes bcc-pulse { 0% { box-shadow: 0 0 0 0 rgb(20 50 50 / .6); } 100% { box-shadow: 0 0 0 10px rgb(20 50 50 / 0); } } } /* Static states that must exist with or without motion */ /* Base card look (M3's transition/hover above only adds the lift on top of this) -- every .bcc-card user (menu, location, B2B format cards) gets the same border/radius/background instead of drifting per file. Solid 2px border, no radius, no resting shadow (2026-09-20, matching the reference mockup) -- the hard shadow only appears on hover. */ .bcc-card { border-radius: var(--bcc-radius-md); border: var(--bcc-border-width) solid var(--bcc-purple-900); box-shadow: var(--bcc-shadow-card); background: var(--bcc-cream); } .bcc-marquee { overflow: hidden; white-space: nowrap; padding: 14px 0; border-top: var(--bcc-border-width) solid rgb(246 241 228 / .2); } .bcc-marquee__track { display: inline-flex; gap: 48px; width: max-content; padding-left: 48px; } .bcc-status--open::before, .bcc-status--closed::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: var(--bcc-radius-pill); margin-inline-end: 6px; } .bcc-status--open::before { background: var(--bcc-lime); } .bcc-status--closed::before { background: #9a9a9a; }