/* ==========================================================================
   bc-depth.css — the card depth + interaction layer
   ==========================================================================

   WHAT THIS IS FOR. Every tile on the site was built to the same flat recipe:
   a 1px #EAEAEA hairline on white, one soft shadow, translateY(-2px) on hover.
   At a glance that reads as a rectangle drawn on the page rather than an
   object sitting on it, and nothing on the page reacts to the pointer. This
   file gives the three tile families — category, experience, search car tile —
   physical depth and a small amount of life, WITHOUT introducing colour.

   WHY A SEPARATE FILE. It keys entirely off class names that already exist in
   the blade partials, so it adds no markup and can be removed by deleting one
   <link> in header.blade.php. baecars.css stays untouched.

   THE RULES IT KEEPS.
   - Achromatic only. Every shadow and highlight here is neutral ink
     (#101014 alpha) or white. The brand red stays where it already is.
   - Depth comes from LAYERED shadow, not a bigger one. A contact shadow, a
     key shadow and a long ambient shadow together read as an object with
     mass; one 24px blur reads as a drop-shadow filter.
   - Motion is small. Max tilt is 3.5deg. Anything larger becomes a novelty
     the second time you see it, and these tiles are seen 40 to a page.
   - Nothing here is required to see content. The reveal animation only arms
     itself once JS has confirmed it is running (html.bcd-js), so a JS failure
     leaves fully visible cards rather than a blank grid.
   ========================================================================== */

:root {
    /* ---- Elevation ramp -------------------------------------------------
       Four stacked shadows per state. Reading top to bottom in each list:
       a tight contact shadow (the card touching the page), a short key
       shadow, a mid ambient, and a long low-alpha ambient that is what
       actually communicates height. The inset white line is the lit top
       edge — the single cheapest trick for making a surface look raised,
       and the thing every flat card on this site was missing. */
    --bcd-rest:
        0 0.5px 1px rgba(16, 16, 20, 0.045),
        0 2px 4px -2px rgba(16, 16, 20, 0.05),
        0 8px 16px -8px rgba(16, 16, 20, 0.08),
        0 20px 32px -20px rgba(16, 16, 20, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);

    --bcd-hover:
        0 0.5px 1px rgba(16, 16, 20, 0.05),
        0 3px 6px -2px rgba(16, 16, 20, 0.06),
        0 14px 26px -10px rgba(16, 16, 20, 0.11),
        0 34px 52px -28px rgba(16, 16, 20, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);

    /* Press collapses the long ambient entirely — the card comes back down
       to the page. Losing the far shadow is what sells the push; darkening
       it (the usual instinct) just makes it look heavier, not lower. */
    --bcd-press:
        0 0.5px 1px rgba(16, 16, 20, 0.06),
        0 2px 4px -2px rgba(16, 16, 20, 0.07),
        0 6px 12px -8px rgba(16, 16, 20, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.70);

    /* ---- Edges ----
       Slightly darker and cooler than the #EAEAEA these cards used. A border
       that pale disappears against the warm #FAF9F5 page surface, which is
       half of why the tiles read as flat. */
    --bcd-border: #E4E4E1;
    --bcd-border-hover: #D3D3CF;

    /* ---- Motion ----
       One easing for everything so the three families feel like one system.
       Slight overshoot-free settle: fast out, long tail. */
    --bcd-ease: cubic-bezier(0.22, 0.68, 0.24, 1);
    --bcd-fast: 0.16s;
    --bcd-mid: 0.32s;
    --bcd-slow: 0.55s;

    --bcd-tilt-max: 3.5deg;
    --bcd-persp: 1100px;
}

/* ==========================================================================
   1. The lift primitive
   --------------------------------------------------------------------------
   Applied to all three families by selector list rather than by adding a
   class in blade, so this file is additive and reversible.

   --bcd-rx / --bcd-ry are written by bc-depth.js from the pointer position
   and default to 0, so the transform below is valid and inert before (and
   without) any JS.
   ========================================================================== */
.bc-cat-card,
.bc-exp-card,
.bc-ct {
    --bcd-rx: 0deg;
    --bcd-ry: 0deg;
    --bcd-mx: 50%;
    --bcd-my: 50%;
    --bcd-lift: 0px;
    --bcd-rise: 0px;

    position: relative;
    border-color: var(--bcd-border);
    box-shadow: var(--bcd-rest);

    /* The whole transform lives in one variable so the states below can
       re-apply it without restating four functions each. The hover lift and
       the entrance rise are separate variables summed into a single
       translate: two rules each writing `transform` would not merge, and
       whichever won on specificity would silently drop the tilt. */
    --bcd-tf:
        perspective(var(--bcd-persp))
        translate3d(0, calc(var(--bcd-lift) + var(--bcd-rise)), 0)
        rotateX(var(--bcd-rx))
        rotateY(var(--bcd-ry));
    transform: var(--bcd-tf);
    /* Shadow and border cross-fade slower than the lift so the card feels
       like it has weight: it moves, then the shadow catches up. */
    transition:
        transform var(--bcd-mid) var(--bcd-ease),
        box-shadow var(--bcd-slow) var(--bcd-ease),
        border-color var(--bcd-mid) var(--bcd-ease);
}

/* The tilt tracks the pointer continuously, so it must not be smoothed by the
   same 320ms as the lift or it lags visibly behind the cursor. While a card is
   actively hovered, JS adds .bcd-live and the transform snaps to a much
   shorter follow. On leave the class is removed and the card eases home.

   The leading `html` is not decoration: it lifts this rule above the reveal
   block further down, which also writes `transition` on the same elements.
   Without it a card hovered while still animating in would track the pointer
   on a 550ms delay, which reads as broken rather than smooth. */
html .bc-cat-card.bcd-live,
html .bc-exp-card.bcd-live,
html .bc-ct.bcd-live {
    transition:
        transform 0.09s linear,
        box-shadow var(--bcd-slow) var(--bcd-ease),
        border-color var(--bcd-mid) var(--bcd-ease);
}

/* RESTATING `transform` HERE IS LOAD-BEARING — do not remove it as redundant.

   baecars.css already carries its own `:hover { transform: translateY(-2px) }`
   for all three families. That selector is two classes deep on this element
   (.bc-cat-card:hover, 0-2-0); the base rule above is one (0-1-0). Specificity
   beats source order, so without this line the OLD 2px nudge wins the instant
   the pointer arrives and the tilt, the perspective and the new lift are all
   discarded — the card animates by exactly as much as it did before the
   redesign, and only while hovered, which is the one state anybody looks at.

   Verified by screenshot before and after: the computed hover transform was
   `matrix(1, 0, 0, 1, 0, -2)` — a flat 2D translate with no rotation — and is
   now a full matrix3d. */
.bc-cat-card:hover,
.bc-exp-card:hover,
.bc-ct:hover {
    --bcd-lift: -5px;
    transform: var(--bcd-tf);
    border-color: var(--bcd-border-hover);
    box-shadow: var(--bcd-hover);
}

/* Press. The category and experience cards ARE links, so :active is direct. */
.bc-cat-card:active,
.bc-exp-card:active {
    --bcd-lift: -1px;
    box-shadow: var(--bcd-press);
    transition:
        transform 0.07s var(--bcd-ease),
        box-shadow 0.07s var(--bcd-ease);
}

/* .bc-ct is an <article>; its click targets are nested, so the press has to
   be inferred with :has().

   THIS IS A SEPARATE RULE ON PURPOSE. A selector list is invalidated as a
   WHOLE by any single selector the browser cannot parse — so folding these
   two into the rule above would mean that on any engine without :has(), the
   category and experience cards silently lose their press state too. Split,
   the worst case is that only the car tile goes without, on old browsers. */
.bc-ct:has(.bc-ct-cta:active),
.bc-ct:has(.bc-ct-name a:active),
.bc-ct:has(.bc-ct-strip a:active) {
    --bcd-lift: -1px;
    box-shadow: var(--bcd-press);
    transition:
        transform 0.07s var(--bcd-ease),
        box-shadow 0.07s var(--bcd-ease);
}

/* A sold-out tile must not respond to the pointer — but it must still look
   like an object.

   baecars.css already suppresses its hover with `transform: none; box-shadow:
   none`, which was harmless when the resting card had no shadow to lose.
   Under this file it is not: the card now rests on a four-layer ramp, so
   hovering a sold-out tile would visibly flatten it onto the page — the one
   card on the grid that collapses when you point at it. Same specificity as
   the rule it corrects, later file, so it wins on order.

   The lift and tilt stay suppressed. Only the resting depth is given back. */
.bc-ct.is-out:hover {
    box-shadow: var(--bcd-rest);
}
.bc-ct.is-out {
    --bcd-rx: 0deg;
    --bcd-ry: 0deg;
    --bcd-px: 0;
    --bcd-py: 0;
    --bcd-lift: 0px;
}
.bc-ct.is-out::after { display: none; }

/* ==========================================================================
   2. Specular sheen
   --------------------------------------------------------------------------
   A white gloss that follows the cursor across the card face. soft-light
   keeps it achromatic — it lightens the surface it is over without tinting
   it, so it works identically over a photo, a white body and the warm
   "guest favourite" tint.

   pointer-events:none is load-bearing: these cards are links, and every
   child of .bc-ct (heart button, photo strip, CTA) must stay clickable.
   ========================================================================== */
.bc-cat-card::after,
.bc-exp-card::after,
.bc-ct::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
    border-radius: inherit;
    opacity: 0;
    mix-blend-mode: soft-light;
    background: radial-gradient(
        420px circle at var(--bcd-mx) var(--bcd-my),
        rgba(255, 255, 255, 0.55),
        rgba(255, 255, 255, 0.10) 42%,
        transparent 68%
    );
    transition: opacity var(--bcd-mid) var(--bcd-ease);
}

.bc-cat-card:hover::after,
.bc-exp-card:hover::after,
.bc-ct:hover::after {
    opacity: 1;
}

/* ==========================================================================
   3. Interior parallax scaffolding
   --------------------------------------------------------------------------
   preserve-3d is deliberately NOT used. `overflow: hidden` — which every one
   of these cards needs to clip its photo to the radius — forces
   transform-style back to flat per spec, so translateZ on children silently
   does nothing. The interior depth here is therefore 2D: each layer is
   translated by a different fraction of the pointer offset, which at these
   magnitudes is indistinguishable from real Z separation and works
   everywhere.

   --bcd-px / --bcd-py are the pointer offset from card centre, normalised to
   -1..1 and written by bc-depth.js. Each family multiplies them by its own
   depth constant in its section below.
   ========================================================================== */
.bc-cat-card,
.bc-exp-card,
.bc-ct {
    --bcd-px: 0;
    --bcd-py: 0;
}

/* Media wells. A hair of scale on hover so the photo breathes with the card
   instead of sitting inert inside a moving frame. Kept under 1.06 — beyond
   that the crop visibly changes and hosts' framing is lost. */
.bc-cat-art img,
.bc-exp-art img,
.bc-ct-strip img {
    transition: transform var(--bcd-slow) var(--bcd-ease);
}

/* WILL-CHANGE IS PROMOTED ONLY WHILE A CARD IS UNDER THE POINTER, and this is
   the rule the rest of this file's parallax layers must key off too.

   will-change: transform forces its element onto its own compositor layer for
   as long as the declaration matches. Left on unconditionally, a search page
   of 40 tiles times four animated layers each is 160 permanently retained
   layers — enough GPU memory to make the page scroll worse than it did with
   no effects at all, which is the exact opposite of the point. One card is
   hovered at a time, and .bcd-live marks it, so that is where the hint goes.
   The parallax itself still needs no hint: it is a plain transform, and the
   browser composites it fine without being told in advance. */
.bcd-live .bc-cat-art img,
.bcd-live .bc-cat-ico,
.bcd-live .bc-cat-foot,
.bcd-live .bc-exp-art img,
.bcd-live .bc-exp-city,
.bcd-live .bc-exp-dur,
.bcd-live .bc-exp-body,
.bcd-live .bc-ct-strip img,
.bcd-live .bc-ct-tl,
.bcd-live .bc-ct-fav,
.bcd-live .bc-ct-where,
.bcd-live .bc-ct-body {
    will-change: transform;
}

/* ==========================================================================
   4. Scroll reveal
   --------------------------------------------------------------------------
   Armed only under html.bcd-js, which bc-depth.js sets synchronously. If the
   script 404s or throws before that line, none of these rules ever apply and
   the cards render normally — a hidden-content failure mode is not worth a
   fade-in.
   ========================================================================== */
/* Note the rise is a variable, never a `transform` — see the primitive above.
   Only the transition is overridden here, to stretch the entrance out past
   the hover timing and to apply the per-card stagger. */
.bcd-js .bcd-reveal {
    opacity: 0;
    --bcd-rise: 16px;
    transition:
        opacity var(--bcd-slow) var(--bcd-ease),
        transform var(--bcd-slow) var(--bcd-ease),
        box-shadow var(--bcd-slow) var(--bcd-ease),
        border-color var(--bcd-mid) var(--bcd-ease);
    transition-delay: calc(var(--bcd-i, 0) * 55ms);
}

.bcd-js .bcd-reveal.bcd-in {
    opacity: 1;
    --bcd-rise: 0px;
}

/* There is deliberately no "finished" class here. Once the entrance is over
   the script REMOVES .bcd-reveal/.bcd-in entirely, which is cheaper than
   keeping a third state around and, more importantly, avoids a cascade fight:
   a lingering rule that restated `transition` would outrank .bcd-live above
   and leave the tilt lagging the cursor for the rest of the session. Both
   end states are identical (opacity 1, rise 0), so the removal is invisible. */

/* Printing never fires a scroll, so any card still waiting on its reveal
   would print as a blank rectangle. Cheap insurance against the one failure
   mode this animation can produce. */
@media print {
    .bcd-js .bcd-reveal {
        opacity: 1 !important;
        --bcd-rise: 0px;
        transition: none !important;
    }
    .bc-cat-card,
    .bc-exp-card,
    .bc-ct {
        transform: none !important;
        box-shadow: none !important;
    }
}

/* ==========================================================================
   5. Capability + preference gates
   ========================================================================== */

/* Tilt, sheen and parallax are pointer affordances. On touch there is no
   cursor to track, and a tilt that fires on tap is just a lurch. The static
   depth (shadow ramp, edges, press) stays — that is the half that carries
   the redesign. */
@media (hover: none), (pointer: coarse) {
    .bc-cat-card,
    .bc-exp-card,
    .bc-ct {
        --bcd-rx: 0deg !important;
        --bcd-ry: 0deg !important;
        --bcd-px: 0 !important;
        --bcd-py: 0 !important;
    }
    .bc-cat-card::after,
    .bc-exp-card::after,
    .bc-ct::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .bc-cat-card,
    .bc-exp-card,
    .bc-ct,
    .bc-cat-card.bcd-live,
    .bc-exp-card.bcd-live,
    .bc-ct.bcd-live {
        --bcd-rx: 0deg !important;
        --bcd-ry: 0deg !important;
        --bcd-px: 0 !important;
        --bcd-py: 0 !important;
        --bcd-lift: 0px !important;
        transform: none !important;
        transition: box-shadow var(--bcd-mid) ease, border-color var(--bcd-mid) ease;
    }
    .bc-cat-card::after,
    .bc-exp-card::after,
    .bc-ct::after { display: none; }
    .bcd-js .bcd-reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .bc-cat-art img,
    .bc-exp-art img,
    .bc-ct-strip img { transition: none !important; }
}

/* ==========================================================================
   6. Per-family tuning
   --------------------------------------------------------------------------
   Sections below are appended by the family passes. Each one may only touch
   its own selectors and may only use the tokens declared above.
   ========================================================================== */


/* ==========================================================================
   Category cards (.bc-cat-*)
   --------------------------------------------------------------------------
   "Cars for every kind of journey" — the outer lift/tilt/sheen/press/reveal
   already comes from section 1-4 of bc-depth.css by selector match on
   .bc-cat-card. Everything below is the INTERIOR of the card: making the
   badge, the copy, the price/arrow row and the photo separate into their
   own depth planes as the card tilts, and giving the badge and price chip
   their own small raised reading independent of the pointer.

   Depth order, nearest the viewer to furthest, all driven by the same
   --bcd-px/--bcd-py the tilt uses (normalised -1..1 from card centre):
     1. .bc-cat-ico   — up to 6px, plus its own scale (it is the one element
                         on this card that is supposed to look physically
                         proud of the surface, ring-mounted on the photo edge)
     2. .bc-cat-foot  — up to 4px (carries price chip + arrow as one plane)
     3. h3 / p        — up to 2px
     4. .bc-cat-art   — up to 3px, and in the OPPOSITE direction. A
                         background plane counter-shifting against the
                         foreground is what actually sells "the card has
                         depth" rather than "the card is jiggling".
   ========================================================================== */

/* ---- Badge: raised chip -------------------------------------------------
   The existing -19px negative margin + 3px white ring already reads as
   "sitting on the seam", but with no shadow of its own it's still visually
   flat against the photo. A static layered shadow (same neutral-ink ramp as
   the card, just tighter) is what makes it read as a separate raised object
   rather than a ring drawn on the image. Kept OUTSIDE the hover rule and
   never transitioned — box-shadow only animates on the outer card (section
   1); everything in here moves by transform alone. */
.bc-cat-ico {
    box-shadow:
        0 1px 1px rgba(16, 16, 20, 0.10),
        0 3px 6px -2px rgba(16, 16, 20, 0.16),
        0 8px 14px -8px rgba(16, 16, 20, 0.22);
    transition: transform var(--bcd-mid) var(--bcd-ease);
}

/* ---- Price chip: a hint of inset depth, no new hue ----------------------
   A lit top edge and a darker floor edge is the same trick the card shadow
   ramp uses for its inset line, scaled down for a chip instead of a card.
   Static — this is a resting-state detail, not something that should move. */
.bc-cat-price {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.65),
        inset 0 -1px 1px rgba(16, 16, 20, 0.07);
}

/* ---- Foot row (price + arrow) as one parallax plane ---------------------
   Price and arrow move together — splitting them into separate planes would
   read as the arrow detaching from what it's pointing away from. */
.bc-cat-foot {
    transition: transform var(--bcd-mid) var(--bcd-ease);
}

/* ---- Arrow: its own hover slide, layered on top of the foot's parallax --
   baecars.css already slides this 3px on plain :hover; this rule loads
   after it and wins on equal specificity, replacing that with the shared
   easing token and a longer, better-settled travel instead of a linear
   snap. No separate trailing element is added — an SVG is a poor host for
   ::after (inconsistent generated-content support on replaced elements) —
   so the "trailing" feel comes from the slow-tail ease already defined in
   --bcd-ease rather than a second copy of the glyph. */
.bc-cat-go {
    transition: transform var(--bcd-mid) var(--bcd-ease);
}

/* ---- Text plane -----------------------------------------------------
   h3/p aren't their own classed elements in the blade partial, so this
   targets them as a descendant pair off the in-scope .bc-cat-body, the same
   pattern the foundation already uses for .bc-cat-art img. */
.bc-cat-body h3,
.bc-cat-body p {
    transition: transform var(--bcd-mid) var(--bcd-ease);
}

/* ---- Photo: sits INTO the card, not on top of it -------------------------
   position:relative turns .bc-cat-art into the containing block for the
   inner-shadow pseudo below (it has none today, so this doesn't disturb
   anything else that reads its box). */
.bc-cat-art {
    position: relative;
}

/* A soft inward shadow along the top edge only, so the photo reads as
   recessed into the card rather than a sticker laid over a white panel.
   Painted with a pseudo rather than a box-shadow on the img itself because
   img is `object-fit: cover; display:block` with no room for an inset
   shadow to sit inside its own box without a wrapper — the pseudo IS that
   wrapper's paint layer. Absolutely positioned content stacks above static
   in-flow siblings regardless of source order, so this lands over the photo
   without needing a z-index fight. Static (no hover state, no transition):
   this is a resting-state cue, and animating a box-shadow here would be
   exactly the "spread animated on an inner layer" the brief rules out. */
.bc-cat-art::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none; /* decorative only — .bc-cat-card is the link */
    box-shadow: inset 0 12px 16px -14px rgba(16, 16, 20, 0.40);
}

/* ==========================================================================
   Hover-only parallax + interactions
   --------------------------------------------------------------------------
   Every transform below is written ONLY under .bc-cat-card:hover, so a
   resting card — including one the pointer is merely passing near, where
   bc-depth.js has not attached --bcd-px/py to it at all — never carries any
   of these transforms. This is stricter than relying on the variables'
   default of 0 (which would also work, since they're declared 0 on
   .bc-cat-card itself in bc-depth.css section 3): gating on :hover means a
   card that still had a stale non-zero value for any reason simply never
   applies it while at rest.
   ========================================================================== */

.bc-cat-card:hover .bc-cat-ico {
    /* Parallax only — the "lift" read comes from scale, not a baked-in
       translateY offset, so the two effects can't stack past the ~6px
       travel ceiling at a corner where px and py are both near ±1. */
    transform: translate3d(calc(var(--bcd-px) * 6px), calc(var(--bcd-py) * 6px), 0) scale(1.05);
}

.bc-cat-card:hover .bc-cat-foot {
    transform: translate3d(calc(var(--bcd-px) * 4px), calc(var(--bcd-py) * 4px), 0);
}

.bc-cat-card:hover .bc-cat-body h3,
.bc-cat-card:hover .bc-cat-body p {
    transform: translate3d(calc(var(--bcd-px) * 2px), calc(var(--bcd-py) * 2px), 0);
}

/* Photo: scale and the counter-parallax composed in one transform, per the
   brief — bc-depth.css section 3 already owns the transition for this
   selector (--bcd-slow, so the photo settles later than the rest of the
   card, like something with more mass), it just has no transform value
   until a family pass supplies one. This rule is that supply, and it wins
   because it's declared after the foundation's bare selector. Negative
   multiplier = opposite direction from every foreground layer above. */
.bc-cat-card:hover .bc-cat-art img {
    transform: scale(1.06) translate3d(calc(var(--bcd-px) * -3px), calc(var(--bcd-py) * -3px), 0);
}

.bc-cat-card:hover .bc-cat-go {
    transform: translateX(6px) scale(1.05);
}

/* Continuous pointer tracking while the card is actively hovered needs the
   same fast/linear override the outer tilt uses in section 1 — otherwise
   these interior layers would lag the cursor by a visible ~320ms behind the
   card's own instant tilt. .bc-cat-art img is deliberately excluded: it
   keeps the foundation's slow settle regardless of live state, which is
   what gives it the "furthest / heaviest" feel relative to everything else
   moving fast around it. .bc-cat-go is also excluded — it has no parallax
   component, just a fixed hover slide, so there's nothing here for it to
   track. */
.bc-cat-card.bcd-live .bc-cat-ico,
.bc-cat-card.bcd-live .bc-cat-foot,
.bc-cat-card.bcd-live .bc-cat-body h3,
.bc-cat-card.bcd-live .bc-cat-body p {
    transition: transform 0.09s linear;
}

/* ==========================================================================
   Reduced motion — extra guard beyond the foundation's blanket one
   --------------------------------------------------------------------------
   bc-depth.css's own reduced-motion block (section 5) zeroes --bcd-px/py
   and kills the transition on .bc-cat-art img specifically. That is enough
   for .bc-cat-foot and the h3/p pair: their transform is 100% var-driven,
   so with the variables pinned to 0 the transition plays between 0 and 0 —
   no visible motion, nothing more to do (included below anyway, for
   symmetry with the rest of this block rather than because it's load-
   bearing). It is NOT enough for .bc-cat-ico and .bc-cat-go: the icon's
   scale(1.05) and the arrow's translateX(6px)/scale(1.05) are literal
   values, not multiples of --bcd-px/py, so zeroing those variables cannot
   cancel them — they would still visibly animate in on hover. The fix is
   the same one the foundation already applies to the photo: kill the
   transition so the end state is reached instantly rather than eased into,
   which is what "reduced motion" actually asks for on a hover-only detail
   (the element is still allowed to look different on hover, it just can't
   visibly move there). */
@media (prefers-reduced-motion: reduce) {
    .bc-cat-ico,
    .bc-cat-foot,
    .bc-cat-body h3,
    .bc-cat-body p,
    .bc-cat-go {
        transition: none !important;
    }
}

/* No extra (hover: none) / (pointer: coarse) guard is added here. The
   foundation already zeroes --bcd-px/py under that query, which removes
   every parallax translate above. The remaining hardcoded bits (icon and
   photo scale, arrow slide) only fire on a real :hover, and on touch that
   only happens as a transient "sticky hover" after a tap — the same way
   the outer card's -5px lift and border-color change already behave, which
   the foundation deliberately leaves alone ("the static depth... stays").
   Nothing introduced in this file is bigger or longer than that existing
   behaviour, so it doesn't need its own carve-out.

   The optional rail edge-fade mask (section (e) of the brief) is left out:
   the hover lift's box-shadow on the first/last visible card would sit
   inside the masked band and could get visibly clipped right where it's
   most noticeable, and that's not something checkable without a browser in
   the loop. Flagging it rather than guessing. */


/* ==========================================================================
   Experience cards (.bc-exp-*)
   --------------------------------------------------------------------------
   Layers on top of bc-depth.css §1-5 (lift, sheen, elevation ramp, reveal —
   all already applied to .bc-exp-card by selector) and baecars.css:2644-2735
   (layout). Nothing here duplicates those; this section is only the interior
   depth — the parallax separation between photo / chips / text, the chips'
   own micro-shadow, and the small foot interactions.

   Depth order, nearest to furthest, per the brief: chips float on the photo
   (most parallax) → body text/price (some) → photo (least, and reversed,
   which is what actually sells "the chips are above the photo" rather than
   everything sliding the same way).
   ========================================================================== */

/* ---- 1. Chips: frosted + layered, and the nearest layer ----------------
   .bc-exp-city reuses the exact glass formula .bc-ct-where already proved on
   this site (baecars.css:4538) — blur+saturate over an uncontrolled photo,
   with the @supports fallback for browsers without backdrop-filter — rather
   than inventing a second frosted recipe. .bc-exp-dur keeps its red fill
   untouched; only its shadow changes.

   z-index is explicit (not left to source order) because §3 below adds a
   scrim pseudo-element to .bc-exp-art that must paint under these chips —
   relying on paint-order-by-position rules here would be fragile. */
.bc-exp-city,
.bc-exp-dur {
    z-index: 2;
    transform: translate3d(calc(var(--bcd-px) * 6px), calc(var(--bcd-py) * 6px), 0);
    transition: transform var(--bcd-mid) var(--bcd-ease), box-shadow var(--bcd-mid) var(--bcd-ease);
}

/* While the card is actively tracked, follow the pointer at the same fast
   linear rate the foundation uses for the card's own tilt (§1) — the chip
   would otherwise visibly lag a hand's-width behind the cursor. */
.bc-exp-card.bcd-live .bc-exp-city,
.bc-exp-card.bcd-live .bc-exp-dur {
    transition: transform 0.09s linear;
}

.bc-exp-city {
    /* Frosted glass over the photo — .bc-ct-where's "is-dist" (white) recipe,
       reused verbatim so the site has one glass-chip formula, not two. */
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(17, 17, 17, 0.10);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    backdrop-filter: blur(8px) saturate(140%);
    /* Layered micro-shadow in neutral ink, replacing the old flat 1px — a
       tight contact line plus a soft throw is what reads as "resting a few
       millimetres above the photo" instead of "drawn on top of it". */
    box-shadow:
        0 1px 2px rgba(16, 16, 20, 0.10),
        0 4px 10px -4px rgba(16, 16, 20, 0.20),
        0 10px 20px -12px rgba(16, 16, 20, 0.22);
}
/* No blur support: fall back to the old near-opaque white rather than a
   half-transparent chip with no legibility help underneath it. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .bc-exp-city { background: rgba(255, 255, 255, 0.94); }
}

.bc-exp-dur {
    /* Red fill and text stay exactly as baecars.css declares them — only the
       shadow gets the same neutral-ink layering as the city chip, so the two
       read as one family of floating object rather than two treatments. */
    box-shadow:
        0 1px 2px rgba(16, 16, 20, 0.16),
        0 4px 10px -4px rgba(16, 16, 20, 0.28),
        0 10px 20px -12px rgba(16, 16, 20, 0.26);
}

/* ---- 2. The photo: sits INTO the card, moves LEAST, and opposite -------
   .bc-exp-art wraps both the <img> and the no-cover-image placeholder, so
   the inset shadow and scrim here apply to whichever the listing rendered —
   the placeholder needs the same "recessed" read and has nothing to scale. */
.bc-exp-art {
    box-shadow:
        inset 0 0 0 1px rgba(16, 16, 20, 0.05),
        inset 0 -30px 34px -26px rgba(16, 16, 20, 0.22);
}

/* Low-alpha scrim at the photo's bottom edge, under the chips (z-index:1 vs
   their 2). Mainly insurance for a bright photo behind a light .bc-exp-city
   chip when it happens to sit low on a short image; harmless the rest of the
   time since the chip's own glass fill already carries most of the contrast. */
.bc-exp-art::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: auto 0 0 0;
    height: 46%;
    pointer-events: none;
    background: linear-gradient(to top, rgba(16, 16, 20, 0.14), transparent);
}

.bc-exp-art img {
    /* Parallax translate composed with the hover scale in ONE declaration —
       whichever image transform rule is written last wins, so the scale
       can't live in a separate rule or it would silently drop the parallax
       (or vice versa). Moves LEAST of the three layers and OPPOSITE the
       pointer: a background plane drifting against the foreground is what
       makes the chips above it read as nearer, not just "also moving". */
    transform: translate3d(calc(var(--bcd-px) * -3px), calc(var(--bcd-py) * -3px), 0) scale(1);
}
.bc-exp-card:hover .bc-exp-art img {
    /* Capped at 1.06 per the foundation's own note: past that the crop
       visibly changes and the host's framing is lost. */
    transform: translate3d(calc(var(--bcd-px) * -3px), calc(var(--bcd-py) * -3px), 0) scale(1.06);
}

/* ---- 3. Body text + price: the middle layer ----------------------------
   One transform on the whole block, not on individual children — .bc-exp-incl
   / .bc-exp-facts / .bc-exp-rate / .bc-exp-ctx all live inside .bc-exp-body
   in the markup and are meant to read as one plane, so giving them their own
   multiplier would double their offset and break that reading. This also
   covers the $rich listing-page blocks and the plain homepage-rail body with
   the same rule, which is the point — the CSS must not know which markup it
   got. */
.bc-exp-body {
    transform: translate3d(calc(var(--bcd-px) * 2.5px), calc(var(--bcd-py) * 2.5px), 0);
    transition: transform var(--bcd-mid) var(--bcd-ease);
}
.bc-exp-card.bcd-live .bc-exp-body {
    transition: transform 0.09s linear;
}

/* ---- 4. Foot: a near-invisible "who and how much" response -------------
   Lift + a neutral ring on the avatar, a hair of lift on the price. Both key
   off the card's own :hover rather than the pointer offset — these are meant
   to read as "the card acknowledged you", not another parallax layer, so a
   fixed small motion is calmer than one more calc(). No colour: the ring is
   ink/white only, never the brand red, per the brief. */
.bc-exp-by img,
.bc-exp-avatar {
    transition: transform var(--bcd-fast) var(--bcd-ease), box-shadow var(--bcd-fast) var(--bcd-ease);
}
.bc-exp-price {
    transition: transform var(--bcd-fast) var(--bcd-ease);
}
.bc-exp-card:hover .bc-exp-by img,
.bc-exp-card:hover .bc-exp-avatar {
    transform: translateY(-1px);
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(16, 16, 20, 0.10);
}
.bc-exp-card:hover .bc-exp-price {
    transform: translateY(-1px);
}

/* ---- 5. Capability + preference guards ----------------------------------
   The foundation's own coarse-pointer/reduced-motion blocks (bc-depth.css §5)
   already force --bcd-rx/-ry/-px/-py to 0 on .bc-exp-card, which is enough to
   zero every calc(var(--bcd-px) ...) rule above (§1-3) without any help from
   this file — they resolve to translate3d(0,0,0) for free.

   What the foundation's guard does NOT reach: the img scale in §2 and the
   foot ring/lift in §4 are driven by plain :hover, not by the --bcd-* vars,
   so they are untouched by that block and need their own here. */
@media (hover: none), (pointer: coarse) {
    /* :hover can stick on tap on some touch browsers until the next tap
       elsewhere; without this the photo or avatar could be caught mid-zoom
       for an indefinite stretch after a single tap. */
    .bc-exp-art img,
    .bc-exp-by img,
    .bc-exp-avatar,
    .bc-exp-price {
        transform: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bc-exp-city,
    .bc-exp-dur,
    .bc-exp-body,
    .bc-exp-art img,
    .bc-exp-by img,
    .bc-exp-avatar,
    .bc-exp-price {
        transform: none !important;
        transition: none !important;
    }
}


/* ==========================================================================
   Search car tile (.bc-ct)
   --------------------------------------------------------------------------
   Interior depth + micro-interactions layered on top of the shared lift/tilt/
   sheen/reveal primitives in section 1-5 above and on top of ALL of
   baecars.css (the base .bc-ct definition around L3880 and the darker-edge /
   list-view / guest-favourite overrides around L4370-4560). Nothing here
   duplicates those — this section only adds interior parallax, chip/CTA/rail
   depth, and the fav button's feel.

   This tile is denser than the other two families (10-40 to a grid, six rows
   of real content in ~330px), so every offset below is smaller than a
   homepage rail card would use — the brief for this family is specifically
   "less movement, more precision."
   ========================================================================== */

/* --------------------------------------------------------------------------
   a) Interior parallax — depth-layer offsets
   --------------------------------------------------------------------------
   Four planes, nearest to furthest: overlay chips (3px/axis, ~4.2px at the
   diagonal) > price + CTA (2px/axis) > body text (1px/axis) > photo, which
   moves LEAST and OPPOSITE the pointer (-1.8px/axis, ~2.5px diagonal — under
   the 3px ceiling the brief set for it). Declared once here as intermediate
   custom properties, scoped to .bc-ct (not :root) so this pass cannot leak
   into the category/experience card tuning that lives alongside it in this
   file. --bcd-px/--bcd-py are 0 at rest and whenever the pointer isn't over
   THIS card (foundation section 3 + bc-depth.js), so every rule below is
   already inert without any extra guarding — hover/coarse-pointer/reduced-
   motion handling only has to cover the parts that are NOT variable-driven
   (scale triggers), see the bottom of this section.
   ========================================================================== */
.bc-ct {
    --bcd-ct-chip-x:  calc(var(--bcd-px) * 3px);
    --bcd-ct-chip-y:  calc(var(--bcd-py) * 3px);
    --bcd-ct-cta-x:   calc(var(--bcd-px) * 2px);
    --bcd-ct-cta-y:   calc(var(--bcd-py) * 2px);
    --bcd-ct-body-x:  calc(var(--bcd-px) * 1px);
    --bcd-ct-body-y:  calc(var(--bcd-py) * 1px);
    --bcd-ct-photo-x: calc(var(--bcd-px) * -1.8px);
    --bcd-ct-photo-y: calc(var(--bcd-py) * -1.8px);
}

/* Nearest plane: everything sitting on the photo. .bc-ct-tl is one moving
   unit for both badges it may hold (instant + guest-favourite) rather than
   transforming each chip separately — they should drift together, not
   independently. */
.bc-ct-tl,
.bc-ct-fav,
.bc-ct-where,
.bc-ct-count,
.bc-ct-verified {
    transform: translate3d(var(--bcd-ct-chip-x), var(--bcd-ct-chip-y), 0);
    transition: transform var(--bcd-fast) var(--bcd-ease);
}

/* Second plane: the two numbers that matter most, price and the CTA. Each
   restates its OWN complete transform in its interactive states below rather
   than composing with this one, because a translate3d() the hover/active
   rule doesn't repeat would simply be replaced, not added to — see (c)/(d). */
.bc-ct-price,
.bc-ct-cta {
    transform: translate3d(var(--bcd-ct-cta-x), var(--bcd-ct-cta-y), 0);
    transition: transform var(--bcd-fast) var(--bcd-ease);
}

/* Third plane: the rest of the body copy. Grouped into one rule since they
   all move by the same, barely-there amount — the point is that the card
   reads as strata, not that each line has its own signature. */
.bc-ct-name,
.bc-ct-sub,
.bc-ct-specs,
.bc-ct-tags,
.bc-ct-rail {
    transform: translate3d(var(--bcd-ct-body-x), var(--bcd-ct-body-y), 0);
    transition: transform var(--bcd-fast) var(--bcd-ease);
}

/* Furthest plane, opposite direction: the photo. No transition declared here
   — .bc-ct-strip img's transition already comes from the foundation
   (var(--bcd-slow), tuned for the hover zoom in (c) below) and redeclaring it
   here would just fight that. The side effect is the photo's parallax drifts
   in on the same slow, heavy timing as its zoom rather than snapping with
   the chips — which is the right read for "furthest and least reactive"
   plane in the stack, not a bug. */
.bc-ct-strip img {
    transform: translate3d(var(--bcd-ct-photo-x), var(--bcd-ct-photo-y), 0);
}

/* --------------------------------------------------------------------------
   b) Overlay chips — layered micro-shadows
   --------------------------------------------------------------------------
   These sat on a single flat `0 1px 4px rgba(0,0,0,.14)` in baecars.css. Kept
   small (max ~7-8px reach) on purpose: the chips sit only 9px in from the
   card edge, and anything bigger would visibly clip against .bc-ct's own
   `overflow: hidden`.
   ========================================================================== */
.bc-ct {
    --bcd-ct-chip-shadow:
        0 1px 1px rgba(16, 16, 20, 0.10),
        0 3px 6px -3px rgba(16, 16, 20, 0.16),
        0 5px 8px -6px rgba(16, 16, 20, 0.18);
}
.bc-ct-chip,
.bc-ct-count,
.bc-ct-verified,
.bc-ct-where {
    box-shadow: var(--bcd-ct-chip-shadow);
    transition: box-shadow var(--bcd-mid) var(--bcd-ease);
}

/* .bc-ct-where already established the frosted-glass formula on this site
   (blur+saturate over a translucent dark fill) — reused verbatim on
   .bc-ct-count below rather than inventing a second glass recipe, per the
   brief. .bc-ct-count's own rgba(0,0,0,.62) fill is exactly the kind of
   translucent surface that formula was built for. */
.bc-ct-count {
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    backdrop-filter: blur(8px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

/* NO GLASS ON .bc-ct-chip, deliberately.

   The obvious move is to give the white chip the same frosted treatment. It
   would be dead code: search_car_tile.blade.php only ever renders .bc-ct-chip
   with .is-instant or .is-fave attached, and both of those carry opaque
   green/amber fills at higher specificity in baecars.css. A bare white chip
   does not exist on this page, so a rule styling one would sit here looking
   load-bearing while doing nothing — and would quietly become wrong the day
   someone adds a third chip variant. The shadow above is shared by all
   chips and is the part that actually applies. */

/* Same fallback pattern baecars.css already uses for .bc-ct-where: browsers
   without backdrop-filter get a more opaque flat fill so the badge stays
   legible over any photo. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .bc-ct-count { background: rgba(0, 0, 0, 0.80); }
}

/* --------------------------------------------------------------------------
   c) The photo
   --------------------------------------------------------------------------
   Composed transform per constraint: the parallax translate in (a) above and
   the hover scale below MUST be one declaration, because whichever `transform`
   the cascade resolves last wins outright — it does not merge with an
   earlier one. Capped at 1.05 (brief ceiling).

   Scale is on the <img>, never on .bc-ct-strip — the strip is the
   scroll-snap container (`overflow-x: auto`, `scroll-snap-type: x mandatory`
   in baecars.css). transform is a paint-time effect; it does not change the
   img's layout box or the strip's scrollWidth, so scaling every slide can't
   introduce a horizontal scrollbar or shift a snap point. The strip's own
   overflow (which the spec forces to `auto` on both axes once one axis is
   set non-visible) also clips the scaled image to the strip's box, so a
   zoomed photo can't visually bleed into the next slide either. */
.bc-ct:hover .bc-ct-strip img {
    transform: translate3d(var(--bcd-ct-photo-x), var(--bcd-ct-photo-y), 0) scale(1.05);
}

/* --------------------------------------------------------------------------
   d) The CTA — real button depth
   --------------------------------------------------------------------------
   .bc-ct-cta's background is dark (var(--bc-heading)), so — unlike the rail
   below — a white inset top highlight IS visible here and is the right tool.
   Follows the same principle the foundation states for the card's own press
   state: the collapse is sold by LOSING height/shadow, not by adding a
   darker one (a dark inset on an already-near-black fill would barely show).
   Reach is kept shallow on purpose: .bc-ct-body has 12px of bottom padding
   before .bc-ct's own `overflow: hidden` starts clipping, and the CTA is the
   last element in that column, so the hover shadow's blur+offset stays under
   that budget instead of getting its bottom edge cut off. REVIEWER: worth an
   eyeball on a real render — this is sized from the padding figures in
   baecars.css, not a measured screenshot. */
.bc-ct-cta:not(.is-disabled) {
    box-shadow:
        0 1px 1px rgba(16, 16, 20, 0.14),
        0 3px 6px -3px rgba(16, 16, 20, 0.22),
        0 7px 10px -7px rgba(16, 16, 20, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.20);
    transition:
        transform var(--bcd-fast) var(--bcd-ease),
        box-shadow var(--bcd-mid) var(--bcd-ease);
}
.bc-ct-cta:not(.is-disabled):hover {
    box-shadow:
        0 1px 2px rgba(16, 16, 20, 0.16),
        0 4px 8px -4px rgba(16, 16, 20, 0.24),
        0 8px 12px -8px rgba(16, 16, 20, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.30);
}
/* Press collapse: the outer ambient shadow drops out almost entirely (same
   move as --bcd-press on the card) and the top highlight dims rather than
   inverting to a dark inset, because dark-on-near-black would be close to
   invisible. transform stays parallax + a 1px sink, composed in one value
   per the rule in (c). */
.bc-ct-cta:not(.is-disabled):active {
    box-shadow:
        0 1px 1px rgba(16, 16, 20, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transform: translate3d(var(--bcd-ct-cta-x), calc(var(--bcd-ct-cta-y) + 1px), 0) scale(0.985);
    transition: transform 0.07s var(--bcd-ease), box-shadow 0.07s var(--bcd-ease);
}

/* --------------------------------------------------------------------------
   e) The proof rail — a whisper of recessed depth
   --------------------------------------------------------------------------
   NOT a white inset highlight: .bc-ct's own background (and .bc-ct-body,
   which has none of its own) is #fff, so a white-on-white inset line would
   be genuinely invisible, not just subtle — the opposite problem from the
   CTA above. Ink-only instead: one shallow inset shadow under the rail's
   existing top border reads as a shallow channel the rail sits inside, and a
   second 1px inset line paired with each divider's existing #F4F4F4
   border-left deepens it into a hairline groove rather than a flat rule.
   Both are neutral ink, so unlike a white-highlight approach they need no
   .is-fave override — they read the same on the cream/noise surface as on
   white. Kept to two single-digit-alpha lines total: this must stay a
   whisper, not a boxed-in panel. */
.bc-ct-rail {
    box-shadow: inset 0 1px 2px -1px rgba(16, 16, 20, 0.07);
}
.bc-ct-rail > div + div {
    box-shadow: inset 1px 0 0 rgba(16, 16, 20, 0.05);
}

/* --------------------------------------------------------------------------
   f) The heart (.bc-ct-fav)
   --------------------------------------------------------------------------
   Base scale amount (1.08) is unchanged from baecars.css — the ask was to
   improve the FEEL, not the amount. Unlike the CTA, the fav button's fill is
   light (rgba(255,255,255,.94)), so a dark inset on press IS visible here and
   is the more honest "finger pressing a physical button" cue than shrinking
   an already-small floating shadow further would be. */
.bc-ct-fav {
    box-shadow: var(--bcd-ct-chip-shadow);
    transition:
        transform var(--bcd-fast) var(--bcd-ease),
        box-shadow var(--bcd-mid) var(--bcd-ease),
        color var(--bcd-fast) var(--bcd-ease);
}
.bc-ct-fav:hover {
    transform: translate3d(var(--bcd-ct-chip-x), var(--bcd-ct-chip-y), 0) scale(1.08);
    box-shadow:
        0 1px 1px rgba(16, 16, 20, 0.12),
        0 4px 7px -4px rgba(16, 16, 20, 0.20),
        0 5px 9px -6px rgba(16, 16, 20, 0.22);
}
.bc-ct-fav:active {
    transform: translate3d(var(--bcd-ct-chip-x), var(--bcd-ct-chip-y), 0) scale(0.94);
    box-shadow: inset 0 1px 3px rgba(16, 16, 20, 0.25);
    transition: transform 0.07s var(--bcd-ease), box-shadow 0.07s var(--bcd-ease);
}

/* ==========================================================================
   Sold-out (.bc-ct.is-out) — explicit neutralisation
   --------------------------------------------------------------------------
   baecars.css already resets the CARD's own hover transform/box-shadow for
   is-out at higher specificity (`.bc-ct.is-out:hover`, 3 class-level
   selectors, beats the foundation's plain `.bc-ct:hover`) — but that only
   covers .bc-ct's OWN two properties. It does nothing about:
     1. the passive parallax above, which is driven by --bcd-px/--bcd-py and
        keeps updating on ANY hovered .bc-ct, is-out or not (bc-depth.js's
        selector list doesn't exclude it), and
     2. this section's own :hover/:active rules on children (.bc-ct-fav,
        .bc-ct-strip img, .bc-ct-cta), which key off `.bc-ct:hover` /
        `:hover` / `:active` directly and are untouched by that reset.
   A sold-out car can carry a fav button (rendered whenever the visitor is
   logged in, regardless of availability) and an instant-book chip (not
   gated on availability), so both paths are real, not theoretical. Fixed
   at the source in two parts: zero the shared variables once (covers every
   translate3d(var(--bcd-ct-*)) rule above in one place), and gate every
   *_triggered_ transform (scale on hover/press) with :not(.is-out) at its
   own selector so a stray :hover can't reintroduce motion. .is-disabled
   already covers the CTA on its own (see (d)'s selector), since the blade
   only ever pairs is-disabled with is-out.

   The variable reset itself lives in section 1 alongside the sold-out shadow
   correction — one place, and it zeroes the tilt and lift vars too, not just
   the parallax pair. Only the triggered transforms are handled here. */
.bc-ct.is-out:hover .bc-ct-strip img {
    transform: none;
}
.bc-ct.is-out .bc-ct-fav:hover,
.bc-ct.is-out .bc-ct-fav:active {
    transform: none;
    box-shadow: var(--bcd-ct-chip-shadow);
}

/* ==========================================================================
   Capability + preference gates
   --------------------------------------------------------------------------
   The foundation's own reduced-motion/coarse-pointer block (section 5) zeroes
   --bcd-px/--bcd-py, which is sufficient for every translate3d() in (a) —
   they simply resolve to 0, no extra rule needed. It is NOT sufficient for
   the scale transforms in (c) and (f): those are plain :hover/:active
   triggers with no variable in the mix, so the foundation's variable reset
   never touches them, and both need their own guard here for different
   reasons. */

/* hover:none / pointer:coarse — the concern is not motion, it's staleness.
   iOS Safari keeps :hover engaged after a tap until the next tap lands
   elsewhere, so without this a touch on a card would leave its photo
   permanently zoomed and, if the tap landed near it, its heart permanently
   enlarged. :active isn't affected (it releases on touchend), so the CTA/fav
   press states need no equivalent guard. */
@media (hover: none), (pointer: coarse) {
    .bc-ct:hover .bc-ct-strip img,
    .bc-ct-fav:hover {
        transform: none;
    }
}

/* prefers-reduced-motion — the foundation's own block only forces `transform:
   none` on .bc-ct itself, not on these descendants, so the CTA's :active
   sink/scale (the one transform-bearing state in this file the variable
   reset can't reach) needs the same explicit stop here. The photo/fav hover
   scale is already covered by the (hover:none) block above running under
   the same media features in practice on the devices that matter, but
   reduced-motion is requested independently of pointer type (e.g. a mouse
   user with the OS setting on), so it gets its own line rather than relying
   on that overlap. */
@media (prefers-reduced-motion: reduce) {
    .bc-ct:hover .bc-ct-strip img,
    .bc-ct-fav:hover,
    .bc-ct-fav:active,
    .bc-ct-cta:not(.is-disabled):active {
        transform: none;
    }
}