/* Motion layer for the store guide pages. Everything here is opt-in through
   html.m-on, which motion.js only sets when the visitor has not asked for reduced motion. */

/* page-to-page: cross-document view transitions (Chrome 126+, Safari 18.2+) */
@view-transition{navigation:auto}
::view-transition-group(*){animation-duration:.6s;animation-timing-function:cubic-bezier(.7,0,.2,1)}
::view-transition-old(root){animation:.4s cubic-bezier(.7,0,.2,1) both mPageOut}
::view-transition-new(root){animation:.6s cubic-bezier(.2,.8,.2,1) .05s both mPageIn}
@keyframes mPageOut{to{opacity:0;transform:translateY(-14px)}}
@keyframes mPageIn{from{opacity:0;transform:translateY(22px)}}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* reading progress */
.m-progress{position:fixed;top:0;left:0;right:0;z-index:200;height:2px;background:linear-gradient(90deg,var(--gold),#d8c29c);transform-origin:0 50%;transform:scaleX(var(--p,0));pointer-events:none}
@supports (animation-timeline:scroll()){
 .m-progress{animation:mProg linear both;animation-timeline:scroll(root)}
 @keyframes mProg{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}

/* scroll reveal with per-group stagger (--mi set by motion.js) */
.m-on [data-m]{opacity:0;transform:translate3d(0,34px,0);transition:opacity 1s cubic-bezier(.2,.7,.2,1) calc(var(--mi,0)*80ms),transform 1.1s cubic-bezier(.2,.7,.2,1) calc(var(--mi,0)*80ms)}
.m-on [data-m].m-in{opacity:1;transform:none}
.m-on [data-m="fade"]{transform:none}
/* image wipe: the frame opens top-down while the photo settles from a slight zoom */
.m-on [data-m="wipe"]{opacity:1;transform:none;clip-path:inset(0 0 100% 0);transition:clip-path 1.3s cubic-bezier(.77,0,.18,1) calc(var(--mi,0)*90ms)}
.m-on [data-m="wipe"].m-in{clip-path:inset(0 0 0 0)}
.m-on [data-m="wipe"] img{transform:scale(1.18);transition:transform 1.8s cubic-bezier(.2,.7,.2,1) calc(var(--mi,0)*90ms)}
.m-on [data-m="wipe"].m-in img{transform:scale(1)}
.m-on [data-m="wipe"] figcaption{opacity:0;transition:opacity .8s .7s}
.m-on [data-m="wipe"].m-in figcaption{opacity:1}

/* split headline: words rise out of a mask */
.m-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.m-wi{display:inline-block;transform:translate3d(0,110%,0) rotate(4deg);transform-origin:0 100%;animation:mWord 1.1s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i)*60ms + .25s)}
@keyframes mWord{to{transform:none}}
.m-on .g-hero .g-kicker,.m-on .g-hero .g-lead,.m-on .g-hero .g-meta,.m-on .g-hero .g-actions,
.m-on .st-hero .st-index,.m-on .st-hero .st-lead,.m-on .st-hero .st-meta,.m-on .st-hero .st-actions{animation:mUp 1s cubic-bezier(.2,.8,.2,1) both}
.m-on .g-hero .g-lead,.m-on .st-hero .st-lead{animation-delay:.55s}
.m-on .g-hero .g-meta,.m-on .st-hero .st-meta{animation-delay:.7s}
.m-on .g-hero .g-actions,.m-on .st-hero .st-actions{animation-delay:.85s}
@keyframes mUp{from{opacity:0;transform:translate3d(0,26px,0)}}
/* hero photo: slow push-in, then scroll parallax */
.m-on .g-hero-photo img{animation:mKen 2.4s cubic-bezier(.2,.7,.2,1) both}
@keyframes mKen{from{transform:scale(1.22);filter:saturate(.4) brightness(.8)}}
.m-on .g-hero-photo,.m-on .st-hero-photo{clip-path:none}

/* parallax: CSS scroll-driven where supported, JS (--py) elsewhere */
.m-on [data-parallax] img{transform:translate3d(0,var(--py,0px),0) scale(1.14);will-change:transform}
@supports (animation-timeline:view()){
 .m-on [data-parallax] img{transform:none;animation:mPar linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
 @keyframes mPar{from{transform:translate3d(0,-7%,0) scale(1.16)}to{transform:translate3d(0,7%,0) scale(1.16)}}
}

/* tilt + cursor spotlight on cards */
.m-tilt{transform-style:preserve-3d}
.m-on .m-tilt.m-in{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s cubic-bezier(.2,.7,.2,1),opacity 1s}
.m-tilt>a,.m-tilt{position:relative}
.m-tilt:after{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(216,194,156,.22),transparent 45%)}
.m-tilt:hover:after{opacity:1}

/* magnetic buttons */
.m-on .m-mag{transform:translate3d(var(--tx,0px),var(--ty,0px),0);transition:transform .45s cubic-bezier(.2,.7,.2,1),background .25s,color .25s}
.m-mag i{display:inline-block;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.m-mag:hover i{transform:translate3d(4px,-2px,0)}

/* marquee (content duplicated in the markup, so -50% loops seamlessly) */
.m-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.m-track{display:flex;width:max-content;margin:0;padding:0;list-style:none;animation:mMarq var(--dur,46s) linear infinite}
.m-marquee:hover .m-track{animation-play-state:paused}
@keyframes mMarq{to{transform:translate3d(-50%,0,0)}}

/* gallery cursor bubble */
.m-cursor{position:fixed;left:0;top:0;z-index:150;width:88px;height:88px;margin:-44px 0 0 -44px;pointer-events:none;transform:translate3d(var(--cx,-200px),var(--cy,-200px),0)}
.m-cursor span{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:rgba(32,46,53,.86);color:#f5f3ed;font:14px Arial,sans-serif;letter-spacing:2px;transform:scale(var(--cs,0));transition:transform .4s cubic-bezier(.2,.7,.2,1);backdrop-filter:blur(4px)}

/* counters */
.m-count{font-variant-numeric:tabular-nums}

@media(prefers-reduced-motion:reduce){
 .m-track{animation:none}.m-marquee{overflow-x:auto}
 .m-progress,.m-cursor{display:none}
}