/* Jcommerce & Tech: shared feel for every page (smooth scroll, cursor, progress, page transitions). */

/* Lenis smooth scroll (lenis@1.1.13) */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

/* soft cross-fade between pages in browsers that support it */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .45s cubic-bezier(.65,0,.35,1) both}
::view-transition-new(root){animation:vt-in .6s cubic-bezier(.22,1,.36,1) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-10px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(14px)}}

/* headlines wrap into even lines; paragraphs avoid lonely last words */
h1,h2,h3,.h2,.pull{text-wrap:balance}
p,.lede{text-wrap:pretty}

/* scroll progress */
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:150;pointer-events:none;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,#8E6C2E,#EED9A2 60%,#C9A55C)}

/* cursor ring (fine pointers only) */
.cur-dot,.cur-ring{position:fixed;top:0;left:0;z-index:400;pointer-events:none;border-radius:50%;opacity:0;transition:opacity .4s}
.cur-dot{width:6px;height:6px;margin:-3px 0 0 -3px;background:#EED9A2}
.cur-ring{width:38px;height:38px;margin:-19px 0 0 -19px;border:1px solid rgba(238,217,162,.65);display:grid;place-items:center;transition:opacity .4s,width .45s cubic-bezier(.22,1,.36,1),height .45s cubic-bezier(.22,1,.36,1),margin .45s cubic-bezier(.22,1,.36,1),background-color .45s,border-color .45s}
.cur-ring span{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:#0A1430;opacity:0;transition:opacity .3s}
.has-cursor .cur-dot,.has-cursor .cur-ring{opacity:1}
.cur-ring.hover{width:60px;height:60px;margin:-30px 0 0 -30px;background:rgba(201,165,92,.12);border-color:rgba(238,217,162,.9)}
.cur-ring.label{width:76px;height:76px;margin:-38px 0 0 -38px;background:#EED9A2;border-color:#EED9A2}
.cur-ring.label span{opacity:1}
.cur-ring.hide,.cur-dot.hide{opacity:0 !important}
@media (pointer:coarse),(prefers-reduced-motion:reduce){.cur-dot,.cur-ring{display:none}}

/* magnetic buttons: the inner content drifts a touch with the cursor */
.btn.mag{transition:transform .6s cubic-bezier(.22,1,.36,1),box-shadow .5s,background-color .4s,border-color .4s}

/* the grain overlay is a fixed blended layer; on phones it costs smoothness, so it goes */
@media (max-width:960px){body::after{display:none}}