/* HC Motion — companion styles for assets/js/motion.js (Animate UI–style effects, vanilla). */
:root{--mo-spring:cubic-bezier(.34,1.56,.64,1);--mo-out:cubic-bezier(.2,.8,.2,1)}

/* 1. Splitting text */
.mo .mo-split .mo-w{display:inline-block;opacity:0;transform:translateY(.42em) rotate(2deg);filter:blur(10px);transition:opacity .7s var(--mo-out),transform .8s var(--mo-out),filter .7s var(--mo-out);transition-delay:calc(var(--wi,0) * 60ms + 80ms);will-change:transform,opacity,filter}
.mo .mo-split.mo-in .mo-w{opacity:1;transform:none;filter:none}

/* 2. Shimmering / gradient text */
.grad{background-size:220% auto;animation:moGrad 7s ease-in-out infinite alternate}
.kicker,.eyebrow,.pl-eyebrow,.cat-chip{position:relative;overflow:hidden;isolation:isolate}
.nav-free{overflow:hidden;isolation:isolate} /* keeps its own absolute position above the menu label */
.kicker::after,.eyebrow::after,.nav-free::after,.pl-eyebrow::after,.cat-chip::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.75) 50%,transparent 65%);transform:translateX(-120%);animation:moShine 4.8s ease-in-out infinite}
.eyebrow::after{animation-delay:1.2s}.nav-free::after{animation-duration:3.2s}
[data-theme=dark] .kicker::after,[data-theme=dark] .eyebrow::after,[data-theme=dark] .cat-chip::after{background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.22) 50%,transparent 65%)}

/* 3. Numbers */
.mo-num{font-variant-numeric:tabular-nums;display:inline-block}
.mo-num-done{animation:moNumPop .45s var(--mo-spring)}

/* 4. Stagger / rise reveal */
.mo .mo-stagger:not(.mo-done)>*{opacity:0;transform:translateY(18px) scale(.985);filter:blur(6px);transition:opacity .6s var(--mo-out),transform .75s var(--mo-out),filter .6s var(--mo-out);transition-delay:calc(var(--si,0) * 70ms)}
.mo .mo-stagger.mo-in:not(.mo-done)>*{opacity:1;transform:none;filter:none}
.mo .mo-rows:not(.mo-done)>tr{opacity:0;transform:translateY(8px);transition:opacity .45s var(--mo-out),transform .5s var(--mo-out);transition-delay:calc(var(--si,0) * 28ms)}
.mo .mo-rows.mo-in:not(.mo-done)>tr{opacity:1;transform:none}
.mo .mo-rise:not(.mo-done){opacity:0;transform:translateY(14px);transition:opacity .55s var(--mo-out),transform .65s var(--mo-out);transition-delay:calc(var(--si,0) * 60ms)}
.mo .mo-rise.mo-in:not(.mo-done){opacity:1;transform:none}
html.js-reveal .reveal{filter:blur(6px);transition:opacity .8s var(--mo-out),transform .8s var(--mo-out),filter .8s var(--mo-out)}
html.js-reveal .reveal.in{filter:none}

/* 5. Tilt + 6. Magnetic */
.mo-tilt{transform-style:preserve-3d;will-change:transform}
.mo-tilt:hover{box-shadow:var(--sh-3,0 18px 40px -16px rgba(16,20,60,.35))}
.mo-mag{transition:translate .35s var(--mo-spring),transform .25s,box-shadow .25s}

/* 7. Ripple */
.mo-rip-box{position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none;z-index:0}
.mo-ripple{position:absolute;border-radius:50%;background:currentColor;opacity:.22;transform:scale(0);animation:moRipple .65s var(--mo-out) forwards;pointer-events:none}
.btn-glow .mo-ripple,.btn:not(.ghost):not(.btn-ghost):not(.btn-light) .mo-ripple,.tab-fab .mo-ripple{background:#fff;opacity:.35}
.btn,.ib,.core-btn,.hdr-auth{transition:transform .18s var(--mo-out),background-color .2s,border-color .2s,color .2s,box-shadow .25s,translate .35s var(--mo-spring)}
.btn:active,.ib:active,.core-btn:active,.hdr-auth:active,.is-go:active{transform:scale(.96)}

/* Shine on primary buttons */
.btn-glow,.header-cta,.is-go,.core-btn{position:relative;overflow:hidden;isolation:isolate}
.btn-glow::before,.header-cta::before,.is-go::before{content:"";position:absolute;top:0;bottom:0;left:0;width:45%;z-index:-1;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);transform:translateX(-130%) skewX(-18deg);animation:moBtnShine 5.5s ease-in-out infinite}
.btn-glow:hover::before,.header-cta:hover::before{animation-duration:1.1s}

/* 8. Gliding hover highlight */
.mo-hl{position:absolute;left:0;top:0;z-index:-1;border-radius:12px;background:color-mix(in srgb,var(--brand,#3B4FD8) 9%,transparent);opacity:0;pointer-events:none;transition:transform .42s var(--mo-spring),width .42s var(--mo-spring),height .42s var(--mo-spring),opacity .25s}
.mo-hl.on{opacity:1}
.side-nav .mo-hl{background:rgba(255,255,255,.07);border-radius:10px}
.site-footer .mo-hl{background:rgba(255,255,255,.06);border-radius:8px}
.tabs .mo-hl{border-radius:10px 10px 0 0}
.main-nav .mo-hl{border-radius:12px}

/* 9. Auto-height details */
details.mo-anim>.mo-det{overflow:hidden}
details>summary{transition:color .2s}
details>summary::after,details>summary .toc-chev{transition:transform .35s var(--mo-spring)}

/* 10. Toasts */
.mo-toast{position:relative;padding-inline-end:42px!important;animation:moToast .55s var(--mo-spring) both;animation-delay:calc(var(--si,0) * 90ms);overflow:hidden}
.mo-toast-out{animation:moToastOut .3s ease forwards}
.mo-toast-x{position:absolute;top:50%;inset-inline-end:10px;translate:0 -50%;width:26px;height:26px;border-radius:50%;border:0;background:transparent;color:inherit;opacity:.55;font-size:18px;line-height:1;cursor:pointer}
.mo-toast-x:hover{opacity:1;background:rgba(0,0,0,.06)}
.mo-toast-bar{position:absolute;bottom:0;inset-inline-start:0;height:3px;width:100%;background:currentColor;opacity:.28;animation:moBar 6.5s linear forwards}

/* 11. Progress */
.mo .mo-grow{transition:width 1.2s var(--mo-out)}
.mo .mo-grow:not(.mo-in){width:0!important}

/* 12. Theme reveal + page transitions */
html.mo-vt-theme::view-transition-old(root),html.mo-vt-theme::view-transition-new(root){animation:none;mix-blend-mode:normal}
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:moPageOut .2s ease both}
  ::view-transition-new(root){animation:moPageIn .38s var(--mo-out) both}
  .site-header{view-transition-name:hc-header}
  .tabbar{view-transition-name:hc-tabbar}
  .side{view-transition-name:hc-side}
  .top{view-transition-name:hc-top}
}

/* 13. Star background */
.mo-stars{position:absolute;inset:0;z-index:-1;pointer-events:none}
.auth-promo,.login-page,.cta-in,.pl-hero,.seller-cta{isolation:isolate}

/* 14. Spring tooltips on admin icon buttons */
.ib[title]:hover:after{animation:moTip .32s var(--mo-spring)}

/* 15. Copy feedback */
.mo-copied{animation:moCopied .6s var(--mo-spring)}

/* 16. Active chip pop */
.mo-pop{animation:moPopIn .5s var(--mo-spring)}

/* Animated icons (Animate UI–style): icon reacts when its button / link is hovered */
:is(a,button,.tab,.stat,summary):hover>svg.ic,:is(a,button,.tab):focus-visible>svg.ic,:is(a,button):hover>.tab-fab>svg.ic,:is(a,button):hover .dt-ic>svg.ic,:is(a,button):hover>span>svg.ic{animation:var(--ia,moIcPop) .6s var(--mo-spring)}
svg.ic[data-i=megaphone],svg.ic[data-i=bell],svg.ic[data-i=mail],svg.ic[data-i=message]{--ia:moIcWiggle}
svg.ic[data-i=search]{--ia:moIcSearch}
svg.ic[data-i=refresh],svg.ic[data-i=power],svg.ic[data-i=wrench],svg.ic[data-i=sparkles]{--ia:moIcSpin}
svg.ic[data-i=trash],svg.ic[data-i=ban],svg.ic[data-i=x],svg.ic[data-i=lock],svg.ic[data-i=key]{--ia:moIcShake}
svg.ic[data-i=arrow],svg.ic[data-i=chevron],svg.ic[data-i=external],svg.ic[data-i=reply],svg.ic[data-i=send]{--ia:moIcNudge}
svg.ic[data-i=rocket]{--ia:moIcLift}
svg.ic[data-i=download],svg.ic[data-i=upload],svg.ic[data-i=arrow-up],svg.ic[data-i=coin]{--ia:moIcBounce}
svg.ic[data-i=eye],svg.ic[data-i=eye-off]{--ia:moIcBlink}
svg.ic[data-i=plus],svg.ic[data-i=plus-square]{--ia:moIcTurn}
svg.ic[data-i=star],svg.ic[data-i=heart],svg.ic[data-i=thumb-up],svg.ic[data-i=trophy],svg.ic[data-i=crown],svg.ic[data-i=fire],svg.ic[data-i=check],svg.ic[data-i=check-circle]{--ia:moIcBeat}
[dir=rtl] svg.ic[data-i=arrow],[dir=rtl] svg.ic[data-i=reply]{--dx:-1}
/* icons that are already rotated keep their own transform */
.chev,.toc-chev,.dt-chev,.row-chev,.acc-drop button>.ic,.acc-out .ic,.flip>.ic,.is-arrow .ic,.lt-search>.ic{animation:none!important}

/* Admin: settings checkboxes become animated switches */
.settings .chk input[type=checkbox],.card .chk input[type=checkbox],.lt-panel .chk input[type=checkbox]{appearance:none;-webkit-appearance:none;flex:none;width:40px;height:23px;border-radius:999px;background:#D5DAE6;position:relative;cursor:pointer;vertical-align:middle;margin:0 0 0 8px;transition:background .25s;border:0}
.settings .chk input[type=checkbox]::after,.card .chk input[type=checkbox]::after,.lt-panel .chk input[type=checkbox]::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:17px;height:17px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:inset-inline-start .35s var(--mo-spring),width .2s}
.settings .chk input[type=checkbox]:checked,.card .chk input[type=checkbox]:checked,.lt-panel .chk input[type=checkbox]:checked{background:var(--ok,#16A36A)}
.settings .chk input[type=checkbox]:checked::after,.card .chk input[type=checkbox]:checked::after,.lt-panel .chk input[type=checkbox]:checked::after{inset-inline-start:20px}
.settings .chk input[type=checkbox]:active::after,.card .chk input[type=checkbox]:active::after{width:22px}
.chk{display:flex;align-items:center;gap:6px}

/* Keyframes */
@keyframes moGrad{from{background-position:0% 50%}to{background-position:100% 50%}}
@keyframes moShine{0%,62%{transform:translateX(-120%)}82%,100%{transform:translateX(120%)}}
@keyframes moBtnShine{0%,70%{transform:translateX(-130%) skewX(-18deg)}100%{transform:translateX(330%) skewX(-18deg)}}
@keyframes moRipple{to{transform:scale(1);opacity:0}}
@keyframes moNumPop{40%{transform:scale(1.08)}}
@keyframes moToast{from{opacity:0;transform:translateY(-14px) scale(.97)}}
@keyframes moToastOut{to{opacity:0;transform:translateY(-10px) scale(.97);height:0;margin:0;padding-top:0;padding-bottom:0}}
@keyframes moBar{to{width:0}}
@keyframes moPageOut{to{opacity:0;transform:translateY(-6px)}}
@keyframes moPageIn{from{opacity:0;transform:translateY(10px)}}
@keyframes moTip{from{opacity:0;transform:translateX(-50%) translateY(5px) scale(.85)}}
@keyframes moCopied{40%{transform:scale(1.15)}}
@keyframes moPopIn{from{transform:scale(.85);opacity:.4}}
@keyframes moIcPop{40%{transform:scale(1.22)}70%{transform:scale(.94)}}
@keyframes moIcWiggle{20%{transform:rotate(-14deg)}40%{transform:rotate(12deg)}60%{transform:rotate(-8deg)}80%{transform:rotate(5deg)}}
@keyframes moIcSearch{40%{transform:rotate(-14deg) scale(1.15)}}
@keyframes moIcSpin{to{transform:rotate(360deg)}}
@keyframes moIcShake{20%,60%{transform:translateX(-2px) rotate(-6deg)}40%,80%{transform:translateX(2px) rotate(6deg)}}
@keyframes moIcNudge{50%{transform:translateX(calc(var(--dx,1) * 4px))}}
@keyframes moIcLift{40%{transform:translate(3px,-4px) rotate(8deg)}}
@keyframes moIcBounce{30%{transform:translateY(-4px)}60%{transform:translateY(1px)}}
@keyframes moIcBlink{40%{transform:scaleY(.15)}}
@keyframes moIcTurn{to{transform:rotate(90deg)}}
@keyframes moIcBeat{30%{transform:scale(1.3)}55%{transform:scale(.92)}75%{transform:scale(1.08)}}

@media (prefers-reduced-motion:reduce){
  .grad,.kicker::after,.eyebrow::after,.nav-free::after,.pl-eyebrow::after,.cat-chip::after,.btn-glow::before,.header-cta::before,.is-go::before{animation:none!important}
  .mo-toast,.mo-pop,.mo-num-done,svg.ic{animation:none!important}
}
@media print{.mo .mo-stagger>*,.mo .mo-rows>tr,.mo .mo-rise,.mo .mo-split .mo-w{opacity:1!important;transform:none!important;filter:none!important}.mo-stars,.mo-hl{display:none}}