@property --nm-t { syntax: '<number>'; inherits: true; initial-value: 0; }

@property --nm-hx { syntax: '<length>'; inherits: true; initial-value: 0px; }

@property --nm-hy { syntax: '<length>'; inherits: true; initial-value: 0px; }

#community-section { position: relative; overflow: hidden; isolation: isolate; background-image: radial-gradient(0.6px 0.6px at 7px 5px, rgba(255,255,255,.55), transparent), radial-gradient(0.6px 0.6px at 19px 15px, rgba(200,215,255,.45), transparent), radial-gradient(0.6px 0.6px at 31px 9px, rgba(255,255,255,.45), transparent), radial-gradient(0.7px 0.7px at 43px 20px, rgba(170,195,255,.55), transparent), radial-gradient(0.6px 0.6px at 11px 17px, rgba(255,255,255,.42), transparent), radial-gradient(0.7px 0.7px at 26px 3px, rgba(255,240,225,.45), transparent), radial-gradient(0.8px 0.8px at 38px 12px, rgba(190,210,255,.6), transparent), radial-gradient(0.8px 0.8px at 15px 8px, rgba(255,255,255,.6), transparent), radial-gradient(ellipse 30% 160% at 22% 50%, rgba(60,50,130,.15), transparent 70%), radial-gradient(ellipse 25% 160% at 76% 40%, rgba(30,70,120,.13), transparent 70%); background-size: 23px 23px, 29px 19px, 37px 26px, 47px 21px, 53px 28px, 61px 17px, 71px 25px, 97px 27px, 100% 100%, 100% 100%; background-position: calc(var(--nm-hx) - 23px * var(--nm-t)) var(--nm-hy), calc(var(--nm-hx) - 29px * var(--nm-t)) var(--nm-hy), calc(var(--nm-hx) - 37px * var(--nm-t)) var(--nm-hy), calc(var(--nm-hx) - 47px * var(--nm-t)) var(--nm-hy), calc(var(--nm-hx) - 53px * var(--nm-t)) var(--nm-hy), calc(var(--nm-hx) - 61px * var(--nm-t)) var(--nm-hy), calc(var(--nm-hx) - 71px * var(--nm-t)) var(--nm-hy), calc(var(--nm-hx) - 97px * var(--nm-t)) var(--nm-hy), var(--nm-hx) var(--nm-hy), var(--nm-hx) var(--nm-hy); animation: nm-drift 120s linear infinite; transition: --nm-hx 1.8s cubic-bezier(.2,.7,.2,1), --nm-hy 1.8s cubic-bezier(.2,.7,.2,1); }

@media (hover: hover) { #community-section:hover { --nm-hx: 36px; --nm-hy: 5px; } }

#community-section::before, #community-section::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }

#community-section::before { inset: -8px -60px; translate: var(--nm-hx) var(--nm-hy); background-image: radial-gradient(0.8px 0.8px at 4% 20%, rgba(255,255,255,.6), transparent), radial-gradient(0.8px 0.8px at 9% 78%, rgba(200,215,255,.55), transparent), radial-gradient(0.9px 0.9px at 17% 50%, rgba(255,255,255,.6), transparent), radial-gradient(0.8px 0.8px at 22% 12%, rgba(255,240,225,.5), transparent), radial-gradient(0.8px 0.8px at 31% 85%, rgba(200,215,255,.55), transparent), radial-gradient(0.9px 0.9px at 34% 25%, rgba(255,255,255,.6), transparent), radial-gradient(0.8px 0.8px at 43% 40%, rgba(255,255,255,.5), transparent), radial-gradient(0.8px 0.8px at 46% 90%, rgba(200,215,255,.55), transparent), radial-gradient(0.9px 0.9px at 55% 15%, rgba(255,255,255,.6), transparent), radial-gradient(0.8px 0.8px at 58% 60%, rgba(255,240,225,.5), transparent), radial-gradient(0.8px 0.8px at 67% 42%, rgba(200,215,255,.55), transparent), radial-gradient(0.9px 0.9px at 76% 18%, rgba(255,255,255,.6), transparent), radial-gradient(0.8px 0.8px at 80% 80%, rgba(255,255,255,.55), transparent), radial-gradient(0.8px 0.8px at 84% 50%, rgba(200,215,255,.55), transparent), radial-gradient(0.9px 0.9px at 91% 10%, rgba(255,255,255,.6), transparent), radial-gradient(0.8px 0.8px at 96% 70%, rgba(255,240,225,.5), transparent), radial-gradient(1px 1px at 12% 30%, rgba(255,255,255,.7), transparent), radial-gradient(1px 1px at 37% 72%, rgba(200,215,255,.7), transparent), radial-gradient(1px 1px at 63% 28%, rgba(255,255,255,.7), transparent), radial-gradient(1px 1px at 88% 62%, rgba(200,215,255,.7), transparent), radial-gradient(1.5px 1.5px at 26% 45%, rgba(150,200,255,.95), transparent), radial-gradient(1.4px 1.4px at 71% 68%, rgba(255,215,170,.9), transparent), radial-gradient(1.6px 1.6px at 93% 35%, rgba(190,170,255,.9), transparent), radial-gradient(1.4px 1.4px at 5% 62%, rgba(255,255,255,.95), transparent); animation: nm-fly 50s linear infinite, nm-twinkle 4s ease-in-out infinite alternate; }

#community-section::after { top: 2px; left: 0; width: 40px; height: 1px; background: linear-gradient(90deg, transparent, rgba(190,210,255,.8)); opacity: 0; animation: nm-shoot 90s ease-in infinite; }

@keyframes nm-drift { to { --nm-t: 1; } }

@keyframes nm-twinkle { from { filter: brightness(.5); } to { filter: brightness(1.5); } }

@keyframes nm-fly { 0% { opacity: 0; scale: 1; } 15% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; scale: 3.2; } }@keyframes nm-shoot { 0% { opacity: 0; } 17% { opacity: 0; transform: translate(5vw,0) rotate(3deg); } 17.5% { opacity: 1; } 20% { opacity: 0; transform: translate(40vw,16px) rotate(3deg); } 37% { opacity: 0; transform: translate(90vw,2px) rotate(183deg); } 37.5% { opacity: 1; } 40% { opacity: 0; transform: translate(55vw,16px) rotate(183deg); } 57% { opacity: 0; transform: translate(20vw,-4px) rotate(35deg); } 57.5% { opacity: 1; } 60% { opacity: 0; transform: translate(30vw,20px) rotate(35deg); } 77% { opacity: 0; transform: translate(80vw,-4px) rotate(145deg); } 77.5% { opacity: 1; } 80% { opacity: 0; transform: translate(68vw,20px) rotate(145deg); } 97% { opacity: 0; transform: translate(20vw,18px) rotate(-8deg); } 97.5% { opacity: 1; } 100% { opacity: 0; transform: translate(65vw,0) rotate(-8deg); } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) { #community-section, #community-section::before, #community-section::after { animation: none; transition: none; } }