/**
 * Mesh / aurora фон.
 * Идея как у css-mesh / Stripe-style mesh: слои radial blobs + blur.
 * Только фон — не смешиваем с layout-стилями.
 */

.mesh-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    background:
        linear-gradient(
            165deg,
            #f4f8fa 0%,
            #e8f1f4 42%,
            #e3eef2 100%
        );
}

.mesh-bg__layer {
    position: absolute;
    inset: -18%;
    filter: blur(64px);
    opacity: 0.95;
    will-change: transform;
}

.mesh-bg__orb {
    position: absolute;
    border-radius: 50%;
}

.mesh-bg__orb--a {
    width: min(58vw, 620px);
    height: min(58vw, 620px);
    top: -8%;
    left: -6%;
    background: radial-gradient(
        circle at 35% 35%,
        color-mix(in srgb, #2dd4bf 55%, transparent) 0%,
        color-mix(in srgb, #0f6b63 28%, transparent) 42%,
        transparent 72%
    );
    animation: mesh-drift-a 22s ease-in-out infinite alternate;
}

.mesh-bg__orb--b {
    width: min(52vw, 560px);
    height: min(52vw, 560px);
    top: 4%;
    right: -10%;
    background: radial-gradient(
        circle at 60% 40%,
        color-mix(in srgb, #38bdf8 48%, transparent) 0%,
        color-mix(in srgb, #2563eb 18%, transparent) 45%,
        transparent 70%
    );
    animation: mesh-drift-b 26s ease-in-out infinite alternate;
}

.mesh-bg__orb--c {
    width: min(62vw, 680px);
    height: min(62vw, 680px);
    bottom: -18%;
    left: 18%;
    background: radial-gradient(
        circle at 50% 50%,
        color-mix(in srgb, #99f6e4 50%, transparent) 0%,
        color-mix(in srgb, #14b8a6 22%, transparent) 40%,
        transparent 68%
    );
    animation: mesh-drift-c 28s ease-in-out infinite alternate;
}

.mesh-bg__orb--d {
    width: min(44vw, 480px);
    height: min(44vw, 480px);
    top: 38%;
    left: 42%;
    background: radial-gradient(
        circle at 50% 50%,
        color-mix(in srgb, #bae6fd 42%, transparent) 0%,
        color-mix(in srgb, #64748b 12%, transparent) 48%,
        transparent 70%
    );
    animation: mesh-drift-d 20s ease-in-out infinite alternate;
}

/* Лёгкая «зернистость», как в premium mesh-фонах */
.mesh-bg__noise {
    position: absolute;
    inset: 0;
    opacity: 0.035;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 180px 180px;
}

@keyframes mesh-drift-a {
    from {
        transform: translate3d(0, 0, 0) scale(1);
    }
    to {
        transform: translate3d(8%, 10%, 0) scale(1.08);
    }
}

@keyframes mesh-drift-b {
    from {
        transform: translate3d(0, 0, 0) scale(1.05);
    }
    to {
        transform: translate3d(-10%, 12%, 0) scale(0.95);
    }
}

@keyframes mesh-drift-c {
    from {
        transform: translate3d(0, 0, 0) scale(1);
    }
    to {
        transform: translate3d(6%, -8%, 0) scale(1.1);
    }
}

@keyframes mesh-drift-d {
    from {
        transform: translate3d(0, 0, 0) scale(0.95);
    }
    to {
        transform: translate3d(-7%, -6%, 0) scale(1.06);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mesh-bg__orb {
        animation: none !important;
    }
}

@media (max-width: 720px) {
    .mesh-bg__layer {
        filter: blur(48px);
    }

    .mesh-bg__orb--d {
        opacity: 0.7;
    }
}