/* A conceptual exhibition: real front photographs, spatial CSS geometry. */
.five-hero{background:radial-gradient(ellipse at 50% 48%,color-mix(in srgb,var(--accent) 10%,#292b2b),transparent 62%),#121516;padding-top:26px}
.five-grid{background:none;inset:18% 8% 22%;border:1px solid #d9d6c118;border-radius:50% 50% 0 0;mask-image:none;box-shadow:inset 0 0 100px #ffffff03}
.five-heading{margin-bottom:18px}.five-heading h1{font-weight:500}.five-heading h1 span{color:#ddd6c6}.five-eyebrow{color:#b9b3a4}.five-lab-label{border-color:#d6ccac30}
.five-bays{--orbit-step:clamp(115px,19vw,265px);height:440px;display:block;position:relative;perspective:1200px;isolation:isolate;overflow:visible}
.five-bays::before{content:'';position:absolute;inset:39% -10% -30%;background:repeating-linear-gradient(90deg,transparent 0 109px,#ffffff06 110px),linear-gradient(#343936,#171b1c);transform:rotateX(65deg);border-radius:50%;border-top:1px solid #d3cbb454;box-shadow:0 -20px 100px #ffffff04}
.world-sign{position:absolute;top:6px;left:0;right:0;text-align:center;color:#c1bda459;font-size:clamp(34px,6vw,88px);letter-spacing:.3em;font-weight:300;pointer-events:none}
.five-panel,.five-panel.active{--slot:0;--depth:0px;--lift:0px;--size:1;--angle:0deg;position:absolute;inset:auto;left:50%;top:38px;width:190px;height:360px;min-width:0;display:block;padding:0;border:0;border-radius:0;background:none;overflow:visible;box-shadow:none;opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateX(calc(var(--slot)*var(--orbit-step) + var(--drag,0px))) translateY(var(--lift)) translateZ(var(--depth)) rotateY(var(--angle)) scale(var(--size));transition:transform .85s cubic-bezier(.22,.8,.2,1),filter .7s;z-index:var(--order,1);filter:brightness(.8)}
.five-panel.active{filter:brightness(1)}.five-panel::after{display:none}.bay-label{position:absolute;bottom:-6px;left:0;right:0;text-align:center;letter-spacing:.15em;color:#e5ddca;font-size:10px}.bay-foot{position:absolute;bottom:-28px;left:0;right:0;justify-content:center;margin:0;color:#c0c3bd;font-size:11px}.bay-foot b{display:none}
.pack-float{position:absolute;inset:0 15px 42px;transform-style:preserve-3d;animation:pack-float 5s ease-in-out infinite;animation-delay:calc(var(--item)*-.7s)}
.pack-skin{position:absolute;left:50%;bottom:0;transform:translateX(-50%);height:100%;aspect-ratio:269/508;overflow:hidden;border-radius:22% 22% 22% 22% / 6% 6% 10% 10%;background:#181b19;box-shadow:inset -8px 0 14px #0008}
.five-panel .pack-skin img,.five-panel.active .pack-skin img{position:absolute;width:238%;height:auto;max-width:none;left:-69%;top:-9%;object-fit:initial;border-radius:0;filter:none;transform:none}
.pack-skin::after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,#0005,transparent 22%,#ffffff08 45%,transparent 72%,#0006);pointer-events:none}
[data-five=salt] .pack-skin{aspect-ratio:289/503}.five-panel[data-five=salt] .pack-skin img{width:221.5%;left:-60.9%;top:-9.1%}
[data-five=beet] .pack-skin{aspect-ratio:266/510}.five-panel[data-five=beet] .pack-skin img{width:240.6%;left:-70.7%;top:-9%}
[data-five=akk] .pack-skin{aspect-ratio:294/422;border-radius:2px;box-shadow:8px 2px 0 #ac8574,12px 5px 0 #70594e}.five-panel[data-five=akk] .pack-skin img{width:217.7%;left:-58.8%;top:-23.2%}
[data-five=gel] .pack-skin{aspect-ratio:125/370;border-radius:28% 28% 4% 4% / 13% 13% 2% 2%;clip-path:polygon(26% 0,78% 0,92% 5%,90% 11%,100% 16%,96% 100%,0 100%,7% 17%,21% 12%,18% 6%)}.five-panel[data-five=gel] .pack-skin img{width:512%;left:-396%;top:-59.5%}
.pack-shadow{position:absolute;left:15%;right:15%;bottom:35px;height:26px;background:#000b;border-radius:50%;filter:blur(9px);transform:scale(var(--size));transition:transform .85s;animation:pack-shadow 5s ease-in-out infinite;animation-delay:calc(var(--item)*-.7s)}
.pack-plinth{position:absolute;bottom:15px;left:-8%;width:116%;height:36px;border-radius:50%;background:linear-gradient(#747a72,#242a28 40%,#101514 70%);box-shadow:0 15px 26px #0008;border-top:1px solid #b5b8a66b;z-index:-1}
.pack-plinth::before{content:'';position:absolute;inset:0 0 12px;border-radius:50%;background:radial-gradient(ellipse,color-mix(in srgb,var(--tone) 8%,#565b54),#242a26);border:1px solid #dfdac038}
.five-panel.active .pack-skin::after{animation:pack-light 1s ease-out both}.five-caption.reveal{animation:caption-in .6s ease both}.five-tabs button[aria-pressed=true]{background:#e2dece;border-color:#e2dece}.five-actions a{background:#e2dece}.five-tabs button{background:#202522}
@keyframes pack-float{0%,100%{transform:translateY(0) rotateZ(-1deg)}50%{transform:translateY(-9px) rotateZ(1deg)}}
@keyframes pack-shadow{0%,100%{opacity:.65;scale:1}50%{opacity:.4;scale:.84}}
@keyframes pack-light{from{background-color:#fff7;opacity:.8}to{background-color:transparent;opacity:1}}
@keyframes caption-in{from{opacity:.3;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:760px){.five-bays{--orbit-step:22vw;height:290px;perspective:750px}.five-panel,.five-panel.active{top:25px;width:120px;height:232px}.pack-float{inset:0 10px 38px}.bay-label{font-size:8px;bottom:0}.bay-foot{font-size:8px;bottom:-17px;white-space:nowrap}.pack-plinth{height:28px;bottom:18px}.pack-shadow{bottom:32px}.world-sign{top:0;font-size:30px}.five-grid{inset:22% 2% 35%}.five-hero{padding-top:18px}.five-heading h1{font-size:30px}.five-tabs button{height:44px;flex-direction:row;gap:3px}.five-tabs button img{display:none}.five-hint{line-height:1.7}}
@media(prefers-reduced-motion:reduce){.five-hero *{animation:none!important;transition:none!important}}
.five-bays::before{bottom:-9%;z-index:-1;pointer-events:none}.five-tabs,.five-controls{position:relative;z-index:2}
[data-five=q10] .pack-skin,[data-five=salt] .pack-skin,[data-five=beet] .pack-skin{clip-path:polygon(12% 1%,30% 0,70% 0,90% 1%,91% 15%,86% 17%,88% 19%,97% 23%,100% 29%,100% 89%,97% 95%,88% 98%,65% 100%,35% 100%,12% 98%,3% 95%,0 89%,0 29%,3% 23%,12% 19%,14% 17%,9% 15%,9% 2%)}

/* Local pointer feedback; product facts remain synchronized by select(). */
.five-bays{cursor:grab}.five-bays.dragging{cursor:grabbing}.five-bays.dragging .five-panel{transition:none}
.five-hero::before{content:'';position:absolute;inset:16% 0 22%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at var(--light-x,50%) var(--light-y,45%),#ebe7ce0e,transparent 48%)}
.pack-skin{transform:translateX(-50%) rotateY(var(--tilt,0deg));transition:transform .25s ease}
.pack-skin::before{content:'';position:absolute;inset:-10% -90%;z-index:2;pointer-events:none;background:linear-gradient(110deg,transparent 42%,#fff5 49%,transparent 56%);transform:translateX(-60%);opacity:0}
.five-panel.active .pack-skin::before{animation:surface-sweep 1s ease-out both}
@keyframes surface-sweep{0%{transform:translateX(-60%);opacity:0}25%{opacity:.6}100%{transform:translateX(60%);opacity:0}}
body.paused .pack-skin{transform:translateX(-50%)}body.paused .five-hero::before{display:none}
@media(prefers-reduced-motion:reduce){.pack-skin{transform:translateX(-50%)}.five-hero::before{display:none}.five-panel.active .pack-skin::before{animation:none}.five-bays{--drag:0px!important}}
@media(max-width:380px){.five-bays{--orbit-step:21.5vw;height:275px}.five-panel,.five-panel.active{width:112px;height:223px}.five-heading h1{font-size:28px}}
body.paused .five-hero *::before,body.paused .five-hero *::after{animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){.five-hero *::before,.five-hero *::after{animation:none!important;transition:none!important}}

/* Deferred 3D shares the photo layout; existing swipe/keyboard controls remain owners. */
.product-3d-overlay{position:absolute;inset:0;display:block;pointer-events:none}
.product-3d-overlay canvas{display:block}

/* Five-body pavilion: a shared space, with an unobstructed central lead. */
.five-bays::before{background:linear-gradient(165deg,#53564c29,#1d2320 52%,#121615);border-top-color:#d3cbb438;box-shadow:0 -20px 100px #ffffff03}
.world-sign{opacity:.5;letter-spacing:.22em}
@media(max-width:760px){
 .five-bays{height:300px;perspective:none;margin-inline:0}
 .five-panel,.five-panel.active{left:var(--mx,50%);top:var(--my,48%);width:var(--mw,32%);height:var(--mh,64%);transform:translate(-50%,-50%) translateX(var(--drag,0px)) rotate(var(--mr,0deg));transform-origin:50% 80%;transition:left .7s cubic-bezier(.22,.8,.2,1),top .7s cubic-bezier(.22,.8,.2,1),width .7s cubic-bezier(.22,.8,.2,1),height .7s cubic-bezier(.22,.8,.2,1),transform .7s cubic-bezier(.22,.8,.2,1),filter .5s}
 .five-panel .pack-float{inset:0 3px 18px}
 .five-panel .pack-plinth{left:0;width:100%;height:15px;bottom:10px}
 .five-panel .pack-shadow{left:12%;right:12%;bottom:17px;height:12px;filter:blur(5px)}
 .five-panel .bay-label{bottom:-5px;font-size:8px;letter-spacing:.02em;white-space:nowrap}
 .five-panel .bay-foot{display:none}
 .five-bays::before{inset:37% 1% -2%;transform:rotateX(60deg);border-radius:50%}
 .world-sign{top:0;font-size:24px}
 .five-panel.active{filter:brightness(1.06)}
 .five-panel:not(.active){filter:brightness(.9)}
 .five-panel:focus-visible{outline:2px solid #e2dece;outline-offset:5px;border-radius:6px}
}
@media(prefers-reduced-motion:reduce){.five-panel,.five-panel.active{transition:none!important}}
/* Static photo composition also survives a disabled or failed module load. */
[data-five=q10]{--mx:50%;--my:48%;--mw:32%;--mh:64%;--mr:0deg}
[data-five=salt]{--mx:86%;--my:72%;--mw:20%;--mh:40%;--mr:5deg}
[data-five=beet]{--mx:86%;--my:29%;--mw:18%;--mh:34%;--mr:9deg}
[data-five=akk]{--mx:14%;--my:29%;--mw:18%;--mh:34%;--mr:-9deg}
[data-five=gel]{--mx:14%;--my:72%;--mw:20%;--mh:40%;--mr:-5deg}