/* LOCKEDIN3D product triptych (assets/triptych.js) */
.tri{position:relative;height:100vh;margin-top:clamp(90px,10vw,140px)}
.tri-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--void)}
.tri-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.tri-piece{position:absolute;left:0;top:0;transform-origin:50% 50%;visibility:hidden;will-change:transform,opacity}
.tri-piece img{width:100%;height:100%;display:block;filter:brightness(0)}
.tri-sheen{position:absolute;inset:0;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  background:linear-gradient(110deg,transparent 0 44%,rgba(255,236,214,.55) 50%,transparent 56% 100%) no-repeat;background-size:300% 100%;mix-blend-mode:overlay;opacity:0}
.tri-svg{position:absolute;inset:0;width:100%;height:100%;z-index:20;pointer-events:none;overflow:visible}
.tri-dimline{stroke:var(--bronze-hi);stroke-width:1.2}
.tri-tick{stroke:var(--bronze-hi);stroke-width:1.2}
.tri-guide{stroke:rgba(232,229,224,.35);stroke-width:1;stroke-dasharray:2 3}
.tri-dimlab{position:absolute;left:0;top:0;z-index:21;display:grid;gap:7px;pointer-events:none;visibility:hidden;opacity:0;white-space:nowrap;text-shadow:0 1px 14px rgba(0,0,0,.8)}
.tri-dimlab .k{font:500 9.5px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
.tri-dimlab .v{display:flex;align-items:baseline;gap:6px}
.tri-dimlab b{font:650 clamp(26px,2.3vw,34px)/1 var(--display);font-stretch:118%;letter-spacing:-.01em;color:var(--fg);font-variant-numeric:tabular-nums}
.tri-dimlab em{font:italic 400 clamp(20px,1.7vw,25px)/1 var(--serif);color:var(--bronze-hi)}
/* weight: liquid glass plate, same glass as the menu and the reviews plaque */
.tri-kg{position:absolute;left:0;top:0;z-index:21;width:min(222px,calc(100vw - 48px));padding:14px 18px 13px;border-radius:18px;visibility:hidden;opacity:0;pointer-events:none;
  background:rgba(13,11,9,.5);-webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -1px 0 rgba(255,255,255,.05),inset 0 0 0 1px rgba(255,255,255,.06),0 16px 38px -16px rgba(0,0,0,.75)}
.tri-kg::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;padding:1px;
  background:linear-gradient(140deg,rgba(255,255,255,.42),rgba(255,255,255,.05) 26%,rgba(255,255,255,0) 55%,rgba(255,240,220,.16) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.tri-kg .k{display:flex;align-items:center;gap:9px;font:500 8.5px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
.tri-kg .dot{display:none}
.tri-kg .v{display:flex;align-items:baseline;gap:5px;margin:10px 0 12px}
.tri-kg b{font:650 clamp(28px,2.4vw,36px)/.9 var(--display);font-stretch:118%;letter-spacing:-.015em;color:var(--fg);font-variant-numeric:tabular-nums}
.tri-kg em{font:italic 400 clamp(19px,1.6vw,24px)/1 var(--serif);color:var(--bronze-hi)}
.tri-kg .scale{display:block;position:relative;padding-bottom:16px}
.tri-kg .rule{display:block;position:relative;height:11px;border-bottom:1px solid rgba(232,229,224,.22)}
.tri-kg .rule i{position:absolute;bottom:0;width:1px;height:5px;background:rgba(232,229,224,.28)}
.tri-kg .rule i.maj{height:10px;background:rgba(232,229,224,.5)}
.tri-kg .fill{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:linear-gradient(90deg,rgba(196,154,98,.2),var(--bronze-hi))}
.tri-kg .needle{position:absolute;bottom:-3px;left:0;width:1.5px;height:15px;margin-left:-.75px;background:var(--bronze-hi);box-shadow:0 0 10px rgba(228,193,140,.6)}
.tri-kg .nums{position:absolute;left:0;right:0;bottom:0;height:10px}
.tri-kg .nums span{position:absolute;transform:translateX(-50%);font:500 7.5px/1 var(--mono);letter-spacing:.08em;color:var(--dim)}
.tri-kg .nums span:first-child{transform:none}
.tri-kg .nums span:last-child{transform:translateX(-100%)}
.tri-nolab{display:none!important}
.tri-caps{position:absolute;left:var(--gx);bottom:max(9vh,72px);width:min(380px,calc(100% - 56px));z-index:22}
.tri-cap{position:absolute;left:0;bottom:0;width:100%;opacity:0;visibility:hidden}
.tri-cap .label{margin-bottom:14px}
.tri-cap h3{margin:0;font:450 clamp(20px,1.8vw,26px)/1.2 var(--sans);letter-spacing:-.015em;text-wrap:balance}
@media (max-width:760px){
  .tri{height:100vh}
  .tri-caps{left:20px;right:20px;width:auto;bottom:calc(30px + env(safe-area-inset-bottom,0px))}
  .tri-cap h3{font-size:18px}
  .tri-dimlab b{font-size:22px}.tri-dimlab em{font-size:18px}
  .tri-kg{padding:12px 16px 11px;width:min(200px,calc(100vw - 48px))}
  .tri-kg .v{margin:8px 0 10px}.tri-kg b{font-size:27px}
}
.tri-stage .co-svg{z-index:30}.tri-stage .co-label{z-index:31}
/* loupe: a round lens with a magnified crop of one detail (the M3 screw) */
.tri-lline{stroke:var(--bronze-hi);stroke-width:1}
.tri-lring{fill:none;stroke:var(--bronze-hi);stroke-width:1.2;opacity:0}
.tri-ldot{fill:var(--bronze-hi);opacity:0}
.tri-loupe{position:absolute;left:0;top:0;z-index:31;width:clamp(150px,13vw,200px);pointer-events:none;visibility:hidden}
.tri-loupe .lens{position:relative;width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;background:#050505;opacity:0;transform-origin:50% 50%;
  box-shadow:0 0 0 1px rgba(228,193,140,.75),0 0 0 6px rgba(13,11,9,.55),0 0 0 7px rgba(255,255,255,.12),0 24px 50px -14px rgba(0,0,0,.9)}
.tri-loupe .lens::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:radial-gradient(120% 90% at 30% 15%,rgba(255,255,255,.22),rgba(255,255,255,0) 45%),radial-gradient(closest-side,transparent 72%,rgba(0,0,0,.45))}
.tri-loupe img{width:100%;height:100%;display:block;object-fit:cover;transform-origin:50% 50%}
.tri-loupe .cap{position:absolute;left:50%;top:calc(100% + 16px);width:max-content;max-width:min(260px,80vw);transform:none;translate:-50% 0;display:grid;gap:6px;justify-items:center;text-align:center;opacity:0;text-shadow:0 1px 14px rgba(0,0,0,.8)}
.tri-loupe .cap .t{font:450 15px/1.3 var(--sans);color:var(--fg)}
.tri-loupe .cap .s{font:500 9.5px/1.3 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.tri-loupe .cap .s:empty{display:none}
@media (max-width:760px){.tri-loupe{width:104px}.tri-loupe .cap .t{font-size:13.5px}}
/* pick mode: once all three are on screen, each piece can be clicked to bring it back to the centre */
.tri-pick .tri-piece{cursor:pointer}
.tri-pick .tri-piece:focus-visible{outline:1px solid var(--bronze);outline-offset:6px;border-radius:12px}
.tri-hint{position:absolute;right:var(--gr);bottom:max(9vh,72px);z-index:22;display:flex;align-items:center;gap:10px;pointer-events:none;opacity:0;transition:opacity .5s var(--ease,ease);
  font:500 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.tri-tap{width:22px;height:22px;flex:none;fill:none;stroke:var(--bronze-hi);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.tri-tap .f{animation:triTap 2.2s ease-in-out infinite;transform-origin:8px 20px}
.tri-tap .r{opacity:0;animation:triRip 2.2s ease-out infinite}.tri-tap .r2{animation-delay:.12s}
@keyframes triTap{0%,30%,100%{transform:translateY(0)}40%{transform:translateY(1.6px) scale(.97)}55%{transform:translateY(0)}}
@keyframes triRip{0%,38%{opacity:0}46%{opacity:1}80%,100%{opacity:0}}
@media (max-width:760px){.tri-hint{right:auto;left:20px;bottom:calc(118px + env(safe-area-inset-bottom,0px));font-size:9px}}
/* phones: a side piece's details folded into a chip under it */
.tri-chip{position:absolute;left:0;top:0;z-index:23;display:none;align-items:center;gap:7px;padding:6px 10px;border-radius:999px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .45s var(--ease,ease);
  background:rgba(13,11,9,.6);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
  font:500 9px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg)}
.tri-chip.on{opacity:1}
.tri-chip .dots{display:flex;gap:3px}
.tri-chip .dots i{width:7px;height:7px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
@media (max-width:760px){.tri-chip{display:flex}}
.tri-stage .co-label .s{display:block;margin-top:4px;font:400 12.5px/1.35 var(--sans);color:var(--mute)}
@media (max-width:760px){.tri-stage .co-label:not(.co-dimlab){max-width:min(220px,calc(100vw - 36px))}.tri-stage .co-label .s{font-size:11.5px}}