/* ==========================================================================
   Experience layer: the velvet vitrine, 3D stages and the few motion moments.
   Works with resources/js/storefront.js; everything degrades to the photos.
   ========================================================================== */
:root{
  --velvet:#101A14;
  --velvet-2:#1B2A20;
  --lit-gold:#E8C268;
  --glint:#FFF6DC;
}

/* Hero headline: one light sweep across the letters on load ---------------- */
.hero h1.sweep,
.hero h1.sweep em{
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  background-size:280% 100%;background-position:100% 0;
  animation:lightSweep 2.4s .35s cubic-bezier(.65,0,.25,1) forwards;
}
.hero h1.sweep{background-image:linear-gradient(100deg,var(--forest) 0 40%,var(--lit-gold) 46%,var(--glint) 50%,var(--lit-gold) 54%,var(--forest) 60% 100%)}
.hero h1.sweep em{background-image:linear-gradient(100deg,var(--champagne) 0 40%,var(--glint) 50%,var(--champagne) 60% 100%)}
@keyframes lightSweep{to{background-position:0 0}}

/* Vitrine: a velvet display case holding the live ring ---------------------- */
.vitrine{
  position:relative;aspect-ratio:4/5;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(60% 45% at 50% 26%,rgba(232,194,104,.20),transparent 70%),
    radial-gradient(120% 90% at 50% 0%,var(--velvet-2),var(--velvet) 62%,#09100C);
  box-shadow:0 40px 80px -30px rgba(16,26,20,.55),inset 0 0 0 1px rgba(195,165,114,.18),inset 0 -40px 80px -40px rgba(0,0,0,.6);
}
/* Fine velvet grain, drawn with SVG noise (no image request). */
.vitrine::after,.bench::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.22;mix-blend-mode:overlay;z-index:2;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.vitrine-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity 1s ease;z-index:0}
.vitrine.is-loading .vitrine-fallback,.vitrine.is-live .vitrine-fallback{opacity:0}
.vitrine.is-fallback .vitrine-fallback{opacity:1}
.stage-canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block;z-index:1;cursor:grab;outline:none}
.is-dragging .stage-canvas{cursor:grabbing}
.vitrine:focus-visible{outline:2px solid var(--champagne);outline-offset:4px}
.vitrine-hint{
  position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:3;
  font-size:12px;letter-spacing:.08em;color:rgba(243,239,231,.62);
  padding:7px 14px;border-radius:999px;background:rgba(16,26,20,.45);backdrop-filter:blur(6px);
  opacity:0;transition:opacity .6s ease .8s;pointer-events:none;
}
.vitrine.is-live .vitrine-hint{opacity:1}
.vitrine.is-live.is-dragging .vitrine-hint,.vitrine.was-touched .vitrine-hint{opacity:0;transition-delay:0s}

/* Metal switcher under the vitrine (only once the ring is live). */
.metal-pick{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:18px;opacity:0;transform:translateY(6px);transition:opacity .6s ease .6s,transform .6s ease .6s;pointer-events:none}
.hero-visual:has(.vitrine.is-live) .metal-pick{opacity:1;transform:none;pointer-events:auto}
.metal-pick button{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;border-radius:999px;border:1px solid var(--line);background:var(--porcelain);font-size:13px;color:var(--forest);transition:border-color .25s,box-shadow .25s}
.metal-pick button .sw{width:22px;height:22px}
.metal-pick button:hover{border-color:var(--champagne)}
.metal-pick button[aria-pressed="true"]{border-color:var(--forest);box-shadow:0 0 0 1px var(--forest)}
.metal-pick button:focus-visible{outline:2px solid var(--champagne);outline-offset:2px}
.hero-visual .float-card{z-index:4}

/* From the bench ---------------------------------------------------------- */
.bench{position:relative;background:radial-gradient(90% 70% at 25% 40%,var(--velvet-2),var(--velvet) 70%);color:var(--ivory);padding:0;overflow:hidden;isolation:isolate}
.bench-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;min-height:100vh;padding-block:96px}
.bench-stage{position:relative;aspect-ratio:1/1;max-height:76vh;width:100%;margin-inline:auto;background:radial-gradient(closest-side,rgba(232,194,104,.20),rgba(232,194,104,.06) 55%,transparent)}
.bench-fallback{position:absolute;inset:0;display:none;align-items:center;justify-content:center;font-size:120px;color:var(--champagne)}
.bench-stage.is-fallback .bench-fallback{display:flex}
.bench-copy h2{font-size:clamp(34px,4.4vw,56px);color:var(--ivory)}
.bench-intro{color:rgba(243,239,231,.66);font-size:17px;max-width:40ch;margin:16px 0 40px}
.bench-steps{list-style:none;display:flex;flex-direction:column;gap:6px;counter-reset:none}
.bench-steps li{display:grid;grid-template-columns:44px 1fr;gap:18px;padding:22px 0;border-top:1px solid rgba(195,165,114,.18);opacity:.5;transition:opacity .5s ease}
.bench-steps li:last-child{border-bottom:1px solid rgba(195,165,114,.18)}
.bench-steps li.is-active{opacity:1}
.bs-num{width:44px;height:44px;border-radius:50%;border:1px solid rgba(195,165,114,.45);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:17px;color:var(--champagne);transition:background .5s ease,color .5s ease}
.bench-steps li.is-active .bs-num{background:var(--champagne);color:var(--velvet)}
.bench-steps h3{font-family:var(--display);font-weight:400;font-size:22px;margin-bottom:6px}
.bench-steps p{color:rgba(243,239,231,.7);font-size:15px;max-width:46ch}
.bench-link{display:inline-block;margin-top:34px;color:var(--champagne);border-bottom:1px solid rgba(195,165,114,.5);padding-bottom:4px;font-size:15px;transition:color .25s,border-color .25s}
.bench-link:hover{color:var(--glint);border-color:var(--glint)}

/* Product page: View in 3D -------------------------------------------------- */
.pd-main{position:relative}
.pd-3d{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .6s ease,visibility 0s .6s;
  background:radial-gradient(70% 55% at 50% 35%,rgba(232,194,104,.16),transparent 70%),radial-gradient(120% 100% at 50% 0%,var(--velvet-2),var(--velvet) 65%)}
.pd-gallery.show-3d .pd-3d{opacity:1;visibility:visible;transition:opacity .6s ease}
.pd-3d-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:14px}
.pd-3d-bar:has(.viewer-toggle[hidden]){display:none}
.viewer-toggle{display:inline-flex;align-items:center;gap:9px;padding:10px 16px;border-radius:999px;border:1px solid var(--forest);background:var(--forest);color:var(--ivory);font-size:13px;letter-spacing:.06em;transition:background .25s,color .25s}
.viewer-toggle:hover{background:var(--champagne);border-color:var(--champagne);color:var(--forest)}
.viewer-toggle[aria-pressed="true"]{background:transparent;color:var(--forest)}
.viewer-toggle:focus-visible{outline:2px solid var(--champagne);outline-offset:2px}
.pd-3d-note{font-size:12.5px;color:var(--moss);max-width:40ch;line-height:1.45}
.pd-3d-bar .pd-3d-note{display:none}
.pd-gallery.show-3d .pd-3d-note{display:block}

/* Glint: a single highlight crosses a product photo on hover ---------------- */
.prod-media::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(115deg,transparent 35%,rgba(255,246,220,.42) 48%,transparent 60%);
  transform:translateX(-120%);
}
.prod-card:hover .prod-media::after{transform:translateX(120%);transition:transform .9s cubic-bezier(.5,0,.2,1)}
.prod-media .prod-tag,.prod-media .card-wish,.prod-media .quick-add{z-index:2}

/* Editorial parallax needs a little bleed so edges never show. */
[data-parallax]{scale:1.14}

/* Responsive ---------------------------------------------------------------- */
@media (max-width:900px){
  .bench-grid{grid-template-columns:1fr;min-height:0;gap:24px;padding-block:72px}
  .bench-stage{max-width:360px;position:sticky;top:90px}
}
@media (max-width:640px){
  .metal-pick button{font-size:12px;padding-right:11px}
  .bench-stage{max-width:280px}
  .bench-steps h3{font-size:19px}
}
@media (prefers-reduced-motion:reduce){
  .hero h1.sweep,.hero h1.sweep em{animation:none;background:none;-webkit-text-fill-color:currentColor}
  .prod-card:hover .prod-media::after{transition:none;transform:translateX(-120%)}
  [data-parallax]{scale:1}
}

/* ==========================================================================
   Testimonials: cards on a curved rail; the centre one takes the spotlight.
   --o = signed distance from the active card, --a = absolute distance.
   ========================================================================== */
.tw{overflow:hidden}
.tw-controls{display:flex;align-items:center;gap:10px}
.tw-count{font-size:14px;color:var(--moss);margin-right:8px;font-variant-numeric:tabular-nums}
.tw-count b{font-weight:400;color:var(--forest)}
.tw-btn{width:48px;height:48px;border-radius:50%;border:1px solid var(--forest);background:transparent;color:var(--forest);display:inline-flex;align-items:center;justify-content:center;transition:background .3s,color .3s,transform .3s}
.tw-btn:hover{background:var(--forest);color:var(--ivory)}
.tw-btn:active{transform:scale(.94)}
.tw-btn:focus-visible{outline:2px solid var(--champagne);outline-offset:3px}

.tw-stage{position:relative;height:460px;perspective:1400px;outline:none;touch-action:pan-y;user-select:none;margin-top:8px}
.tw-stage:focus-visible{outline:2px solid var(--champagne);outline-offset:-6px;border-radius:24px}
.tw-card{
  --o:0;--a:0;
  position:absolute;left:50%;top:50%;width:min(560px,82vw);margin:0;
  padding:42px 44px 34px;border-radius:30px;
  background:var(--porcelain);border:1px solid var(--line);color:var(--forest);
  transform:
    translate(-50%,-50%)
    translateX(calc(var(--o) * min(58%, 36vw)))
    translateZ(calc(var(--a) * -220px))
    rotateY(calc(var(--o) * -16deg))
    scale(calc(1 - var(--a) * .14));
  opacity:calc(1 - var(--a) * .38);
  filter:blur(calc(var(--a) * 1.2px)) saturate(calc(1 - var(--a) * .3));
  transition:transform .9s cubic-bezier(.22,.9,.24,1),opacity .9s ease,filter .9s ease,background .7s ease,color .7s ease,box-shadow .7s ease,border-color .7s ease;
  cursor:pointer;will-change:transform;
}
.tw-card.is-far{opacity:0;pointer-events:none}
.tw-card.is-active{
  cursor:default;color:var(--ivory);border-color:rgba(195,165,114,.45);
  background:
    radial-gradient(80% 60% at 20% 0%,rgba(232,194,104,.20),transparent 60%),
    radial-gradient(120% 100% at 50% 0%,var(--velvet-2),var(--velvet) 70%);
  box-shadow:0 50px 90px -40px rgba(16,26,20,.7),0 0 0 1px rgba(195,165,114,.15),0 0 60px -10px rgba(232,194,104,.25);
}
/* A slow gold glint circles the active card's border. */
.tw-card.is-active::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;
  background:conic-gradient(from var(--spin,0deg),transparent 0 70%,rgba(232,194,104,.9) 80%,transparent 90%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:twSpin 6s linear infinite;
}
@property --spin{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes twSpin{to{--spin:360deg}}

.tw-quote{width:52px;height:40px;fill:none;stroke:var(--champagne);stroke-width:1.4;stroke-dasharray:240;stroke-dashoffset:240;opacity:.5;transition:opacity .6s}
.tw-card.is-active .tw-quote{opacity:1;fill:rgba(195,165,114,.12);animation:twDraw 1.4s .15s cubic-bezier(.6,0,.2,1) forwards}
@keyframes twDraw{to{stroke-dashoffset:0}}

.tw-stars{display:flex;gap:4px;margin:18px 0 14px;font-size:16px;color:var(--line-dark)}
.tw-stars span.on{color:var(--champagne)}
.tw-card.is-active .tw-stars span{color:rgba(243,239,231,.18)}
.tw-card.is-active .tw-stars span.on{animation:twStar .5s calc(.35s + var(--i) * .09s) cubic-bezier(.3,1.6,.5,1) both}
@keyframes twStar{0%{color:rgba(243,239,231,.18);transform:scale(.4) rotate(-40deg)}100%{color:var(--lit-gold);transform:none;text-shadow:0 0 12px rgba(232,194,104,.6)}}

.tw-card blockquote{font-family:var(--display);font-size:clamp(18px,1.8vw,22px);line-height:1.5;min-height:4.5em}
.tw-card blockquote .w{display:inline-block;white-space:pre}
.tw-card.is-active blockquote .w{animation:twWord .7s calc(.25s + var(--i) * 28ms) cubic-bezier(.2,.8,.2,1) both}
@keyframes twWord{from{opacity:0;transform:translateY(.5em);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}

.tw-card figcaption{display:flex;align-items:center;gap:14px;margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
.tw-card.is-active figcaption{border-top-color:rgba(195,165,114,.22)}
.tw-avatar{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:18px;color:#2A2312;background:linear-gradient(135deg,#FFF3C4,#E9C46A 35%,#B8862B 70%,#F4D58A);flex:none}
.tw-card figcaption b{display:block;font-weight:400;font-size:15px}
.tw-card figcaption small{display:block;font-size:13px;color:var(--moss)}
.tw-card.is-active figcaption small{color:rgba(243,239,231,.6)}

.tw-progress{height:2px;background:var(--line);border-radius:2px;overflow:hidden;max-width:240px;margin:18px auto 0}
.tw-progress span{display:block;height:100%;width:100%;background:var(--champagne);transform-origin:left;transform:scaleX(0)}
.tw-progress span.run{animation:twProgress var(--dur,6s) linear forwards}
.tw.is-paused .tw-progress span{animation-play-state:paused}
@keyframes twProgress{to{transform:scaleX(1)}}

@media (max-width:640px){
  .tw-stage{height:520px}
  .tw-card{padding:32px 26px 26px;width:86vw}
  .tw-controls .tw-count{display:none}
}
@media (prefers-reduced-motion:reduce){
  .tw-card{transition:opacity .3s ease}
  .tw-card.is-active::before,.tw-card.is-active .tw-quote,.tw-card.is-active .tw-stars span.on,.tw-card.is-active blockquote .w{animation:none}
  .tw-card.is-active .tw-quote{stroke-dashoffset:0}
  .tw-card.is-active .tw-stars span.on{color:var(--lit-gold)}
}