/* ObsidianUI-inspired polish, ported to the static Boutique without React dependencies. */
:root{
  --obs-magnet-x:0px;
  --obs-magnet-y:0px;
  --obs-blur-x:50%;
  --obs-blur-y:50%;
  --obs-blur-radius:128px;
}

/* Magnet Tabs: preserve the existing universe rail, add physical pointer attraction. */
.universe-tabs button{
  translate:var(--obs-magnet-x,0px) var(--obs-magnet-y,0px);
  transform-origin:center;
  will-change:translate;
  transition:color .28s ease,background-color .28s ease,translate .46s var(--ease),box-shadow .3s ease;
}
.universe-tabs button::before{
  content:"";
  position:absolute;
  inset:3px;
  border:1px solid transparent;
  pointer-events:none;
  transition:border-color .3s ease,inset .42s var(--ease);
}
.universe-tabs button:hover::before,.universe-tabs button:focus-visible::before{inset:0;border-color:rgba(32,49,39,.18)}
.universe-tabs button.is-active{background:rgba(102,112,95,.115);box-shadow:inset 0 0 0 1px rgba(32,49,39,.06)}

/* Rectangular Text Reveal: a sharp sweep, kept to two key editorial headings. */
.obs-rect-target{position:relative;display:inline-block;isolation:isolate}
.obs-rect-content{position:relative;z-index:1;opacity:0}
.obs-rect-sweep{
  position:absolute;
  z-index:3;
  inset:.02em -.045em -.015em;
  background:var(--obs-rect-color,var(--deep));
  transform:scaleX(0);
  transform-origin:left center;
  pointer-events:none;
  will-change:transform;
}
.obs-rect-target.is-obs-revealed .obs-rect-sweep{animation:obs-rect-sweep .82s cubic-bezier(.4,0,.2,1) both}
.obs-rect-target.is-obs-revealed .obs-rect-content{animation:obs-rect-content .01s linear .37s forwards}
.catalogue-head .obs-rect-target{--obs-rect-color:var(--sage)}
.catalogue-note .obs-rect-target{--obs-rect-color:var(--sand)}
@keyframes obs-rect-sweep{
  0%{transform:scaleX(0);transform-origin:left center}
  43%{transform:scaleX(1);transform-origin:left center}
  51%{transform:scaleX(1);transform-origin:right center}
  100%{transform:scaleX(0);transform-origin:right center}
}
@keyframes obs-rect-content{to{opacity:1}}

/* Interactive Blur Reveal: frosted editorial image with a pointer-driven clear aperture. */
.featured-piece__media{isolation:isolate}
.obs-blur-overlay{
  position:absolute;
  z-index:2;
  inset:-3%;
  width:106%!important;
  height:106%!important;
  object-fit:cover;
  object-position:center;
  filter:blur(12px) saturate(.78) contrast(.94);
  opacity:.76;
  pointer-events:none;
  transform:scale(1.025);
  transition:opacity .45s ease,filter .45s ease;
}
.featured-piece__media.is-obs-blur-active .obs-blur-overlay{
  -webkit-mask-image:radial-gradient(circle var(--obs-blur-radius) at var(--obs-blur-x) var(--obs-blur-y),transparent 0,transparent 54%,rgba(0,0,0,.34) 72%,#000 100%);
  mask-image:radial-gradient(circle var(--obs-blur-radius) at var(--obs-blur-x) var(--obs-blur-y),transparent 0,transparent 54%,rgba(0,0,0,.34) 72%,#000 100%);
}
.featured-piece__media::after{
  content:"Explorer la matière";
  position:absolute;
  z-index:4;
  right:1.2rem;
  top:1.2rem;
  padding:.42rem .55rem;
  border:1px solid rgba(255,255,255,.36);
  background:rgba(31,49,39,.36);
  color:rgba(255,255,255,.82);
  font-size:.52rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  opacity:0;
  transform:translate3d(0,-5px,0);
  transition:opacity .3s ease,transform .4s var(--ease);
  pointer-events:none;
}
.featured-piece__media:hover::after{opacity:1;transform:translate3d(0,0,0)}
.featured-piece__media .piece-index{z-index:5}

/* Arrow Fill Button behavior, translated into the site's sharp architecture. */
.obs-arrow-fill{
  --obs-btn-bg:transparent;
  --obs-btn-text:var(--deep);
  --obs-btn-fill:var(--deep);
  --obs-btn-fill-text:#fff;
  position:relative;
  display:inline-flex!important;
  align-items:center;
  justify-content:flex-start;
  min-height:46px;
  width:max-content;
  margin-top:1.8rem;
  padding:0 3.15rem 0 1rem!important;
  overflow:hidden;
  border:1px solid currentColor!important;
  background:var(--obs-btn-bg)!important;
  color:var(--obs-btn-text)!important;
  white-space:nowrap;
  isolation:isolate;
  transition:color .4s ease,border-color .4s ease,transform .25s ease!important;
}
.obs-arrow-fill::before{
  content:"";
  position:absolute;
  z-index:2;
  inset:-1px;
  background:var(--obs-btn-fill);
  clip-path:inset(7px 7px 7px calc(100% - 39px));
  transition:clip-path .48s cubic-bezier(.785,.135,.15,.86);
  pointer-events:none;
}
.obs-arrow-fill::after{
  content:"→";
  position:absolute;
  z-index:4;
  right:1rem;
  top:50%;
  translate:0 -52%;
  color:var(--obs-btn-fill-text);
  font-size:.9rem;
  transition:translate .46s cubic-bezier(.785,.135,.15,.86),color .35s ease;
  pointer-events:none;
}
.obs-arrow-fill__label{position:relative;z-index:1}
.obs-arrow-fill__overlay{
  position:absolute;
  z-index:3;
  left:1rem;
  top:50%;
  translate:0 -50%;
  color:var(--obs-btn-fill-text);
  opacity:0;
  transition:opacity .16s ease .16s;
  pointer-events:none;
}
.obs-arrow-fill:is(:hover,:focus-visible)::before{clip-path:inset(0)}
.obs-arrow-fill:is(:hover,:focus-visible) .obs-arrow-fill__overlay{opacity:1}
.obs-arrow-fill:is(:hover,:focus-visible)::after{translate:3px -52%}
.obs-arrow-fill:active{transform:translateY(1px) scale(.99)}
.shop-hero .obs-arrow-fill{--obs-btn-text:#fff;--obs-btn-fill:#efe3d0;--obs-btn-fill-text:var(--deep);border-color:rgba(255,255,255,.62)!important}
.featured-piece .obs-arrow-fill{--obs-btn-text:var(--deep);--obs-btn-fill:var(--deep);--obs-btn-fill-text:#fff}
.singular-story .obs-arrow-fill{--obs-btn-text:var(--deep);--obs-btn-fill:var(--deep);--obs-btn-fill-text:#fff}

/* Grid Lift: interactive field living behind the editorial copy only. */
.catalogue-note__copy{overflow:hidden;isolation:isolate}
.catalogue-note__copy>.obs-grid-lift{position:absolute;z-index:0;inset:0;width:100%;height:100%;pointer-events:none;opacity:.96}
.catalogue-note__copy>*:not(.obs-grid-lift){position:relative;z-index:2}
.catalogue-note__copy::before{
  content:"";
  position:absolute;
  z-index:1;
  inset:0;
  border-left:1px solid rgba(244,235,218,.13);
  pointer-events:none;
}

/* A little more hierarchy on cards so the Obsidian-like detail language belongs to the whole page. */
.product-card__info{position:relative}
.product-card__info::before{
  content:"";
  position:absolute;
  left:0;
  bottom:-1px;
  width:28%;
  height:1px;
  background:var(--deep);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .55s var(--ease),width .55s var(--ease);
}
.product-card:hover .product-card__info::before,.product-card:focus-visible .product-card__info::before{transform:scaleX(1);width:52%}
.product-card__media>span{transition:translate .42s var(--ease),background-color .3s ease,color .3s ease}
.product-card:hover .product-card__media>span{translate:4px 0;background:var(--deep);color:#fff}

@media(max-width:1000px){
  .obs-blur-overlay{display:none}
  .featured-piece__media::after{display:none}
  .catalogue-note__copy>.obs-grid-lift{opacity:.48}
}
@media(max-width:760px){
  .obs-arrow-fill{min-height:44px;padding-left:.85rem!important;padding-right:2.9rem!important}
  .obs-arrow-fill__overlay{left:.85rem}
}
@media(prefers-reduced-motion:reduce){
  .universe-tabs button{translate:0 0!important;transition:none!important}
  .obs-rect-content{opacity:1!important;animation:none!important}
  .obs-rect-sweep{display:none!important}
  .obs-blur-overlay{display:none!important}
  .obs-arrow-fill,.obs-arrow-fill::before,.obs-arrow-fill::after,.obs-arrow-fill__overlay{transition:none!important}
  .product-card__info::before,.product-card__media>span{transition:none!important}
}