/* Monochrome cinematic intro. Shopping components live in styles.css. */
:root{--ink:#0c0c0c;--paper:#eeeeee;--lime:#e6e6e6;--line:#d0d0d0;--orange:#808080;--nav-height:68px}
html{scroll-padding-top:var(--nav-height)}
.preview-bar{background:#070707;color:#727272;height:28px;font-size:8px;border-bottom:1px solid #242424}
.preview-bar>span{font-size:8px}.preview-bar select{background:#070707;font-size:9px}
.header{height:var(--nav-height);background:#0a0a0a;color:#efefef;border-bottom:1px solid #262626;z-index:40}
.header nav{font-size:11px}.header nav a:after{height:1px}.bag-trigger #bag-count{background:#eeeeee;color:#111111}
.cinema{height:280svh;background:#050505;position:relative;--film-progress:0;isolation:isolate}
.cinema-viewport{height:calc(100svh - var(--nav-height));position:sticky;top:var(--nav-height);background:#050505;overflow:hidden;color:#f0f0f0;isolation:isolate;perspective:1500px}
.cinema-camera{position:absolute;inset:0;transform-style:flat;will-change:transform;filter:blur(var(--orbit-blur,0px))}
.cinema-frame{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 48%;filter:grayscale(1);will-change:transform,opacity;backface-visibility:hidden}
.frame-a{z-index:0;opacity:1}.frame-b{z-index:1;opacity:0}.frame-c{z-index:2;opacity:0}
.cinema-shade{position:absolute;inset:0;background:linear-gradient(90deg,#00000099,transparent 32%,transparent 80%,#00000033),linear-gradient(0deg,#000000dd,transparent 24%,transparent 81%,#00000088);pointer-events:none;z-index:3}
.cinema-grain{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:.11;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.5' filter='url(%23g)'/%3E%3C/svg%3E")}
.cinema-topline{position:absolute;left:3vw;right:3vw;top:24px;z-index:6;display:flex;align-items:center;justify-content:space-between;font-size:9px;letter-spacing:.09em;font-weight:500}
.cinema-topline>span{display:flex;align-items:center;gap:10px}.cinema-topline i{height:5px;width:5px;background:var(--orange);border-radius:50%}
.cinema-topline a{font-size:8px;color:#b2b2b2}.cinema-topline a span{font-size:17px;margin-left:10px}
.cinema-opening{position:absolute;left:5vw;bottom:120px;z-index:5;max-width:28%;will-change:opacity,transform}
.cinema-opening .eyebrow{font-size:8px;color:#bbbbbb;letter-spacing:.11em;margin-bottom:18px}
.cinema-opening h1{font-size:clamp(78px,8.2vw,136px);line-height:.82;letter-spacing:-.025em;font-weight:800;margin:0;color:var(--paper)}
.cinema-opening p{font-size:11px;line-height:1.6;margin-top:22px;color:#a9a9a9;max-width:230px}
.cinema-dates{display:block;font-size:9px;font-weight:600;letter-spacing:.12em;margin-top:24px;color:#eeeeee}
.cinema-dates:before{content:'';display:inline-block;width:22px;height:1px;background:var(--orange);vertical-align:middle;margin-right:10px}
.cinema-turn{display:none;position:absolute;z-index:5;right:9%;top:24%;font-size:8px;letter-spacing:.15em;opacity:0;color:#bbbbbb;pointer-events:none;will-change:opacity,transform}
.cinema-turn strong{display:block;font-size:63px;font-family:Arial,sans-serif;font-weight:400;margin-top:10px;color:var(--orange)}
.cinema-reveal{position:absolute;right:8vw;top:15%;z-index:5;opacity:0;pointer-events:none;will-change:transform,opacity}
.cinema-reveal .eyebrow{font-size:8px;letter-spacing:.14em;color:#b5b5b5;margin-bottom:14px}
.cinema-reveal h2{font-size:clamp(72px,8vw,132px);font-weight:800;line-height:.83;letter-spacing:-.025em}
.cinema-shop{font-size:9px;display:inline-flex;align-items:center;justify-content:space-between;gap:40px;border-bottom:1px solid #737373;padding:17px 0 10px;margin-top:10px;pointer-events:auto}
.cinema-shop span{font-size:24px;color:var(--orange)}
.cinema-rail{position:absolute;right:3vw;top:39%;height:150px;display:flex;flex-direction:column;align-items:center;gap:13px;z-index:6;font-size:8px;color:#9c9c9c}
.cinema-rail>div{height:100%;width:1px;background:#ffffff25;position:relative}.cinema-rail i{position:absolute;width:1px;height:calc(var(--film-progress)*100%);background:var(--orange);top:0;left:0}
.cinema-bottom{position:absolute;left:3vw;right:3vw;bottom:23px;z-index:7;display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid #ffffff30;padding-top:17px}
.shot-tabs{display:flex;gap:22px}.shot-tabs button{background:none;padding:6px 0;color:#787878;font-size:8px;letter-spacing:.08em;display:flex;gap:9px;align-items:center;min-height:28px}.shot-tabs button.active{color:#eeeeee}.shot-tabs button.active:before{content:'';height:4px;width:4px;background:var(--orange);border-radius:50%}.shot-tabs button span{font-size:7px;letter-spacing:.055em}
.scroll-cue{display:flex;align-items:center;gap:12px;font-size:8px;letter-spacing:.12em;color:#c0c0c0}.scroll-cue>span{font-size:17px}.scroll-cue>i{height:18px;width:1px;background:linear-gradient(0deg,var(--orange),transparent);animation:scroll-breathe 2s ease-in-out infinite}
.cinema-save{background:none;color:#b9b9b9;font-size:8px;letter-spacing:.05em;padding:9px 0;display:flex;align-items:center;gap:14px}.cinema-save>span{font-size:17px;color:var(--orange)}
.cinema-viewport[data-shot="2"] .scroll-cue{color:#848484}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@keyframes scroll-breathe{50%{opacity:.3;transform:translateY(4px)}}
@media(min-width:1600px){.cinema-opening{bottom:155px}.cinema-topline{top:31px}}
@media(max-width:1050px){.cinema-opening{left:4vw;max-width:28%;bottom:105px}.cinema-opening h1{font-size:85px}.cinema-opening p{font-size:10px}.shot-tabs{gap:14px}.shot-tabs button{gap:6px}.shot-tabs button span{font-size:6px}.cinema-save{font-size:7px;gap:8px}.cinema-bottom{gap:14px}.scroll-cue{font-size:7px;gap:8px}.cinema-rail{height:120px}.cinema-reveal{right:8vw;top:16%}}
@media(max-width:760px){:root{--nav-height:60px}.preview-bar{height:26px}.header{padding:0 20px}.header nav{top:60px;background:#0a0a0a;border-color:#333333}.cinema{height:250svh}.cinema-topline{left:20px;right:20px;top:20px;font-size:8px}.cinema-topline a{font-size:7px}.cinema-opening{left:22px;bottom:107px;max-width:70%;text-shadow:0 2px 25px #00000099}.cinema-opening .eyebrow{font-size:7px;margin-bottom:13px}.cinema-opening h1{font-size:82px;line-height:.82}.cinema-opening p{display:none}.cinema-dates{font-size:8px;margin-top:18px}.cinema-shade{background:linear-gradient(0deg,#000000ee,transparent 55%,#00000044),linear-gradient(90deg,#00000044,transparent 40%)}.cinema-frame{object-position:50% 45%}.frame-b{object-position:56% 45%}.frame-c{object-position:63% 45%}.cinema-bottom{left:20px;right:20px;bottom:19px;padding-top:14px;gap:10px;align-items:center}.shot-tabs{gap:13px}.shot-tabs button{font-size:8px;gap:6px;padding:8px 0}.shot-tabs button span{display:none}.scroll-cue{font-size:7px;gap:8px}.scroll-cue i{height:15px}.cinema-save{font-size:6px;gap:8px}.cinema-save span{font-size:15px}.cinema-rail{right:20px;top:35%;height:105px;font-size:7px;gap:9px}.cinema-reveal{left:22px;right:auto;top:15%;max-width:80%;text-shadow:0 2px 22px #00000088}.cinema-reveal h2{font-size:84px}.cinema-reveal .eyebrow{font-size:7px}.cinema-shop{font-size:8px;gap:30px}.cinema-turn{top:19%;right:24%;font-size:7px}.cinema-turn strong{font-size:48px}.ticker{height:28px}.closing-button{background:none}.prize-stage{transform:rotate(1deg)}}
@media(max-width:760px){.frame-b,.frame-c{object-fit:contain;object-position:50% 58%;width:120%;left:-10%;background:#050505}}
@media(max-width:370px){.cinema-opening h1{font-size:72px}.cinema-save{font-size:5px}.scroll-cue{font-size:6px}.shot-tabs{gap:10px}.cinema-reveal h2{font-size:73px}}
@media(prefers-reduced-motion:reduce){.cinema-camera,.cinema-frame{will-change:auto}.scroll-cue i{animation:none}}