.hero-band,.community-band{position:relative;isolation:isolate;overflow:hidden}
.hero-backdrop{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:radial-gradient(ellipse at 68% 48%,#361111,transparent 63%)}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(#d61c201b 1px,transparent 1px),linear-gradient(90deg,#d61c201b 1px,transparent 1px);background-size:53px 53px;mask-image:radial-gradient(ellipse at 67% 42%,#000,transparent 77%)}
.hero-orbits{position:absolute;top:48%;left:69%;width:clamp(510px,70vw,1070px);aspect-ratio:1;transform:translate(-50%,-50%) rotate(-23deg) scaleY(.68)}
.hero-orbits i{position:absolute;inset:8%;border:1px solid #d61c2040;border-radius:50%;animation:orbit 24s linear infinite}
.hero-orbits i:nth-child(2){inset:17%;animation-duration:19s;animation-direction:reverse}
.hero-orbits i:nth-child(3){inset:28%;animation-duration:13s}
.hero-orbits i::after{content:"";position:absolute;left:50%;top:0;width:7px;height:7px;border-radius:50%;background:var(--red-ink);box-shadow:0 0 18px 4px var(--red);transform:translate(-50%,-50%)}
.hero-sweep{position:absolute;inset:-25%;background:linear-gradient(112deg,transparent 40%,#d61c2026 50%,transparent 60%);animation:sweep 10s ease-in-out infinite alternate;mix-blend-mode:screen}
@keyframes orbit{to{rotate:360deg}}
@keyframes sweep{from{transform:translateX(-28%)}to{transform:translateX(28%)}}
.filmstrip{height:clamp(82px,12vw,155px);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px;margin:0 0 13px;position:relative;overflow:hidden;border-radius:7px}
.filmstrip i{background-image:linear-gradient(0deg,#360d0daa,transparent),url('/film-frames.webp');background-size:500% 100%;background-position:center}
.filmstrip i:nth-child(1){background-position:0% center}
.filmstrip i:nth-child(2){background-position:25% center}
.filmstrip i:nth-child(4){background-position:75% center}
.filmstrip i:nth-child(5){background-position:100% center}
.filmstrip div{position:absolute;inset:0 auto 0 28%;width:29%;border:2px solid var(--red-ink);border-radius:5px;box-shadow:0 0 0 300px #13090b73;animation:selection 4s ease-in-out infinite alternate}
@keyframes selection{to{transform:translateX(35%)}}
.record-art,.arcade-art{position:relative;height:clamp(118px,14vw,192px);overflow:hidden;background:radial-gradient(ellipse at center,#361111,#140d0d 68%);border-radius:7px;margin-bottom:12px;display:grid;place-items:center}
.record{height:80%;aspect-ratio:1;border-radius:50%;position:absolute;left:43%;background:repeating-radial-gradient(circle,#21191e 0 2px,#3c2832 3px 5px);border:1px solid #835667;animation:orbit 8s linear infinite;display:grid;place-items:center}
.record i{width:36%;aspect-ratio:1;background:conic-gradient(#b92323,#501818,var(--red),#b92323);border-radius:100%;border:4px solid #3e1818}
.sleeve{height:68%;aspect-ratio:1;position:absolute;right:53%;background:linear-gradient(126deg,#220c0c 7%,#7b2020 44%,var(--red) 45%,#812323 50%,#440c0c 83%);border:1px solid #d61c2099;border-radius:4px;box-shadow:9px 3px 23px #0008;rotate:-9deg}
.record-bars{height:40%;display:flex;gap:3px;align-items:center;position:absolute;right:7%;bottom:12%}
.record-bars i{width:3px;height:65%;background:var(--red-ink);animation:bars 1s alternate infinite ease-in-out;transform-origin:bottom;border-radius:4px;opacity:.7}
.record-bars i:nth-child(even){animation-delay:-.45s;height:86%}
.record-bars i:nth-child(3n){animation-delay:-.82s;height:49%}
.community-band>.wrap{position:relative}
.security-visual{position:absolute;z-index:-1;right:1%;top:-75px;width:230px;aspect-ratio:1;display:grid;place-items:center;pointer-events:none}
.security-visual i{position:absolute;inset:11%;border:1px dashed #d61c2054;border-radius:100%;animation:orbit 14s linear infinite}
.security-visual i:nth-child(2){inset:23%;animation-direction:reverse}
.security-visual i:nth-child(3){inset:35%;border-style:solid}
.security-visual b{width:50px;height:58px;background:linear-gradient(140deg,var(--red),#571717);clip-path:polygon(50% 0,96% 15%,91% 64%,75% 85%,50% 100%,25% 85%,9% 64%,4% 15%);animation:shield 3s ease-in-out infinite alternate}
@keyframes shield{to{opacity:.57}}
.arcade-art i,.arcade-art span{position:absolute;width:64%;height:42%;border-radius:50%;border:1px solid #d61c203d;transform:rotate(-18deg)}
.arcade-art span{transform:rotate(18deg)}
.arcade-coin{height:64%;aspect-ratio:1;display:grid;place-items:center;border:6px double var(--red);border-radius:100%;background:linear-gradient(145deg,#a41616,#450909);box-shadow:0 0 36px #d9222265;animation:coin 4.7s ease-in-out infinite}
.arcade-coin b{width:29%;aspect-ratio:1;border-radius:50%;background:var(--red-ink)}
@keyframes coin{0%,55%,100%{transform:rotateY(0) translateY(0)}75%{transform:rotateY(180deg) translateY(-9px)}}
@media(max-width:530px){.hero-orbits{left:80%;top:36%;opacity:.65}.security-visual{width:125px;top:-35px;opacity:.65}}
@media(prefers-reduced-motion:reduce){.hero-backdrop *,.filmstrip *,.record-art *,.security-visual *,.arcade-art *{animation:none!important}}