/* 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);
    }

    15% {
        transform:
            perspective(1400px)
            rotateX(3deg)
            rotateY(-2deg)
            scale(1.02);
    }

    35% {
        transform:
            perspective(1400px)
            rotateX(-2deg)
            rotateY(3deg)
            scale(1.03);
    }

    55% {
        transform:
            perspective(1400px)
            rotateX(4deg)
            rotateY(1deg)
            scale(1.02);
    }

    75% {
        transform:
            perspective(1400px)
            rotateX(-3deg)
            rotateY(-3deg)
            scale(1.025);
    }
}

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

    20% {
        transform:
            translate(4%, -2%)
            rotate(10deg)
            scale(1.08);
    }

    40% {
        transform:
            translate(8%, 5%)
            rotate(22deg)
            scale(1.18);
    }

    60% {
        transform:
            translate(-3%, 9%)
            rotate(-8deg)
            scale(1.10);
    }

    80% {
        transform:
            translate(6%, 2%)
            rotate(18deg)
            scale(1.20);
    }

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