/* Motion for the supplement-shop template (Torchwell).
   Hidden "from" states only apply under html.js-motion, which an inline head script adds
   (and removes again after 3s if motion.js never ran). Reduced motion never gets the class. */

/* Lenis */
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}

/* entrance from-states */
.js-motion [data-reveal]:not(.is-in){opacity:0;transform:translateY(42px);transition:none!important}
.js-motion [data-hero]{opacity:0;transform:translateY(26px)}
.js-motion .hero h1 .ln>span{transform:translateY(108%)}
.js-motion .tub img{opacity:0}
.js-motion .chip{opacity:0}
.js-motion .coa .bar i,.js-motion .dist .bar i{transform:scaleX(0)}
.js-motion .map .pin,.js-motion .map .pin-label{opacity:0}

/* button shine */
.btn--or::after,.btn--ink::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .7s cubic-bezier(.22,1,.36,1);pointer-events:none}
.btn--or:hover::after,.btn--ink:hover::after{left:130%}

/* pointer glow on product cards */
.card::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .4s;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,122,61,.16),transparent 45%)}
.card:hover::before{opacity:1}

/* map route marching */
.map .route{animation:march 1.4s linear infinite}
@keyframes march{to{stroke-dashoffset:-28}}

/* spotlight feature list: active step */
.feats li{transition:opacity .4s}
.js-motion .feats li.is-in{opacity:.4}
.js-motion .feats li.is-in.on{opacity:1}
.feats li.on .n{text-shadow:0 0 18px rgba(255,122,61,.8)}

/* cart icon nudge */
.cartbtn.bump svg{animation:bump .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes bump{30%{transform:scale(1.25) rotate(-8deg)}60%{transform:scale(.95) rotate(4deg)}}

@media (prefers-reduced-motion:reduce){
  .map .route{animation:none}
  .btn--or::after,.btn--ink::after,.card::before{display:none}
}