/* ==========================================================================
   Background — fixed aurora mesh gradient, noise texture, grid fade
   ========================================================================== */

.bg-layer{
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    overflow: hidden;
    background: var(--bg);
}

.bg-layer .aurora{
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .55;
    mix-blend-mode: screen;
    will-change: transform;
}
.bg-layer .aurora.a1{
    width: 60vw; height: 60vw; max-width: 900px; max-height: 900px;
    top: -20%; left: -10%;
    background: radial-gradient(circle at 30% 30%, rgba(255,51,85,.55), transparent 70%);
    animation: driftA 26s ease-in-out infinite alternate;
}
.bg-layer .aurora.a2{
    width: 50vw; height: 50vw; max-width: 760px; max-height: 760px;
    top: 20%; right: -15%;
    background: radial-gradient(circle at 60% 40%, rgba(124,92,255,.42), transparent 70%);
    animation: driftB 32s ease-in-out infinite alternate;
}
.bg-layer .aurora.a3{
    width: 45vw; height: 45vw; max-width: 680px; max-height: 680px;
    bottom: -15%; left: 20%;
    background: radial-gradient(circle at 50% 50%, rgba(255,138,61,.38), transparent 70%);
    animation: driftC 30s ease-in-out infinite alternate;
}

@keyframes driftA{ from{ transform: translate3d(0,0,0) scale(1);} to{ transform: translate3d(6%, 8%, 0) scale(1.12);} }
@keyframes driftB{ from{ transform: translate3d(0,0,0) scale(1);} to{ transform: translate3d(-8%, 6%, 0) scale(1.08);} }
@keyframes driftC{ from{ transform: translate3d(0,0,0) scale(1);} to{ transform: translate3d(5%, -6%, 0) scale(1.1);} }

.bg-layer .noise{
    position: absolute;
    inset: -20%;
    opacity: .05;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.bg-layer .grid-fade{
    position: absolute;
    inset: 0;
    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;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, black 0%, transparent 75%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, black 0%, transparent 75%);
}

@media (prefers-reduced-motion: reduce){
    .bg-layer .aurora{ animation: none; }
}