/* effects */
#bar{position:fixed;top:0;left:0;height:2px;width:100%;background:#fff;transform-origin:0 50%;transform:scaleX(0);z-index:40}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(340px circle at var(--hx,70%) var(--hy,28%),rgba(255,255,255,.07),transparent 70%)}
.group,.discord{position:relative;overflow:hidden}
.group::after,.discord::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(240px circle at var(--mx,50%) var(--my,-60%),rgba(255,255,255,.08),transparent 70%);opacity:0;transition:opacity .4s}
.group.lit::after,.discord.lit::after{opacity:1}
.mq{overflow:hidden;border-block:.5px solid var(--line);padding:14px 0;margin-top:0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.mq div{display:flex;width:max-content;animation:mq 30s linear infinite;font-weight:700;font-size:24px;letter-spacing:-.03em;color:#3a3a3d}
.mq span{white-space:nowrap;padding-right:44px}
.mq span:nth-child(3n){color:#8e8e93}
@keyframes mq{to{transform:translateX(-50%)}}