/* --LANDING PAGE GRADIENT BLOBS-- */
.gradient-blob {
    position: absolute;
    mix-blend-mode: plus-lighter;
    pointer-events: none;
    will-change: opacity;
    backface-visibility: hidden;
    transform: translateZ(0);

    --color1: rgba(246, 197, 91, 0.5);
    --color2: rgba(234, 89, 54, 0.5);
    --color3: rgba(131, 93, 246, 0.6);
    --color1-next: rgba(246, 197, 91, 0.5);
    --color2-next: rgba(234, 89, 54, 0.5);
    --color3-next: rgba(131, 93, 246, 0.6);
}

/* Layered gradient system for smooth transitions */
.gradient-blob::before,
.gradient-blob::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    filter: blur(120px);
    transition: opacity 0.8s cubic-bezier(0.4, 0.0, 0.2, 1);
}

#gradient-blob-1 {
    top: -32vh;
    left: -100vw;
    width: 240%;
    height: 120vh;
    opacity: 0.5;
    --pos1x: 30%;
    --pos1y: 40%;
    --pos2x: 70%;
    --pos2y: 60%;
    --pos3x: 50%;
    --pos3y: 50%;
}

#gradient-blob-1::before {
    background:
        radial-gradient(ellipse at var(--pos1x) var(--pos1y), var(--color1) 0%, transparent 50%),
        radial-gradient(ellipse at var(--pos2x) var(--pos2y), var(--color2) 0%, transparent 50%),
        radial-gradient(circle at var(--pos3x) var(--pos3y), var(--color3) 0%, transparent 60%);
    opacity: 1;
}

#gradient-blob-1::after {
    background:
        radial-gradient(ellipse at var(--pos1x) var(--pos1y), var(--color1-next) 0%, transparent 50%),
        radial-gradient(ellipse at var(--pos2x) var(--pos2y), var(--color2-next) 0%, transparent 50%),
        radial-gradient(circle at var(--pos3x) var(--pos3y), var(--color3-next) 0%, transparent 60%);
    opacity: 0;
}

/* Control layer visibility via data attribute */
#gradient-blob-1[data-layer="after"]::before {
    opacity: 0;
}

#gradient-blob-1[data-layer="after"]::after {
    opacity: 1;
}

#gradient-blob-1[data-layer="before"]::before {
    opacity: 1;
}

#gradient-blob-1[data-layer="before"]::after {
    opacity: 0;
}

#gradient-blob-2 {
    bottom: -12vh;
    right: -90vw;
    width: 160%;
    height: 150vh;
    opacity: 0.6;
    --pos1x: 60%;
    --pos1y: 30%;
    --pos2x: 40%;
    --pos2y: 70%;
    --pos3x: 50%;
    --pos3y: 50%;
}

#gradient-blob-2::before {
    background:
        radial-gradient(ellipse at var(--pos1x) var(--pos1y), var(--color1) 0%, transparent 50%),
        radial-gradient(ellipse at var(--pos2x) var(--pos2y), var(--color2) 0%, transparent 50%),
        radial-gradient(circle at var(--pos3x) var(--pos3y), var(--color3) 0%, transparent 60%);
    opacity: 1;
}

#gradient-blob-2::after {
    background:
        radial-gradient(ellipse at var(--pos1x) var(--pos1y), var(--color1-next) 0%, transparent 50%),
        radial-gradient(ellipse at var(--pos2x) var(--pos2y), var(--color2-next) 0%, transparent 50%),
        radial-gradient(circle at var(--pos3x) var(--pos3y), var(--color3-next) 0%, transparent 60%);
    opacity: 0;
}

/* Control layer visibility via data attribute */
#gradient-blob-2[data-layer="after"]::before {
    opacity: 0;
}

#gradient-blob-2[data-layer="after"]::after {
    opacity: 1;
}

#gradient-blob-2[data-layer="before"]::before {
    opacity: 1;
}

#gradient-blob-2[data-layer="before"]::after {
    opacity: 0;
}

@media screen and (min-width: 800px) {
    #gradient-blob-1 {
        top: -40vw;
        left: -40vw;
        width: 100%;
        height: 120vh;
    }

    #gradient-blob-2 {
        bottom: -40vw;
        right: -40vw;
        width: 100%;
        height: 160vh;
    }
}