/* ========================================================= RCMA Valet - Page motion (2026-09-25, owner-approved) Linked ONLY by the marketing pages (the pages whose navbar.js tag has data-autohide="phone"), as the last stylesheet in , right before the inline motion guard and globalJs/motion.js. Sign-in, the car request page, thank-you, manager and employee pages never load it, so they always navigate plainly (a cross-document view transition needs BOTH pages to opt in). 1. Page transitions: a short cross-fade between marketing pages. The top bar and the phone bottom bar (Get a Quote / Call Now) are captured on their own, so they stay put while the page underneath fades. Nothing here runs for prefers-reduced-motion. 2. The homepage count-up ("Over 500 events staffed" counts 350 -> 500). 3. A gentle reveal for text cards further down a page (motion.js arms it). 4. A subtle press state on buttons. The visible resting state never depends on this file or on JavaScript. ========================================================= */ /* ---------- 1. Page transitions ---------- */ @media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } /* Named only while the bar is showing. A view-transition-name makes an element a backdrop root at all times, which would switch off the blur on the floating logo and menu tiles of the auto-hidden bar (navbar.css). While the bar shows, its own backdrop-filter already makes it a backdrop root, so naming it changes nothing. Never name anything inside .hero-cta: heroScroll.js clones the hero button, and a duplicated name cancels the whole transition. */ .navbar:not(.nav-autohidden) { view-transition-name: rcma-nav; } .sticky-cta { view-transition-name: rcma-cta-bar; } /* Duration and easing only (never the animation shorthand or name), so the browser's own cross-fade stays. */ ::view-transition-group(*) { animation-duration: 0.28s; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.28s; animation-timing-function: cubic-bezier(0.2, 0, 0, 1); } } @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } /* ---------- 2. Count-up (homepage trust strip) ---------- */ /* The HTML always says 500 (crawlers, screen readers, no-JS and analytics see 500). While html.rcma-count is set, the real digits are drawn transparent and an overlay shows data-now instead ("350" at first, then counting up). The overlay's alt text is empty, so screen readers keep reading the real 500. The inline motion guard in sets html.rcma-count before the first paint (so the number never jumps 500 -> 350), and removes it again on "load" if motion.js has not taken over; motion.js removes it when the count ends. */ /* inline-block and relative at all times, so ending the overlay changes no geometry. */ .count-up { position: relative; display: inline-block; font-variant-numeric: tabular-nums; } @media (prefers-reduced-motion: no-preference) { @supports (content: "" / "") { html.rcma-count .count-up[data-now] { -webkit-text-fill-color: transparent; } html.rcma-count .count-up[data-now]::after { content: attr(data-now) / ""; position: absolute; inset: 0; text-align: right; -webkit-text-fill-color: currentColor; } } } /* ---------- 3. Card reveal ---------- */ /* Hidden only after motion.js has marked a card (data-reveal="pending") AND added html.rcma-reveal, which it does last. Cards on screen at load are never hidden. Only the card itself fades (never its row): an ancestor below opacity 1 would become a backdrop root and drop the card's glass blur during the fade. */ @media (prefers-reduced-motion: no-preference) { html.rcma-reveal [data-reveal="pending"] { opacity: 0; transform: translate3d(0, 16px, 0); } html.rcma-reveal [data-reveal="in"] { opacity: 1; transform: none; transition: opacity 0.55s cubic-bezier(0.2, 0.65, 0.3, 1) var(--reveal-delay, 0s), transform 0.7s cubic-bezier(0.2, 0.65, 0.3, 1) var(--reveal-delay, 0s); } } /* ---------- 4. Press state ---------- */ /* The html prefix and :active give (0,2,2), which beats every hover lift ((0,2,0) / (0,2,1)) whatever the stylesheet order. iOS applies :active only when a touch listener exists; motion.js adds a passive one. */ @media (prefers-reduced-motion: no-preference) { html .sticky-cta a { transition: transform 0.2s ease; } html :is(.hero-btn-huge, .cta-btn, .hamburger, .sticky-cta a, .link-chips a, .social-grid a, .rating-badge, .requestbtn, .applyBtn, .btn-primary, .btn-secondary, .leave-a-review a, .cta-alt a, .sa-chip):active { transform: scale(0.97); transition-duration: 0.08s; } html :is(.request-card, .hub-card):active { transform: scale(0.985); transition-duration: 0.08s; } } @media (prefers-reduced-motion: reduce) { html :is(.hero-btn-huge, .cta-btn, .hamburger, .sticky-cta a, .link-chips a, .social-grid a, .rating-badge, .requestbtn, .applyBtn, .btn-primary, .btn-secondary, .leave-a-review a, .cta-alt a, .sa-chip, .request-card, .hub-card):active { opacity: 0.85; } } /* ---------- Print: everything shows, as written ---------- */ @media print { [data-reveal] { opacity: 1 !important; transform: none !important; } html.rcma-count .count-up[data-now] { -webkit-text-fill-color: currentColor !important; } html.rcma-count .count-up[data-now]::after { content: none !important; } }