.bg-layer { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, #020408 0%, #0a1525 100%); z-index: -10; }
        .particles-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -5; overflow: hidden; pointer-events: none; }
        .particle { position: absolute; bottom: -10px; width: 4px; height: 4px; background: var(--accent-cyan); border-radius: 50%; box-shadow: 0 0 10px var(--accent-cyan); animation: rise 15s infinite ease-in; opacity: 0; }
        .particle:nth-child(1) { left: 10%; animation-duration: 12s; }
        .particle:nth-child(2) { left: 20%; animation-duration: 18s; width: 6px; height: 6px; }
        .particle:nth-child(3) { left: 50%; animation-duration: 20s; width: 3px; height: 3px; }
        .particle:nth-child(4) { left: 80%; animation-duration: 16s; width: 5px; height: 5px; }
        @keyframes rise { 0% { bottom: -10px; opacity: 0; transform: translateX(0); } 50% { transform: translateX(30px); opacity: 0.6; } 100% { bottom: 100vh; opacity: 0; transform: translateX(-30px); } }
        .waves-container { position: fixed; bottom: 0; left: 0; width: 100%; height: 30vh; z-index: -6; pointer-events: none; }
        .waves { width: 100%; height: 100%; min-height: 100px; }
        .parallax > use { animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite; }
        .parallax > use:nth-child(1) { animation-delay: -2s; animation-duration: 7s; fill: rgba(125, 249, 255, 0.1); }
        .parallax > use:nth-child(2) { animation-delay: -3s; animation-duration: 10s; fill: rgba(43, 106, 255, 0.15); }
        .parallax > use:nth-child(3) { animation-delay: -4s; animation-duration: 13s; fill: rgba(43, 106, 255, 0.25); }
        .parallax > use:nth-child(4) { animation-delay: -5s; animation-duration: 20s; fill: rgba(5, 8, 16, 0.5); }
        @keyframes move-forever { 0% { transform: translate3d(-90px,0,0); } 100% { transform: translate3d(85px,0,0); } }
body{isolation:isolate}
.bg-layer{background:radial-gradient(ellipse at 15% 8%,#102333 0%,transparent 42%),linear-gradient(165deg,#050b15,#0b1629 75%,#091421);z-index:-10}
.aurora-scene{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:-8}
.aurora{position:absolute;border-radius:50%;opacity:.6;animation:aurora-drift 26s ease-in-out infinite alternate;pointer-events:none;will-change:transform}
.aurora-cyan{left:-22%;top:-27%;width:105vw;height:80vh;background:radial-gradient(ellipse,transparent 38%,rgba(81,193,191,.16) 48%,rgba(67,146,171,.08) 59%,transparent 70%);transform:rotate(-24deg)}
.aurora-blue{right:-34%;top:0;width:100vw;height:100vh;background:radial-gradient(ellipse,transparent 38%,rgba(81,113,172,.15) 48%,rgba(64,98,162,.04) 62%,transparent 72%);animation-duration:33s;animation-delay:-12s}
.aurora-gold{right:-6%;top:3%;width:52vw;height:54vh;background:radial-gradient(ellipse,rgba(203,181,118,.065),transparent 67%);animation-duration:30s;animation-delay:-8s}
@keyframes aurora-drift{from{transform:translate3d(-2%,-3%,0) rotate(-22deg) scale(.97)}to{transform:translate3d(6%,8%,0) rotate(-8deg) scale(1.05)}}
.particle{width:2px!important;height:2px!important;bottom:0;opacity:.12;animation:crystal-drift 26s ease-in-out infinite;box-shadow:0 0 8px #a0d6e1}
.particle:nth-child(1){left:7%;animation-duration:24s;animation-delay:-9s}
.particle:nth-child(2){left:23%;animation-duration:32s;animation-delay:-18s}
.particle:nth-child(3){left:73%;animation-duration:29s;animation-delay:-2s}
.particle:nth-child(4){left:92%;animation-duration:34s;animation-delay:-20s}
.particle:nth-child(5){left:59%;animation-duration:36s;animation-delay:-13s}
@keyframes crystal-drift{0%{transform:translate3d(0,5vh,0);opacity:0}25%,70%{opacity:.35}100%{transform:translate3d(35px,-100vh,0);opacity:0}}
.waves-container{height:15vh;opacity:.5}
.parallax>use:nth-child(1){fill:rgba(125,224,235,.06);animation-duration:32s}
.parallax>use:nth-child(2){fill:rgba(95,141,195,.10);animation-duration:43s}
.parallax>use:nth-child(n+3){display:none}
body[data-motion=reduced] .aurora,body[data-motion=reduced] .particle,body[data-motion=reduced] .parallax>use{animation:none!important;will-change:auto}
body[data-motion=reduced] .particle{opacity:.12;bottom:40%}
.motion-paused .aurora,.motion-paused .particle,.motion-paused .parallax>use{animation-play-state:paused}

.aurora{opacity:.95;animation-duration:18s}
.aurora-cyan{left:-28%;top:-20%;width:120vw;height:100vh;background:radial-gradient(ellipse,transparent 34%,rgba(71,231,219,.30) 44%,rgba(53,173,213,.19) 52%,transparent 65%)}
.aurora-blue{right:-32%;top:-7%;width:125vw;height:120vh;background:radial-gradient(ellipse,transparent 33%,rgba(94,118,230,.29) 46%,rgba(72,118,214,.10) 58%,transparent 70%);animation-duration:23s;animation-delay:-11s}
.aurora-gold{right:-12%;top:2%;width:64vw;height:70vh;background:radial-gradient(ellipse,rgba(225,187,101,.15),transparent 66%);animation-duration:21s}
@keyframes aurora-drift{from{transform:translate3d(-7%,-9%,0) rotate(-29deg) scale(.96)}to{transform:translate3d(10%,13%,0) rotate(-7deg) scale(1.12)}}
.particle{width:3px!important;height:3px!important;box-shadow:0 0 9px #91f1ed}
@keyframes crystal-drift{0%{transform:translate3d(0,5vh,0);opacity:0}22%,68%{opacity:.7}100%{transform:translate3d(65px,-100vh,0);opacity:0}}
.waves-container{height:23vh;opacity:.85}
.parallax>use:nth-child(1){fill:rgba(125,224,235,.14);animation-duration:22s}
.parallax>use:nth-child(2){fill:rgba(86,133,221,.20);animation-duration:31s}
@media(max-width:900px){.aurora-cyan{width:170vw;left:-65%;height:90vh}.aurora-blue{width:160vw;right:-70%}.aurora-gold{width:90vw;right:-20%}.waves-container{height:18vh;opacity:.7}}
@media(prefers-reduced-motion:reduce){.aurora,.particle,.parallax>use{animation:none!important}}
body{--accent-cyan:#7df9ff}.bg-layer{pointer-events:none}