/* Boutique motion language: product-first, editorial, tactile. */
:root{
  --shop-tab-left:0px;
  --shop-tab-width:0px;
  --shop-pointer-x:72%;
  --shop-pointer-y:28%;
}

/* Entrance choreography. The page is already usable before this class arrives. */
.shop-header,
.shop-hero__copy>* ,
.shop-hero__count,
.shop-hero__media{
  will-change:transform,opacity,clip-path;
}

body:not(.shop-motion-ready) .shop-header{opacity:0;transform:translate3d(0,-18px,0)}
body:not(.shop-motion-ready) .shop-hero__copy>*{opacity:0;transform:translate3d(0,26px,0)}
body:not(.shop-motion-ready) .shop-hero__count{opacity:0;transform:translate3d(0,16px,0)}
body:not(.shop-motion-ready) .shop-hero__media{opacity:.02;clip-path:inset(15% 18% 15% 20% round 220px 220px 26px 26px)}

.shop-header{transition:opacity .6s ease,transform .8s var(--ease)}
.shop-hero__copy>*{transition:opacity .72s ease,transform .9s var(--ease)}
.shop-hero__copy>.shop-kicker{transition-delay:.08s}
.shop-hero__copy>h1{transition-delay:.14s}
.shop-hero__copy>p:not(.shop-kicker){transition-delay:.21s}
.shop-hero__copy>.shop-link{transition-delay:.28s}
.shop-hero__count{transition:opacity .7s ease .34s,transform .85s var(--ease) .34s}
.shop-hero__media{transition:opacity .65s ease .06s,clip-path 1.15s cubic-bezier(.76,0,.24,1) .06s}

body.shop-motion-ready .shop-header,
body.shop-motion-ready .shop-hero__copy>*,
body.shop-motion-ready .shop-hero__count{opacity:1;transform:translate3d(0,0,0)}
body.shop-motion-ready .shop-hero__media{opacity:1;clip-path:inset(6% 5% 6% 0 round 180px 0 0 180px)}

/* Word-level motion is intentionally limited to three editorial titles. */
.shop-kinetic-word{display:inline-block;position:relative;transform-origin:50% 72%;will-change:translate,rotate,opacity,letter-spacing}
body:not(.shop-motion-ready) .shop-hero .shop-kinetic-word{
  opacity:0;
  translate:var(--word-in-x,0px) var(--word-in-y,20px);
  rotate:var(--word-in-r,0deg);
}
body.shop-motion-ready .shop-hero .shop-kinetic-word{
  opacity:1;
  translate:0 0;
  rotate:0deg;
  transition:opacity .7s ease,translate 1s var(--ease),rotate 1s var(--ease),letter-spacing .9s var(--ease);
  transition-delay:var(--word-delay,0ms);
}

/* Category rail becomes a precise instrument rather than a row of buttons. */
.universe-tabs{isolation:isolate}
.universe-tabs::after{
  content:"";
  position:absolute;
  z-index:2;
  left:0;
  bottom:0;
  width:var(--shop-tab-width);
  height:2px;
  background:var(--deep);
  transform:translate3d(var(--shop-tab-left),0,0);
  transform-origin:left;
  transition:width .48s var(--ease),transform .58s var(--ease),opacity .25s ease;
  pointer-events:none;
}
.universe-tabs button{position:relative;z-index:3;transition:color .28s ease,background-color .28s ease,transform .35s var(--ease)}
.universe-tabs button:active{transform:translateY(1px)}

/* General scroll reveal system. */
[data-shop-reveal]{
  opacity:0;
  transform:translate3d(0,34px,0);
  transition:opacity .72s ease,transform .9s var(--ease);
  transition-delay:var(--shop-reveal-delay,0ms);
}
[data-shop-reveal="left"]{transform:translate3d(-30px,18px,0)}
[data-shop-reveal="right"]{transform:translate3d(30px,18px,0)}
[data-shop-reveal].is-inview{opacity:1;transform:translate3d(0,0,0)}

/* Featured object gets a slower, museum-like movement. */
.featured-piece__media{transform-origin:50% 60%;will-change:transform,clip-path}
.featured-piece__media img{will-change:transform}
.featured-piece__copy{position:relative}
.featured-piece__copy::before{
  content:"";
  position:absolute;
  left:-2rem;
  top:.35rem;
  width:1px;
  height:0;
  background:rgba(32,49,39,.38);
  transition:height 1.05s var(--ease) .12s;
}
.featured-piece__copy.is-inview::before{height:calc(100% - .7rem)}

/* Catalogue header gains a subtle focus state once browsing begins. */
.catalogue-head{transition:box-shadow .35s ease,background-color .35s ease,transform .45s var(--ease)}
body.shop-browsing .catalogue-head{box-shadow:0 14px 34px rgba(32,49,39,.055)}
.search-field input,.sort-field select,.filter-panel summary,.filter-reset{transition:border-color .25s ease,background-color .25s ease,color .25s ease,transform .22s ease,box-shadow .25s ease}
.search-field input:hover,.sort-field select:hover,.filter-panel summary:hover{border-color:rgba(32,49,39,.34)}
.filter-panel summary:active,.filter-reset:active{transform:translateY(1px)}
.filter-panel[open] summary{border-color:var(--deep);background:rgba(102,112,95,.09)}
.filter-panel__body{transform-origin:top right;animation:shop-filter-open .38s var(--ease) both}
@keyframes shop-filter-open{from{opacity:0;transform:translate3d(0,-8px,0) scale(.985)}to{opacity:1;transform:translate3d(0,0,0) scale(1)}}

/* Product grid: the DOM still owns layout, FLIP JS owns rearrangement. */
.product-grid{position:relative}
.product-card{transform-origin:50% 32%;will-change:transform,opacity}
.product-card.is-filter-entering{animation:shop-card-enter .55s var(--ease) both}
@keyframes shop-card-enter{from{opacity:0;transform:translate3d(0,22px,0) scale(.985)}to{opacity:1;transform:translate3d(0,0,0) scale(1)}}

.product-card__media{isolation:isolate}
.product-card__media::before{
  content:"";
  position:absolute;
  z-index:2;
  inset:0;
  border:1px solid rgba(255,255,255,0);
  pointer-events:none;
  transition:border-color .4s ease,inset .55s var(--ease);
}
.product-card:hover .product-card__media::before{inset:.55rem;border-color:rgba(255,255,255,.42)}
.product-card__media img{translate:0 var(--shop-image-y,0px);scale:1.045;transition:filter .5s ease,scale .75s var(--ease)}
.product-card:hover .product-card__media img{scale:1.075}
.product-card__info{transition:transform .4s var(--ease),border-color .35s ease}
.product-card:hover .product-card__info{transform:translate3d(0,-4px,0);border-color:rgba(32,49,39,.32)}
.product-card__info h3{transition:letter-spacing .45s var(--ease)}
.product-card:hover .product-card__info h3{letter-spacing:-.045em}

/* Editorial insert deliberately interrupts the commercial rhythm. */
.catalogue-note{position:relative;isolation:isolate}
.catalogue-note__image img{scale:1.06;translate:var(--note-image-x,0px) 0;will-change:translate,scale}
.catalogue-note__copy{position:relative;z-index:2}
.catalogue-note__copy::after{
  content:"";
  position:absolute;
  left:clamp(2.5rem,5vw,5rem);
  right:clamp(2.5rem,5vw,5rem);
  bottom:clamp(2rem,4vw,3.5rem);
  height:1px;
  background:rgba(244,235,218,.24);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 1.1s var(--ease) .2s;
}
.catalogue-note.is-inview .catalogue-note__copy::after{transform:scaleX(1)}

/* Singular chapter opens like an architectural aperture. */
.singular-story{overflow:hidden;position:relative}
.singular-story__media{will-change:clip-path,transform}
.singular-story__media img{scale:1.065;translate:0 var(--singular-image-y,0px);will-change:translate,scale}
.singular-story__copy>*{transition:opacity .7s ease,transform .9s var(--ease)}
.singular-story__copy:not(.is-inview)>*{opacity:0;transform:translate3d(0,22px,0)}
.singular-story__copy.is-inview>*{opacity:1;transform:translate3d(0,0,0)}
.singular-story__copy.is-inview>*:nth-child(2){transition-delay:.08s}
.singular-story__copy.is-inview>*:nth-child(3){transition-delay:.14s}
.singular-story__copy.is-inview>*:nth-child(4){transition-delay:.2s}

.shop-assurance>div{transition:opacity .6s ease,transform .75s var(--ease),border-color .3s ease}
.shop-assurance>div:not(.is-inview){opacity:0;transform:translate3d(0,18px,0)}
.shop-assurance>div.is-inview{opacity:1;transform:translate3d(0,0,0)}
.shop-assurance>div:hover{border-color:rgba(32,49,39,.32)}

/* Cart drawer should feel physical without turning into a full-screen transition. */
.cart-panel{opacity:0;transform:translate3d(28px,0,0);transition:opacity .35s ease,transform .5s var(--ease),overlay .35s allow-discrete,display .35s allow-discrete}
.cart-panel[open]{opacity:1;transform:translate3d(0,0,0)}
@starting-style{.cart-panel[open]{opacity:0;transform:translate3d(28px,0,0)}}

/* Native scroll-driven polish where supported, with no extra JS scroll loop. */
@supports (animation-timeline:view()){
  .shop-hero__media img{
    animation:shop-hero-image linear both;
    animation-timeline:view();
    animation-range:exit 0% exit 100%;
  }
  .featured-piece__media{
    animation:shop-feature-frame linear both;
    animation-timeline:view();
    animation-range:entry 0% exit 100%;
  }
  .featured-piece__media img{
    animation:shop-feature-image linear both;
    animation-timeline:view();
    animation-range:entry 0% exit 100%;
  }
  .catalogue-note__image img{
    animation:shop-note-image linear both;
    animation-timeline:view();
    animation-range:entry 0% exit 100%;
  }
  .singular-story__media{
    animation:shop-singular-frame linear both;
    animation-timeline:view();
    animation-range:entry 0% entry 78%;
  }
  .singular-story__media img{
    animation:shop-singular-image linear both;
    animation-timeline:view();
    animation-range:entry 0% exit 100%;
  }
}

@keyframes shop-hero-image{from{scale:1.035;translate:0 0}to{scale:1.095;translate:0 -2.8%}}
@keyframes shop-feature-frame{0%{transform:translate3d(0,26px,0) scale(.985)}42%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(0,-18px,0) scale(.995)}}
@keyframes shop-feature-image{from{scale:1.08;translate:0 2.5%}to{scale:1.025;translate:0 -2.5%}}
@keyframes shop-note-image{from{scale:1.08;translate:-2% 0}to{scale:1.055;translate:2% 0}}
@keyframes shop-singular-frame{from{clip-path:inset(9% 9% 9% 12% round 220px 220px 26px 26px)}to{clip-path:inset(5% 5% 5% 0 round 200px 0 0 200px)}}
@keyframes shop-singular-image{from{scale:1.1;translate:0 3%}to{scale:1.045;translate:0 -2%}}

/* A quieter surface on smaller screens. */
@media(max-width:1000px){
  .product-card__media img{translate:0 0;scale:1.02}
  .product-card:hover .product-card__media img{scale:1.04}
  .product-card:hover .product-card__media::before{inset:.35rem}
}

@media(max-width:760px){
  body:not(.shop-motion-ready) .shop-hero__media{clip-path:inset(8% 8% 8% 8% round 150px 150px 18px 18px)}
  body.shop-motion-ready .shop-hero__media{clip-path:inset(0 1rem 0 1rem round 150px 150px 18px 18px)}
  .featured-piece__copy::before{display:none}
  .universe-tabs::after{bottom:0}
  [data-shop-reveal="left"],[data-shop-reveal="right"]{transform:translate3d(0,26px,0)}
}

@media(prefers-reduced-motion:reduce){
  body:not(.shop-motion-ready) .shop-header,
  body:not(.shop-motion-ready) .shop-hero__copy>*,
  body:not(.shop-motion-ready) .shop-hero__count,
  body:not(.shop-motion-ready) .shop-hero__media,
  [data-shop-reveal],
  .singular-story__copy>*,
  .shop-assurance>div{
    opacity:1!important;
    transform:none!important;
    translate:none!important;
    rotate:0deg!important;
    clip-path:none!important;
  }
  .shop-kinetic-word{opacity:1!important;translate:none!important;rotate:0deg!important;transition:none!important}
  .product-card,.product-card__media img,.catalogue-note__image img,.singular-story__media,.singular-story__media img{animation:none!important;translate:none!important;scale:1!important}
  .universe-tabs::after{transition:none!important}
  .cart-panel{transition:none!important}
}