/* Animated mesh background — two-layer pseudo-element technique */
.gradient-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    background: #19203A;
    overflow: hidden;
}

/* Layer 1 — large slow-moving blobs */
.gradient-bg::before {
    content: '';
    position: absolute;
    inset: -80%;
    width: 260%;
    height: 260%;
    background:
        radial-gradient(circle 500px at 30% 40%, rgba(50, 213, 173, 0.45) 0%, transparent 60%),
        radial-gradient(circle 400px at 70% 60%, rgba(90, 129, 255, 0.35) 0%, transparent 60%),
        radial-gradient(circle 600px at 50% 30%, rgba(115, 210, 255, 0.30) 0%, transparent 55%);
    animation: heroMesh1 18s ease-in-out infinite;
    z-index: 0;
}

/* Layer 2 — smaller faster counter-moving blobs */
.gradient-bg::after {
    content: '';
    position: absolute;
    inset: -60%;
    width: 220%;
    height: 220%;
    background:
        radial-gradient(circle 350px at 65% 35%, rgba(50, 213, 173, 0.25) 0%, transparent 55%),
        radial-gradient(circle 300px at 25% 70%, rgba(90, 129, 255, 0.30) 0%, transparent 55%),
        radial-gradient(circle 250px at 80% 80%, rgba(115, 210, 255, 0.20) 0%, transparent 55%);
    animation: heroMesh2 14s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
}

@keyframes heroMesh1 {
    0%, 100% {
        transform: translate(0%, 0%) scale(1);
    }
    33% {
        transform: translate(8%, -6%) scale(1.05);
    }
    66% {
        transform: translate(-6%, 8%) scale(0.95);
    }
}

@keyframes heroMesh2 {
    0%, 100% {
        transform: translate(0%, 0%) scale(1) rotate(0deg);
    }
    25% {
        transform: translate(-8%, 5%) scale(1.08) rotate(2deg);
    }
    50% {
        transform: translate(6%, -8%) scale(0.92) rotate(-1deg);
    }
    75% {
        transform: translate(-4%, -6%) scale(1.04) rotate(1deg);
    }
}

.grain-overlay {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-repeat: repeat;
}

@media (prefers-reduced-motion: reduce) {
    .gradient-bg::before,
    .gradient-bg::after {
        animation: none;
    }
}