/* Motion layer: transitions, micro-interactions, reveals. transform/opacity based. */

/* page transition + route progress */
@keyframes pageIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
#view{animation:pageIn .38s var(--ease)}
#rt-progress{position:fixed;left:0;top:0;height:3px;width:100%;z-index:200;background:var(--grad);transform-origin:left;transform:scaleX(0);opacity:0;pointer-events:none;box-shadow:0 0 10px rgba(10,108,196,.5)}

/* scroll reveal */
.rv{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:calc(var(--rvi,0)*70ms);will-change:opacity,transform}
.rv.in{opacity:1;transform:none;will-change:auto}
.rv:not(.in) .fu{animation-play-state:paused}
.sticky.rv,.card.rv{transition-delay:calc(var(--rvi,0)*50ms)}

/* hero parallax + slide text animation */
.slide .em{translate:calc(var(--mx,0)*16px) calc(var(--py,0)*1px + var(--my,0)*10px);transition:translate .25s ease-out}
.slide .tx>*{opacity:0}
.slide.act .tx>*{animation:up .65s var(--ease) both}
.slide.act .tx>:nth-child(2){animation-delay:.1s}
.slide.act .tx>:nth-child(3){animation-delay:.2s}
.slide.act .tx>:nth-child(4){animation-delay:.3s}
.slide.act .em{animation:float 5s ease-in-out infinite,emIn .8s var(--ease) both}
@keyframes emIn{from{opacity:0;scale:.6}to{opacity:1;scale:1}}
.slide:not(.act) .em{opacity:.4}

/* category tiles */
@keyframes wob{0%{transform:scale(1)}35%{transform:scale(1.2) rotate(-7deg)}65%{transform:scale(.95) rotate(4deg)}100%{transform:scale(1.07)}}
.cat-tile:hover .circ{animation:wob .55s var(--ease) both}

/* cards */

.pcard:hover .pimg img{transform:scale(1.1) rotate(-1deg)}
.pcard .off{overflow:hidden}
.pcard .off:after,.pdp .off:after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.65) 50%,transparent 70%);transform:translateX(-130%)}
.pcard:hover .off:after{animation:shine .9s ease-out}
.pdp .off{overflow:hidden}
.pdp .off:after{animation:shine 3.6s ease-in-out 1s infinite}
@keyframes shine{to{transform:translateX(130%)}}
.heart.beat{animation:heartpop .5s var(--ease)}
@keyframes heartpop{0%{transform:scale(1)}30%{transform:scale(1.5)}60%{transform:scale(.9)}100%{transform:scale(1)}}
.heart.on .ic{animation:fillin .35s var(--ease)}
@keyframes fillin{from{transform:scale(.4)}to{transform:scale(1)}}
.flash{animation:flash .8s ease-out}
@keyframes flash{0%{color:var(--green);transform:scale(1.12)}100%{transform:none}}
.sum .flash,.pdp .flash{display:inline-block}
.stepper span.rollup{animation:rollup .28s var(--ease)}
.stepper span.rolldown{animation:rolldown .28s var(--ease)}
@keyframes rollup{from{transform:translateY(60%);opacity:0}to{transform:none;opacity:1}}
@keyframes rolldown{from{transform:translateY(-60%);opacity:0}to{transform:none;opacity:1}}
.stepper.pop{animation:popin .36s var(--ease)}

/* ripple + overlay layers */
.btn,.add,.cart-btn,.sbtn,.stepper button,.all-cats,.bnav a,.bnav button{position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent}
.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.55);transform:scale(0);animation:ripple .55s ease-out forwards;pointer-events:none}
.btn.ghost .ripple,.add .ripple,.bnav .ripple{background:rgba(10,108,196,.22)}
@keyframes ripple{to{transform:scale(1);opacity:0}}
.fly-x,.fly-y,.fly-s{pointer-events:none}
.fly-x{position:fixed;z-index:150;will-change:transform}
.fly-y,.fly-s{width:100%;height:100%;will-change:transform}
.fly-s img{width:100%;height:100%;object-fit:contain;background:#fff;border-radius:50%;border:2px solid #fff;box-shadow:0 10px 24px rgba(10,108,196,.35)}
.ring{position:fixed;z-index:149;width:46px;height:46px;border-radius:50%;border:3px solid var(--green);pointer-events:none}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:160;overflow:hidden}
.confetti i{position:absolute;display:block;will-change:transform}
.confetti i.hb{width:auto;height:auto;background:none!important;color:var(--danger);font-style:normal;font-size:14px;line-height:1;border-radius:0!important}
.bnav .bump svg{animation:bounce .6s var(--ease)}
.bnav .bump .bb{animation:pulse .6s}

/* header */
.hdr-main{transition:padding .25s var(--ease),min-height .25s var(--ease)}
.brand img{transition:height .25s var(--ease)}
.site-header.scrolled .hdr-main{min-height:54px;padding-top:4px;padding-bottom:4px}
.site-header.scrolled .brand img{height:40px}
@media(max-width:899px){.site-header.scrolled .brand img{height:34px}.site-header.scrolled .hdr-main{min-height:48px}}
.search form{transition:border-color .2s,box-shadow .3s,transform .3s var(--ease)}
.search form:focus-within{transform:translateY(-1px);box-shadow:0 0 0 4px rgba(10,108,196,.14),0 10px 28px rgba(10,108,196,.16)}
.search .sbtn .ic{transition:transform .3s var(--ease)}
.search form:focus-within .sbtn .ic{transform:scale(1.15) rotate(-8deg)}
.suggest a,.suggest h6{animation:up .32s var(--ease) both}
.suggest>:nth-child(1){animation-delay:0ms}.suggest>:nth-child(2){animation-delay:35ms}.suggest>:nth-child(3){animation-delay:70ms}.suggest>:nth-child(4){animation-delay:105ms}
.suggest>:nth-child(5){animation-delay:140ms}.suggest>:nth-child(6){animation-delay:175ms}.suggest>:nth-child(7){animation-delay:210ms}.suggest>:nth-child(n+8){animation-delay:240ms}
.mega.open .rail a{animation:up .35s var(--ease) both}
.mega.open .rail a:nth-child(2){animation-delay:30ms}.mega.open .rail a:nth-child(3){animation-delay:60ms}.mega.open .rail a:nth-child(4){animation-delay:90ms}.mega.open .rail a:nth-child(5){animation-delay:120ms}
.mega.open .rail a:nth-child(6){animation-delay:150ms}.mega.open .rail a:nth-child(7){animation-delay:180ms}.mega.open .rail a:nth-child(n+8){animation-delay:200ms}
.mega .pane>*{animation:fade .35s var(--ease) both}
.mega .pane .grp{animation:up .4s var(--ease) both}
.mega .rail a{transition:background .15s,transform .2s var(--ease),box-shadow .15s}
.mega .rail a.on,.mega .rail a:hover{transform:translateX(4px)}
.scrim{transition:opacity .3s,backdrop-filter .3s}
.scrim.on{backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}

/* drawers */
.drawer{transition:transform .38s var(--ease),visibility 0s linear .38s}
.drawer.open{transition:transform .38s var(--ease),visibility 0s}
.drawer:not(.open) .catlist details{opacity:0;transform:translateX(-18px)}
.drawer .catlist details{transition:opacity .35s var(--ease),transform .35s var(--ease)}
.drawer.open .catlist details{opacity:1;transform:none}
.catlist details:nth-child(1){transition-delay:.08s}.catlist details:nth-child(2){transition-delay:.12s}.catlist details:nth-child(3){transition-delay:.16s}.catlist details:nth-child(4){transition-delay:.2s}
.catlist details:nth-child(5){transition-delay:.24s}.catlist details:nth-child(6){transition-delay:.28s}.catlist details:nth-child(7){transition-delay:.32s}.catlist details:nth-child(n+8){transition-delay:.36s}
.catlist details[open] .subs{animation:up .3s var(--ease)}
.dbody .line{animation:none}
.dbody.stagger .line{animation:up .45s var(--ease) both}
.dbody.stagger .line:nth-child(2){animation-delay:.05s}.dbody.stagger .line:nth-child(3){animation-delay:.1s}.dbody.stagger .line:nth-child(4){animation-delay:.15s}.dbody.stagger .line:nth-child(n+5){animation-delay:.2s}
.modal{transition:opacity .28s var(--ease),transform .35s var(--ease),visibility 0s linear .3s}
.modal.open{transition:opacity .28s var(--ease),transform .35s var(--ease),visibility 0s}
.fd .bar i{width:0}

/* validation shake */
@keyframes shake{0%,100%{transform:none}20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
.inp.bad{animation:shake .4s}
.shake{animation:shake .4s}
.formerr{animation:up .3s var(--ease)}
.field .err{animation:fade .3s}
.steps .s.on .n{animation:popin .5s var(--ease) both}

/* success + truck */
.truck{position:relative;height:46px;max-width:360px;margin:6px auto 10px;overflow:hidden}
.truck:before{content:"";position:absolute;left:0;right:0;bottom:6px;border-bottom:3px dashed #bcdccb}
.truck span{position:absolute;bottom:8px;left:0;font-size:30px;line-height:1;animation:drive 3.2s cubic-bezier(.45,.05,.4,1) infinite;transform:scaleX(-1)}
.truck span:after{content:"";position:absolute;left:100%;bottom:2px;width:22px;border-bottom:3px solid rgba(63,174,73,.35);filter:blur(1px)}
@keyframes drive{0%{left:-10%;opacity:0}12%{opacity:1}85%{opacity:1}100%{left:92%;opacity:0}}
.success h1{animation:up .6s .3s var(--ease) both}
.success .serial{animation:popin .6s .5s var(--ease) both}
.success .tick{position:relative}
.success .tick:before,.success .tick:after{content:"";position:absolute;inset:0;border-radius:50%;border:3px solid var(--green);animation:ping 1.6s .6s ease-out 2 both;opacity:0}
.success .tick:after{animation-delay:1s}
@keyframes ping{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.8);opacity:0}}

/* toasts */
.toast{position:relative;overflow:hidden;padding-bottom:15px}
.toast:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.55);transform-origin:left;animation:tbar var(--d,2.6s) linear forwards}
@keyframes tbar{to{transform:scaleX(0)}}
.toast.err:after{background:rgba(255,255,255,.7)}

/* product page: zoom + sticky bar */
.pdp .gal{cursor:zoom-in;--ox:50%;--oy:50%}
.pdp .gal img{transition:transform .35s var(--ease);transform-origin:var(--ox) var(--oy)}
@media(hover:hover){.pdp .gal:hover img{transform:scale(1.9)}}
.pdp .gal.zoom img{transform:scale(2.1)}
.pdp .gal .off{z-index:2}
.sbar{display:none}
@media(max-width:899px){
  .sbar{display:flex;position:fixed;left:10px;right:10px;bottom:calc(72px + env(safe-area-inset-bottom));z-index:65;align-items:center;gap:12px;background:rgba(255,255,255,.97);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:16px;padding:10px 12px;box-shadow:var(--sh-lg);transform:translateY(160%);opacity:0;transition:transform .4s var(--ease),opacity .3s;pointer-events:none}
  .sbar.show{transform:none;opacity:1;pointer-events:auto}
  .sbar div{flex:1;min-width:0;line-height:1.2}
  .sbar b{display:block;font-size:17px;color:var(--teal)}
  .sbar small{display:block;color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sbar .btn{min-height:44px;padding:0 20px}
}

/* cart-line removal / skeleton polish */
.line{transform-origin:top}
.sk{position:relative;overflow:hidden}

@media(prefers-reduced-motion:reduce){
  .rv{opacity:1!important;transform:none!important}
  .slide .tx>*{opacity:1}
  .fly-x,.confetti,.ring,#rt-progress{display:none!important}
  .truck span{animation:none;left:40%}
  .fd .bar i{width:var(--w,0)}
}