/* T-SQUARE motion — drafting-themed, GPU-friendly (transform/opacity only). */
:root{--ease-out:cubic-bezier(.2,.7,.2,1);--ease-spring:cubic-bezier(.3,1.45,.5,1)}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(22px);transition:opacity .65s var(--ease-out) var(--d,0ms),transform .65s var(--ease-out) var(--d,0ms)}
.rv.in{opacity:1;transform:none}
.plate.rv{transform:translateY(-16px) rotate(-6deg);transition:opacity .4s var(--ease-out) calc(var(--i,0)*70ms),transform .9s var(--ease-spring) calc(var(--i,0)*70ms)}
.plate.rv.in{transform:none}
.sechead.rv{transform:translateX(24px)}[dir=ltr] .sechead.rv{transform:translateX(-24px)}
.sechead.rv.in{transform:none}
.tl .st.rv{transform:translateX(-12px)}

/* hero sequence (plays once per visit to the home page) */
@keyframes up{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.hero .wrap:first-child>div:first-child>*{animation:up .8s var(--ease-out) both}
.hero .wrap:first-child>div:first-child>:nth-child(1){animation-delay:.05s}
.hero .wrap:first-child>div:first-child>:nth-child(2){animation-delay:.15s}
.hero .wrap:first-child>div:first-child>:nth-child(3){animation-delay:.32s}
.hero .wrap:first-child>div:first-child>:nth-child(4){animation-delay:.42s}
.hero .wrap:first-child>div:first-child>:nth-child(5){animation-delay:.52s}
/* highlighter drawing across the key phrase */
.hero mark{--mb:var(--ink);--mf:var(--yellow);color:var(--ink);background:linear-gradient(var(--mb),var(--mb)) right center/0% 100% no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone;animation:mk 1s .55s cubic-bezier(.7,0,.2,1) forwards}
[dir=ltr] .hero mark{background-position:left center}
@keyframes mk{0%{background-size:0% 100%;color:var(--ink)}55%{color:var(--ink)}100%{background-size:100% 100%;color:var(--mf)}}
/* the T swings in on its hinge and settles at -10deg */
.bigT{transform:translateY(var(--py,0px));will-change:transform}
.bigT img{transform-origin:50% 8%;animation:tswing 1.7s .15s cubic-bezier(.2,.8,.3,1) both}
@keyframes tswing{0%{opacity:0;transform:rotate(-46deg) translateY(-50px)}25%{opacity:1}55%{transform:rotate(2deg)}75%{transform:rotate(-14deg)}90%{transform:rotate(-8.5deg)}100%{transform:rotate(-10deg)}}
.bigT .scale{animation:scalein 1.1s .55s var(--ease-out) both}
@keyframes scalein{from{opacity:0;transform:translateX(-36px)}to{opacity:.55;transform:none}}
[dir=rtl] .bigT .scale{animation-name:scaleinr}
@keyframes scaleinr{from{opacity:0;transform:translateX(36px)}to{opacity:.55;transform:none}}
/* ruler ticks sweep across the bottom of the hero */
.hero:after{animation:sweep 1.5s .25s cubic-bezier(.6,0,.2,1) both}
@keyframes sweep{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0)}}
[dir=ltr] .hero:after{animation-name:sweepl}
@keyframes sweepl{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
.hero .numsrow>div{animation:up .7s var(--ease-out) both}
.hero .numsrow>div:nth-child(1){animation-delay:.7s}.hero .numsrow>div:nth-child(2){animation-delay:.8s}.hero .numsrow>div:nth-child(3){animation-delay:.9s}.hero .numsrow>div:nth-child(4){animation-delay:1s}

/* header: reading ruler + tuck-away */
.top{transition:transform .35s var(--ease-out)}
.top.hide{transform:translateY(-110%)}
.prog{position:absolute;inset-inline:0;bottom:-1px;height:4px;pointer-events:none;background:repeating-linear-gradient(90deg,rgba(22,22,22,.25) 0 1px,transparent 1px 10px) bottom/100% 4px no-repeat}
.prog i{display:block;height:3px;margin-top:1px;background:var(--ink);transform:scaleX(var(--p,0));transform-origin:right center}
[dir=ltr] .prog i{transform-origin:left center}
html:not([data-theme=light]) .prog i{background:var(--yellow)}

/* add-to-cart flight */
.fly{position:fixed;left:0;top:0;width:68px;height:68px;margin:-34px 0 0 -34px;z-index:300;pointer-events:none;background:var(--tile,#EEE8DA);border:1.5px solid #161616;border-radius:14px;display:grid;place-items:center;overflow:hidden;box-shadow:0 10px 24px -6px rgba(0,0,0,.35);font:700 28px var(--f-num);color:#161616}
.fly svg,.fly img{width:74%!important;height:74%!important;object-fit:cover;display:block}
.fly img.ph{width:100%!important;height:100%!important}

/* small polish */
.btn,.add,.plate,.pcard,.kit,.chip{will-change:auto}
.btn svg,.link{transition:transform .2s var(--ease-out)}
.link:hover{transform:translateX(-3px)}[dir=ltr] .link:hover{transform:translateX(3px)}
.pcard .img svg:not(.szv){transition:transform .45s var(--ease-spring)}
.pcard:hover .img svg:not(.szv){transform:scale(1.08) rotate(-3deg)}
.chip{transition:background .2s,color .2s,border-color .2s,transform .15s}
.chip:active{transform:scale(.94)}
.qty button{transition:background .15s}
.qty button:active{background:var(--yellow);color:#161616}
.toast{animation:toastin .45s var(--ease-spring) both}
@keyframes toastin{from{opacity:0;transform:translateY(30px) scale(.94)}to{opacity:1;transform:none}}
.stk:before{animation:blink 2.4s ease-in-out infinite}
@keyframes blink{50%{opacity:.35}}

@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rv{opacity:1!important;transform:none!important}
  .hero mark{background-size:100% 100%;color:var(--mf)}
  .top.hide{transform:none}
}

/* back-office stays calm */
.is-admin main{animation:none!important}
.is-admin .rv{opacity:1!important;transform:none!important}
.is-admin .top.hide{transform:none}