.fx-backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.fx-backdrop--fixed {
    position: fixed;
    inset: 0;
    z-index: 0;
}

.fx-backdrop__aurora {
    position: absolute;
    width: 60vmax;
    height: 60vmax;
    border-radius: 50%;
    filter: blur(110px);
    opacity: 0.45;
}

.fx-backdrop__aurora--a {
    top: -25vmax;
    left: -15vmax;
    background: radial-gradient(circle, #7c5cff, transparent 65%);
    animation: fx-drift-a 22s ease-in-out infinite alternate;
}

.fx-backdrop__aurora--b {
    right: -20vmax;
    bottom: -25vmax;
    background: radial-gradient(circle, #ff3d81, transparent 65%);
    animation: fx-drift-b 26s ease-in-out infinite alternate;
}

.fx-backdrop__aurora--c {
    top: 30%;
    left: 40%;
    width: 40vmax;
    height: 40vmax;
    opacity: 0.28;
    background: radial-gradient(circle, #00e0ff, transparent 65%);
    animation: fx-drift-c 30s ease-in-out infinite alternate;
}

.fx-backdrop__grid {
    position: absolute;
    left: -50%;
    right: -50%;
    bottom: -20%;
    height: 70%;
    background-image:
        linear-gradient(rgba(124, 92, 255, 0.35) 1px, transparent 1px),
        linear-gradient(90deg, rgba(124, 92, 255, 0.35) 1px, transparent 1px);
    background-size: 64px 64px;
    transform: perspective(600px) rotateX(62deg);
    transform-origin: center top;
    mask-image: linear-gradient(to bottom, transparent, #000 40%, transparent 95%);
    opacity: 0.55;
    animation: fx-grid-move 4s linear infinite;
}

.fx-backdrop__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.fx-backdrop__spot {
    position: absolute;
    inset: 0;
    background: radial-gradient(
        600px circle at var(--fx-mx, 50%) var(--fx-my, 50%),
        rgba(124, 92, 255, 0.16),
        transparent 60%
    );
}

.fx-backdrop__noise {
    position: absolute;
    inset: 0;
    opacity: 0.07;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.fx-backdrop__vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.75) 100%);
}

.hero--fx .fx-backdrop__vignette {
    background: radial-gradient(ellipse at center, transparent 55%, rgba(5, 6, 10, 0.65) 100%);
}

@keyframes fx-drift-a {
    to {
        transform: translate(18vmax, 12vmax) scale(1.2);
    }
}

@keyframes fx-drift-b {
    to {
        transform: translate(-16vmax, -10vmax) scale(1.15);
    }
}

@keyframes fx-drift-c {
    to {
        transform: translate(-12vmax, 8vmax) scale(0.85);
    }
}

@keyframes fx-grid-move {
    to {
        background-position: 0 64px;
    }
}

@media (max-width: 768px) {
    .fx-backdrop__aurora {
        width: 45vmax;
        height: 45vmax;
        opacity: 0.32;
    }

    body:not(.body--not-found) .fx-backdrop__aurora,
    body:not(.body--not-found) .fx-backdrop__grid {
        animation: none;
    }

    .fx-backdrop__grid {
        opacity: 0.35;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fx-backdrop__aurora,
    .fx-backdrop__grid {
        animation: none !important;
    }
}