.gradient-background {
    position: relative;
    display: block;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    /* Elegant gradient background */
    background: linear-gradient(120deg, #e7dacb 0%, #fff6e9 60%, #cdb4db 100%);
    box-shadow: 0 0 0 100vw rgba(139, 114, 82, 0.09) inset;
    isolation: isolate;
    &:before {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 1;
        background:
            repeating-radial-gradient(circle at 70% 20%, #ffe4b5 0%, #fffbe8 15%, transparent 30%, transparent 100%),
            repeating-radial-gradient(circle at 20% 80%, #ceb99288 0%, #fffbe833 18%, transparent 40%, transparent 100%);
        opacity: 0.16;
        mix-blend-mode: lighten;
    }
    &:after {
        /* Subtle noise grain for tactile feeling */
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 3;
        opacity: 0.10;
        background:
            url('data:image/svg+xml;utf8,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><filter id="n"><feTurbulence baseFrequency="0.6" seed="8" type="fractalNoise"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.7"/></svg>');
        mix-blend-mode: soft-light;
    }
    .blob {
        position: absolute;
        border-radius: 50%;
        pointer-events: none;
        opacity: 0.20;
        filter: blur(60px);
        z-index: 0;
        animation: gradient-bg-blobfade 19s cubic-bezier(.77,0,.18,1) infinite alternate;
    }
    .blob.blob1 {
        width: 38vw;
        height: 38vw;
        top: 12vh;
        left: 10vw;
        background: radial-gradient(circle, #fff1c1 0%, #ffe4b5 80%, transparent 100%);
        animation-delay: 0s;
    }
    .blob.blob2 {
        width: 50vw;
        height: 50vw;
        bottom: -10vh;
        right: 6vw;
        background: radial-gradient(circle, #ccb2a3 0%, #f0e1d2 70%, transparent 100%);
        animation-delay: 12s;
    }
}

@keyframes gradient-bg-blobfade {
    0% {
        transform: scale(1) translate(0,0);
        opacity: 0.16;
    }
    70% {
        transform: scale(1.05) translate(20px, -12px);
        opacity: 0.21;
    }
    100% {
        transform: scale(1) translate(-14px, 18px);
        opacity: 0.17;
    }
}