/* nb-fix042 — Northbound motion. Everything degrades to static under prefers-reduced-motion. */
:root{--mo-ease:cubic-bezier(.2,.8,.2,1);--mo-bounce:cubic-bezier(.34,1.56,.64,1)}

/* road + van */
.road{position:relative;height:44px;margin:var(--sp-3) 0 var(--sp-5);overflow:hidden}
.road::before{content:"";position:absolute;left:0;right:0;bottom:6px;height:3px;background:var(--nb-ink);opacity:.9}
.road::after{content:"";position:absolute;left:0;right:0;bottom:7px;height:1px;background:repeating-linear-gradient(90deg,var(--nb-brass) 0 14px,transparent 14px 28px);background-size:28px 1px;animation:road-dash 1.1s linear infinite;opacity:.9}
.road__van{position:absolute;bottom:8px;left:-70px;animation:van-drive 2.6s var(--mo-ease) .2s forwards}
.road__van .van__body{animation:van-bob 1.3s ease-in-out infinite;transform-origin:center bottom}
.road__van .van__wheel{animation:wheel-spin .6s linear infinite;transform-box:fill-box;transform-origin:center}
.road--ft{margin:var(--sp-6) 0 var(--sp-4)}
.road--ft::before{background:var(--nb-ivory);opacity:.35}
.road--ft .road__van{animation-delay:.1s}
@keyframes van-drive{to{left:calc(50% - 32px)}}
@keyframes van-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-1px)}}
@keyframes wheel-spin{to{transform:rotate(360deg)}}
@keyframes road-dash{to{background-position:-28px 0}}
.road.is-parked::after{animation-play-state:paused}
.road.is-parked .van__wheel{animation-play-state:paused}

/* scroll reveal */
.reveal{opacity:0;transform:translateY(14px) scale(.985);transition:opacity .55s var(--mo-ease),transform .55s var(--mo-ease)}
.reveal.is-in{opacity:1;transform:none}

/* heart sparks */
.heart{transition:transform .18s var(--mo-bounce)}
.heart.is-on{animation:heart-pop .42s var(--mo-bounce)}
.heart .spark{position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px;border-radius:50%;background:var(--nb-brass);pointer-events:none;animation:spark .55s var(--mo-ease) forwards}
@keyframes heart-pop{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
@keyframes spark{to{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}

/* cart bag */
.hd__cart.is-bump svg{animation:bag-bump .5s var(--mo-bounce)}
.hd__cartn{transition:transform .25s var(--mo-bounce)}
.hd__cartn.is-pop{animation:badge-pop .45s var(--mo-bounce)}
@keyframes bag-bump{0%{transform:translateY(0)}35%{transform:translateY(-5px) rotate(-6deg)}70%{transform:translateY(0) rotate(3deg)}100%{transform:none}}
@keyframes badge-pop{0%{transform:scale(.3)}60%{transform:scale(1.25)}100%{transform:scale(1)}}

/* price tag swing */
.item__price{display:inline-block;transform-origin:top left;animation:tag-swing 1.6s var(--mo-ease) .25s}
@keyframes tag-swing{0%{transform:rotate(0)}18%{transform:rotate(-4deg)}42%{transform:rotate(2.5deg)}66%{transform:rotate(-1.2deg)}85%{transform:rotate(.5deg)}100%{transform:rotate(0)}}

/* sold stamp */
.item__soldbadge,.card__sold{animation:stamp .45s var(--mo-ease) both}
@keyframes stamp{0%{transform:scale(1.7) rotate(-8deg);opacity:0}60%{transform:scale(.95) rotate(-3deg);opacity:1}100%{transform:scale(1) rotate(-3deg)}}
.item__soldbadge,.card__sold{transform:rotate(-3deg)}

/* button ink + logo tilt */
.btn{position:relative;overflow:hidden;transition:transform .12s var(--mo-ease)}
.btn:active{transform:scale(.97)}
.btn .ink{position:absolute;border-radius:50%;pointer-events:none;background:rgba(176,141,87,.35);transform:scale(0);animation:ink .55s var(--mo-ease) forwards}
@keyframes ink{to{transform:scale(2.6);opacity:0}}
.hd__mark--img{transition:transform .35s var(--mo-bounce)}
.hd__logo:hover .hd__mark--img,.hd__logo:focus-visible .hd__mark--img{transform:rotate(-6deg) translateX(-1px)}
.card .card__img img{transition:transform .5s var(--mo-ease)}
.card:hover .card__img img{transform:scale(1.03)}

/* page cross-fade (View Transitions where supported) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:fade-out .18s ease both}
::view-transition-new(root){animation:fade-in .28s ease both}
@keyframes fade-out{to{opacity:0}}
@keyframes fade-in{from{opacity:0}}

@media (prefers-reduced-motion:reduce){
  .road__van{left:calc(50% - 32px);animation:none}.road::after,.road__van .van__body,.road__van .van__wheel{animation:none}
  .reveal{opacity:1;transform:none;transition:none}
  .heart.is-on,.item__price,.item__soldbadge,.card__sold,.hd__cart.is-bump svg,.hd__cartn.is-pop{animation:none}
  .btn .ink{display:none}.card:hover .card__img img{transform:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}
