/* Zodiac vitrine, ported from site-v2/vitrine.css (2026-10-20), restyled 28 Oct 2026 (Maison, Radix tokens from
   global.css). The night sky + gold pendants are the brand's own images; every colour drawn by CSS is a Radix step:
   indigo-dark-1 sky fallback and scrims (color-mix alpha), sand-1 text and focus on the sky, ruby-4 for the
   handwritten line. Collection arrows sit at the edges (hidden with one collection). Pendant mechanics unchanged.
   Scoped under .vitrine so nothing leaks into the rest of the site. */
.vitrine{
  --h:currentColor;
  position:relative;height:100vh;height:100svh;min-height:540px;overflow:hidden;
  background:var(--indigo-dark-1);color:var(--sand-1);isolation:isolate;
}
.vitrine [hidden]{display:none!important}

/* stage */
.vitrine .stage{position:absolute;inset:0;overflow:hidden;background:var(--indigo-dark-1);transition:opacity .5s ease,filter .5s ease}
.vitrine .stage.switching{opacity:0;filter:blur(6px)}
.vitrine .layer{position:absolute;inset:0;will-change:transform;pointer-events:none}
.vitrine .l-sky{inset:-4%}
.vitrine .l-sky img{width:100%;height:100%;object-fit:cover;display:block}
.vitrine .layer picture{display:contents}
.vitrine .layer source{display:none} /* otherwise they become grid items in .l-wheel and push the wheel down */
.vitrine .l-wheel{display:grid;grid-template:100% / 100%;place-items:center;overflow:visible}
.vitrine .wheel{width:min(94vw,104vh);max-width:none;opacity:.85;animation:v-spin 240s linear infinite}
@keyframes v-spin{to{transform:rotate(360deg)}}
.vitrine .vignette{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%,transparent 45%,color-mix(in srgb,var(--indigo-dark-1) 55%,transparent) 100%),
             linear-gradient(to top,color-mix(in srgb,var(--indigo-dark-1) 70%,transparent),transparent 22%),
             linear-gradient(to bottom,color-mix(in srgb,var(--indigo-dark-1) 55%,transparent),transparent 18%)}

/* pendants: .pend is a zero-size point at the anchor; .swing rotates around it */
.vitrine .pend{position:absolute;width:0;height:0;--pw:calc(var(--w,240px) * var(--s,1))}
.vitrine .swing{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
/* .hit is only a box for layout + keyboard focus; mouse/touch go through the alpha hit-test in vitrine.js */
.vitrine .hit{position:absolute;pointer-events:none;display:block;padding:0;border:0;background:none;
  width:var(--pw);height:calc(var(--pw) * var(--r,1.667));
  left:calc(var(--pw) * var(--ax,.5) * -1);top:calc(var(--pw) * var(--r,1.667) * var(--ay,0) * -1)}
.vitrine .hit img{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none;-webkit-user-drag:none}
.vitrine .hit .shadow{opacity:.55;transition:transform .5s ease,opacity .5s ease}
.vitrine .hit .shadow.legacy{filter:brightness(0) blur(14px);opacity:.38;transform:translate(6%,6%) scale(.98)}
.vitrine .hit .main{transition:transform .5s cubic-bezier(.2,.8,.2,1),filter .5s ease;filter:drop-shadow(0 0 0 transparent)}
.vitrine .hit .backing{position:absolute;border-radius:50%;pointer-events:none;background:var(--indigo-dark-4)}
.vitrine .hit.is-hover .main,.vitrine .hit:focus-visible .main{filter:drop-shadow(0 0 16px color-mix(in srgb,var(--sand-1) 55%,transparent))}
.vitrine .hit.is-hover .shadow,.vitrine .hit:focus-visible .shadow{opacity:.35}
.vitrine .hit:focus-visible{outline:none}
.vitrine .hit:focus-visible::after{content:"";position:absolute;left:var(--ring-l,8%);width:var(--ring-w,84%);top:var(--ring-t,66%);height:var(--ring-h,30%);border:1px solid var(--sand-1);border-radius:50%}
.vitrine .pend:not(.drop-in) .swing{opacity:0}
.vitrine .pend.drop-in .swing{animation:v-drop 900ms var(--ease-out) both}
@keyframes v-drop{from{opacity:0;transform:translateY(-24px)}to{opacity:1}}
@keyframes v-fadein{from{opacity:0}to{opacity:1}}

/* caption: "now showing" note in Ykela's hand, collection name in the display face */
.vitrine .caption{position:absolute;left:0;bottom:0;width:min(600px,64vw);
  padding:120px 0 max(30px,env(safe-area-inset-bottom)) var(--gutter);pointer-events:none;
  background:radial-gradient(ellipse 100% 100% at 0 100%,color-mix(in srgb,var(--indigo-dark-1) 82%,transparent) 0,color-mix(in srgb,var(--indigo-dark-1) 55%,transparent) 45%,transparent 75%)}
.vitrine .now{margin:0 0 .35rem;font-family:var(--f-hand);font-size:1.5rem;line-height:1;color:var(--ruby-4)}
.vitrine .caption h1{font-family:var(--f-display);font-weight:400;font-size:clamp(2.6rem,1.6rem + 4vw,5.2rem);line-height:.95;letter-spacing:-.01em;margin:0;color:var(--sand-1);text-shadow:0 2px 24px color-mix(in srgb,var(--indigo-dark-1) 90%,transparent)}
.vitrine .caption p{margin:.6rem 0 0;font-size:clamp(1rem,.9rem + .4vw,1.2rem);color:var(--sand-1);text-shadow:0 2px 16px color-mix(in srgb,var(--indigo-dark-1) 90%,transparent);max-width:30ch}
.vitrine .tilt-hint{position:absolute;left:0;right:0;top:32px;text-align:center;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--sand-1);opacity:.8;margin:0;pointer-events:none}

/* collection arrows: 44 px hit area, 1 px sand-1 chevron (13 x 24), no fill; the chevron's point sits on the
   gutter (desktop) or flush with the edge (phone). Hidden while there is one collection. */
.vitrine .arrow{position:absolute;z-index:var(--z-vitrine-ui);top:50%;transform:translateY(-50%);width:44px;height:44px;display:grid;place-items:center;
  padding:0;background:none;border:0;color:var(--sand-1);cursor:pointer;filter:drop-shadow(0 1px 6px var(--indigo-dark-1));transition:color var(--t) var(--ease-out)}
.vitrine .arrow svg{width:13px;height:24px;overflow:visible}
.vitrine .arrow.prev{left:calc(var(--gutter) - 16px)}
.vitrine .arrow.next{right:calc(var(--gutter) - 16px)}
@media (hover:hover){.vitrine .arrow:hover{color:var(--ruby-4)}}
.vitrine :focus-visible{outline:1px solid var(--sand-1);outline-offset:3px}

/* dialog: an editorial card on white, square, no fills */
.vitrine .modal{position:fixed;inset:0;z-index:var(--z-dialog);display:grid;place-items:center;padding:var(--gutter)}
.vitrine .scrim{position:absolute;inset:0;background:color-mix(in srgb,var(--indigo-dark-1) 72%,transparent);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:v-fadein .3s ease both}
.vitrine .dialog{position:relative;width:min(880px,100%);max-height:calc(100dvh - 2*var(--gutter));overflow:auto;display:grid;grid-template-columns:1.1fr 1fr;
  background:var(--white);color:var(--ink);box-shadow:var(--shadow-float);animation:v-rise .4s cubic-bezier(.2,.8,.2,1) both}
@keyframes v-rise{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
/* exit mirrors the entrance (vitrine.js adds .is-closing for 200ms, then hides) */
.vitrine .modal.is-closing .dialog{animation:v-fall 200ms var(--ease-out) both}
.vitrine .modal.is-closing .scrim{animation:v-fadeout 200ms var(--ease-out) both}
@keyframes v-fall{to{opacity:0;transform:translateY(10px) scale(.98)}}
@keyframes v-fadeout{to{opacity:0}}
.vitrine .dialog:focus{outline:none}
.vitrine .dialog :focus-visible{outline-color:var(--focus)}
.vitrine .close{position:absolute;top:12px;right:12px;z-index:2;display:grid;place-items:center;width:44px;height:44px;border:0;background:none;cursor:pointer;color:var(--ink);transition:color var(--t) var(--ease-out)}
.vitrine .close svg{width:16px;height:16px}
.vitrine .close svg path{stroke-width:1.2}
@media (hover:hover){.vitrine .close:hover{color:var(--accent)}}
.vitrine .gallery{padding:40px 24px 24px;display:flex;flex-direction:column;align-items:center;gap:12px}
.vitrine .gallery #dlg-img{width:100%;height:min(56vh,440px);object-fit:contain} /* fixed height: switching views never jumps */
.vitrine .thumbs{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.vitrine .thumbs button{width:54px;height:54px;padding:3px;border:1px solid var(--line);overflow:hidden;background:var(--white);cursor:pointer;
  transition:border-color var(--t) var(--ease-out),transform var(--dur-press) var(--ease-out)}
.vitrine .thumbs button:active{transform:scale(.94)}
.vitrine .thumbs button[aria-current=true]{border-color:var(--accent)}
.vitrine .thumbs img{width:100%;height:100%;object-fit:contain;display:block}
.vitrine .info{padding:56px 40px 40px 8px;display:flex;flex-direction:column;justify-content:center;gap:10px}
.vitrine .eyebrow{margin:0;color:var(--ink-2)}
.vitrine .info h2{margin:0;font-family:var(--f-display);font-weight:400;font-size:clamp(2rem,4vw,2.8rem);line-height:1.04;color:var(--accent)}
.vitrine .soon{margin:14px 0 0;font-family:var(--f-hand);font-size:1.4rem;border-top:1px solid var(--line);padding-top:14px;color:var(--accent)}
.vitrine .info .ask{align-self:flex-start;margin-top:8px}
.vitrine .ar{margin-top:12px;align-self:flex-start;padding:12px 20px;border:1px solid var(--accent);background:none;color:var(--accent);font-size:12px;letter-spacing:.14em;text-transform:uppercase}

@media (max-width:720px){
  .vitrine .caption{width:100%;padding:110px var(--gutter) max(40px,env(safe-area-inset-bottom));
    background:linear-gradient(to top,color-mix(in srgb,var(--indigo-dark-1) 85%,transparent) 0,color-mix(in srgb,var(--indigo-dark-1) 55%,transparent) 55%,transparent 100%)}
  .vitrine .arrow.prev{left:0}
  .vitrine .arrow.next{right:0}
  .vitrine .dialog{grid-template-columns:1fr}
  .vitrine .info{padding:4px 20px 24px}
  .vitrine .gallery{padding:52px 20px 8px}
  .vitrine .gallery #dlg-img{height:min(38vh,320px)}
}
@media (max-aspect-ratio:1/1){ .vitrine .wheel{width:min(150vw,70vh)} }

@media (prefers-reduced-motion:reduce){
  .vitrine .wheel{animation:none}
  .vitrine .stage{transition:none}
  .vitrine .stage.switching{filter:none}
  .vitrine .hit .main,.vitrine .hit .shadow,.vitrine .dialog,.vitrine .scrim{transition:none;animation:none}
  .vitrine .pend.drop-in .swing{animation:none}
}