/* A dimensional, six-sided case with a separately hinged front cover. */
.cinema{display:block;isolation:isolate;height:max(800px,calc(100svh - 100px));max-height:1100px;min-height:800px;padding:0;background:#05060c;overflow:hidden}.cinema .ambient{position:absolute;width:70vw;height:80%;filter:blur(55px);opacity:.5;pointer-events:none;z-index:-2}.ambient-red{background:radial-gradient(ellipse,#db08214d,transparent 65%);left:-28%;top:4%;animation:red-light 12s ease-in-out infinite alternate}.ambient-blue{background:radial-gradient(ellipse,#2043ff66,transparent 65%);right:-20%;top:0;animation:blue-light 10s ease-in-out infinite alternate}.cinema-grid{position:absolute;inset:0;z-index:-1;opacity:.18;background-image:linear-gradient(#727cb417 1px,transparent 1px),linear-gradient(90deg,#727cb417 1px,transparent 1px);background-size:90px 90px;mask-image:linear-gradient(transparent,#000,transparent)}.cinema-top{position:absolute;top:30px;left:5.5%;right:5.5%;display:flex;justify-content:space-between;font-size:8px;letter-spacing:2px;color:#8f91a6}.cinema-top>span:first-child{color:#e4e3e8}.cinema-top i{display:inline-block;width:5px;height:5px;background:var(--yellow);border-radius:50%;margin-right:10px;box-shadow:0 0 15px var(--yellow)}.cinema-heading{position:absolute;left:6%;top:15%;pointer-events:none;z-index:-1}.cinema-heading p{font-size:9px;letter-spacing:4px;color:#a7a9bd;margin:0 0 25px}.cinema-heading h1{font-size:clamp(115px,15.5vw,240px);line-height:.87;letter-spacing:-4px;margin:0;color:#f6f3e8}.cinema-heading h1 span{color:transparent;-webkit-text-stroke:1px #eae7e266}.cinema-heading h1:after{content:'✦';color:var(--yellow);font-size:50px;position:absolute;left:2px;bottom:-75px}.scene-wrap{position:absolute;left:58%;top:48%;transform:translate(-50%,-50%);width:650px;height:660px;z-index:2}.model-stage{position:absolute;inset:0 0 80px;perspective:1300px;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}.model-stage.dragging{cursor:grabbing}.steel-model{--w:300px;--h:410px;--depth:18px;width:var(--w);height:var(--h);position:absolute;left:calc(50% - var(--w)/2);top:70px;transform-style:preserve-3d;transform:rotateX(-9deg) rotateY(-24deg) rotateZ(-5deg);will-change:transform}.steel-body,.steel-lid{position:absolute;inset:0;transform-style:preserve-3d}.steel-lid{transform-origin:left center;transform:rotateY(var(--lid-angle,0deg));transition:transform 1.5s cubic-bezier(.2,.7,.2,1)}.steel-face{position:absolute;inset:0;border-radius:13px;backface-visibility:hidden;overflow:hidden;box-shadow:inset 0 0 0 1px #c9c8cd,inset 0 0 0 3px #24262b;background:#20212a}.texture{position:absolute;inset:3px;border-radius:10px;background-repeat:no-repeat;filter:brightness(1.13) contrast(1.05)}.texture-front{background-image:url('assets/front.jpg');background-size:148% 123%;background-position:50% 52%}.texture-back{background-image:url('assets/back.jpg');background-size:147% 123%;background-position:50% 52%}.lid-front{transform:translateZ(9px)}.body-back{transform:rotateY(180deg) translateZ(9px)}.body-inner{transform:translateZ(-1px)}.lid-inner{transform:rotateY(180deg) translateZ(-1px)}.texture-inner-right{background-image:url('assets/inside.jpg');background-size:220% 167%;background-position:97% 49%;filter:brightness(.85)}.texture-inner-left{background-image:url('assets/inside.jpg');background-size:220% 167%;background-position:7% 49%;filter:brightness(.85)}.disc-ring{width:78%;aspect-ratio:1;position:absolute;left:11%;top:22%;border-radius:50%;border:3px solid #c0d1e344;box-shadow:0 0 0 4px #060d2040,inset 0 0 4px #d6e4f677;pointer-events:none}.metal-sheen{position:absolute;inset:0;background:linear-gradient(var(--light-angle,115deg),transparent 12%,#fff0 35%,#f7ecff48 48%,#c2dfff13 56%,transparent 74%);mix-blend-mode:screen;opacity:var(--shine,.5);box-shadow:inset 2px 2px 3px #fff7,inset -2px -2px 5px #000b;border-radius:13px}.steel-edge{position:absolute;background:repeating-linear-gradient(0deg,#777983 0px,#d1d0d4 1px,#35353e 2px,#96969e 3px);backface-visibility:visible}.body-right{width:10px;height:calc(var(--h) - 16px);right:-5px;top:8px;transform:rotateY(90deg) translateX(4px);border-radius:3px}.body-top,.body-bottom,.lid-top,.lid-bottom{height:10px;width:calc(var(--w) - 16px);left:8px;background:linear-gradient(#45464f,#d2d2d6,#50515a);transform:rotateX(90deg) translateY(-4px)}.body-top,.lid-top{top:-5px}.body-bottom,.lid-bottom{bottom:-5px}.lid-top,.lid-bottom{transform:rotateX(90deg) translateY(5px)}.lid-right{width:10px;height:calc(var(--h) - 16px);right:-5px;top:8px;transform:rotateY(90deg) translateX(-5px);border-radius:3px}.steel-spine{position:absolute;left:-9px;top:8px;width:18px;height:calc(var(--h) - 16px);background:linear-gradient(90deg,#929399,#15161c 22%,#2e2c35 80%,#85878e);border:1px solid #8a8b95;transform:rotateY(-90deg);border-radius:4px;display:flex;align-items:center;justify-content:center;backface-visibility:visible}.steel-spine span{writing-mode:vertical-rl;font-size:8px;font-weight:700;letter-spacing:1.15px;white-space:nowrap;color:#ececec}.plinth{position:absolute;width:400px;height:160px;left:125px;top:452px;transform:rotateX(68deg);border-radius:50%;background:radial-gradient(ellipse,#030409 20%,#101327 62%,#416bde50 66%,transparent 67%);filter:blur(1px);opacity:.8}.plinth div{position:absolute;inset:18px;border-radius:50%;box-shadow:0 0 20px #1838ee40,inset 0 0 20px #e12a3b20;border:1px solid #4163a780}.light-trail{position:absolute;width:800px;height:350px;left:-85px;top:110px;border-radius:50%;transform:rotate(-35deg) rotateX(68deg);pointer-events:none;filter:blur(.5px)}.trail-red{border-top:1px solid #e42a4870;box-shadow:0 -8px 18px -13px #ff324f;animation:trail-shift 12s ease-in-out infinite alternate}.trail-blue{border-bottom:1px solid #5979ff99;transform:rotate(30deg) rotateX(68deg);animation:trail-shift 15s ease-in-out infinite alternate-reverse}.scene-controls{display:flex;justify-content:center;gap:7px;position:absolute;bottom:37px;left:0;width:100%;flex-wrap:wrap}.scene-controls button{border:1px solid #ffffff28;background:#10111be6;backdrop-filter:blur(12px);color:#d9dbe4;font-size:15px;display:flex;gap:8px;align-items:center;padding:10px 12px;border-radius:3px;transition:background .2s,border-color .2s}.scene-controls button span{font-size:9px}.scene-controls button:hover{border-color:var(--yellow);color:var(--yellow)}.scene-controls button[aria-pressed="true"]{border-color:#ffe03466;color:var(--yellow)}.rotate-controls{position:absolute;bottom:0;width:100%;display:flex;justify-content:center;align-items:center;gap:15px;font-size:7px;letter-spacing:1.4px;color:#9296b2}.rotate-controls button{padding:6px 14px;background:none;border:1px solid #ffffff20;color:#d6d7e0}.rotate-controls button:hover{border-color:var(--yellow)}.spec-tag{position:absolute;right:-26px;top:365px;font-size:10px;line-height:1.8;letter-spacing:1px;pointer-events:none;display:flex;gap:12px;align-items:center}.spec-tag b{font-size:7px;letter-spacing:1.4px;color:#8a91ac}.spec-line{display:block;width:45px;height:1px;background:var(--yellow);position:relative}.spec-line:before{content:'';width:4px;height:4px;border-radius:50%;background:var(--yellow);position:absolute;left:0;top:-2px}.cinema-bottom{position:absolute;left:6%;right:6%;bottom:35px;display:flex;align-items:center;justify-content:space-between;gap:25px}.cinema-bottom .eyebrow{font-size:8px;letter-spacing:1.8px;color:var(--yellow)}.cinema-bottom p{font-size:11px;line-height:1.8;color:#9397ac;margin:9px 0 0}.cinema-bottom .button{margin-left:auto;min-width:230px}.cinema-scroll{width:45px;height:45px;border:1px solid #ffffff30;border-radius:50%;display:grid;place-items:center}.cinema-scroll:hover{border-color:var(--yellow);color:var(--yellow)}@keyframes red-light{to{transform:translate(15%,15%);opacity:.8}}@keyframes blue-light{to{transform:translate(-10%,-10%);opacity:.9}}@keyframes trail-shift{to{translate:0 30px;opacity:.4}}
@media(min-width:1500px){.scene-wrap{scale:1.15;transform-origin:left top;left:58%;top:45%}.cinema-heading{top:17%}.cinema-bottom{bottom:45px}}
@media(max-width:1050px){.scene-wrap{left:60%;width:600px}.spec-tag{right:15px;top:465px}.cinema-heading h1{font-size:15vw}.cinema-heading{top:20%}.cinema-top>span:last-child{display:none}.cinema-bottom{bottom:25px}.cinema-bottom p{max-width:250px}.cinema-bottom .button{min-width:200px}}
@media(max-width:760px){.cinema{height:1000px;min-height:1000px;display:block;padding:0}.cinema-top{left:7%;top:25px;font-size:7px}.cinema-heading{left:7%;top:80px}.cinema-heading p{font-size:7px;letter-spacing:2px;margin-bottom:15px}.cinema-heading h1{font-size:21vw;line-height:.9;letter-spacing:-1px}.cinema-heading h1:after{font-size:25px;left:auto;right:-35px;bottom:8px}.scene-wrap{left:50%;top:280px;transform:translateX(-50%);width:100%;height:555px}.steel-model{--w:235px;--h:325px;top:40px}.model-stage{inset:0 0 70px;perspective:1000px}.plinth{width:300px;height:120px;left:calc(50% - 150px);top:365px}.light-trail{width:500px;height:240px;left:calc(50% - 250px);top:95px}.spec-tag{top:400px;right:7%;font-size:8px}.spec-tag b{font-size:6px}.spec-line{width:30px}.scene-controls{bottom:40px;gap:5px;padding:0 15px}.scene-controls button{padding:9px;font-size:13px;gap:5px}.scene-controls button span{font-size:8px}.rotate-controls{font-size:6px;letter-spacing:1px;gap:10px;bottom:6px}.cinema-bottom{bottom:28px;left:7%;right:7%;flex-wrap:wrap;gap:16px}.cinema-bottom>div{display:none}.cinema-bottom .button{margin:0;width:calc(100% - 65px)}.cinema-scroll{width:40px;height:40px}.steel-spine span{font-size:6px}.scene-wrap.is-open .steel-model{--w:185px;--h:255px;top:80px}.scene-wrap.is-open .steel-spine span{font-size:5px}}
@media(prefers-reduced-motion:reduce){.steel-lid{transition:none}.ambient,.light-trail{animation:none!important}}

/* Printed shells: artwork wraps over a smooth rolled edge, with a recessed seam. */
.steel-model{--depth:28px;--shell:13px;--half:14px;--edge-center:7.5px}
.steel-face{border-radius:10px;background:#29252b;box-shadow:none}
.texture{inset:0;border-radius:inherit}
.texture-front{background-size:174% 131%;background-position:51% 50%}
.texture-back{background-size:174% 131%;background-position:50% 50%}
.lid-front{transform:translateZ(var(--half))}
.body-back{transform:rotateY(180deg) translateZ(var(--half))}
.metal-sheen{border-radius:10px;box-shadow:inset 1px 1px 2px #fff2,inset -1px -1px 3px #0005;background:linear-gradient(var(--light-angle,115deg),transparent 20%,#fff0 38%,#e9e7df25 49%,#bdd5ff08 58%,transparent 74%)}
.steel-edge{background-repeat:no-repeat;background-color:#514340;background-blend-mode:soft-light,normal;backface-visibility:visible;box-shadow:none}
.body-right,.lid-right{width:var(--shell);height:calc(var(--h) - 8px);right:calc(var(--shell)/-2);top:4px;border-radius:4px;background-size:100% 100%,calc(var(--w)*1.74) calc(var(--h)*1.31);background-position:center,78% 50%;background-image:linear-gradient(90deg,#0008,#ffe8c11c 25%,#fff2 48%,#0003 83%,#0008),url('assets/front.jpg')}
.lid-right{transform:translateZ(var(--edge-center)) rotateY(90deg)}
.body-right{transform:translateZ(calc(-1*var(--edge-center))) rotateY(90deg);background-image:linear-gradient(90deg,#0008,#c1dcff16 25%,#fff2 48%,#0003 83%,#0008),url('assets/back.jpg');background-position:center,22% 50%}
.body-top,.body-bottom,.lid-top,.lid-bottom{height:var(--shell);width:calc(var(--w) - 8px);left:4px;border-radius:4px;background-size:100% 100%,calc(var(--w)*1.74) calc(var(--h)*1.31);background-image:linear-gradient(#0007,#fff2 30%,#fff1 60%,#0006),url('assets/front.jpg')}
.lid-top,.body-top{top:calc(var(--shell)/-2);background-position:center,51% 13%}
.lid-bottom,.body-bottom{bottom:calc(var(--shell)/-2);background-position:center,51% 87%}
.lid-top,.lid-bottom{transform:translateZ(var(--edge-center)) rotateX(90deg)}
.body-top,.body-bottom{transform:translateZ(calc(-1*var(--edge-center))) rotateX(90deg);background-image:linear-gradient(#0007,#fff2 30%,#fff1 60%,#0006),url('assets/back.jpg')}
/* Dark inset on each inner lip forms the continuous opening seam. */
.body-inner,.lid-inner{border:1px solid #17181d;box-shadow:inset 0 0 0 2px #36363b}
.lid-right:before,.lid-right:after,.body-right:before,.body-right:after{content:'';position:absolute;width:5px;height:32px;left:1px;border-radius:3px 3px 6px 6px;background:linear-gradient(90deg,#121215cc,#94867588 40%,#252529);box-shadow:inset 0 0 1px #e5d4b577;top:22%}
.lid-right:after,.body-right:after{top:auto;bottom:22%}
.body-right:before,.body-right:after{left:auto;right:1px;width:3px;background:linear-gradient(90deg,#151518,#b9ad9855,#16161b)}
.steel-spine{width:var(--depth);left:calc(var(--depth)/-2);top:4px;height:calc(var(--h) - 8px);border:0;border-radius:4px;background:linear-gradient(90deg,#16141a,#51423a 15%,#242027 32%,#33262b 78%,#15141a);box-shadow:inset 1px 0 2px #cab79840,inset -1px 0 2px #0008}
.steel-spine span{color:#e6d9c5}
@media(max-width:760px){.steel-model{--depth:24px;--shell:11px;--half:12px;--edge-center:6.5px}.scene-wrap.is-open .steel-model{--depth:20px;--shell:9px;--half:10px;--edge-center:5.5px}}

/* All camera movement and hinge movement share one continuous timeline. */
.steel-lid{transition:none}
.texture.projected{background:none!important;overflow:hidden;filter:brightness(1.08) contrast(1.04)}
.texture.projected img{position:absolute;left:0;top:0;width:1600px;height:1600px;max-width:none;max-height:none;transform-origin:0 0;pointer-events:none;user-select:none}
.body-inner .texture,.lid-inner .texture{inset:0;border-radius:9px}
.disc-ring{display:none}
.rim-mesh{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}
.rim-facet{position:absolute;display:block;backface-visibility:visible;background:linear-gradient(0deg,#302c2b 0%,#877960 9%,#c0ad89 32%,#97886f 62%,#665d50 90%,#292624 100%)}
.rim-cool{background:linear-gradient(0deg,#272832 0%,#6f737d 9%,#a7a5a0 32%,#83838a 62%,#555661 90%,#25252a 100%)}
.body-top,.body-bottom,.lid-top,.lid-bottom{display:none}
.body-right,.lid-right{height:calc(var(--h) - 20px);top:10px;border-radius:0}
.cinema-heading{opacity:calc(1 - var(--reveal,0)*.62)}
.spec-tag{opacity:calc(1 - var(--reveal,0));pointer-events:none}
.plinth{opacity:calc(.55 + var(--reveal,0)*.35)}
.scene-controls button:disabled,.rotate-controls button:disabled{cursor:wait;opacity:.45}
.scene-wrap.is-open .steel-model{--w:300px;--h:410px;--depth:28px;--shell:13px;--half:14px;--edge-center:7.5px;top:70px}
@media(max-width:760px){.scene-wrap.is-open .steel-model{--w:235px;--h:325px;--depth:24px;--shell:11px;--half:12px;--edge-center:6.5px;top:40px}.scene-wrap.is-open .steel-spine span{font-size:6px}}

/* A single perimeter owns the silhouette; remove the former overlapping side panels. */
.body-right,.lid-right{display:none}
.rim-facet{border:0;outline:0;box-shadow:none;background:linear-gradient(0deg,#575044,#9b8d75 16%,#b5a58a 46%,#a3947d 74%,#655c4f)}
.rim-cool{background:linear-gradient(0deg,#56545a,#918b81 16%,#b0a99b 46%,#9b958b 74%,#625f5a)}
.rim-opening{background:linear-gradient(0deg,#62594c,#b8a78b 24%,#a1937d 72%,#665d51)}
.opening-recess{position:absolute;display:block;background:linear-gradient(#16171b,#303037 50%,#101115);border-radius:3px;backface-visibility:visible}

/* Seamless rounded shell sections, no corner facet edges or overlapping spine tiles. */
.shell-section{position:absolute;inset:0;display:block;backface-visibility:visible;pointer-events:none;border:0;box-shadow:none}
.rim-mesh{transform-style:preserve-3d}
.lid-front{transform:translateZ(calc(var(--half) + .15px))}
.body-back{transform:rotateY(180deg) translateZ(calc(var(--half) + .15px))}
.body-inner{transform:translateZ(-.85px)}
.lid-inner{transform:rotateY(180deg) translateZ(-.85px)}
.steel-spine{left:calc(var(--depth)/-2);top:10px;height:calc(var(--h) - 20px);transform:translateX(-.7px) rotateY(-90deg);border-radius:2px;background:linear-gradient(90deg,#242128,#50453d 9%,#17161c 22%,#17161c 78%,#50453d 91%,#242128);box-shadow:none;overflow:hidden;backface-visibility:hidden}
.steel-spine span{position:relative;display:block;writing-mode:vertical-rl;white-space:nowrap;font-family:Arial,sans-serif;font-size:8px;letter-spacing:.55px;font-weight:700;color:#f2ede4;line-height:1.2;text-shadow:0 1px 1px #000}
@media(max-width:760px){.steel-spine span,.scene-wrap.is-open .steel-spine span{font-size:6px;letter-spacing:.3px}}

/* Small static edge mesh; only the parent transform animates during rotation. */
.light-rim{position:absolute;display:block;background:#948773;border:0;outline:0;box-shadow:none;backface-visibility:visible;pointer-events:none}
.metal-sheen{--light-angle:115deg;--shine:.38}

/* Original photographed spine, including the printed title and both logos. */
.steel-spine{background:#15151a;border-radius:2px}
.texture-spine{inset:0;border-radius:1px;background:#15151a}
.texture-spine.projected{filter:brightness(1.06);border-radius:1px}

/* Restore the clean, typeset spine instead of the stretched photographic strip. */
.steel-spine{background:linear-gradient(90deg,#242128,#50453d 9%,#17161c 22%,#17161c 78%,#50453d 91%,#242128);border-radius:2px;box-shadow:none}
.steel-spine span{font-family:Arial,sans-serif;font-size:8px;letter-spacing:.55px;font-weight:700;color:#f2ede4;line-height:1.2;text-shadow:0 1px 1px #000}
@media(max-width:760px){.steel-spine span,.scene-wrap.is-open .steel-spine span{font-size:6px;letter-spacing:.3px}}

/* SteelBook plastic core: distinct central spine, with a hinge on either side. */
.steel-lid{transform:translateX(calc(-1*var(--spine-spread,0px))) rotateY(var(--lid-angle,0deg))}
.inner-spine{position:absolute;left:-24px;top:12px;width:24px;height:calc(var(--h) - 24px);transform:translateZ(-.8px) scaleX(var(--spine-visible,0));transform-origin:right center;backface-visibility:hidden;overflow:hidden;border-radius:2px;background:#101528;opacity:var(--spine-visible,0);box-shadow:inset 2px 0 2px #c4d2dd55,inset -2px 0 2px #c4d2dd55}
.inner-spine:after{content:'';position:absolute;inset:0;border-left:2px solid #b4c4d24d;border-right:2px solid #b4c4d24d;background:linear-gradient(90deg,#e6f0ff12,transparent 25%,#070b1540 50%,transparent 75%,#e6f0ff12);pointer-events:none}
.texture-inner-spine{inset:0;border-radius:1px}
.texture-inner-left.projected,.texture-inner-right.projected{filter:brightness(1.02) contrast(1.02)}

/* External spine turns away from the interior as the centre hinge unfolds. */
.steel-spine{transform:translateX(-.7px) rotateY(calc(-90deg - var(--spine-visible,0)*90deg));backface-visibility:hidden}
.steel-spine span{backface-visibility:hidden}
.light-rim{overflow:hidden;background:#29252b}
.edge-art{display:block;width:100%;height:100%;pointer-events:none}
.light-rim:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#0002,transparent 40%,#ffffff18 60%,#0002);pointer-events:none}
.model-stage{touch-action:none}

/* Grip recess has a solid wall, never an alpha cutout through the case. */
.opening-backing{position:absolute;display:block;backface-visibility:visible;opacity:1;background:#24232a;border-radius:2px;pointer-events:none}

/* Centre the spread in the viewport and keep the outer spine behind its inner counterpart. */
.scene-wrap{left:50%;scale:1}
.steel-spine{width:calc(var(--depth) - var(--spine-visible,0)*4px);left:calc(var(--depth)/-2);transform:translateX(calc(-.7px - var(--spine-visible,0)*9.3px)) translateZ(calc(var(--spine-visible,0)*-3px)) rotateY(calc(-90deg - var(--spine-visible,0)*90deg));overflow:visible}
.steel-spine span{max-height:calc(var(--h) - 42px);font-size:7px;letter-spacing:.25px;flex-shrink:0;white-space:nowrap}
@media(max-width:760px){.steel-spine span,.scene-wrap.is-open .steel-spine span{font-size:5.5px;letter-spacing:.15px}}

/* Give the title more space alongside the rotating steelbook. */
.spec-tag{translate:110px 0}
@media(max-width:1050px){.spec-tag{translate:60px 0}}
@media(max-width:760px){.spec-tag{translate:0 0}}

/* Render the small spine lettering at four times its display size. */
.steel-spine span{position:absolute;left:50%;top:50%;font-size:28px;letter-spacing:1px;max-height:none;line-height:1.2;text-shadow:none;transform:translate(-50%,-50%) scale(.25);transform-origin:center;will-change:transform}
@media(max-width:760px){.steel-spine span,.scene-wrap.is-open .steel-spine span{font-size:22px;letter-spacing:.6px}}

/* Intrinsic 16x artwork retains fine letter detail in the 3D image layer. */
.steel-spine .spine-title{position:absolute;inset:0;margin:auto;display:block;width:16px;height:auto;max-height:calc(var(--h) - 42px);object-fit:contain;backface-visibility:hidden;pointer-events:none;image-rendering:auto}
@media(max-width:760px){.steel-spine .spine-title{width:12.5px}}