:root { color-scheme: dark; --mx: 0; --my: 0; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; overflow: hidden; background: #070610; }
body { font-family: Arial, Helvetica, sans-serif; }

.scene {
  position: relative; isolation: isolate; min-height: 100svh; overflow: hidden;
  display: grid; place-items: center; color: #fff;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 55, 63, .12), transparent 24rem),
    radial-gradient(circle at 50% 115%, rgba(255, 170, 31, .16), transparent 35rem),
    linear-gradient(155deg, #0d0918 0%, #080713 45%, #100814 100%);
}
.scene::before { content:""; position:absolute; inset:0; z-index:-5; opacity:.16; background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:64px 64px; mask-image:radial-gradient(circle,#000,transparent 72%); }
.aurora { position:absolute; z-index:-4; width:48vw; height:48vw; border-radius:50%; filter:blur(80px); opacity:.12; animation:drift 14s ease-in-out infinite alternate; }
.aurora--one { left:-18vw; top:-22vw; background:#ff263e; }
.aurora--two { right:-20vw; bottom:-25vw; background:#ffb51f; animation-delay:-7s; }
.grain { position:absolute; inset:0; z-index:20; pointer-events:none; opacity:.035; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }

.stars i { position:absolute; width:3px; height:3px; border-radius:50%; background:#ffd985; box-shadow:0 0 10px #ff6e49; animation:twinkle 2.8s ease-in-out infinite; }
.stars i:nth-child(1){left:8%;top:21%}.stars i:nth-child(2){left:14%;top:72%;animation-delay:-1s}.stars i:nth-child(3){left:22%;top:12%;animation-delay:-2s}.stars i:nth-child(4){left:28%;top:83%}.stars i:nth-child(5){left:37%;top:17%;animation-delay:-1.5s}.stars i:nth-child(6){left:45%;top:9%}.stars i:nth-child(7){left:54%;top:14%;animation-delay:-.8s}.stars i:nth-child(8){left:64%;top:8%}.stars i:nth-child(9){left:72%;top:21%;animation-delay:-2.2s}.stars i:nth-child(10){left:81%;top:12%}.stars i:nth-child(11){left:91%;top:28%;animation-delay:-1.1s}.stars i:nth-child(12){left:88%;top:71%}.stars i:nth-child(13){left:77%;top:88%;animation-delay:-1.8s}.stars i:nth-child(14){left:67%;top:79%}.stars i:nth-child(15){left:56%;top:91%;animation-delay:-.5s}.stars i:nth-child(16){left:41%;top:87%}.stars i:nth-child(17){left:31%;top:71%;animation-delay:-2s}.stars i:nth-child(18){left:18%;top:89%}.stars i:nth-child(19){left:6%;top:48%;animation-delay:-1.3s}.stars i:nth-child(20){left:94%;top:52%}.stars i:nth-child(21){left:26%;top:37%;animation-delay:-.7s}.stars i:nth-child(22){left:74%;top:42%}.stars i:nth-child(23){left:39%;top:59%;animation-delay:-2.4s}.stars i:nth-child(24){left:61%;top:67%}

.broadcast { position:relative; width:min(78vw, 780px); aspect-ratio:1; display:grid; place-items:center; transform:translate(calc(var(--mx) * -8px),calc(var(--my) * -8px)); transition:transform .35s ease-out; }
.logo-stage { position:relative; z-index:5; width:clamp(230px,34vw,410px); aspect-ratio:1; display:grid; place-items:center; transform:translate(calc(var(--mx) * 14px),calc(var(--my) * 14px)); transition:transform .35s ease-out; }
.logo { position:relative; z-index:3; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 16px 35px rgba(255,45,57,.22)); animation:float 5s ease-in-out infinite; }
.halo { position:absolute; inset:14%; border:1px solid rgba(255,100,72,.24); border-radius:50%; box-shadow:0 0 50px rgba(255,49,61,.12), inset 0 0 40px rgba(255,172,31,.05); animation:breathe 3.5s ease-out infinite; }
.halo--two { inset:2%; animation-delay:-1.75s; }
.signal { position:absolute; inset:18%; border:1px solid rgba(255,72,69,.20); border-radius:50%; animation:signal 4s ease-out infinite; }
.signal--two { animation-delay:-1.33s }.signal--three { animation-delay:-2.66s }
.orbit { position:absolute; z-index:-1; left:50%; top:50%; border:1px solid rgba(255,255,255,.075); border-radius:50%; transform:translate(-50%,-50%) rotate(-12deg); }
.orbit--outer { width:min(86vw,900px); height:min(58vw,590px); }
.orbit--inner { width:min(62vw,650px); height:min(44vw,460px); transform:translate(-50%,-50%) rotate(18deg); }

.creator { position:absolute; z-index:8; width:66px; height:66px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.13); border-radius:22px; color:#fff; font-size:24px; font-weight:800; background:linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.045)); box-shadow:0 18px 50px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.12); backdrop-filter:blur(14px); animation:bob 4.5s ease-in-out infinite; }
.creator span { filter:drop-shadow(0 0 8px rgba(255,183,60,.55)); }
.creator i { position:absolute; right:-3px; top:-3px; width:15px; height:15px; border:3px solid #110b16; border-radius:50%; background:#ff3946; box-shadow:0 0 14px #ff3946; animation:blink 1.6s ease-in-out infinite; }
.creator--music{left:1%;top:24%;transform:rotate(-9deg)}.creator--video{right:1%;top:22%;transform:rotate(8deg);animation-delay:-1s}.creator--talk{left:8%;bottom:14%;transform:rotate(7deg);animation-delay:-2s}.creator--art{right:8%;bottom:12%;transform:rotate(-7deg);animation-delay:-3s}

.equalizer { position:absolute; left:50%; bottom:7%; z-index:4; height:24px; display:flex; align-items:end; gap:4px; transform:translateX(-50%); opacity:.72; }
.equalizer i { display:block; width:3px; height:6px; border-radius:3px; background:linear-gradient(#ffd249,#ff3e43); animation:equalize .8s ease-in-out infinite alternate; }
.equalizer i:nth-child(2n){animation-delay:-.2s}.equalizer i:nth-child(3n){animation-delay:-.45s}.equalizer i:nth-child(4n){animation-delay:-.65s}

footer { position:absolute; z-index:25; bottom:max(18px,env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); color:rgba(255,255,255,.42); font-size:11px; letter-spacing:.22em; text-transform:uppercase; white-space:nowrap; }
@keyframes float{50%{transform:translateY(-8px)}}
@keyframes bob{50%{margin-top:-10px}}
@keyframes breathe{0%,100%{transform:scale(.94);opacity:.18}50%{transform:scale(1.04);opacity:.7}}
@keyframes signal{0%{transform:scale(.55);opacity:.5}100%{transform:scale(1.65);opacity:0}}
@keyframes twinkle{50%{opacity:.18;transform:scale(.45)}}
@keyframes blink{50%{opacity:.35;box-shadow:0 0 3px #ff3946}}
@keyframes equalize{to{height:23px}}
@keyframes drift{to{transform:translate(10vw,8vw) scale(1.2)}}
@media (max-width:640px){.broadcast{width:96vw}.logo-stage{width:min(62vw,300px)}.creator{width:52px;height:52px;border-radius:18px;font-size:19px}.creator--music{left:4%;top:19%}.creator--video{right:4%;top:18%}.creator--talk{left:8%;bottom:18%}.creator--art{right:8%;bottom:17%}.orbit--outer{width:105vw;height:78vw}.orbit--inner{width:80vw;height:65vw}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}.broadcast,.logo-stage{transform:none!important}}