.background-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1000;
    /* Puts the background behind everything else */
    overflow: hidden;
    /* Hides the excess parts of the rotated background */
}

.background-pattern {
    background-image: linear-gradient(207deg, rgba(32, 24, 82, 0.70) 33.02%, rgba(24, 21, 75, 0.00) 64.19%);
    mask-image: url("/images/vip/background-pattern.svg");
    -webkit-mask-image: url("/images/vip/background-pattern.svg");
    /* For broader browser support */

    /* The mask needs to be repeated just like a background image */
    mask-repeat: repeat;
    -webkit-mask-repeat: repeat;
    position: absolute;
    /* To keep the background in place */
    top: -100%;
    /* Adjust these values to ensure the background covers the entire screen */
    left: -100%;
    width: 300%;
    /* Make it large enough to cover the screen when rotated */
    height: 300%;
    /* width: 100%; */
    transform: rotate(24deg);
    mix-blend-mode: multiply;
}

.section {
    width: clamp(0pt, 85vw, 455pt);
    margin: clamp(0pt, 6vw, 28pt) 0pt;
    display: flex;
    padding: clamp(0pt, 6vw, 40px) clamp(0pt, 6vw, 36px);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: clamp(0pt, 2vw, 16px);

    border-radius: 25px;
    backdrop-filter: blur(12px);
    background: rgba(91, 74, 244, 0.21);
    box-shadow: 0 13.332px 13.332px 0 rgba(21, 25, 69, 0.32) inset;
}

.section-title {
    color: var(--Light-font-pact-house, #DACFFF);
    text-align: center;
    font-family: Outfit;
    font-size: clamp(0pt, 6vw, 36px);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0.72px;
}

.section-description {
    color: var(--Light-font-pact-house, #DACFFF);
    text-align: center;
    font-family: Outfit;
    font-size: clamp(0pt, 4.5vw, 24px);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.48px;
}

.toy {
    position: absolute;
    width: clamp(250px, 10vw, 280px);
    transform: rotate(40deg);
    z-index: -500;

    &.left {
        left: 5vw;
        /* filter: drop-shadow(0 0 16.667px rgba(255, 184, 43, 0.71)); */
    }

    &.right {
        right: 5vw;
        /* filter: drop-shadow(0 0 16.667px rgba(230, 216, 189, 0.483)); */
    }

    &.a1 {
        animation-name: anim-1;
    }

    &.a2 {
        animation-name: anim-2;
        animation-delay: -2s;
    }

    &.a3 {
        animation-name: anim-3;
        animation-delay: -1s;
    }

    &.a4 {
        animation-name: anim-4;
        animation-delay: -3s;
    }

    animation-duration: 10s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

@keyframes anim-1 {
    0% {
        /* Start position: high and to the left */
        transform: translate(-10px, -20px) rotate(0deg);
    }

    50% {
        /* Midpoint: low and to the right */
        transform: translate(00px, 20px) rotate(10deg);
    }

    100% {
        /* End position: back to the start */
        transform: translate(-10px, -20px) rotate(0deg);
    }
}

@keyframes anim-2 {
    0% {
        /* Start position: high and to the left */
        transform: translate(50px, 20px) rotate(10deg);
    }

    50% {
        /* Midpoint: low and to the right */
        transform: translate(40px, -20px) rotate(30deg);
    }

    100% {
        /* End position: back to the start */
        transform: translate(50px, 20px) rotate(10deg);
    }
}

@keyframes anim-3 {
    0% {
        /* Start position: high and to the left */
        transform: translate(-10px, 15px) rotate(10deg);
    }

    50% {
        /* Midpoint: low and to the right */
        transform: translate(00px, -20px) rotate(-10deg);
    }

    100% {
        /* End position: back to the start */
        transform: translate(-10px, 15px) rotate(10deg);
    }
}

@keyframes anim-4 {
    0% {
        /* Start position: high and to the left */
        transform: translate(10px, -7px) rotate(20deg);
    }

    50% {
        /* Midpoint: low and to the right */
        transform: translate(0px, 20px) rotate(10deg);
    }

    100% {
        /* End position: back to the start */
        transform: translate(10px, -7px) rotate(20deg);
    }
}

@media screen and (max-width: 768px) {
    .toy {
        width: clamp(150px, 40vw, 300px);

        &.left {
            left: -5vw;
        }

        &.right {
            right: -5vw;
        }

        &.a1 {
            animation-name: anim-1;
        }

        &.a2 {
            animation-name: anim-2;
            animation-delay: 0s;
        }

        &.a3 {
            animation-name: anim-3;
            animation-delay: 0s;
        }

        &.a4 {
            animation-name: anim-4;
            animation-delay: 0s;
        }

        animation-duration: 20s;
    }

    .section {
        backdrop-filter: blur(16px);
    }
}

@media screen and (min-width: 1024px) {
    .toy {
        width: clamp(250px, 10vw, 280px);

        &.left {
            left: calc(50% - clamp(250px, 43%, 450px));
        }

        &.right {
            right: calc(50% - clamp(250px, 43%, 450px));
        }
    }
}