/* ===== Motion, round 2 (motion2.js). Transform and opacity; reduced motion shows every final state, still. ===== */

/* Card → product page: the photo morphs; everything else (titles included) cross-fades quickly. */
::view-transition-group(vt-photo){animation-duration:340ms;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
::view-transition-old(root),::view-transition-new(root){animation-duration:200ms}
::view-transition-old(vt-photo),::view-transition-new(vt-photo){height:100%;object-fit:contain}
@media(prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}

/* Product page: "הצעה חדשה" next to the price, only on a real change (navy: the bid button stays the turquoise). */
.ab-price{position:relative}
.new-bid{display:inline-flex;align-items:center;min-height:26px;padding:0 10px;border-radius:var(--pill);background:var(--navy);color:#fff;font-size:var(--fs-s);font-weight:600;white-space:nowrap;margin-inline-start:8px}

/* The last 24 hours as a thin bar under the countdown; it drains with the time left (calm: no red). */
.ab-time{position:relative}
.ab-drain{display:block;flex-basis:100%;height:3px;margin-top:8px;border-radius:3px;background:var(--tile-2);overflow:hidden}
.ab-drain i{display:block;height:100%;background:var(--navy);transform-origin:right center;transition:transform 1s linear}

/* Leading / outbid: the bid box's tone cross-fades (turquoise tint ↔ navy tint). */
.item .bidbox{position:relative;isolation:isolate}
.item .bidbox:before,.item .bidbox:after{content:"";position:absolute;inset:-12px;border-radius:var(--r-m);z-index:-1;opacity:0;transition:opacity 420ms cubic-bezier(.2,.8,.2,1);pointer-events:none}
.item .bidbox:before{background:var(--accent-soft)}
.item .bidbox:after{background:var(--navy-soft)}
.item .bidbox[data-you=lead]:before,.item .bidbox[data-you=out]:after{opacity:1}
.item .bidbox[data-you] .bid-status{background:transparent!important;padding-inline:0!important}

/* The bid went through: the label steps back and a check takes its place for a moment. */
.bid-main{position:relative;overflow:hidden}
.bid-check{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transform:scale(.6);transition:opacity 200ms ease,transform 260ms cubic-bezier(.2,.8,.2,1)}
.bid-main.done{color:transparent!important}
.bid-main.done .bid-check{opacity:1;transform:none;color:var(--navy)}

/* Search suggestions: a short stagger when the list opens (20ms apart, the first six). */
.suggest.sg-enter [role=option]{animation:sg-in 220ms cubic-bezier(.2,.8,.2,1) both}
.suggest.sg-enter [role=option]:nth-child(2){animation-delay:20ms}.suggest.sg-enter [role=option]:nth-child(3){animation-delay:40ms}.suggest.sg-enter [role=option]:nth-child(4){animation-delay:60ms}.suggest.sg-enter [role=option]:nth-child(5){animation-delay:80ms}.suggest.sg-enter [role=option]:nth-child(n+6){animation-delay:100ms}
@keyframes sg-in{from{opacity:0;transform:translateY(-4px)}}
/* Phones: the header search opens out of its icon (the icon sits at the row's left end): a clip reveal, so the
   placeholder is never squashed. */
@media(max-width:620px) and (prefers-reduced-motion:no-preference){html:not(.a11y-motion) body>header.search-open .header-center .search{animation:search-open 260ms cubic-bezier(.2,.8,.2,1)!important}}
@keyframes search-open{from{clip-path:inset(0 82% 0 0 round 999px);opacity:.4}to{clip-path:inset(0 0 0 0 round 999px);opacity:1}}

/* Sell form: the step line fills from the start (right, in RTL). */
.step-progress span:before{background:var(--tile-2)!important;position:relative}
.step-progress span{position:relative}
.step-progress span:after{content:"";position:absolute;top:0;inset-inline:0;height:4px;border-radius:var(--pill);background:var(--navy);transform:scaleX(0);transform-origin:right center;transition:transform 420ms cubic-bezier(.2,.8,.2,1)}
.step-progress span.on:after,.step-progress span.done:after{transform:none}

/* Save: the heart fills, with one small pop on the press that saves it. */
.card .like svg,.util .ic-heart{transition:fill 160ms ease}
.like.burst svg{animation:heart-pop 200ms cubic-bezier(.2,.8,.2,1)!important}
@keyframes heart-pop{50%{transform:scale(1.12)}}
.tray-n{display:inline-block}

/* Desktop hover: a quick tone shift on buttons. */
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){html:not(.a11y-motion) :is(.cta,.buy,.quick-bid,.util,.cat-tile,.scene-btn,.hero-ghost){transition-duration:120ms!important}}

/* Seller band: Nicole standing on the band's floor at the end (left) side, her hand toward the text. */
.sell-band .sell-band-art{width:auto!important;height:clamp(260px,23vw,340px)!important;max-width:none;aspect-ratio:571/800;align-self:end;justify-self:end;margin:0!important;display:block}
@media(max-width:620px){.sell-band .sell-band-art{height:220px!important;margin-top:12px!important}}
/* Home on phones: the seller band meets the footer (the footer already keeps room for the floating buttons). */
body.is-home #app{padding-bottom:0}

/* Reduced motion (system or the site's toggle): everything above in its final state. */
@media(prefers-reduced-motion:reduce){
 .suggest.sg-enter [role=option],.like.burst svg{animation:none!important}
 .ab-drain i,.step-progress span:after,.item .bidbox:before,.item .bidbox:after,.bid-check,.card .like svg,:is(.cta,.buy,.quick-bid,.util,.cat-tile,.scene-btn,.hero-ghost){transition:none!important}
}
html.a11y-motion .suggest.sg-enter [role=option],html.a11y-motion .like.burst svg{animation:none!important}
html.a11y-motion .ab-drain i,html.a11y-motion .step-progress span:after,html.a11y-motion .item .bidbox:before,html.a11y-motion .item .bidbox:after,html.a11y-motion .bid-check,html.a11y-motion .card .like svg,html.a11y-motion :is(.cta,.buy,.quick-bid,.util,.cat-tile,.scene-btn,.hero-ghost){transition:none!important}