/* Cinema soundstage: layered lighting, 3D film transport and reflective floor. */
body{background:#02050c;perspective:1400px}body:before{z-index:0;background-size:3px 3px;opacity:.025;mask-image:none}
.soundstage{position:fixed;inset:0;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at 50% 47%,#102e5080,transparent 52%),linear-gradient(#02040bd9,#03081255 58%,#01030a);z-index:0;isolation:isolate}
.studio-photo{position:absolute;inset:0;background-position:center;background-size:cover;opacity:.65;filter:saturate(.8)}
.soundstage:after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 43%,transparent 15%,#02050b80 80%),linear-gradient(0deg,#02040ad9,transparent 40%);z-index:8}
.rig{position:absolute;top:0;left:0;right:0;height:22px;background:repeating-linear-gradient(45deg,transparent 0 44px,#233243 45px 48px,transparent 49px 90px);border-top:3px solid #324052;border-bottom:2px solid #233348;opacity:.65}
.lamp{position:absolute;top:8px;width:70px;height:60px;border-radius:12px;background:linear-gradient(90deg,#050a12,#2c3849 45%,#080e19);border:1px solid #405571;box-shadow:0 15px 25px #000;z-index:3}.lamp:after{content:'';position:absolute;inset:45px 8px -4px;background:#acdcff;border-radius:50%;box-shadow:0 0 25px 6px #4caaff80}.lamp.left{left:15%;transform:rotate(-24deg)}.lamp.right{right:15%;transform:rotate(24deg)}.lamp.right:after{background:#ffdab0;box-shadow:0 0 25px 6px #ffb25c80}
.beam{position:absolute;top:35px;width:650px;height:110vh;opacity:.22;transform-origin:50% 0;filter:blur(18px);clip-path:polygon(47% 0,53% 0,100% 100%,0 100%);mix-blend-mode:screen;animation:beam-pan 16s ease-in-out infinite alternate}.beam.left{left:calc(15% - 290px);background:linear-gradient(#75cfff90,#1167e820,transparent);transform:rotate(-25deg)}.beam.right{right:calc(15% - 290px);background:linear-gradient(#ffbd6580,#bb6b1e20,transparent);transform:rotate(25deg);animation-delay:-8s}
.floor-grid{position:absolute;top:64%;left:-50%;width:200%;height:85%;transform:rotateX(68deg);transform-origin:50% 0;background:repeating-linear-gradient(90deg,transparent 0 159px,#24517022 160px 161px),repeating-linear-gradient(0deg,transparent 0 119px,#24517022 120px 121px),radial-gradient(ellipse,#0c386d70,#030811 60%);border-top:1px solid #47779335}
.platform{position:absolute;left:50%;top:calc(50% + 145px);width:570px;height:110px;transform:translateX(-50%) rotateX(55deg);border-radius:50%;background:radial-gradient(ellipse,#0e2744 20%,#081a2c 55%,#142d45 57%,#0b1724 60%,#020812 67%);box-shadow:0 12px 0 #02060f,0 14px 0 #1e3d5a40,0 35px 70px #000,0 0 70px #006cff15}
.reel{position:absolute;left:calc(50% - 640px);top:calc(50% - 80px);width:250px;height:250px;transform-style:preserve-3d;transform:rotateY(32deg) rotateZ(-12deg);filter:drop-shadow(15px 25px 20px #000);opacity:.85}.reel-wheel{position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(from 10deg,#c2ccda 0deg,#536980 10deg,#17283a 30deg,#8296ad 48deg,#c4d0da 60deg);border:7px solid #394b60;box-shadow:inset 0 0 0 5px #9aabbc,0 0 0 2px #111b29,12px 3px 0 #111c2b,16px 3px 0 #3e4b5a;animation:reel-spin 24s linear infinite}.reel-wheel:after{content:'';position:absolute;inset:100px;border-radius:50%;background:radial-gradient(circle,#020915 0 24%,#b6c9d9 26% 45%,#283b51 48%);box-shadow:0 0 0 7px #172a40}
.reel-hole{position:absolute;left:calc(50% - 23px);top:calc(50% - 23px);width:46px;height:46px;border-radius:50%;background:#030a14;box-shadow:inset 2px 4px 7px #000,1px 1px 0 #d0e9ff70;transform:rotate(calc(var(--i)*60deg)) translateY(-72px)}
.film-scene{position:absolute;left:-15%;top:60%;width:130%;height:170px;perspective:900px;transform:rotate(-12deg);opacity:.4;filter:drop-shadow(0 30px 20px #000)}.film-perspective{transform:rotateY(-25deg) rotateX(28deg);transform-style:preserve-3d}.film-track{display:flex;width:max-content;gap:10px;padding:19px 8px;border-top:10px solid transparent;border-bottom:10px solid transparent;background:repeating-linear-gradient(90deg,#a5b9d060 0 7px,#060b13 7px 17px) top/100% 9px no-repeat,repeating-linear-gradient(90deg,#a5b9d060 0 7px,#060b13 7px 17px) bottom/100% 9px no-repeat,#050910;border-radius:3px;animation:film-roll 65s linear infinite}.film-frame{display:block;width:140px;height:85px;border:2px solid #24394d;flex-shrink:0;overflow:hidden;background:#102033}.film-frame img{width:100%;height:100%;object-fit:cover;filter:saturate(.65) brightness(.65)}
main{z-index:2;padding-top:30px}.logo{width:clamp(240px,27vw,360px);filter:drop-shadow(0 12px 20px #000a) drop-shadow(0 0 25px #0088ff30)}.stage{perspective:1000px;transform-style:preserve-3d;height:420px}.tv{width:330px;filter:drop-shadow(0 30px 22px #000b) drop-shadow(0 0 18px #138cff25);animation:tv-cinema 7s ease-in-out infinite}.halo{border-color:#78cfff0b;box-shadow:none}.halo:before{border-color:#68c7ff12}.halo:after{border-color:#68c7ff08}.floor{bottom:38px;width:290px;height:28px;background:#027aff45;filter:blur(20px)}
.traveler{backface-visibility:hidden;box-shadow:0 10px 0 -7px #6f8ca4,0 15px 0 -8px #142941,0 24px 35px #0008;border-color:#e7f7ff90}.traveler.character{width:116px;height:145px;border-radius:16px;padding:0;box-shadow:0 10px 0 -7px #152c46,0 22px 40px #0009;border:1px solid #668cab80}.traveler.character img{object-fit:cover}.traveler.character:has(img[src$='.png']){background:radial-gradient(ellipse at 50% 30%,#173d63,#070f20)}.traveler.character:has(img[src$='.png']) img{object-fit:contain;padding:7px 3px 18px;filter:drop-shadow(0 8px 6px #0007)}
h1{font-weight:600;font-size:clamp(32px,4.5vw,52px);text-shadow:0 4px 25px #000;letter-spacing:-1.8px}.status{color:#9abbd3;letter-spacing:3.5px;font-size:9px}footer{color:#71849d;font-size:9px;letter-spacing:2px}.loading{margin-top:22px}.loading i{height:2px}.screen-glow{left:calc(50% - 105px);top:calc(50% - 14px);width:190px;height:120px}
@keyframes tv-cinema{0%,100%{transform:rotateY(-8deg) rotateZ(-2deg) translateY(0)}50%{transform:rotateY(8deg) rotateZ(1deg) translateY(-12px)}}@keyframes reel-spin{to{transform:rotate(360deg)}}@keyframes film-roll{to{transform:translateX(-50%)}}@keyframes beam-pan{to{opacity:.32;filter:blur(25px)}}
@media(max-width:900px){.reel{left:-90px;opacity:.4;transform:scale(.75) rotateY(25deg)}.film-scene{top:65%;opacity:.25}.platform{width:440px}.beam{opacity:.15}.lamp.left{left:5%}.lamp.right{right:5%}}@media(max-width:600px){.stage{height:360px}.tv{width:300px}.platform{top:calc(50% + 100px);width:330px}.reel{top:30%;left:-150px}.film-scene{top:60%}main{padding-top:40px}.logo{width:250px}.status{font-size:8px;letter-spacing:2px}footer{letter-spacing:1px}.studio-photo{background-size:auto 100%}.floor-grid{top:60%}}@media(prefers-reduced-motion:reduce){.reel-wheel,.film-track,.beam,.tv{animation:none!important}}
.studio-photo{background-image:url("assets/cinema-studio.png")}

/* Each asset keeps its brand background; only the rim is white. */
.traveler{background:var(--bg,#0b1830);border:1.5px solid #fff;padding:10px;animation:cinema-arrival 6.8s cubic-bezier(.28,.08,.45,1) both;will-change:transform,opacity}.traveler .brand-image{filter:none}.traveler.character{border:1.5px solid #fff;background:#0b1830}.traveler.character:has(img[src$='.png']){background:#0b1830}
@keyframes cinema-arrival{0%{opacity:0;transform:translate3d(var(--x),var(--y),-100px) rotate(var(--r)) scale(.65)}12%,48%{opacity:1;transform:translate3d(var(--x),var(--y),20px) rotate(var(--r)) scale(1)}75%{opacity:1;transform:translate3d(calc(var(--x)*.45),calc(var(--y)*.45),0) rotate(0) scale(.7)}94%{opacity:1;transform:translate3d(-12px,20px,-30px) scale(.12)}100%{opacity:0;transform:translate3d(-12px,20px,-30px) scale(0)}}

/* Screen ident: baked-in MM is covered only during the transition. */
.tv-rig{position:absolute;width:330px;height:330px;animation:tv-cinema 7s ease-in-out infinite;transform-style:preserve-3d;z-index:2}.tv-rig .tv{inset:0;width:100%;height:100%;animation:none;object-fit:contain}.tv-ident{position:absolute;left:17.5%;top:37%;width:58%;height:43%;border-radius:28% 24% 22% 25%;background:radial-gradient(ellipse at 30% 20%,#ecfdff,#c7edfa 75%,#b9e4f9);display:grid;place-items:center;opacity:0;overflow:hidden;pointer-events:none;box-shadow:inset 0 0 12px #a9d9ec70}.tv-ident img{width:92%;height:auto;filter:drop-shadow(0 2px 3px #00437b20)}.show-ident .tv-ident{animation:screen-ident 7s linear both}.logo{transition:opacity 1s ease,filter 1s ease}.show-ident .logo{opacity:0;filter:blur(5px)}
@keyframes screen-ident{0%{opacity:0;mask-image:linear-gradient(115deg,#000 0%,transparent 25%);mask-size:500% 100%;mask-position:100% 0}14.2857%,85.7143%{opacity:1;mask-image:linear-gradient(115deg,#000 50%,transparent 75%);mask-size:500% 100%;mask-position:0 0}100%{opacity:0;mask-position:100% 0}}
@media(max-width:600px){.tv-rig{width:300px;height:300px}}@media(prefers-reduced-motion:reduce){.tv-rig{animation:none}.show-ident .tv-ident{animation:none!important;opacity:1}.logo{transition:none}}

/* Ivone: fixed body, animated antenna and controls. 330 × 1.4 = 462px. */
.tv-rig{width:462px;height:462px;animation:none!important;transform:none!important}.tv-rig .tv{clip-path:inset(25% 0 0 0);animation:none!important}.stage{height:520px}.tv-antenna,.tv-button{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}.tv-antenna{clip-path:inset(0 0 74% 0);transform-origin:50% 27%;animation:antenna-listen 4.5s ease-in-out infinite}.tv-button{filter:drop-shadow(0 0 3px #36dcff50)}.button-upper{clip-path:circle(5.5% at 84.8% 47%);transform-origin:84.8% 47%;animation:dial-turn 7s ease-in-out infinite}.button-lower{clip-path:circle(5.5% at 84.8% 60%);transform-origin:84.8% 60%;animation:dial-turn 7s 2.8s ease-in-out infinite}.tv-ident{z-index:2}.screen-glow{left:calc(50% - 146px);width:270px;height:174px;top:calc(50% - 13px)}
.beam.left{animation:spot-sweep-left 13s ease-in-out infinite alternate;opacity:.3}.beam.right{animation:spot-sweep-right 17s ease-in-out infinite alternate;opacity:.25}.lamp.left{animation:lamp-sweep-left 13s ease-in-out infinite alternate;transform-origin:50% 0}.lamp.right{animation:lamp-sweep-right 17s ease-in-out infinite alternate;transform-origin:50% 0}.reel-wheel{animation-duration:18s}.film-track{animation-duration:40s}.studio-photo{animation:studio-breathe 20s ease-in-out infinite alternate}.soundstage:before{content:'';position:absolute;inset:-10%;z-index:4;opacity:.2;background:radial-gradient(ellipse at 30% 50%,#3ca7df18,transparent 50%),radial-gradient(ellipse at 70% 50%,#df9d4c14,transparent 50%);filter:blur(40px);animation:studio-haze 25s linear infinite alternate}
@keyframes antenna-listen{0%,100%{transform:rotate(-1.4deg)}40%{transform:rotate(1.4deg)}55%{transform:rotate(-.3deg)}70%{transform:rotate(.7deg)}}@keyframes dial-turn{0%,25%,100%{transform:rotate(0)}36%{transform:rotate(24deg)}47%{transform:rotate(12deg)}60%,75%{transform:rotate(-16deg)}}
@keyframes spot-sweep-left{from{transform:rotate(-32deg);opacity:.2}to{transform:rotate(12deg);opacity:.38}}@keyframes spot-sweep-right{from{transform:rotate(32deg);opacity:.24}to{transform:rotate(-15deg);opacity:.35}}@keyframes lamp-sweep-left{from{transform:rotate(-32deg)}to{transform:rotate(12deg)}}@keyframes lamp-sweep-right{from{transform:rotate(32deg)}to{transform:rotate(-15deg)}}@keyframes studio-breathe{from{filter:saturate(.85) brightness(.9)}to{filter:saturate(1) brightness(1.1)}}@keyframes studio-haze{to{transform:translateX(8%) translateY(-3%)}}
@media(max-width:600px){.tv-rig{width:420px;height:420px}.stage{height:440px}.screen-glow{width:240px;height:150px;left:calc(50% - 133px)}}@media(prefers-reduced-motion:reduce){.tv-antenna,.tv-button,.beam,.lamp,.studio-photo,.soundstage:before{animation:none!important}}