/* Interactive material previews and package presentation. */
.remote-upright{isolation:isolate}
.remote-upright .remote-original{opacity:1;transition:opacity .35s ease!important}
.remote-upright.is-previewing .remote-original{opacity:0}
.remote-card-vertical .remote-upright .case-preview{position:absolute;inset:0;z-index:1;opacity:0;pointer-events:none;translate:none!important;transition:opacity .4s ease,filter .55s ease!important}
.remote-card-vertical .remote-upright .case-preview.is-visible{opacity:1}
.case-view-reset{position:absolute;left:8px;top:8px;z-index:4;min-height:32px;padding:6px 10px;color:#d9e2ef;font-size:9px;border:1px solid #ffffff30;background:#111c24b8;border-radius:4px;cursor:pointer}
.case-view-reset[hidden]{display:none}
.case-preview-caption{position:absolute;z-index:3;bottom:5px;left:5px;right:5px;text-align:center;color:#d3ddeb;font-size:8px;line-height:1.5;pointer-events:none;background:#111c24b8;border-radius:3px;padding:3px}
.case-preview-caption:empty{display:none}
.remote-card-vertical .color-blocks li{height:28px;overflow:visible}
.material-choice{display:block;position:relative;width:100%;height:100%;min-height:28px;padding:0;border:1px solid #ffffff26;border-radius:4px;background:var(--material);cursor:pointer;transition:transform .3s ease,box-shadow .3s ease}
.material-choice[aria-pressed=true]{box-shadow:0 0 0 2px #111c24,0 0 0 3px #dce8f2}
.material-choice[aria-pressed=true]::after{content:'';position:absolute;right:8px;top:8px;width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px #0008}
.material-choice:hover{transform:translateY(-2px)}
.material-choice:focus-visible{outline:2px solid #82aadd;outline-offset:4px}
.pack-art.pack-cinematic{height:620px;perspective:1200px;isolation:isolate}
.pack-cinematic::before{content:'';position:absolute;left:12%;right:4%;bottom:15px;height:55px;background:radial-gradient(ellipse,#0009,transparent 70%);filter:blur(13px);pointer-events:none}
.pack-object{position:absolute;width:178px;transform-style:preserve-3d;transform:perspective(1100px) rotateY(-12deg) rotateZ(-6deg);left:12%;top:45px}
.pack-object+.pack-object{width:190px;left:49%;top:18px;transform:perspective(1100px) rotateY(-9deg) rotateZ(5deg)}
.pack-art.pack-cinematic .pack-object img{display:block;width:100%;height:auto;object-fit:contain;transform:none;box-shadow:16px 28px 35px -10px #0009;border-radius:2px}
.pack-object::after{content:'';position:absolute;inset:0 -5px 0 auto;width:5px;background:linear-gradient(90deg,#0e1622,#2b3755);transform:rotateY(90deg);transform-origin:left center;border-radius:0 2px 2px 0;pointer-events:none}
.section-light{position:relative;isolation:isolate}
.section-light::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse at var(--light-position,75% 50%),var(--light-color,#6d257b55),transparent 66%);opacity:var(--scene-light,.08);transition:opacity .5s ease}
.section-light>.wrap{position:relative;z-index:1}
@media(max-width:1000px){.pack-art.pack-cinematic{height:500px}.pack-object{width:134px;left:8%;top:45px}.pack-object+.pack-object{width:145px;left:48%;top:24px}}
@media(max-width:640px){.case-view-reset{min-height:36px;font-size:9px;padding-inline:8px}.remote-card-vertical .color-blocks li,.material-choice{height:32px;min-height:32px}.case-preview-caption{font-size:7px}.pack-art.pack-cinematic{height:460px}.pack-object{width:130px;left:10%;top:35px}.pack-object+.pack-object{width:138px;left:48%;top:16px}}
@media(prefers-reduced-motion:reduce){.remote-upright .remote-original,.remote-card-vertical .remote-upright .case-preview,.material-choice{transition:none!important}.material-choice:hover{transform:none}.section-light::after{transition:none;opacity:.08}.pack-object{opacity:1!important;transform:perspective(1100px) rotateY(-12deg) rotateZ(-6deg)!important}.pack-object+.pack-object{transform:perspective(1100px) rotateY(-9deg) rotateZ(5deg)!important}}

.case-view-reset{min-height:44px;min-width:52px}@media(max-width:640px),(pointer:coarse){.remote-card-vertical .color-blocks li,.material-choice{height:44px;min-height:44px}}

/* Luminous colors: illustrative night mode, controlled by the visitor. */
.case-night-toggle{position:absolute;right:8px;top:8px;z-index:4;min-height:44px;padding:6px 10px;border:1px solid #82aadd66;border-radius:4px;background:#111c24e8;color:#e5edf6;font:inherit;font-size:9px;cursor:pointer}
.case-night-toggle[hidden]{display:none}
.case-night-toggle:focus-visible{outline:2px solid #82aadd;outline-offset:3px}
.case-night-toggle[aria-pressed=true]{border-color:var(--glow-color);color:var(--glow-color)}
.remote-upright{transition:background .6s ease}
.remote-card-vertical .remote-upright.is-night{background:#020609!important}
@media(prefers-reduced-motion:reduce){.remote-upright{transition:none}}