*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#101115;color:#eee}body{font-family:Arial,sans-serif;background-image:url('assets/noise.gif');background-repeat:repeat;background-size:200px 200px;touch-action:none}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}button:focus-visible{outline:1px solid white;outline-offset:8px}#world{position:fixed;inset:0;overflow:hidden;cursor:grab}#world.dragging{cursor:grabbing}.scene{position:absolute;inset:0;pointer-events:none;will-change:transform;isolation:isolate}.layer{position:absolute;will-change:transform;user-select:none;-webkit-user-drag:none}.scene img:not(.logo){filter:grayscale(1) contrast(1.08);object-fit:contain}.logo{width:59%;left:20.5%;top:37%;filter:drop-shadow(0 6px 24px #000);z-index:5}.invitation{top:66%;left:0;width:100%;text-align:center}.invitation p{font-size:12px;letter-spacing:.25em;color:#c4c4c8;margin-top:20px}.scroll-cue{display:flex;gap:27px;align-items:center;justify-content:center;font-size:26px;color:#bcbcc2}.scroll-cue i{width:35px;height:1px;background:#999;position:relative}.scroll-cue i:after{content:'';position:absolute;top:-3px;width:7px;height:7px;background:white;border-radius:50%;animation:travel 2.2s ease-in-out infinite}@keyframes travel{0%,100%{left:0;opacity:.4}50%{left:28px;opacity:1}}.skyline{width:68%;height:80%;left:-9%;bottom:-18%;object-position:bottom;z-index:1}.plane{width:67%;height:50%;left:10%;top:-7%;z-index:4}.wayne{width:57%;height:90%;right:-12%;bottom:-14%;object-position:bottom;z-index:6}.year{z-index:3;white-space:nowrap;text-shadow:0 0 9px #ffffff65,0 0 24px #ffffff30}.year h1{font-family:Impact,'Arial Narrow',sans-serif;font-stretch:condensed;font-weight:400;font-size:clamp(90px,14vw,210px);letter-spacing:.13em;line-height:1;margin:0}.year p{font-family:'Arial Narrow',Arial,sans-serif;font-size:clamp(14px,1.9vw,28px);margin:12px 0 0;letter-spacing:-.035em}.year-one{left:32%;top:41%}.cube{width:68%;height:88%;left:12%;top:12%;z-index:2}.deadmau5{width:64%;height:98%;left:28%;bottom:-13%;z-index:4}.city{width:50%;height:80%;right:-18%;bottom:-19%;z-index:1}.lamp{height:130%;width:52%;left:-20%;bottom:-32%;z-index:6;object-position:bottom}.year-two{left:13%;top:61%;z-index:5}header{position:fixed;top:28px;left:32px;right:32px;display:flex;align-items:center;justify-content:space-between;z-index:30;pointer-events:none}header button{pointer-events:auto;padding:0}header img{width:110px}header span{font-size:12px;letter-spacing:.2em;color:#a9a9b0}footer{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);z-index:30;display:flex;align-items:center;gap:28px}footer>button{font-size:30px;width:38px;height:44px;color:#c9c9cf}nav{display:flex;gap:28px}nav button{font-size:12px;letter-spacing:.12em;color:#8f8f96;padding:10px 0;border-bottom:1px solid transparent}nav button.active{color:white;border-color:#ddd}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}@media(max-width:650px){header{top:22px;left:22px;right:22px}header img{width:85px}.logo{width:82%;left:9%;top:41%}.invitation{top:62%}.skyline{width:120%;left:-39%;bottom:-10%;height:68%}.plane{width:104%;left:-12%;height:40%;top:3%}.wayne{width:100%;height:70%;right:-39%;bottom:-5%}.year-one{left:14%;top:39%}.year h1{font-size:100px}.year p{font-size:15px;max-width:240px;white-space:normal}.cube{width:110%;left:-20%;height:78%;top:17%}.deadmau5{width:102%;height:81%;left:7%;bottom:-9%}.year-two{left:9%;top:63%}.lamp{width:82%;left:-46%;height:100%;bottom:-20%}.city{width:80%;right:-42%}footer{bottom:22px;gap:14px}nav{gap:24px}}@media(prefers-reduced-motion:reduce){.scroll-cue i:after{animation:none;left:14px}}
.skyline{height:auto;bottom:-12%}.plane{height:auto;top:-8%}.wayne{height:auto;bottom:-13%;right:-10%;width:60%}.cube{height:auto;top:19%;width:75%;left:9%}.deadmau5{height:auto;width:67%;left:26%;bottom:-16%}@media(max-aspect-ratio:1/1){.skyline{width:100%;left:-25%;bottom:-7%}.plane{width:94%;left:1%;top:5%}.wayne{width:90%;right:-27%;bottom:-9%}.year-one{left:20%;top:40%}.cube{width:125%;left:-22%;top:32%}.deadmau5{width:103%;left:10%;bottom:-2%}.year-two{left:9%;top:63%}.city{bottom:-8%}.lamp{left:-25%;bottom:-25%}.logo{top:40%;width:80%;left:10%}}
/* Native-size grain gently affects artwork without obscuring it. */ #world::after{content:"";position:absolute;inset:0;background-image:url("assets/noise.gif");background-repeat:repeat;background-size:200px 200px;mix-blend-mode:screen;opacity:.13;pointer-events:none;z-index:20}
/* Stronger film grain across the artwork. */ #world::after{mix-blend-mode:soft-light;opacity:.65;filter:grayscale(1) brightness(8) contrast(2)}

/* Give grain an opaque backdrop so blending cannot become a grey veil. */ #world{isolation:isolate;background:#101115 url("assets/noise.gif") repeat;background-size:200px 200px} #world::after{mix-blend-mode:soft-light;opacity:.32;filter:grayscale(1) brightness(8) contrast(2)}

@font-face{font-family:Tallica;src:url("assets/tallica-medium.woff2") format("woff2");font-style:normal;font-weight:500;font-display:swap}.year-type{transform:scale(.8,.55);transform-origin:top left}.year h1,.year p{font-family:Tallica,sans-serif;font-weight:500;color:#e9e9e9;text-shadow:0 -1px 0 #fff,1px 1px 0 #aaa,2px 2px 0 #777,3px 3px 0 #454545,4px 5px 7px #0009,0 0 12px #ffffff50,0 0 28px #ffffff25}.year h1{letter-spacing:.13em}.year p{letter-spacing:0}
.year-type{display:inline-block;text-align:center}.year h1,.year p{font-style:normal;font-synthesis:none;transform:skewX(9deg);transform-origin:center}.year h1{font-size:clamp(180px,28vw,420px)}.year p{font-size:clamp(28px,3.8vw,56px);margin:18px 0 0;max-width:none;white-space:nowrap;text-align:center}.year h1,.year p{text-shadow:0 -2px 0 #fff,1px 2px 0 #bdbdbd,2px 3px 0 #999,3px 4px 0 #777,4px 5px 0 #555,5px 7px 0 #333,7px 10px 10px #000a,0 0 16px #ffffffb0,0 0 40px #ffffff75,0 0 75px #ffffff40}.year-two h1,.year-two p{color:#da0001;text-shadow:0 -2px 0 #ff8585,1px 2px 0 #a60001,2px 3px 0 #840001,3px 4px 0 #650001,4px 5px 0 #480001,5px 7px 0 #300001,7px 10px 10px #000a,0 0 16px #da0001c0,0 0 40px #da000180,0 0 75px #da000150}@media(max-width:650px){.year h1{font-size:200px}.year p{font-size:30px}}
/* Shared motion and centered type; independent treatments within one layer. */ .year-type{display:flex;flex-direction:column;align-items:center;width:max-content;text-align:center}.year h1,.year-two h1{color:#da0001;text-shadow:0 -1px 0 #ff7070,1px 2px 0 #a60001,2px 3px 0 #700001,3px 4px 0 #460001,5px 7px 8px #0008,0 0 24px #da0001d0,0 0 55px #da0001a0,0 0 95px #da000170}.year p,.year-two p{font-size:clamp(34px,4.5vw,66px);letter-spacing:.075em;line-height:1.2;margin:26px 0 0;color:#fa3035;text-shadow:0 -1px 0 #ff7275,1px 1px 0 #900001,0 0 18px #da000175,0 0 42px #da000160,0 0 75px #da000145}@media(max-width:650px){.year p,.year-two p{font-size:36px;letter-spacing:.055em}}
.year,.year-two{z-index:7}
.year-type{display:grid;grid-template-columns:max-content;justify-items:center}.year h1,.year p{margin-left:0;margin-right:0;transform:skewX(9deg);transform-origin:center center}.year h1,.year-two h1{color:#da0001;text-indent:.13em;text-shadow:0 -1px 0 #ff6060,1px 2px 0 #a60001,2px 3px 0 #700001,3px 4px 0 #460001,4px 6px 7px #0008;filter:drop-shadow(0 0 16px #da000140) drop-shadow(0 0 42px #da000160) drop-shadow(0 0 85px #da000145)}.year p,.year-two p{color:#da0001;letter-spacing:.11em;text-indent:.11em;text-align:center;justify-self:center;text-shadow:0 -1px 0 #ed3334,1px 1px 0 #900001,0 0 24px #da000150,0 0 55px #da000135}@media(max-width:650px){.year p,.year-two p{letter-spacing:.11em}}
.year h1,.year-two h1{filter:drop-shadow(0 0 12px #da000125) drop-shadow(0 0 32px #da000135) drop-shadow(0 0 65px #da000125)}.year p,.year-two p{margin-top:65px}.year-one{z-index:3}.cube{width:105%;height:auto;left:-2.5%;top:50%;translate:0 -50%}@media(max-aspect-ratio:1/1){.cube{width:155%;left:-27.5%;top:50%}}
.performer-base{display:block;width:100%;height:auto}.helmet-color{position:absolute;inset:0;pointer-events:none;animation:helmet-hues 10s linear infinite;filter:drop-shadow(0 0 5px #65ff23) drop-shadow(0 0 16px #65ff2380)}.scene img.helmet-lights{position:absolute;inset:0;width:100%;height:100%;filter:saturate(1.5);mask-image:url("assets/helmet-mask.svg");mask-size:100% 100%;mask-repeat:no-repeat}@keyframes helmet-hues{from{filter:drop-shadow(0 0 5px #65ff23) drop-shadow(0 0 16px #65ff2380) hue-rotate(0deg)}to{filter:drop-shadow(0 0 5px #65ff23) drop-shadow(0 0 16px #65ff2380) hue-rotate(360deg)}}@media(prefers-reduced-motion:reduce){.helmet-color{animation:none}}
.helmet-color{animation:helmet-club-hues 2s linear infinite,helmet-club-pulse .8s ease-in-out infinite}@keyframes helmet-club-hues{from{filter:drop-shadow(0 0 8px #65ff23) drop-shadow(0 0 24px #65ff23cc) drop-shadow(0 0 48px #65ff2399) hue-rotate(0deg)}to{filter:drop-shadow(0 0 8px #65ff23) drop-shadow(0 0 24px #65ff23cc) drop-shadow(0 0 48px #65ff2399) hue-rotate(360deg)}}@keyframes helmet-club-pulse{0%,100%{opacity:.75}35%{opacity:1}65%{opacity:.9}}.scene img.helmet-lights{animation:helmet-brightness .8s ease-in-out infinite}@keyframes helmet-brightness{0%,100%{filter:saturate(1.8) brightness(1.1)}35%{filter:saturate(2) brightness(1.8)}65%{filter:saturate(1.8) brightness(1.25)}}@media(prefers-reduced-motion:reduce){.helmet-color,.scene img.helmet-lights{animation:none}.helmet-color{filter:drop-shadow(0 0 8px #65ff23) drop-shadow(0 0 24px #65ff2380)}}
.lamp{height:96vh;width:96vh;left:calc(75% - 48vh);right:auto;top:2vh;bottom:auto;z-index:15}.lamp>img{display:block;width:100%;height:100%;object-fit:contain}.tungsten{position:absolute;top:3.1%;width:4.5%;height:1.7%;border-radius:50%;background:#ffe7b3;box-shadow:0 0 7px 3px #ffd18c,0 0 25px 12px #ffaf5866,0 0 70px 28px #ffa34b33;filter:blur(1px);animation:tungsten-flicker 3.7s linear infinite;mix-blend-mode:screen}.tungsten-left{left:15.3%}.tungsten-right{left:80.8%;animation-duration:4.3s;animation-delay:-1.4s}@keyframes tungsten-flicker{0%,18%,22%,56%,60%,100%{opacity:.85}19%,58%{opacity:.35}20%,59%{opacity:1}37%,79%{opacity:.65}40%,83%{opacity:.95}}@media(max-aspect-ratio:1/1){.lamp{height:96vh;width:96vh;left:calc(78% - 48vh);top:2vh;bottom:auto}}@media(prefers-reduced-motion:reduce){.tungsten{animation:none;opacity:.85}}
.lamp{top:auto;bottom:-1vh;transform-origin:50% 100%}.tungsten{background:#fff397;box-shadow:0 0 8px 4px #ffe438,0 0 30px 15px #ffd40099,0 0 80px 35px #ffca0055}.tungsten::after{content:"";position:absolute;pointer-events:none;width:clamp(180px,32vh,460px);height:65vh;left:50%;top:0;transform:translateX(-50%);background:radial-gradient(ellipse at 50% 0%,#ffdb0040 0%,#ffc80020 30%,#ffc00008 60%,transparent 78%);filter:blur(18px);mix-blend-mode:screen}@media(max-aspect-ratio:1/1){.lamp{top:auto;bottom:-1vh}}
.lamp{left:calc(94% - 48vh)}.tungsten::after{width:clamp(200px,45vh,550px);height:72vh;clip-path:polygon(47% 0,53% 0,100% 100%,0 100%);background:linear-gradient(to bottom,#ffdb0050 0%,#ffd00028 32%,#ffc00010 65%,transparent 100%);filter:blur(14px);mask-image:linear-gradient(to right,transparent,#000 22%,#000 78%,transparent)}@media(max-aspect-ratio:1/1){.lamp{left:calc(96% - 48vh)}}
.tungsten::after{clip-path:none;background:#ffd00055;mask-image:url("assets/light-falloff.svg");mask-size:100% 100%;mask-repeat:no-repeat;filter:blur(16px)}
.tour-city{height:auto;transform-origin:center bottom}.tour-houston{width:70%;left:-12%;bottom:0;z-index:0;opacity:.6}.tour-atlanta{width:52%;left:-24%;bottom:-4%;z-index:1}.tour-chicago{width:62%;left:44%;bottom:-5%;z-index:1;opacity:.75}.tour-washington{width:39%;left:20%;bottom:-3%;z-index:2}@media(max-aspect-ratio:1/1){.tour-houston{width:125%;left:-35%;bottom:0}.tour-atlanta{width:100%;left:-63%;bottom:-2%}.tour-chicago{width:115%;left:27%;bottom:-3%}.tour-washington{width:70%;left:5%;bottom:0}}
.tour-city>img{display:block;width:100%;height:auto}.tour-houston{width:90%;left:-18%}.tour-chicago{width:88%;left:57%}.tour-washington{bottom:0;translate:0 6%;transform-origin:50% 94%}.city-windows{position:absolute;inset:0;pointer-events:none}.city-window{position:absolute;width:2px;height:3px;background:#fff;box-shadow:0 0 3px #ffffff60;opacity:0;animation:city-window-life var(--duration) linear infinite;animation-delay:var(--delay)}@keyframes city-window-life{0%,23%,30%,74%,100%{opacity:0}25%,28%{opacity:.55}76%,89%{opacity:.35}91%{opacity:0}}.moon{width:6%;height:auto;left:18%;top:10%;z-index:0;opacity:.32;filter:grayscale(1) drop-shadow(0 0 8px #ffffff15)!important}@media(max-aspect-ratio:1/1){.tour-houston{width:150%;left:-48%}.tour-chicago{width:145%;left:48%}.tour-washington{bottom:0;translate:0 6%}.moon{width:12%;left:12%;top:15%}}@media(prefers-reduced-motion:reduce){.city-window{animation:none}}
/* Gentle flight continues independently of scroll parallax. */
.plane{animation:plane-float 8s ease-in-out infinite;transform-origin:50% 50%}
@keyframes plane-float{0%,100%{translate:0 0;rotate:-.35deg}50%{translate:10px 14px;rotate:.35deg}}
.moon{width:12%}
.year-one{left:26%}
.year-two{left:7%;z-index:3}
@media(max-width:650px){.year-one{left:8%}.year-two{left:3%}}
@media(max-aspect-ratio:1/1){.moon{width:24%}.year-one{left:14%}.year-two{left:3%}}
@media(prefers-reduced-motion:reduce){.plane{animation:none}}
.plane{top:-20%}@media(max-aspect-ratio:1/1){.plane{top:0}}
/* Compose by viewport height as well as width, keeping desktop subjects contained. */
.plane{width:min(58vw,82vh);left:8%;top:3%;height:auto}
.wayne{width:min(60vw,88vh);height:auto;right:-3%;bottom:0;transform-origin:50% 100%}
.deadmau5{transform-origin:50% 100%}
.tour-houston{width:min(76vw,140vh);opacity:1}
.tour-atlanta{width:min(44vw,90vh)}
.tour-chicago{width:min(72vw,132vh);opacity:1}
.tour-washington{width:min(34vw,70vh)}
.scene .tour-houston>img{filter:grayscale(1) contrast(1.08) brightness(.6)}
.scene .tour-chicago>img{filter:grayscale(1) contrast(1.08) brightness(.75)}
.moon{left:10%;top:4%;z-index:-1}
/* Six solid textured faces; inner rotation leaves outer scroll motion independent. */
.cube{--cube-size:min(40vw,58vh);width:var(--cube-size);height:var(--cube-size);left:50%;top:50%;translate:-50% -50%;z-index:2}
.cube-stage{width:100%;height:100%;perspective:1600px;overflow:visible}
.cube-rotator,.cube-solid{width:100%;height:100%;transform-style:preserve-3d}
.cube-rotator{transform:rotateX(-14deg)}
.cube-solid{animation:cube-turn 48s linear infinite;will-change:transform}
.cube-face{position:absolute;inset:0;display:block;background:#080a0b url('assets/cube-face.png') center/100% 100%;backface-visibility:hidden}
.cube-face.front{transform:translateZ(calc(var(--cube-size)/2))}
.cube-face.back{transform:rotateY(180deg) translateZ(calc(var(--cube-size)/2))}
.cube-face.right{transform:rotateY(90deg) translateZ(calc(var(--cube-size)/2))}
.cube-face.left{transform:rotateY(-90deg) translateZ(calc(var(--cube-size)/2))}
.cube-face.top{transform:rotateX(90deg) translateZ(calc(var(--cube-size)/2))}
.cube-face.bottom{transform:rotateX(-90deg) translateZ(calc(var(--cube-size)/2))}
.cube-face::after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 0 1px #a4b0b540;background:linear-gradient(135deg,#ffffff08,#00000030)}
@keyframes cube-turn{from{transform:rotateY(-35deg)}to{transform:rotateY(325deg)}}
@media(max-aspect-ratio:1/1){
 .plane{width:94%;left:1%;top:0}
 .wayne{width:min(124vw,64svh);right:-22%;bottom:0}
 .deadmau5{width:min(180vw,105svh);left:-40%;bottom:-.7vh}
 .tour-houston{width:160%;left:-48%}
 .tour-atlanta{width:110%;left:-63%}
 .tour-chicago{width:155%;left:48%}
 .tour-washington{width:76%;left:5%}
 .moon{left:7%;top:7%}
 .cube{--cube-size:min(65vw,42svh);left:50%;top:52%}
}
@media(prefers-reduced-motion:reduce){.cube-solid{animation:none;transform:rotateY(-35deg)}}
/* Compact older scenes and let the city dissolve before the festival settles. */
.wayne{width:min(54vw,79vh);right:0}
.cube{--cube-size:min(33vw,48vh)}
.tour-houston{width:min(64vw,118vh);left:-7%}
.tour-atlanta{width:min(36vw,75vh);left:-9%}
.tour-chicago{width:min(55vw,100vh);left:48%}
.tour-washington{width:min(30vw,62vh);left:24%}
.basketball-scene .arena{width:100%;height:auto;left:0;bottom:0;z-index:0;opacity:.5}
.arena-light{width:24%;height:90%;top:-10%;z-index:1;filter:blur(20px);transform-origin:50% 0%;background:radial-gradient(ellipse at 50% 0%,#e0edff25,transparent 65%);animation:arena-sweep 12s ease-in-out infinite;mix-blend-mode:screen}
.light-a{left:15%}.light-b{right:15%;animation-delay:-6s}
@keyframes arena-sweep{0%,100%{rotate:-13deg;opacity:.4}50%{rotate:13deg;opacity:.8}}
.nba-player{height:auto;transform-origin:50% 100%}
.harden{width:min(21vw,31vh);left:1%;bottom:-5%;z-index:4}
.lebron{width:min(23vw,43vh);right:0;bottom:-9%;z-index:4}
.kd{width:min(22vw,30vh);left:40%;top:1%;z-index:2}
.giannis{width:min(23vw,34vh);left:17%;bottom:-7%;z-index:5}
.kyrie{width:min(20vw,28vh);left:34%;bottom:-13%;z-index:6}
.steph{width:min(27vw,40vh);right:14%;bottom:-8%;z-index:5}
.scene img.nba-logo{width:min(50vw,82vh);left:50%;top:48%;translate:-50% -50%;z-index:12;filter:drop-shadow(0 0 14px #d9ecff50) drop-shadow(0 0 38px #d9ecff35) drop-shadow(0 0 75px #d9ecff20)}
.scene img.basketball{width:min(20vw,29vh);left:48%;bottom:-3%;z-index:14;filter:grayscale(1) contrast(1.08) drop-shadow(0 12px 18px #0009);transform-origin:center}
.birds{width:23%;aspect-ratio:5/1;overflow:hidden;z-index:2;opacity:.6;animation:birds-drift 13s ease-in-out infinite}
.birds img{display:block;width:100%;height:auto;translate:0 -38%}
.birds-a{left:6%;top:7%}.birds-b{right:6%;top:11%;animation-delay:-5s;scale:-1 1}
@keyframes birds-drift{0%,100%{translate:0 0}50%{translate:22px -10px}}
@media(max-aspect-ratio:1/1){
 .wayne{width:min(124vw,64svh);right:-22%;bottom:0}
 .cube{--cube-size:min(65vw,42svh)}
 .deadmau5{width:min(156vw,91svh);left:-30%;bottom:-13vh}
 .tour-houston{width:125%;left:-30%}
 .tour-atlanta{width:83%;left:-35%}
 .tour-chicago{width:92%;left:38%}
 .tour-washington{width:62%;left:7%}
 .year-one{left:-8%;top:27%}.year-two{left:-14%;top:32%}
 .year p,.year-two p{font-size:30px;letter-spacing:.08em;text-indent:.08em;margin-top:48px}
 .basketball-scene .arena{width:180%;left:-40%;height:100%;object-fit:cover;object-position:center bottom;opacity:.35}
 .harden{width:38%;left:-9%;bottom:13%}
 .lebron{width:45%;right:-13%;bottom:12%}
 .kd{width:44%;left:30%;top:5%}
 .giannis{width:46%;left:-8%;bottom:-3%}
 .kyrie{width:43%;left:20%;bottom:-6%}
 .steph{width:54%;right:-8%;bottom:0}
 .scene img.nba-logo{width:94%;top:44%;left:50%}
 .scene img.basketball{width:41%;left:43%;bottom:2%}
 .birds{width:35%}.birds-a{left:0%;top:4%}.birds-b{right:-3%;top:21%}
 footer{gap:9px;width:max-content;max-width:98%}nav{gap:15px}nav button{font-size:10px;letter-spacing:.05em}
}
@media(prefers-reduced-motion:reduce){.arena-light,.birds{animation:none}}
.moon{opacity:calc(.32 * var(--scene-fade,1))}.basketball-scene .arena{opacity:calc(.5 * var(--scene-fade,1))}.kd{width:min(26vw,36vh);left:38%;top:-1%}@media(max-aspect-ratio:1/1){.basketball-scene .arena{opacity:calc(.35 * var(--scene-fade,1))}.kd{width:44%;left:30%;top:5%}}
@media(max-aspect-ratio:1/1){.year-one{left:4%;top:27%}.year-two{left:4%;top:29%}.deadmau5{bottom:-9vh}}
/* Physical collage overlap replaces all scroll-based opacity transitions. */
.moon{opacity:.32}
.basketball-scene .arena{width:125%;left:-12.5%;height:auto;bottom:0;opacity:.65;mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);mask-repeat:no-repeat;mask-size:100% 100%}
.arena-pillar{width:5%;height:100%;bottom:0;z-index:3;background:linear-gradient(90deg,#070809,#272b2f 28%,#101215 42%,#050607 80%);box-shadow:0 0 35px 18px #08090bd0;clip-path:polygon(12% 0,85% 0,100% 100%,0 100%)}
.arena-pillar::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(165deg,transparent 0 65px,#41474c55 66px 72px,transparent 73px 120px)}
.pillar-a{left:-3%}.pillar-b{right:-3%}
.arena-light{width:35%;height:115%;top:-14%;filter:blur(25px);background:radial-gradient(ellipse at 50% 0%,#e0edff70 0%,#bfd9ff25 35%,transparent 72%)}
@keyframes arena-sweep{0%,100%{rotate:-20deg;opacity:.65}50%{rotate:20deg;opacity:1}}
.nba-player:not(.kd){bottom:0;transform-origin:50% 100%}
.kd{animation:kd-float 6.5s ease-in-out infinite;transform-origin:50% 50%}
@keyframes kd-float{0%,100%{translate:-8px 5px;rotate:-.8deg}50%{translate:12px -26px;rotate:.8deg}}
.basketball{width:min(20vw,29vh);height:auto;aspect-ratio:1;left:48%;bottom:0;z-index:14;transform-origin:center;rotate:none}
.basketball>img{display:block;width:100%;height:auto;transform-origin:50% 50%;will-change:transform;filter:grayscale(1) contrast(1.08) drop-shadow(0 12px 18px #0009)}
.tour-chicago{width:min(48vw,90vh);left:40%}
@media(max-aspect-ratio:1/1){
 .basketball-scene{width:180vw;left:-40vw}
 .basketball-scene .arena{width:130%;height:100%;left:-15%;object-fit:cover;object-position:center bottom;opacity:.65}
 .arena-pillar{width:5vw}.pillar-a{left:0}.pillar-b{right:0}
 .harden{width:38vw;left:15%;bottom:0}
 .lebron{width:45vw;right:12%;bottom:0}
 .giannis{width:46vw;left:23%;bottom:0}
 .kyrie{width:43vw;left:43%;bottom:0}
 .steph{width:54vw;right:19%;bottom:0}
 .kd{width:44vw;left:40%;top:8%}
 .scene img.nba-logo{width:94vw;left:50%;top:44%}
 .basketball{width:41vw;left:52%;bottom:0}
 .tour-chicago{width:92%;left:38%}
}
@media(prefers-reduced-motion:reduce){.kd{animation:none}}
.basketball-scene{z-index:1}.kd{top:5%}@media(max-aspect-ratio:1/1){.kd{top:8%}}
/* Shared collage depth: city silhouettes sit in front of arena architecture. */
.scene{isolation:auto;will-change:auto}
.basketball-scene{z-index:auto}
.tour-houston{width:min(76vw,140vh);left:-18%;z-index:1}
.tour-atlanta{width:min(44vw,90vh);left:-24%;z-index:2}
.tour-chicago{width:min(72vw,132vh);left:48%;z-index:2}
.tour-washington{width:min(34vw,70vh);left:20%;z-index:3}
.basketball-scene .arena{opacity:.65;mask-image:linear-gradient(to right,transparent 0%,#000 24%,#000 72%,transparent 100%);z-index:0}
/* Restore the initial player composition; compensate for transparent foot margins. */
.harden{width:min(21vw,31vh);left:1%;bottom:-3.5%}
.lebron{width:min(23vw,43vh);right:0;bottom:-11%}
.giannis{width:min(23vw,34vh);left:17%;bottom:0;translate:0 9.25%;z-index:13}
.kyrie{width:min(20vw,28vh);left:34%;bottom:0;translate:0 3.17%;z-index:13}
.steph{width:min(27vw,40vh);right:14%;bottom:0;translate:0 8.53%;z-index:13}
.kd{top:5%;animation:kd-float 8s ease-in-out infinite}
@keyframes kd-float{0%,100%{translate:-3px 2px;rotate:-.25deg}50%{translate:4px -9px;rotate:.25deg}}
.basketball{z-index:16}
.deadmau5{left:50%;translate:-53.5% 0}
@media(max-aspect-ratio:1/1){
 .tour-houston{width:125%;left:-30%}.tour-atlanta{width:83%;left:-35%}
 .tour-chicago{width:92%;left:38%}.tour-washington{width:62%;left:7%}
 .harden{width:38vw;left:15%;bottom:-3.5%}
 .lebron{width:45vw;right:12%;bottom:-6%}
 .giannis{width:46vw;left:23%;bottom:0}
 .kyrie{width:43vw;left:43%;bottom:0}
 .steph{width:54vw;right:19%;bottom:0}
 .kd{width:44vw;left:40%;top:8%}
 .deadmau5{left:50%;translate:-53.5% 0;bottom:-9vh}
}
@media(prefers-reduced-motion:reduce){.kd{animation:none}}
.nba-player.harden{bottom:-3.5%}.nba-player.lebron{bottom:-11%}@media(max-aspect-ratio:1/1){.nba-player.lebron{bottom:-6%}}
/* Keep the light source above the viewport throughout its swing. */
.arena-light{width:22%;height:220%;top:-65%;transform-origin:50% 30%;filter:blur(16px);background:linear-gradient(to bottom,transparent 0%,#d5e8ff55 28%,#cbdfff22 60%,transparent 100%);mask-image:linear-gradient(to right,transparent 0%,#000 43%,#000 57%,transparent 100%)}
@keyframes arena-sweep{0%,100%{rotate:-14deg;opacity:.65}50%{rotate:14deg;opacity:1}}
@media(max-aspect-ratio:1/1){
 .nba-player.lebron{right:7%}
 .giannis{width:53vw}.kyrie{width:50vw}.steph{width:60vw}
 .year-two{left:-2%}
 .lamp{left:calc(124% - 48vh)}
 .basketball-scene .arena{height:100%;object-fit:cover;object-position:center bottom}
}
/* Initial reveal waits for actual images, textures, font and vector animation. */
#loader{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#090a0c url('assets/noise.gif') repeat;background-size:200px 200px;color:#c4c4c8;transition:opacity .7s ease,visibility .7s}
.loader-mark{position:relative;color:#da0001;font-family:Arial,sans-serif;font-weight:900;font-size:clamp(48px,9vw,96px);letter-spacing:-.055em;text-shadow:0 0 30px #da000135,0 0 80px #da000120;padding:45px 30px}
.loader-light{position:absolute;inset:45px 30px;background:white;pointer-events:none;mask:url("assets/mfc-logo.svg") center/contain no-repeat;opacity:var(--loader-light-opacity,0);clip-path:polygon(calc(var(--loader-p,0)*140% - 32%) 0,calc(var(--loader-p,0)*140% - 25%) 0,calc(var(--loader-p,0)*140% - 45%) 100%,calc(var(--loader-p,0)*140% - 52%) 100%)}
.loader-caption{font-size:10px;letter-spacing:.32em;margin-top:22px}
.loader-track{width:170px;height:1px;background:#343439;margin-top:30px}
.loader-track i{display:block;height:1px;width:0;background:#da0001;box-shadow:0 0 10px #da000180;transition:width .2s}
#loader-progress{font-size:10px;font-variant-numeric:tabular-nums;letter-spacing:.12em;margin-top:13px;color:#777780}
#loader-retry{margin-top:22px;letter-spacing:.15em;font-size:11px;border:1px solid #da000180;padding:12px 18px}
body.is-loading #world,body.is-loading header,body.is-loading footer{visibility:hidden}
body.is-loading #world *{animation-play-state:paused!important}
body.is-ready #loader{opacity:0;visibility:hidden;pointer-events:none}
body.is-ready #world{animation:archive-reveal .8s ease}
@keyframes archive-reveal{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){body.is-ready #world{animation:none}.loader-light{display:none}#loader{transition:none}}
@media(max-aspect-ratio:1/1){.nba-player.lebron{right:10%}}
/* One larger central grandstand with a narrower footprint. */
.basketball-scene .arena{width:108%;left:-4%;opacity:.72}
.scene img.helmet-surface{position:absolute;inset:0;width:100%;height:100%;filter:grayscale(1) contrast(.94) brightness(1.04);mask-image:url('assets/helmet-shell.svg');mask-size:100% 100%;mask-repeat:no-repeat;pointer-events:none}
.helmet-color{mix-blend-mode:screen}
@media(max-aspect-ratio:1/1){
 .kyrie{width:56vw}
 .basketball-scene .arena{width:118%;left:-9%;height:100%;object-fit:cover;object-position:center bottom}
}
@media(max-aspect-ratio:1/1){.tour-city{scale:1 1.5}.nba-player.lebron{width:67.5vw}}
/* Independent light towers sit behind the crowd, outside the arena edge mask. */
.stadium-tower{width:19%;height:72%;bottom:20%;z-index:-1;pointer-events:none}
.stadium-tower-left{left:7%}.stadium-tower-right{right:7%}
.stadium-tower>img{width:100%;height:100%;object-fit:contain;object-position:center bottom;animation:stadium-shimmer 4.7s ease-in-out infinite}
.stadium-tower-right>img{scale:-1 1;animation-duration:5.9s;animation-delay:-2.1s}
@keyframes stadium-shimmer{0%,100%{filter:grayscale(1) brightness(1.12) drop-shadow(0 0 8px #ffffff25)}35%{filter:grayscale(1) brightness(1.28) drop-shadow(0 0 15px #ffffff45)}70%{filter:grayscale(1) brightness(1.17) drop-shadow(0 0 11px #ffffff30)}}
/* Keep the left hoop visible; spatially trim the right hoop before the city. */
.basketball-scene .arena{mask-image:linear-gradient(to right,transparent 0%,#000 3%,#000 72%,transparent 89%,transparent 100%)}
@media(max-aspect-ratio:1/1){.stadium-tower{width:25%;height:68%;bottom:22%}.stadium-tower-left{left:3%}.stadium-tower-right{right:3%}}
@media(prefers-reduced-motion:reduce){.stadium-tower>img{animation:none;filter:grayscale(1) brightness(1.2)}}
.basketball-scene img.arena{opacity:1;filter:grayscale(1) contrast(1.08) brightness(.72)}
/* Lamp shimmer is local to the light bank; the steel tower stays steady. */
.stadium-tower{width:22%;height:auto;aspect-ratio:2/3;bottom:24%;opacity:1;mask-image:none}
.stadium-tower>img{display:block;width:100%;height:auto;animation:none;filter:grayscale(1) brightness(1.16)!important}
.stadium-tower::after{content:'';position:absolute;left:21%;top:3%;width:54%;height:25%;background:radial-gradient(ellipse,#ffffff60 0%,#ffffff20 38%,transparent 72%);filter:blur(10px);mix-blend-mode:screen;pointer-events:none;animation:lamp-bank-shimmer 4.7s ease-in-out infinite}
.stadium-tower-right::after{animation-duration:5.9s;animation-delay:-2.1s}
@keyframes lamp-bank-shimmer{0%,100%{opacity:.45}32%{opacity:.72}64%{opacity:.52}82%{opacity:.64}}
@media(max-aspect-ratio:1/1){.stadium-tower{width:30%;height:auto;bottom:25%}}
@media(prefers-reduced-motion:reduce){.stadium-tower::after{animation:none;opacity:.55}}
/* Compact arena and staggered player silhouettes leave room for the city. */
.basketball-scene img.arena{width:92%;left:4%;height:auto;object-fit:contain;mask-image:none;bottom:0}
.nba-player.lebron{right:-6%}
.year-one{left:14%}.year-two{left:-10%}
@media(max-aspect-ratio:1/1){
 .basketball-scene img.arena{width:106%;left:-3%;height:auto;object-fit:contain}
 .nba-player.harden{left:5%}
 .nba-player.giannis{left:14%}
 .nba-player.kyrie{width:49vw;left:37%}
 .nba-player.steph{right:12%}
 .nba-player.lebron{width:60vw;right:-9%}
 .year-one{left:-12%;top:27%}.year-two{left:-22%;top:29%}
}
/* Align the visible hardwood, compensating for transparent image padding. */
.basketball-scene img.arena{width:100%;left:0;bottom:0;translate:0 8.3%;transform-origin:center bottom}
.stadium-tower{width:25%;bottom:24%}
.basketball{left:24%}
@media(max-aspect-ratio:1/1){
 .basketball-scene img.arena{width:114%;left:-7%;bottom:0;translate:0 8.3%}
 .stadium-tower{width:34%;bottom:25%}
 .basketball{left:18%}
}
/* The front white court boundary is the ground anchor, above the dark apron. */
.basketball-scene img.arena{translate:0 14.4%}
.nba-player.steph{right:7%}
@media(max-aspect-ratio:1/1){.basketball-scene img.arena{translate:0 14.4%}.nba-player.steph{right:6%}}
/* One stationary grain sheet: no moving GIF frames or repeated tile rows. */
body,#world{background:#101115;background-image:none}
#loader{background:#090a0c}
#world::after{position:fixed;inset:0;background:none;opacity:.32;filter:none;mix-blend-mode:soft-light;animation:none;transform:none}
.effects-paused,.effects-paused *, .effects-paused::before,.effects-paused::after{animation-play-state:paused!important}
#home svg{display:block;width:88px;height:38px;overflow:visible;filter:drop-shadow(0 0 7px #da000140)}
@media(max-width:650px){#home svg{width:70px;height:32px}}
/* The shared vector logo is available immediately, including in the loader. */
#home img{display:block;width:88px;height:38px;object-fit:contain;filter:drop-shadow(0 0 7px #da000140)}
.loader-mark img{display:block;width:clamp(130px,23vw,240px);height:auto;filter:drop-shadow(0 0 22px #da000130)}
#world::after{content:none}
#film-grain{position:fixed;inset:0;width:100%;height:100%;z-index:20;pointer-events:none;mix-blend-mode:soft-light;opacity:.32;will-change:contents}
@media(max-width:650px){#home img{width:70px;height:32px}}
/* Shorter streetlight retains its bottom anchor and horizontal pole position. */
.lamp{height:88vh;width:88vh;left:calc(94% - 44vh);bottom:-1vh;top:auto}
@media(max-aspect-ratio:1/1){.lamp{height:88vh;width:88vh;left:calc(124% - 44vh);bottom:-1vh;top:auto}}
/* Bring the year in sooner and extend the visible pole base past the bottom edge. */
.year-two{left:-25%}
.lamp{bottom:-3vh}
@media(max-aspect-ratio:1/1){.year-two{left:-40%}.lamp{bottom:-3vh}}

/* Wide street collage. Years and captions inherit the established shared .year styles. */
.street-story{--collage-width:max(100vw,244vh);--collage-origin:calc(90vw - var(--collage-width)*.5)}
.street-story>.layer{height:auto}
.street-city{width:calc(var(--collage-width)*.8);left:calc(var(--collage-origin) + var(--collage-width)*.20);bottom:-3vh;z-index:1}
.street-gotti{width:calc(var(--collage-width)*.43);left:calc(var(--collage-origin) + var(--collage-width)*.145);bottom:0;z-index:5}
.street-edp{width:calc(var(--collage-width)*.22);left:calc(var(--collage-origin) + var(--collage-width)*.433);bottom:-2vh;z-index:9}
.street-story>.street-crossing{height:68vh;width:calc(68vh * 667 / 1769);left:calc(var(--collage-origin) + var(--collage-width)*.56);bottom:-1vh;z-index:4}
.street-crossing>img{display:block;width:100%;height:100%}
.crossing-signal{position:absolute;left:44.5%;top:25.5%;width:16.5%;height:9%;transform:skewY(-4deg);overflow:hidden}
.signal-stop{animation:crossing-stop 9s step-end infinite}
.signal-walk{animation:crossing-walk 9s step-end infinite}
@keyframes crossing-stop{0%,100%{opacity:1}50%{opacity:0}}
@keyframes crossing-walk{0%,100%{opacity:0}50%{opacity:1}}
.street-jfg{width:calc(var(--collage-width)*.31);left:calc(var(--collage-origin) + var(--collage-width)*.66);bottom:1vh;z-index:6}
.street-sneakers{width:calc(var(--collage-width)*.155);left:calc(var(--collage-origin) + var(--collage-width)*.72);bottom:1vh;z-index:12}
.street-sneakers>img{display:block;width:100%;height:auto;animation:sneaker-float 6.5s ease-in-out infinite;transform-origin:50% 65%}
.street-story .street-sneakers>img{filter:contrast(1.04) saturate(1.12)}
@keyframes sneaker-float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-14px) rotate(1.5deg)}}
.street-city-art{display:block;width:100%;height:auto}
.street-nb{position:absolute;width:4.375%;left:66.8%;top:9%;translate:-50% 0}
.scene img.street-nb{filter:contrast(1.04) saturate(1.12)}
.street-year{z-index:3}
.gotti-year{left:calc(var(--collage-origin) + var(--collage-width)*0);top:48vh;bottom:auto}
.jfg-year{left:calc(var(--collage-origin) + var(--collage-width)*.86);top:19vh;bottom:auto}
.street-story>.street-stars{position:absolute;left:-30vw;top:0;width:238.87vw;height:100vh;z-index:0;overflow:hidden;pointer-events:none;mask-image:linear-gradient(to right,transparent,#000 15%,#000 85%,transparent)}
.street-stars i{position:absolute;width:var(--star-size);height:var(--star-size);border-radius:50%;background:#e5e8f0;opacity:var(--star-light);animation:star-breathe var(--star-time) ease-in-out infinite;animation-delay:var(--star-delay);box-shadow:0 0 3px #ffffff45}
@keyframes star-breathe{0%,100%{opacity:calc(var(--star-light)*.3)}50%{opacity:var(--star-light)}}
@media(max-aspect-ratio:1/1){
 .street-story{--collage-origin:calc(var(--collage-width)*-.14)}
 .street-story>.street-stars{width:371.99vw}
 .street-gotti{bottom:-9vh}.street-edp{bottom:-9vh}.street-jfg{bottom:-4vh}
 .gotti-year{left:calc(var(--collage-origin) + var(--collage-width)*.16);top:26vh;bottom:auto}
 .jfg-year{left:calc(var(--collage-origin) + var(--collage-width)*.75);top:16vh}
}
@media(max-width:650px){
 footer{gap:8px;width:calc(100% - 28px);justify-content:center}
 nav{gap:12px;min-width:0;overflow-x:auto;scrollbar-width:none}
 nav::-webkit-scrollbar{display:none}
 nav button{font-size:11px;letter-spacing:.04em;white-space:nowrap;flex:none}
 footer>button{flex:none;width:24px}
}
@media(prefers-reduced-motion:reduce){
 .street-stars i{animation:none;opacity:var(--star-light)}
 .street-sneakers>img{animation:none}
 .signal-stop{animation:none;opacity:1}.signal-walk{animation:none;opacity:0}
}

/* The sky is one bounded canvas rather than hundreds of composited animations. */
.street-stars canvas{display:block;width:100%;height:100%}

/* Keep phone grain size, with a little more visible texture. */
@media(max-width:650px),(pointer:coarse){#film-grain{opacity:.42}}

/* Regular timeline span with a panoramic portrait composition. */
.wine-story{--wine-width:max(100vw,170vh);--wine-space:calc(var(--wine-width)*1.33);--wine-origin:calc(50vw - var(--wine-width)*.5)}
.wine-story>.layer{height:auto}
.wine-glass{width:calc(var(--wine-width)*.215);left:calc(var(--wine-origin) + var(--wine-width)*.12);bottom:-3vh;z-index:4}
.wine-glass img{display:block;width:100%;height:auto}
.wine-glass canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0}
.wine-glass video{position:absolute;left:0;top:0;width:1px;height:1px;opacity:.001;pointer-events:none}
.wine-story .wine-glass img{filter:contrast(1.04) saturate(1.12)}
.wine-year{left:calc(var(--wine-origin) - var(--wine-width)*.02);top:60vh;z-index:11}
.wine-mellisa{width:calc(var(--wine-width)*.38);left:calc(var(--wine-origin) + var(--wine-space)*.30);bottom:-8vh;z-index:8}
.wine-mellisa>img{display:block;width:100%;height:auto}
.wine-story .wine-mellisa .wine-lips{position:absolute;inset:0;mask-image:url('assets/page04/lips-mask.svg');mask-size:100% 100%;mask-repeat:no-repeat;filter:contrast(1.08) saturate(1.15)}
.wine-ashley{width:calc(var(--wine-width)*.285);left:calc(var(--wine-origin) + var(--wine-space)*.57);bottom:-3vh;z-index:2}
.wine-jordin{width:calc(var(--wine-width)*.25);left:calc(var(--wine-origin) + var(--wine-space)*.68);bottom:-8vh;z-index:6}
.wine-story img.wine-logo{width:min(50vw,82vh);left:calc(var(--wine-origin) + var(--wine-space)*.58);top:52vh;translate:-50% -50%;z-index:10;filter:brightness(2.1) saturate(.9) drop-shadow(0 0 14px #ae35e6b0) drop-shadow(0 0 35px #9819d185) drop-shadow(0 0 60px #7b19ac60)}
@media(max-aspect-ratio:1/1){
 .wine-story{--wine-width:155vh;--wine-origin:calc(50vw - var(--wine-width)*.26)}
 .wine-glass{width:calc(var(--wine-width)*.19);bottom:1vh}
 .wine-year{left:calc(50vw - 155px);top:60vh}
 .wine-mellisa{bottom:-3vh}.wine-ashley{bottom:-3vh}.wine-jordin{bottom:-8vh}
 .wine-story img.wine-logo{top:52vh;width:94vw;left:calc(var(--wine-origin) + var(--wine-space)*.82)}
}
@media(prefers-reduced-motion:reduce){.wine-glass canvas{display:none}}
nav button{white-space:nowrap}
#world{overflow:clip}


/* Intro stays transparent; open timeline travel protects its clear viewport. */
.intro{background:none;overflow:visible}
/* Tennis uses constant sizes and horizontal depth travel. */
.street-story>.street-stars{width:355vw}
.tennis-story{--tennis-width:max(100vw,165vh);--tennis-origin:calc(50vw - var(--tennis-width)*.5)}
.tennis-story>.layer{height:auto;animation:none;transition:none}
.tennis-skyline{width:calc(var(--tennis-width)*1.10);left:calc(var(--tennis-origin) - var(--tennis-width)*.04);bottom:0;z-index:0}
.tennis-stadium{width:calc(var(--tennis-width)*.80);left:calc(var(--tennis-origin) + var(--tennis-width)*.13);bottom:0;z-index:1}
.tennis-sign{width:calc(var(--tennis-width)*.31);left:calc(var(--tennis-origin) + var(--tennis-width)*.02);bottom:-1vh;z-index:9}
.tennis-year{left:calc(var(--tennis-origin) + var(--tennis-width)*-.16);top:43vh;z-index:3}
.tennis-aryna{width:calc(var(--tennis-width)*.20);left:calc(var(--tennis-origin) + var(--tennis-width)*.20);bottom:-2vh;z-index:4}
.tennis-dimitrov{width:calc(var(--tennis-width)*.24);left:calc(var(--tennis-origin) + var(--tennis-width)*.45);bottom:-8vh;z-index:5}
.tennis-stefanos{width:calc(var(--tennis-width)*.31);left:calc(var(--tennis-origin) + var(--tennis-width)*.73);bottom:-5vh;z-index:7}
.tennis-net{width:calc(var(--tennis-width)*.94);left:calc(var(--tennis-origin) + var(--tennis-width)*.04);bottom:-1vh;z-index:8}
.scene img.tennis-wilson{width:min(50vw,82vh);left:calc(var(--tennis-origin) + var(--tennis-width)*.50);top:50vh;translate:-50% -50%;z-index:12;filter:brightness(0) saturate(100%) invert(16%) sepia(100%) saturate(6812%) hue-rotate(350deg) brightness(88%) contrast(115%) drop-shadow(0 0 14px #da0001b0) drop-shadow(0 0 35px #da000185) drop-shadow(0 0 60px #da000160)}
.tennis-ball{padding:0;width:calc(var(--tennis-width)*.13);left:calc(var(--tennis-origin) + var(--tennis-width)*.39);bottom:14vh;z-index:14;pointer-events:auto;touch-action:pan-y}
.ball-flight{display:block;position:relative;aspect-ratio:1;animation:tennis-bob 3.8s ease-in-out infinite}
.tennis-ball canvas{position:absolute;inset:0;width:100%;height:100%}
.serve-cue{position:absolute;top:calc(100% + 8px);left:50%;translate:-50% 0;font-size:12px;letter-spacing:.16em;white-space:nowrap;color:#c7c9b4;opacity:.65}
.tennis-ball:focus-visible{outline:1px solid #dbe957;border-radius:50%}
.tennis-ball.is-serving .ball-flight{animation:tennis-serve 1.8s cubic-bezier(.25,.5,.4,1)}
.tennis-ball.is-serving .serve-cue{opacity:0}
@keyframes tennis-bob{0%,100%{translate:0 0}50%{translate:0 -12px}}
@keyframes tennis-serve{0%{transform:translate(0,0) scale(1)}28%{transform:translate(12vw,-52vh) scale(.6)}55%{transform:translate(25vw,-21vh) scale(.38)}72%{transform:translate(8vw,-33vh) scale(.6)}100%{transform:translate(0,0) scale(1)}}
@media(max-aspect-ratio:1/1){
 .street-story>.street-stars{width:490vw}
 .tennis-story{--tennis-width:140vh;--tennis-origin:calc(50vw - var(--tennis-width)*.32)}
 .tennis-year{left:calc(50vw - var(--tennis-width)*.30);top:43vh}
 .tennis-aryna,.tennis-dimitrov,.tennis-stefanos{bottom:0}
 .scene img.tennis-wilson{width:94vw;left:50vw;top:50vh}
 .tennis-ball{left:calc(50vw - var(--tennis-width)*.065);bottom:13vh}
}
@media(prefers-reduced-motion:reduce){.ball-flight,.tennis-ball.is-serving .ball-flight{animation:none}}
.tennis-net{bottom:-7vh}.tennis-stadium{bottom:-7vh;width:calc(var(--tennis-width)*.74);left:calc(var(--tennis-origin) + var(--tennis-width)*.16)}

.tennis-clouds{width:calc(var(--tennis-width)*1.1);left:var(--tennis-origin);top:2vh;z-index:-2;opacity:.35}
.tennis-birds{width:calc(var(--tennis-width)*1.1);height:28vh!important;left:var(--tennis-origin);top:5vh;z-index:-1}
.tennis-birds canvas{width:100%;height:100%;display:block}

/* Two panoramic scenes share the existing type, animation clock and renderer. */
.vote-story,.adidas-story{--art-width:max(115vw,165vh);--art-origin:calc(50vw - var(--art-width)*.5)}
.vote-story>.layer,.adidas-story>.layer{height:auto;transition:none}
.vote-city{width:calc(var(--art-width)*1.08);left:calc(var(--art-origin) - var(--art-width)*.04);bottom:-5vh;z-index:0;opacity:.55}
.vote-rhythm{width:calc(var(--art-width)*.76);height:20vh!important;left:calc(var(--art-origin) + var(--art-width)*.10);bottom:0;z-index:1;display:flex;align-items:flex-end;gap:2%;opacity:.5}
.vote-rhythm span{flex:1;height:55%;background:#da0001;transform-origin:bottom;animation:vote-meter 3.8s ease-in-out infinite}
.vote-rhythm span:nth-child(3n){height:85%;animation-delay:-1.3s}.vote-rhythm span:nth-child(3n + 1){height:35%;animation-delay:-2.8s}
.vote-rhythm span:nth-child(2n){animation-duration:4.6s}
.vote-year{left:3vw;top:54vh;z-index:9}
.vote-eazy{width:calc(var(--art-width)*.30);left:calc(var(--art-origin) + var(--art-width)*.03);bottom:-6vh;z-index:8}
.vote-her{width:calc(var(--art-width)*.32);left:calc(var(--art-origin) + var(--art-width)*.32);bottom:-5vh;z-index:5}
.vote-french{width:calc(var(--art-width)*.22);left:calc(var(--art-origin) + var(--art-width)*.70);bottom:-5vh;z-index:4}
.vote-doja{width:calc(var(--art-width)*.20);left:calc(var(--art-origin) + var(--art-width)*.62);bottom:-6vh;z-index:6}
.art-control{pointer-events:auto;padding:0;touch-action:none;border:0}
.vote-mark{width:min(24vw,34vh);left:50vw;top:20vh;translate:-50% -50%;z-index:12}
.vote-mark-motion,.shoe-motion{display:block;position:relative}
.scene .vote-mark img{width:100%;display:block;filter:drop-shadow(0 0 14px #da000170) drop-shadow(0 0 35px #da000150)}
.art-cue{display:block;color:#b7b7bd;font:11px Arial,sans-serif;letter-spacing:.17em;text-align:center;white-space:nowrap;margin-top:18px;opacity:.65}
.vote-mark:focus-visible,.adidas-shoe:focus-visible{outline:1px solid #da0001;outline-offset:12px}
.vote-story.is-amplified .vote-mark-motion{animation:vote-amplify 1.5s ease-out}
.vote-story.is-amplified .vote-rhythm span{animation:vote-burst 1.5s ease-out}
.vote-story.is-amplified .vote-rhythm{opacity:.8}
@keyframes vote-meter{0%,100%{scale:1 .45}50%{scale:1 1}}
@keyframes vote-burst{0%,100%{scale:1 .5}15%,45%{scale:1 1.8}30%,65%{scale:1 .8}}
@keyframes vote-amplify{0%,100%{filter:none;scale:1}18%,45%{filter:drop-shadow(0 0 24px #da0001);scale:1.04}30%,65%{scale:1}}
.adidas-city{width:calc(var(--art-width)*.82);height:92vh!important;object-position:bottom;left:calc(var(--art-origin) + var(--art-width)*.20);bottom:0;z-index:1;opacity:.8}
.adidas-stripes{width:calc(var(--art-width)*.7);height:38vh!important;left:calc(var(--art-origin) + var(--art-width)*.12);bottom:0;display:flex;gap:4%;z-index:2;opacity:.17;transform-origin:bottom}
.adidas-stripes i{display:block;width:18%;height:100%;background:#da0001;transform:skew(-24deg)}
.adidas-stripes i:nth-child(1){height:48%;align-self:flex-end}.adidas-stripes i:nth-child(2){height:74%;align-self:flex-end}
.adidas-year{left:3vw;top:53vh;z-index:6}
.adidas-model{width:calc(var(--art-width)*.18);height:80vh!important;object-position:bottom;left:calc(var(--art-origin) + var(--art-width)*.28);bottom:0;z-index:5}
.adidas-brands{width:min(51vw,84vh);left:50vw;top:37vh;translate:-50% -50%;display:flex;align-items:center;gap:5%;z-index:9;filter:drop-shadow(0 0 16px #da000180) drop-shadow(0 0 40px #da000160)}
.scene .adidas-brands img{filter:none;height:auto}
.highsnobiety-mark{width:72%}.adidas-mark{width:18%}.adidas-brands span{font:32px Arial;color:#da0001}
.adidas-shoe{width:calc(var(--art-width)*.42);left:calc(var(--art-origin) + var(--art-width)*.52);bottom:12vh;z-index:11;perspective:1000px}
.scene .adidas-shoe img{display:block;width:100%;filter:drop-shadow(0 15px 18px #0009)}
.shoe-motion{animation:shoe-float 5s ease-in-out infinite;transform-origin:50% 65%;transform-style:preserve-3d}
.adidas-shoe.is-turning .shoe-motion{animation:shoe-turn 1.7s cubic-bezier(.22,.6,.35,1)}
.art-selected{filter:drop-shadow(0 0 24px #da000160)}
@keyframes shoe-float{0%,100%{translate:0 0}50%{translate:0 -14px}}
@keyframes shoe-turn{0%,100%{transform:rotateY(0) rotateZ(0);translate:0 0}30%{transform:rotateY(-24deg) rotateZ(-7deg);translate:0 -22px}65%{transform:rotateY(18deg) rotateZ(4deg);translate:0 -10px}}
@media(max-aspect-ratio:1/1){
 .vote-story,.adidas-story{--art-width:140vh;--art-origin:calc(50vw - var(--art-width)*.33)}
 .vote-year,.adidas-year{left:calc(50vw - var(--art-width)*.15);top:54vh}
 .vote-mark{width:62vw;left:50vw;top:27vh}
 .vote-eazy{width:calc(var(--art-width)*.27)}
 .vote-her{width:calc(var(--art-width)*.34)}
 .vote-french{width:calc(var(--art-width)*.19)}
 .vote-doja{width:calc(var(--art-width)*.18)}
 .adidas-brands{width:94vw;left:50vw;top:34vh}
 .adidas-model{width:calc(var(--art-width)*.15)}
 .adidas-shoe{width:calc(var(--art-width)*.31);left:calc(var(--art-origin) + var(--art-width)*.53);bottom:13vh}
 .art-cue{font-size:11px}
}
@media(prefers-reduced-motion:reduce){.vote-rhythm span,.shoe-motion,.is-amplified .vote-mark-motion,.is-amplified .vote-rhythm span,.is-turning .shoe-motion{animation:none!important}}


/* Chicago urban layers retain original skyline and portrait. */
.adidas-city{width:calc(var(--art-width)*1.15);height:auto!important;left:calc(var(--art-origin) - var(--art-width)*.07);bottom:-2vh;opacity:.75}
.chicago-cta{width:calc(var(--art-width)*.63);left:calc(var(--art-origin) + var(--art-width)*.38);bottom:-5vh;z-index:2}
.chicago-fountain{width:calc(var(--art-width)*.22);left:calc(var(--art-origin) + var(--art-width)*.02);bottom:0;z-index:3}
.chicago-bean{width:calc(var(--art-width)*.28);left:calc(var(--art-origin) + var(--art-width)*.66);bottom:0;z-index:4}
.chicago-street{width:calc(var(--art-width)*.17);left:calc(var(--art-origin) + var(--art-width)*.94);bottom:-2vh;z-index:10}
.adidas-shoe .shoe-motion{animation:shoe-float 5s ease-in-out infinite;transform:none}
.chicago-birds{width:calc(var(--art-width)*.75);height:8vh!important;left:var(--art-origin);top:12vh;z-index:0;color:#a5a6a9}
.chicago-birds span{position:absolute;width:14px;height:7px;animation:chicago-flight 18s linear infinite}
.chicago-birds span::before,.chicago-birds span::after{content:"";position:absolute;width:7px;height:5px;border-top:1px solid #a5a6a9;border-radius:50%;rotate:25deg}
.chicago-birds span::after{left:7px;rotate:-25deg}
.chicago-birds span:nth-child(2){left:20%;top:25%;animation-delay:-4s}.chicago-birds span:nth-child(3){left:45%;top:10%;animation-delay:-9s}.chicago-birds span:nth-child(4){left:65%;top:40%;animation-delay:-13s}
@keyframes chicago-flight{from{translate:0 0}50%{translate:130px -12px}to{translate:260px 0}}
@media(prefers-reduced-motion:reduce){.adidas-shoe .shoe-motion,.chicago-birds span{animation:none!important}}

.adidas-shoe{width:calc(var(--art-width)*.34);left:calc(var(--art-origin) + var(--art-width)*.58);bottom:24vh}
@media(max-aspect-ratio:1/1){.adidas-shoe{width:calc(var(--art-width)*.28);left:calc(var(--art-origin) + var(--art-width)*.53);bottom:27vh}}

.chicago-street{left:calc(var(--art-origin) + var(--art-width)*.86);width:calc(var(--art-width)*.14)}

/* Larger grounded landmarks and foreground signal. */
.chicago-fountain{width:calc(var(--art-width)*.34);left:calc(var(--art-origin) - var(--art-width)*.03);bottom:-6vh}
.chicago-bean{width:calc(var(--art-width)*.43);left:calc(var(--art-origin) + var(--art-width)*.62);bottom:-7vh}
.chicago-street{width:calc(95vh*590/475);height:auto!important;left:calc(var(--art-origin) + var(--art-width)*.26);bottom:-10vh}
.scene .chicago-street>img{display:block;width:100%;height:auto;filter:contrast(1.08)}
.chicago-signal{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.chicago-signal .signal-red{animation:chicago-red 7s steps(1,end) infinite;filter:drop-shadow(0 0 3px #f33)}
.chicago-signal .signal-yellow{animation:chicago-yellow 7s steps(1,end) infinite;filter:drop-shadow(0 0 3px #fc3)}
.chicago-signal .signal-green{animation:chicago-green 7s steps(1,end) infinite;filter:drop-shadow(0 0 3px #3f8)}
@keyframes chicago-red{0%{opacity:1}42.8571%,100%{opacity:0}}
@keyframes chicago-yellow{0%{opacity:0}42.8571%{opacity:1}57.1429%,100%{opacity:0}}
@keyframes chicago-green{0%,42.8571%{opacity:0}57.1429%{opacity:1}100%{opacity:0}}
.tennis-ball{bottom:7vh}
@media(max-aspect-ratio:1/1){.tennis-ball{bottom:6vh}}
.vote-concert{width:calc(var(--art-width)*1.15);left:calc(var(--art-origin) - var(--art-width)*.08);bottom:-2vh;z-index:0;opacity:.6}
.chicago-birds{height:24vh!important;top:7vh}
.chicago-birds canvas{display:block;width:100%;height:100%}
.chicago-flag{width:calc(var(--art-width)*.25);height:62vh!important;left:calc(var(--art-origin) + var(--art-width)*.03);bottom:0;z-index:4}
.chicago-flag canvas{position:absolute;left:4%;top:0;width:96%;height:auto}
.chicago-flag .flag-texture{display:none}
.flag-pole{position:absolute;left:4%;top:2%;height:98%;width:4px;background:linear-gradient(90deg,#444,#d9d9d9,#555);border-radius:2px;box-shadow:2px 0 4px #0006}
.flag-pole::before{content:"";position:absolute;width:8px;height:8px;left:-2px;top:-6px;background:radial-gradient(circle at 30% 30%,#eee,#555);border-radius:50%}
@media(prefers-reduced-motion:reduce){.chicago-signal ellipse{animation:none!important}.signal-yellow,.signal-green{opacity:0}}

.chicago-fountain{left:calc(var(--art-origin) + var(--art-width)*.05)}
.chicago-street{bottom:-18vh}
.chicago-flag{left:calc(var(--art-origin) + var(--art-width)*.10)}

.vote-concert{opacity:.75}
.vote-story.is-amplified .vote-concert{animation:concert-amplify 1.5s ease-out}
@keyframes concert-amplify{0%,100%{filter:grayscale(1) contrast(1.08)}20%,45%{filter:grayscale(1) contrast(1.08) brightness(1.6)}30%,65%{filter:grayscale(1) contrast(1.08) brightness(1.15)}}
@media(prefers-reduced-motion:reduce){.vote-story.is-amplified .vote-concert{animation:none}}

/* Rooftop flag follows the skyline exactly; birds stay within complete paths. */
.chicago-flag{width:calc(var(--art-width)*1.15);height:auto!important;aspect-ratio:3/1;left:calc(var(--art-origin) - var(--art-width)*.07);bottom:-2vh;top:auto;z-index:2}
.chicago-flag canvas{left:30.8%;top:8%;width:17%;height:auto}
.chicago-flag .flag-pole{left:31.4%;top:11%;height:35%;width:3px}
.chicago-birds{width:calc(var(--art-width)*.95);left:calc(var(--art-origin) + var(--art-width)*.03);top:5vh;height:25vh!important}
.chicago-street{width:calc(95vh*1398/1125)}

/* Complete concert objects have their own travel and uncut silhouettes. */
.vote-stage{width:calc(var(--art-width)*.78);left:calc(var(--art-origin) + var(--art-width)*.11);bottom:-2vh;z-index:0}
.scene .vote-stage>img{display:block;width:100%;height:auto;filter:grayscale(1) contrast(1.08)}
.vote-speakers{width:calc(var(--art-width)*.17);bottom:0;z-index:2}
.speaker-left{left:calc(var(--art-origin) + var(--art-width)*.015)}
.speaker-right{left:calc(var(--art-origin) + var(--art-width)*.80)}
.speaker-rear{width:calc(var(--art-width)*.11);left:calc(var(--art-origin) + var(--art-width)*.66);bottom:6vh;z-index:1}
.vote-crowd{width:calc(var(--art-width)*.92);left:calc(var(--art-origin) + var(--art-width)*.04);bottom:-20vh;z-index:3}
.stage-lights{position:absolute;inset:0;pointer-events:none}
.stage-lights i{position:absolute;top:22%;left:26%;width:2%;aspect-ratio:1;border-radius:50%;background:radial-gradient(ellipse,#fff8d8,#e9502c 35%,transparent 72%);box-shadow:0 0 24px 9px #e9502c55;animation:stage-color 8s ease-in-out infinite}
.stage-lights i:nth-child(2){left:45%;animation-delay:-2s}.stage-lights i:nth-child(3){left:56%;animation-delay:-4s}.stage-lights i:nth-child(4){left:75%;animation-delay:-6s}
@keyframes stage-color{0%,100%{opacity:.55;filter:hue-rotate(0deg)}25%{opacity:.95;filter:hue-rotate(220deg)}50%{opacity:.4;filter:hue-rotate(275deg)}75%{opacity:.85;filter:hue-rotate(340deg)}}
.vote-story.is-amplified .stage-lights{animation:stage-amplify 1.5s ease-out}
@keyframes stage-amplify{0%,100%{opacity:1;filter:none}20%,45%{opacity:1;filter:brightness(2)}30%,65%{opacity:.5;filter:brightness(1.2)}}
@media(prefers-reduced-motion:reduce){.stage-lights i,.vote-story.is-amplified .stage-lights{animation:none!important}}
.chicago-flag canvas{left:66.1%;top:-8%}
.chicago-flag .flag-pole{left:66.7%;top:-5%;height:43%}

/* Distant stage surrounded by a wide audience; Chicago unfolds with room to travel. */
.vote-stage{width:calc(var(--art-width)*.43);left:calc(var(--art-origin) + var(--art-width)*.285);bottom:0;z-index:0}
.venue-crowd{width:calc(var(--art-width)*1.06);left:calc(var(--art-origin) - var(--art-width)*.03);bottom:-4vh;z-index:1}
.vote-crowd{width:calc(var(--art-width)*.92);bottom:-27vh;z-index:3}
.chicago-fountain{left:calc(var(--art-origin) - var(--art-width)*.21)}
.chicago-bean{left:calc(var(--art-origin) + var(--art-width)*1.22)}
.adidas-shoe{left:calc(var(--art-origin) + var(--art-width)*.90);bottom:7vh}
.stage-lights i{top:24.3%;left:25.9%;width:1.7%;translate:-50% -50%;box-shadow:none;background:none;animation:stage-color 9s ease-in-out infinite;transform-origin:50% 50%}
.stage-lights i:nth-child(2){left:45.2%;animation-delay:-2.2s}.stage-lights i:nth-child(3){left:55.8%;animation-delay:-4.5s}.stage-lights i:nth-child(4){left:75.3%;animation-delay:-6.7s}
.stage-lights i::before{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(ellipse,#fff8d8,#e9502c 35%,transparent 72%);box-shadow:0 0 12px 4px #e9502c55}
.stage-lights i::after{content:"";position:absolute;left:50%;top:50%;width:calc(var(--art-width)*.075);height:calc(var(--art-width)*.20);margin-left:calc(var(--art-width)*-.0375);transform-origin:50% 0;clip-path:polygon(48% 0,52% 0,100% 100%,0 100%);background:linear-gradient(#e9502c55,#e9502c22 55%,transparent);animation:stage-beam 7.5s ease-in-out infinite}
.stage-lights i:nth-child(2)::after{animation-delay:-2s;animation-direction:reverse}.stage-lights i:nth-child(3)::after{animation-delay:-4.1s}.stage-lights i:nth-child(4)::after{animation-delay:-1.4s;animation-direction:reverse}
@keyframes stage-beam{0%,100%{rotate:-16deg}50%{rotate:18deg}}
@media(prefers-reduced-motion:reduce){.stage-lights i::after{animation:none}}
.vote-stage{z-index:1}
.venue-crowd{z-index:0;bottom:-13vh}
.stage-lights i{left:25.23%;top:24.38%}
.stage-lights i:nth-child(2){left:44.7%}.stage-lights i:nth-child(3){left:55.43%}.stage-lights i:nth-child(4){left:75.03%}
.effects-paused .stage-lights i::after{animation-play-state:paused!important}

/* Audience always sits in front of the distant stage. */
.vote-stage{z-index:0}
.combined-crowd{width:calc(var(--art-width)*1.02);left:calc(var(--art-origin) - var(--art-width)*.01);bottom:-8vh;z-index:3}
.pedestrian-stop{animation:pedestrian-stop 7s steps(1,end) infinite;filter:drop-shadow(0 0 2px #ed432b88)}
.pedestrian-walk{animation:chicago-green 7s steps(1,end) infinite;filter:drop-shadow(0 0 2px #bfffbd88)}
@keyframes pedestrian-stop{0%,42.8571%{opacity:1}57.1429%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.pedestrian-stop,.pedestrian-walk{animation:none!important}.pedestrian-stop{opacity:1}.pedestrian-walk{opacity:0}}
.combined-crowd{bottom:-2vh}

/* Page 08: original portraits and curtains, still logo extracted from supplied animation. */
.getyou-story{--art-width:max(100vw,140vh);--art-origin:calc(50vw - var(--art-width)*.5)}
.getyou-curtains{width:calc(var(--art-width)*.82);left:calc(var(--art-origin) + var(--art-width)*.13);bottom:-18vh;height:auto;z-index:1}
.getyou-portraits{width:calc(var(--art-width)*.62);left:calc(var(--art-origin) + var(--art-width)*.27);bottom:0;height:auto;filter:grayscale(1);z-index:5}
.scene img.getyou-logo{width:calc(var(--art-width)*.29);left:calc(var(--art-origin) + var(--art-width)*.49);top:23vh;height:auto;filter:grayscale(1) brightness(2.25) drop-shadow(0 0 12px #ffffff55) drop-shadow(0 0 28px #ffffff22);z-index:3}
.getyou-year{left:calc(var(--art-origin) + var(--art-width)*.12);top:64vh;bottom:auto;z-index:4}
@media(max-aspect-ratio:1/1){
.getyou-story{--art-width:140vh;--art-origin:calc(50vw - var(--art-width)*.48)}
.getyou-curtains{bottom:-10vh;width:calc(var(--art-width)*.75)}
.getyou-portraits{width:calc(var(--art-width)*.69);bottom:0}
.getyou-logo{top:26vh;width:calc(var(--art-width)*.29)}
.getyou-year{top:65vh;bottom:auto}
}

/* Independent curtains enclose a readable opening; the logo sits behind both. */
.getyou-curtain{height:102vh;width:45.223vh;bottom:0;z-index:3;pointer-events:none}
.getyou-curtain img{display:block;width:100%;height:100%}
.getyou-curtain-left{left:calc(var(--art-origin) + var(--art-width)*.10)}
.getyou-curtain-right{left:calc(var(--art-origin) + var(--art-width)*.74)}
.getyou-curtain-right img{transform:scaleX(-1)}
.scene img.getyou-logo{left:calc(var(--art-origin) + var(--art-width)*.43);z-index:0}
.getyou-phone{left:calc(var(--art-origin) + var(--art-width)*1.02);width:38vh;height:63.33vh;top:21vh;padding:0;z-index:8;pointer-events:auto}
.getyou-phone canvas{display:block;width:100%;height:100%}
.getyou-phone .phone-screen-source{position:absolute;width:1px;height:1px;visibility:hidden!important;pointer-events:none}
.getyou-phone .art-cue{position:absolute;left:0;right:0;bottom:0;white-space:nowrap}
.effects-paused *{will-change:auto!important}
@media(max-aspect-ratio:1/1){.getyou-curtain{height:103vh;width:45.667vh}.getyou-phone{width:35vh;height:58.33vh;top:26vh}}

@media(max-aspect-ratio:1/1){.getyou-curtain-left{left:calc(var(--art-origin) + var(--art-width)*.19)}.getyou-curtain-right{left:calc(var(--art-origin) + var(--art-width)*.73)}}



/* Animate only the existing helmet's light pixels, not a performer-size surface. */
.helmet-color{inset:auto;left:40%;top:18.255578%;width:20%;height:20.283976%}
.scene img.helmet-lights{mask-image:url('assets/helmet-mask-crop.svg')}
/* The scene roots never move. Promote only the visible animated details. */
.scene{will-change:auto}
.arena-light:not(.effects-paused){will-change:rotate,opacity!important}
.ball-flight,.shoe-motion{will-change:translate}
/* Concert depth: audience, sound bars, performers, and suspended side arrays. */
.vote-stage{bottom:25vh}
.vote-rhythm{z-index:4;bottom:12vh;height:32vh!important;opacity:.65}
.vote-french{z-index:5}.vote-her{z-index:6}.vote-doja{z-index:7}.vote-eazy{z-index:8}
.getyou-year{left:calc(var(--art-origin) - var(--art-width)*.10)}
.vote-story>.vote-speakers{height:54vh;width:auto;top:0;bottom:auto;z-index:2}
.speaker-left{left:calc(var(--art-origin) + var(--art-width)*.06)}
.speaker-right{left:calc(var(--art-origin) + var(--art-width)*.83);scale:-1 1}
.vote-story>.speaker-rear{height:44vh;left:calc(var(--art-origin) + var(--art-width)*.55);opacity:.75;z-index:1}

/* Matched suspended stereo arrays; soft atmospheric concert beams. */
.speaker-left{scale:1 1}.speaker-right{scale:1 1}
.vote-story>.speaker-right{width:calc(54vh * 585 / 1536)}
.speaker-right>img{display:block;width:100%;height:100%;scale:-1 1}
.vote-stage{bottom:28vh}.vote-rhythm{bottom:0;height:44vh!important}
.stage-lights i::after{clip-path:none;mask-image:linear-gradient(transparent,#000 12%,#000 65%,transparent);background:radial-gradient(ellipse at 50% 0,#e9502c55, #e9502c15 45%,transparent 72%);filter:blur(7px)}
/* A panoramic room: wallpaper, door and clock share one world depth. */
.vintage-story{--room-width:max(100vw,140vh);--room-origin:calc(50vw - var(--room-width)*.5)}
.vintage-wallpaper{left:calc(var(--room-origin) + var(--room-width)*.06);top:0;width:calc(var(--room-width)*.88);height:100vh;object-fit:cover!important;opacity:.34;mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);z-index:0}
.vintage-door{height:78vh;width:auto;left:calc(var(--room-origin) + var(--room-width)*.69);bottom:0;z-index:1}
.vintage-wall-clock{width:25vh;height:25vh;left:calc(var(--room-origin) + var(--room-width)*.22);top:7vh;z-index:2}
.vintage-wall-clock img{width:100%;height:100%;display:block;filter:grayscale(1) brightness(.8)!important}
.clock-hour,.clock-minute{position:absolute;left:50%;bottom:50%;width:1.1%;height:29%;background:#292726;transform-origin:50% 100%;border-radius:50% 50% 1px 1px;box-shadow:1px 1px 2px #0008}
.clock-minute{height:37%;width:.8%}.clock-pivot{position:absolute;width:4%;height:4%;border-radius:50%;background:#393735;left:48%;top:48%}
.vintage-console{width:52vh;height:86vh;left:calc(var(--room-origin) + var(--room-width)*.32);bottom:-3vh;z-index:3}
.vintage-table{position:absolute;bottom:0;left:0;width:100%;height:53vh;object-fit:fill!important}
.vintage-tv{position:absolute;bottom:52vh;left:8%;width:80%;padding:0;pointer-events:auto;touch-action:none;line-height:0}
.vintage-tv img{position:relative;display:block;width:100%;height:auto;z-index:2;filter:grayscale(1) brightness(.8)!important}
.tv-noise{position:absolute;left:9%;top:10%;width:82%;height:67%;background:#ddd;box-shadow:0 0 18px #fff5,0 0 42px #fff2;z-index:1}
.vintage-radio{position:absolute;width:23vh;left:-16vh;bottom:51.5vh;z-index:4}
.vintage-lipstick{width:10vh;left:calc(var(--room-origin) + var(--room-width)*.86);top:51vh;z-index:8}
.scene .vintage-lipstick img{display:block;width:100%;filter:drop-shadow(0 0 10px #b5000030)}
@media(max-aspect-ratio:1/1){.vintage-story{--room-width:140vh;--room-origin:calc(50vw - var(--room-width)*.42)}.vintage-console{left:calc(var(--room-origin) + var(--room-width)*.32)}.vintage-wallpaper{opacity:.30}}
.scene img.vintage-wallpaper{filter:grayscale(1) brightness(.38) contrast(1.08)}.vintage-radio{bottom:5vh;left:-20vh}

/* Widen the back wall without stretching its pattern; keep the TV centered. */
.vintage-tv{left:10%}
.vintage-wallpaper{left:calc(var(--room-origin) - var(--room-width)*.04);width:calc(var(--room-width)*1.08);height:84vh;top:8vh}
.vintage-couch{width:calc(var(--room-width)*.35);height:auto;left:calc(var(--room-origin) - var(--room-width)*.08);bottom:3vh;z-index:2}
.vintage-nightstand{width:30vh;height:auto;left:calc(var(--room-origin) + var(--room-width)*.19);bottom:3vh;z-index:4}
.nightstand-art{display:block;width:100%;height:auto}
.vintage-nightstand .vintage-radio{width:14vh;height:auto;left:0;bottom:24vh}
.scene img.nightstand-art{filter:grayscale(.92) contrast(1.05)}
.vintage-tv{left:11%}
.vintage-wallpaper{mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent),linear-gradient(transparent,#000 8%,#000 90%,transparent);mask-composite:intersect}

/* Side fades only. Sink the TV stand's feet and lower brace below the viewport. */
.vintage-wallpaper{mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);mask-composite:add}
.vintage-console{bottom:-26vh;z-index:7}
.scene img.nightstand-art{filter:grayscale(1) brightness(.88) contrast(1.05)}
.scene img.lamp-warm-light{position:absolute;top:0;left:0;width:100%;height:auto;clip-path:polygon(61% 2%,89% 2%,100% 24%,49% 24%);filter:brightness(.9) saturate(.75);opacity:.8;pointer-events:none}
.vintage-nightstand .vintage-radio{bottom:24.4vh}
/* Extend the room wall past both viewport edges, retaining only side fades. */
.vintage-wallpaper{left:calc(var(--room-origin) - var(--room-width)*.22);width:calc(var(--room-width)*1.44);top:-20vh;height:140vh}
.vintage-couch{width:calc(var(--room-width)*.48);left:calc(var(--room-origin) - var(--room-width)*.08);bottom:-2vh;z-index:4}
.vintage-nightstand{left:calc(var(--room-origin) - var(--room-width)*.08 - 30vh);bottom:0;z-index:2}
@media(max-aspect-ratio:1/1){.vintage-wallpaper{top:-25vh;height:150vh}}
.love-story{--love-width:max(100vw,140vh);--love-origin:calc(50vw - var(--love-width)*.5)}
.love-dust{left:calc(var(--love-origin) - var(--love-width)*.1);top:-5vh;width:calc(var(--love-width)*1.2);height:110vh;z-index:0;pointer-events:none;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.love-dust canvas{display:block;width:100%;height:100%}
.love-title{left:calc(var(--love-origin) + var(--love-width)*.35);top:32vh;width:calc(var(--love-width)*.36);z-index:1;pointer-events:auto}
.love-title img{display:block;width:100%;filter:grayscale(1) drop-shadow(0 0 7px #ffffff85) drop-shadow(0 0 22px #ffffff55) drop-shadow(0 0 48px #ffffff30)!important}
.love-chair{left:calc(var(--love-origin) + var(--love-width)*.025);height:68vh;width:auto;bottom:-2vh;z-index:2}
.love-standing{left:calc(var(--love-origin) + var(--love-width)*.70);height:78vh;width:auto;bottom:0;z-index:3}
.love-dog{left:calc(var(--love-origin) + var(--love-width)*.29);height:48vh;width:auto;bottom:-2vh;z-index:4}
.love-new-standing{left:calc(var(--love-origin) + var(--love-width)*.02);height:82vh;width:auto;top:auto;bottom:0;z-index:1}
.love-new-seated{left:calc(var(--love-origin) + var(--love-width)*.58);height:43vh;width:auto;bottom:-2vh;z-index:5}
.scene img.love-new-standing,.scene img.love-new-seated{filter:grayscale(1) brightness(.85) contrast(1.03)}

/* Preserve the full light animation using pre-softened transparent surfaces.
   The 48px overscan contains the authored blur without live filter/mask passes. */
.basketball-scene .arena-light{filter:none;background:none;mask-image:none}
.basketball-scene .arena-light img.arena-beam{position:absolute;left:-15.141956%;top:-2.424242%;width:130.283912%;height:104.848484%;max-width:none;object-fit:fill;filter:none;pointer-events:none}
.basketball-scene .stadium-tower::after{content:none}
.basketball-scene .stadium-tower>img.stadium-glow{position:absolute;left:6.6%;top:-6.6%;width:82.8%;height:44.2%;object-fit:fill;filter:none!important;pointer-events:none;mix-blend-mode:screen;animation:lamp-bank-shimmer 4.7s ease-in-out infinite}
.basketball-scene .stadium-tower-right>img.stadium-glow{animation-duration:5.9s;animation-delay:-2.1s}
.basketball-scene.lights-off .stadium-glow{opacity:0!important}
.basketball-scene .stadium-glow{transition:opacity .45s}
@media(prefers-reduced-motion:reduce){.basketball-scene .stadium-tower>img.stadium-glow{animation:none;opacity:.55}}

@media(max-width:650px),(pointer:coarse){.basketball-scene .arena-light img.arena-beam{left:-31.168831%;top:-2.584814%;width:162.337662%;height:105.169628%}}