.logo-cinema{min-height:510px;overflow:hidden;perspective:1200px;border-radius:24px;background:radial-gradient(ellipse at 50% 50%,#1e448033,transparent 67%)}.logo-cinema:before{display:none}.logo-cinema .brand-card{animation:none;position:relative;z-index:2;gap:20px;padding:20px;width:100%;max-width:550px;transform-origin:center}.logo-cinema .tile{animation:none;box-shadow:inset 0 1px 1px #b0d2ff88,0 10px 16px #0003;border-radius:2px;will-change:transform,opacity;transform-origin:center;outline:1px solid #7cafff22}.logo-cinema .pixel-j{width:24%;transform-origin:50% 85%}.logo-cinema .brand-word{width:70%;position:relative;overflow:visible}.logo-cinema .word{width:100%;height:auto;overflow:visible;display:block;filter:drop-shadow(0 5px 17px #0003)}.word-letter{transform-box:fill-box;transform-origin:center;will-change:transform,opacity}.logo-subtitle{display:block;font-size:clamp(10px,1.2vw,15px);letter-spacing:.34em;text-align:center;margin-top:15px;font-weight:500;color:#b7cae7;line-height:1.6}.logo-atmosphere{position:absolute;inset:0;pointer-events:none}.logo-halo{position:absolute;width:80%;height:80%;left:10%;top:10%;background:radial-gradient(ellipse,#267cff2e,transparent 65%);border-radius:50%;opacity:.5;filter:blur(10px)}.logo-ring{position:absolute;width:180px;height:180px;left:24%;top:50%;border:2px solid #9bc7ff88;border-radius:50%;transform:translate(-50%,-50%);opacity:0;box-shadow:0 0 30px #5c99ff55,inset 0 0 25px #5c99ff33}.logo-floor{position:absolute;width:70%;height:2px;left:15%;top:73%;background:linear-gradient(90deg,transparent,#4e91ff55,transparent);opacity:0;box-shadow:0 0 25px #327eff88}.logo-spark{position:absolute;width:3px;height:3px;border-radius:50%;left:var(--spark-x);top:var(--spark-y);background:#79b3ff;opacity:0;box-shadow:0 0 12px #4994ff}.logo-shine{position:absolute;inset:-20% -10%;opacity:0;background:linear-gradient(105deg,transparent 38%,#c6ddff33 48%,transparent 58%);transform:translateX(-150%);pointer-events:none}.logo-controls{position:absolute;bottom:21px;left:20px;right:20px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;z-index:4}.logo-controls .stage-note{position:static!important;font-size:10px;margin-right:12px;letter-spacing:.16em}.logo-controls button{font:inherit;font-size:10px;border:1px solid #527eb14d;background:#11284488;border-radius:99px;padding:9px 12px;color:#a9c5eb;cursor:pointer;line-height:1.5}.logo-controls button:hover{background:#1b3e68;border-color:#7bafff}.logo-controls button:focus-visible{outline:2px solid #aad0ff;outline-offset:3px}.logo-cinema.is-playing .logo-controls .stage-note{color:#c3dcff}.logo-cinema.logo-ready .brand-card{filter:drop-shadow(0 0 12px #367dff18)}
@media(max-width:900px){.logo-cinema{min-height:380px}.logo-cinema .brand-card{max-width:520px}.logo-subtitle{font-size:12px}.logo-controls{bottom:16px}.logo-ring{width:150px;height:150px}}
@media(max-width:600px){.logo-cinema{min-height:330px;margin-inline:-8px}.logo-cinema .brand-card{gap:14px;padding:24px;max-width:440px}.logo-cinema .pixel-j{width:25%}.logo-subtitle{font-size:9px;letter-spacing:.28em;margin-top:10px}.logo-controls{left:10px;right:10px;bottom:12px;gap:6px}.logo-controls .stage-note{font-size:8px;margin-right:6px}.logo-controls button{font-size:9px;padding:8px 10px}.logo-ring{width:110px;height:110px}.logo-floor{top:72%}}
@media(prefers-reduced-motion:reduce){.logo-controls{display:none}.logo-cinema .tile,.word-letter,.logo-subtitle{transform:none!important;opacity:1!important;visibility:visible!important}.logo-halo{opacity:.35}.logo-ring,.logo-spark,.logo-shine,.logo-floor{display:none}}

.logo-cinema{position:relative;display:grid;place-items:center;isolation:isolate}.logo-cinema .brand-card{display:flex;align-items:center;justify-content:center;box-sizing:border-box}.logo-cinema .pixel-j{aspect-ratio:145/185;position:relative;flex:none}.logo-cinema .tile{position:absolute;width:23.4%;height:18.4%;background:#327bf4;display:block;animation:none;animation-delay:calc(var(--order)*.24s);will-change:transform,opacity}.logo-cinema .tile:nth-child(1){left:50.3%;top:0%;--order:1;background:#1665ed}.logo-cinema .tile:nth-child(2){left:76.6%;top:0%;--order:2;background:#1258cb}.logo-cinema .tile:nth-child(3){left:76.6%;top:20.5%;--order:3;background:#175dce}.logo-cinema .tile:nth-child(4){left:50.3%;top:41.1%;--order:4;background:#418cf6}.logo-cinema .tile:nth-child(5){left:76.6%;top:41.1%;--order:5;background:#1357cf}.logo-cinema .tile:nth-child(6){left:0%;top:61.1%;--order:6;background:#398af3}.logo-cinema .tile:nth-child(7){left:50.3%;top:61.1%;--order:7;background:#3989ed}.logo-cinema .tile:nth-child(8){left:76.6%;top:61.1%;--order:8;background:#185dcd}.logo-cinema .tile:nth-child(9){left:25.5%;top:81.1%;--order:9;background:#327ef2}.logo-cinema .tile:nth-child(10){left:50.3%;top:81.1%;--order:10;background:#236beb}
.logo-cinema.logo-cinema-footer{width:min(100%,700px);margin:35px auto;min-height:300px;color:#fff;background:radial-gradient(ellipse,#163356,#091321 70%);border:1px solid #527eb122}.logo-cinema-footer .brand-card{max-width:400px}.logo-cinema-footer .logo-subtitle{font-size:10px}.logo-cinema-footer .logo-controls{bottom:14px}.logo-cinema .logo-sound[aria-pressed="true"]{background:#25599a;color:white}@media(max-width:600px){.logo-cinema.logo-cinema-footer{width:calc(100% - 32px);min-height:270px;margin:25px auto}.logo-cinema-footer .brand-card{max-width:350px}}