/* =====================================================================
   motion.css — v6 motion + interaction layer for index.html.
   Rules:
   - Content is visible without this layer. The hero entrance is pure CSS
     (no CDN needed) and always ends fully visible; html.bm-motion is set
     in <head> only when the visitor has not asked for reduced motion.
   - Only transform / opacity / clip-path animate. The hero photo itself is
     painted from the first frame (LCP); a curtain above it wipes away.
   - The $100 CTA (.hero-sheet .actions) never fades: clickable at t=0.
   ===================================================================== */

/* ---------------------------------------------------------------- tokens */
:root{
  --ease-out-expo:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
}

/* Headline lines: block spans; the inner span slides inside a mask */
.v3-hero h1 .ln{display:block}
.v3-hero h1 .ln > span{display:inline-block}

/* ------------------------------------------------------- hero entrance */
@keyframes bm-line-up{from{transform:translateY(108%)}to{transform:none}}
@keyframes bm-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes bm-sheet-in{from{transform:translateY(22px)}to{transform:none}}
@keyframes bm-curtain{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@keyframes bm-kenburns{from{scale:1.16}to{scale:var(--kb-end,1)}}
@keyframes bm-shine{from{transform:translateX(-120%) skewX(-18deg)}to{transform:translateX(320%) skewX(-18deg)}}

.bm-motion .v3-hero h1 .ln{overflow:hidden;padding-bottom:.09em;margin-bottom:-.09em}
.bm-motion .v3-hero h1 .ln > span{animation:bm-line-up .82s var(--ease-out-expo) both}
.bm-motion .v3-hero h1 .ln:nth-child(2) > span{animation-delay:.09s}
.bm-motion .v3-hero h1 .ln:nth-child(3) > span{animation-delay:.18s}
/* a language that arrives without line spans still gets a gentle rise */
.bm-motion .v3-hero h1:not(:has(.ln)){animation:bm-rise .6s var(--ease-out-expo) both}
.bm-motion .v3-hero .badge{animation:bm-rise .5s var(--ease-out-expo) both}
.bm-motion .hero-head > .lead{animation:bm-rise .6s .28s var(--ease-out-expo) both}

.bm-motion .hero-sheet{animation:bm-sheet-in .7s .12s var(--ease-out-expo) both}
.bm-motion .hero-cost-summary > div,
.bm-motion .hero-sheet > :not(.actions):not(.hero-cost-summary){animation:bm-rise .5s var(--ease-out-expo) both}
.bm-motion .hero-cost-summary > div:nth-child(1){animation-delay:.18s}
.bm-motion .hero-cost-summary > div:nth-child(2){animation-delay:.24s}
.bm-motion .hero-cost-summary > div:nth-child(3){animation-delay:.3s}
.bm-motion .hero-sheet > .hero-payment-note{animation-delay:.36s}
.bm-motion .hero-sheet > .hero-trust-line{animation-delay:.4s}
.bm-motion .hero-sheet > .hero-support-row{animation-delay:.44s}
.bm-motion .hero-sheet > .bm-cost-secondary,
.bm-motion .hero-sheet > .bg-hero-conversion{animation-delay:.48s}
/* CTA: never hidden — one light sweep draws the eye once the page settles */
.hero-create-account-cta{position:relative;overflow:hidden;isolation:isolate}
.bm-motion .hero-create-account-cta::after{content:"";position:absolute;inset:0 auto 0 0;width:38%;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent);
  transform:translateX(-120%) skewX(-18deg);animation:bm-shine 1.1s .95s var(--ease-in-out) 1 both}

/* Photo: two curtains (ink, then accent) wipe right-to-left over an image
   that is already painted; the image settles from a slow Ken Burns scale. */
.hero-photo picture{position:relative;overflow:hidden}
.bm-motion .hero-photo picture::before,
.bm-motion .hero-photo picture::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;transform-origin:100% 50%;
  animation:bm-curtain .78s var(--ease-in-out) both}
.bm-motion .hero-photo picture::before{background:var(--accent);animation-delay:.24s}
.bm-motion .hero-photo picture::after{background:var(--ink);animation-delay:.1s}
.bm-motion .hero-photo img{animation:bm-kenburns 1.15s .1s var(--ease-out-expo) both;will-change:transform}
.bm-motion .hero-photo figcaption{animation:bm-rise .5s .62s var(--ease-out-expo) both}
@media (min-width:1025px) and (pointer:fine){.hero-photo{--kb-end:1.05}}

/* ------------------------------------------------- scroll progress bar */
.bm-progress{position:fixed;left:0;right:0;top:0;height:3px;z-index:120;pointer-events:none;
  background:linear-gradient(90deg,var(--accent),#5b97ff);transform-origin:0 50%;transform:scaleX(0)}

/* --------------------------------------------- split heading lines (JS) */
.bm-ml{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.bm-ml > .bm-mli{display:inline-block;will-change:transform}

/* ------------------------------------------------------ auction ticker */
.bm-ticker{position:relative;overflow:hidden;border-top:1px solid var(--line);background:var(--paper);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.bm-ticker-track{display:flex;width:max-content;animation:bm-ticker 60s linear infinite}
.bm-ticker:hover .bm-ticker-track{animation-play-state:paused}
.bm-ticker-group{display:flex;align-items:center;flex:none}
.bm-ticker-item{display:inline-flex;align-items:baseline;gap:10px;padding:14px 28px;white-space:nowrap;font-size:var(--t-sm);color:var(--muted);position:relative}
.bm-ticker-item::after{content:"";position:absolute;right:-2px;top:50%;width:4px;height:4px;border-radius:50%;background:var(--line-2);transform:translateY(-50%)}
.bm-ticker-item b{font:600 11px/1 var(--sans);letter-spacing:.02em;color:var(--ink);border:1px solid var(--line-2);border-radius:3px;padding:3px 6px;align-self:center}
.bm-ticker-item em{font:italic 500 var(--t-md)/1.2 var(--serif);color:var(--ink)}
.bm-ticker-item strong{font:600 var(--t-md)/1 var(--serif);color:var(--accent);font-variant-numeric:tabular-nums}
@keyframes bm-ticker{to{transform:translateX(-50%)}}
@media (max-width:600px){.bm-ticker-item{padding:12px 20px}.bm-ticker-track{animation-duration:44s}}
@media (prefers-reduced-motion:reduce){.bm-ticker-track{animation:none}.bm-ticker{overflow-x:auto;scrollbar-width:none}}

/* ------------------------------------------------- tactile feedback */
/* press: every button/card gives way a little under the finger */
.btn,.shell-cta,.sticky-cta-main,.how-mode,.sort-btn,.brand-btn,.desktop-case-switch button,.splide__arrow,.more-toggle{
  transition:scale .18s var(--ease-out-expo),translate .5s var(--ease-out-expo),background-color .2s,border-color .2s,color .2s,box-shadow .2s}
.btn:active,.shell-cta:active,.sticky-cta-main:active,.how-mode:active,.sort-btn:active,.brand-btn:active,.desktop-case-switch button:active,.splide__arrow:active,.more-toggle:active{scale:.965}
.vcard:active,.bought-strip-card:active,.faq-item .q:active{scale:.985}
/* ripple (JS adds the span) */
.bm-rip-host{position:relative;overflow:hidden}
.bm-ripple{position:absolute;border-radius:50%;pointer-events:none;background:currentColor;opacity:.18;transform:scale(0);animation:bm-ripple .6s var(--ease-out-expo) forwards}
.btn-primary .bm-ripple,.sticky-cta-main .bm-ripple{background:#fff;opacity:.3}
@keyframes bm-ripple{to{transform:scale(1);opacity:0}}

/* ------------------------------------------------- segmented switchers */
.bm-seg{position:relative;isolation:isolate}
.bm-seg-ind{position:absolute;left:0;top:0;z-index:-1;pointer-events:none;transform-origin:0 0;
  transition:transform .45s var(--ease-out-expo),width .45s var(--ease-out-expo)}
.how-mode-switch.bm-seg .how-mode.active,.sort-btns.bm-seg .sort-btn.active{background:transparent;box-shadow:none}
.how-mode-switch .bm-seg-ind,.sort-btns .bm-seg-ind{background:var(--paper);border-radius:var(--r-sm);box-shadow:0 1px 3px rgba(14,28,54,.14)}
.desktop-case-switch.bm-seg button.is-active{border-color:transparent}
.desktop-case-switch .bm-seg-ind{top:auto!important;bottom:-1px;height:2px!important;background:var(--ink)}
.how-mode,.sort-btn,.desktop-case-switch button{transition:color .3s,scale .18s var(--ease-out-expo)}

/* ------------------------------------------------- FAQ: height + icon morph */
.bm-faq .faq-item .a.bm-closing{display:block}
.bm-faq .faq-item .plus{font-size:0;position:relative;border:1px solid var(--line-2);border-radius:50%;width:32px;height:32px;
  transition:background-color .3s,border-color .3s,transform .45s var(--ease-out-expo)}
.bm-faq .faq-item .plus::before,.bm-faq .faq-item .plus::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;border-radius:2px;background:var(--ink);
  transition:transform .45s var(--ease-out-expo),background-color .3s}
.bm-faq .faq-item .plus::after{transform:rotate(90deg)}
.bm-faq .faq-item.open .plus{transform:rotate(180deg);background:var(--ink);border-color:var(--ink)}
.bm-faq .faq-item.open .plus::before,.bm-faq .faq-item.open .plus::after{background:#fff}
.bm-faq .faq-item.open .plus::after{transform:rotate(0)}
.bm-faq .faq-item:hover .plus{border-color:var(--ink)}

/* ------------------------------------------------- rail progress (mobile) */
.bm-rail-bar{height:2px;margin:var(--s3) 0 0;background:var(--line);border-radius:2px;overflow:hidden}
.bm-rail-bar > i{display:block;height:100%;width:100%;background:var(--ink);transform-origin:0 50%;transform:scaleX(.2)}
.v3-app .bm-rail-bar{background:rgba(255,255,255,.16)}
.v3-app .bm-rail-bar > i{background:#9dbaff}
@media (min-width:821px){.bm-rail-bar{display:none}}

/* ------------------------------------------------- sticky bar: springy entrance */
@media (max-width:820px){
  .sticky-cta{transition:transform .55s cubic-bezier(.2,1.25,.35,1)}
  .sticky-cta:not(.show){transition-duration:.3s;transition-timing-function:var(--ease-in-out)}
}

/* ------------------------------------------------- photo lightbox */
.bm-zoomable{cursor:zoom-in}
.bm-zoom-hint{position:absolute;right:12px;bottom:12px;z-index:2;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  background:rgba(14,28,54,.66);color:#fff;pointer-events:none;opacity:.9;transition:opacity .2s,scale .3s var(--ease-out-expo)}
.bm-zoom-hint svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
@media (pointer:fine){.bm-zoom-hint{opacity:0;scale:.8}*:hover > .bm-zoom-hint{opacity:.9;scale:1}}
.bm-lightbox{position:fixed;inset:0;z-index:300;display:grid;place-items:center;background:rgba(8,14,28,0);transition:background-color .35s;touch-action:none}
.bm-lightbox.is-open{background:rgba(8,14,28,.9)}
.bm-lightbox img{max-width:min(94vw,1600px);max-height:86vh;width:auto;height:auto;border-radius:var(--r-md);transform-origin:0 0;will-change:transform;box-shadow:0 30px 80px -20px rgba(0,0,0,.6)}
.bm-lightbox-close{position:absolute;top:14px;right:14px;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:#fff;font-size:26px;line-height:1;display:grid;place-items:center;opacity:0;transition:opacity .3s}
.bm-lightbox.is-open .bm-lightbox-close{opacity:1}
.bm-lightbox-cap{position:absolute;left:16px;right:16px;bottom:18px;text-align:center;color:rgba(255,255,255,.8);font-size:var(--t-sm);opacity:0;transition:opacity .3s}
.bm-lightbox.is-open .bm-lightbox-cap{opacity:1}

/* ------------------------------------------------- desktop hover layer */
@media (hover:hover) and (pointer:fine){
  /* cursor-follow highlight */
  .bm-glow{position:relative}
  .bm-glow::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;opacity:0;transition:opacity .35s;
    background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(22,88,214,.09),transparent 45%)}
  .bm-glow:hover::before{opacity:1}
  .v3-app .bm-glow::before,.bm-glow.dark::before{background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(157,186,255,.16),transparent 45%)}
  /* car cards: lift, tilt (JS sets --rx/--ry), image zoom, lot hint slides up */
  .vcard,.bought-strip-card{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px));
    transition:transform .5s var(--ease-out-expo),box-shadow .5s var(--ease-out-expo),border-color .2s,scale .18s var(--ease-out-expo)}
  .vcard:hover,.bought-strip-card:hover{--lift:-6px}
  .vcard:hover{box-shadow:0 22px 40px -22px rgba(14,28,54,.45)}
  .vcard.is-tilting,.bought-strip-card.is-tilting{transition:transform .12s linear,box-shadow .5s var(--ease-out-expo),border-color .2s}
  .vcard .img img,.bought-strip-card img,.receipt-photo img,.desktop-case-photo img{transition:scale .9s var(--ease-out-expo)}
  .vcard:hover .img img,.bought-strip-card:hover img{scale:1.06}
  .bought-strip-card{border-radius:var(--r-md)}
  .bought-strip-card .bm-img-wrap{display:block;overflow:hidden;border-radius:var(--r-md)}
  .vcard .ext-hint{opacity:1;clip-path:inset(100% 0 0 0);transition:clip-path .45s var(--ease-out-expo)}
  .vcard:hover .ext-hint{clip-path:inset(0)}
  .price-card{transition:box-shadow .5s var(--ease-out-expo)}
  /* magnetic buttons move with `translate` so press (`scale`) still composes */
  .bm-magnetic{will-change:translate}
}

/* ------------------------------------------------- Lenis */
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:clip}

/* ------------------------------------------------- reduced motion: all static */
@media (prefers-reduced-motion:reduce){
  .bm-progress{display:none}
  .vcard,.bought-strip-card{transform:none!important}
  .bm-ripple{display:none}
}

/* Hero entrance waits for the first painted frame (inline rAF adds .bm-go),
   so a slow parse never "plays" it while nothing is on screen. */
.bm-motion:not(.bm-go) .v3-hero *,
.bm-motion:not(.bm-go) .v3-hero *::before,
.bm-motion:not(.bm-go) .v3-hero *::after{animation-play-state:paused!important}

/* Sticky bar returns only after a tap finishes: when a field loses focus because
   the visitor tapped "Send", the bar must not pop up under the finger mid-tap. */
@media (max-width:900px){
  .sticky-cta{transition:transform .55s cubic-bezier(.2,1.25,.35,1),visibility 0s linear .45s}
  body:has(:is(input:not([type=checkbox]):not([type=radio]),textarea,select:not(#shell-language)):focus:not(.bm-ai-panel *)) .sticky-cta{transition-delay:0s}
}

/* ------------------------------------------------------------ low-end devices (<=4 cores / <=4 GB / Save-Data): same layout, fewer running effects */
.bm-lowend .bm-ticker-track{animation:none}
.bm-lowend .bm-ticker{overflow-x:auto;scrollbar-width:none}
.bm-lowend .bm-motion .hero-photo img,.bm-lowend.bm-motion .hero-photo img{will-change:auto}
.bm-lowend .hero-b .hero-photo picture,.bm-lowend .hero-b .hero-head > .lead,.bm-lowend .hero-b .hero-head > .hero-title,.bm-lowend .hero-b .hero-photo figcaption{will-change:auto}