/* Grid layer*/
.abstract-background-A {
    background-color: transparent;
    background-image:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 19px,
            var(--animation-Color-A) 19px,
            var(--animation-Color-A) 20px,
            transparent 20px,
            transparent 39px,
            var(--animation-Color-A) 39px,
            var(--animation-Color-A) 40px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 19px,
            var(--animation-Color-A) 19px,
            var(--animation-Color-A) 20px,
            transparent 20px,
            transparent 39px,
            var(--animation-Color-A) 39px,
            var(--animation-Color-A) 40px
        ),
        radial-gradient(circle at 20px 20px, var(--animation-Color-B) 1.6px, transparent 2.1px),
        radial-gradient(circle at 0 0, var(--animation-Color-B) 1.2px, transparent 1.7px),
        radial-gradient(circle at 40px 0, var(--animation-Color-B) 1.2px, transparent 1.7px),
        radial-gradient(circle at 0 40px, var(--animation-Color-B) 1.2px, transparent 1.7px),
        radial-gradient(circle at 40px 40px, var(--animation-Color-B) 1.2px, transparent 1.7px);

    background-size: 40px 40px;
    animation: grid-wave 12s ease-in-out infinite;
}

.abstract-background-A {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.abstract-background-A::before {
    content: "";
    position: absolute;
    inset: -30%;

    background:
        radial-gradient(
            circle at 20% 30%,
            var(--animation-Color-B),
            transparent 35%
        ),
        radial-gradient(
            circle at 80% 60%,
            rgba(68, 76, 247, 0.12),
            transparent 40%
        ),
        radial-gradient(
            circle at 50% 80%,
            rgba(68, 76, 247, 0.08),
            transparent 30%
        );

    filter: blur(60px);
    animation: auroraMove 20s ease-in-out infinite alternate;
    z-index: -2;
}

.abstract-background-A::after {
    content: "";
    position: absolute;
    inset: -10%;

    background-image:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 19px,
            var(--animation-Color-A) 19px,
            var(--animation-Color-A) 20px,
            transparent 20px,
            transparent 39px,
            var(--animation-Color-A) 39px,
            var(--animation-Color-A) 40px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 19px,
            var(--animation-Color-A) 19px,
            var(--animation-Color-A) 20px,
            transparent 20px,
            transparent 39px,
            var(--animation-Color-A) 39px,
            var(--animation-Color-A) 40px
        ),
        radial-gradient(
            circle at 20px 20px,
            var(--animation-Color-B) 1.6px,
            transparent 2.1px
        ),
        radial-gradient(
            circle at 0 0,
            var(--animation-Color-B) 1.2px,
            transparent 1.7px
        ),
        radial-gradient(
            circle at 40px 0,
            var(--animation-Color-B) 1.2px,
            transparent 1.7px
        ),
        radial-gradient(
            circle at 0 40px,
            var(--animation-Color-B) 1.2px,
            transparent 1.7px
        ),
        radial-gradient(
            circle at 40px 40px,
            var(--animation-Color-B) 1.2px,
            transparent 1.7px
        );

    background-size: 40px 40px;

    transform-origin: center;
    animation: fabricWave 14s ease-in-out infinite;

    z-index: -1;
}

@keyframes fabricWave {
    0%, 100% {
        transform:
            perspective(1400px)
            rotateX(0deg)
            rotateY(0deg)
            scale(1);
    }

    25% {
        transform:
            perspective(1400px)
            rotateX(2deg)
            rotateY(-1deg)
            scale(1.015);
    }

    50% {
        transform:
            perspective(1400px)
            rotateX(-2deg)
            rotateY(1deg)
            scale(1.025);
    }

    75% {
        transform:
            perspective(1400px)
            rotateX(1deg)
            rotateY(-2deg)
            scale(1.015);
    }
}

@keyframes auroraMove {
    0% {
        transform:
            translate(-5%, -5%)
            rotate(0deg)
            scale(1);
    }

    50% {
        transform:
            translate(5%, 3%)
            rotate(15deg)
            scale(1.15);
    }

    100% {
        transform:
            translate(-2%, 8%)
            rotate(-10deg)
            scale(1.05);
    }
}

 
.abstract-background-B {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    background: linear-gradient(
        180deg,
        var(--primary),
        var(--secondary)
    );

    box-shadow:
        inset 0 0 180px rgba(0,0,0,0.65),
        inset 0 0 90px rgba(0,0,0,0.45);
}


.abstract-background-B::before {
    content: "";
    position: absolute;
    inset: -50%;
    z-index: 0;

    background:
        radial-gradient(circle at 25% 30%, var(--tertiary-soft), transparent 45%),
        radial-gradient(circle at 70% 60%, var(--tertiary-medium), transparent 50%),
        radial-gradient(circle at 50% 80%, var(--animation-Color-B), transparent 50%);

    filter: blur(100px);
    opacity: 0.85;

    animation: auroraFloatB 34s ease-in-out infinite;
}


.abstract-background-B::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    background-image:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 39px,
            var(--animation-Color-A) 40px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 39px,
            var(--animation-Color-A) 40px
        ),
        radial-gradient(
            circle at 20px 20px,
            var(--animation-Color-B) 1.6px,
            transparent 2.2px
        );

    background-size: 40px 40px;

    opacity: 0.55;

    animation: gridDriftB 22s ease-in-out infinite;
}

@keyframes auroraFloatB {
    0% {
        transform: translate(-8%, -6%) scale(1);
    }

    50% {
        transform: translate(8%, 6%) scale(1.18);
    }

    100% {
        transform: translate(-5%, 10%) scale(1.05);
    }
}

@keyframes gridDriftB {
    0% {
        transform: translate(0px, 0px);
    }

    50% {
        transform: translate(8px, -10px);
    }

    100% {
        transform: translate(0px, 0px);
    }
}