/* ═══════════════════════════════════════════════════════════════════
motion.css — buyoffseason shared motion module
──────────────────────────────────────────────────────────────────
What this gives you:
1. Global smooth-scroll behavior + a thin ember scroll-progress
bar pinned to the top of every page (auto-injected by
motion.js — no markup change needed).
2. A scroll-snap horizontal-rail container pattern (.bofs-rail)
for converting curated 6–12 item sections into a Netflix /
Apple TV+ style row. Drop class on the wrapper, items keep
their existing classes (.pcard, .gr-card, .pl-card, etc.).
3. Reveal-on-scroll utility (.bofs-reveal) — items fade up
10px when they enter the viewport. Driven by IntersectionObs
wired in motion.js. Sections opt in via class or data attr.
4. Animated number tickers (.bofs-ticker[data-target]) — the
"save $187" amounts count up from 0 when scrolled into view.
5. Subtle image-zoom-on-hover (.bofs-zoom-on-hover) for product
cards. Layers on top of existing card hover translateY.
6. View Transitions API opt-in for in-site navigation —
configured globally if the browser supports it. Smooth
cross-fade between pages.
Design philosophy: NONE of this is invasive. Every pattern is
additive. Existing components keep their styles. Pages opt in
via class names or data attributes. Reduced-motion preference is
honored — every animation is wrapped in a media query.
═══════════════════════════════════════════════════════════════════ */
/* ── 1. Global smooth scroll + progress bar ─────────────────────── */
html {
/* css smooth-scroll for anchor jumps. Polished but not janky. */
scroll-behavior: smooth;
}
/* Disable for users who prefer reduced motion — Safari especially. */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
/* The scroll-progress bar — injected by motion.js as #bofsScrollProgress
at the top of . Thin ember strip that fills as the user reads
down the page. Subtle but immediately conveys "this site is polished." */
#bofsScrollProgress {
position: fixed;
top: 0; left: 0;
height: 2px;
width: 0;
background: linear-gradient(90deg, var(--ember, #FF6B35), var(--ember-light, #FFB347));
z-index: 9999;
pointer-events: none;
transition: width 0.08s linear;
will-change: width;
}
/* Don't show the bar when the page is shorter than the viewport — no
meaningful scroll to track. motion.js toggles this class. */
#bofsScrollProgress.bofs-hide { opacity: 0; }
/* ── 2. Horizontal scroll-snap rail container ───────────────────── */
/* Wrap any existing grid section to convert it into a scroll-snap rail: