.gradient-bg {
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
            radial-gradient(60% 55% at 22% 28%, rgba(var(--gradient-color1), 0.85), transparent 70%),
            radial-gradient(55% 50% at 80% 22%, rgba(var(--gradient-color2), 0.75), transparent 70%),
            radial-gradient(60% 55% at 18% 82%, rgba(var(--gradient-color3), 0.7), transparent 70%),
            radial-gradient(55% 55% at 78% 78%, rgba(var(--gradient-color4), 0.7), transparent 70%),
            linear-gradient(40deg, var(--gradient-bg1), var(--gradient-bg2));
    transition: background 800ms var(--ease-out);
}

.gradient-bg canvas {
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 900ms var(--ease-out);
}

.gradient-bg canvas.is-ready {
    opacity: 1;
}

.gradient-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.14;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}