.mask,
.color-mask {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: auto;
}

.color-mask {
    overflow: hidden;
}

.arrow-left {
    position: absolute;
    aspect-ratio: 533 / 425;
}

.arrow-right {
    position: absolute;
    aspect-ratio: 647 / 556;

}

.mask,
.arrow-left,
.arrow-right,
.arrow-right--landscape,
.arrow-right--portrait,
.arrow-top--portrait,
.arrow-top--landscape {
    pointer-events: none;
}

.main::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 30%;
    background: linear-gradient(100deg, #0004FE, #A902CE);
    filter: blur(50px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 12px;
}

@media (orientation: portrait) and (min-width: 0px) {
    .arrow-right--landscape {
        display: none;
    }

    .arrow-top--portrait {
        position: absolute;
        aspect-ratio: 533 / 425;
        background: url("../img/mask/arrows_left_mobile.webp");
        width: 533px;
        left: 15%;
        transform: translateX(-60%);
        top: -65%;
        z-index: 1;
    }

    .arrow-left {
        position: absolute;
        background: url("../img/mask/arrows_left_mobile.webp") no-repeat center / contain;
        width: clamp(300px, min(125vw, 65vh), 533px);
        left: 50%;
        transform: translateX(-50%);
        bottom: calc(clamp(30px, min(12vw, 35vh), 250px) * -1);
        z-index: 5;
    }

    .arrow-right {
        position: absolute;
        aspect-ratio: 647 / 556;
        background: url("../img/mask/arrows_right_mobile.webp") no-repeat center / contain;
        width: clamp(300px, min(130vw, 70vh), 647px);
        bottom: calc(clamp(30px, min(35vw, 40vh), 250px) * -1);
        left: 0;
        z-index: 5;
    }

    .spray {
        position: absolute;
        aspect-ratio: 552 / 331;
        background: url("../img/mask/spray_mobile.webp") no-repeat center / contain;
        width: 100%;
        bottom: -1%;
        left: 0;
        z-index: 5;
    }

    .bubbles {
        position: absolute;
        aspect-ratio: 552 / 331;
        background: url("../img/mask/bubbles_mobile.webp") no-repeat center / contain;
        width: 100%;
        bottom: -1%;
        left: 0;
        z-index: 5;
    }
}

@media (orientation: portrait) and (min-width: 768px) {
    .arrow-top--portrait {
        position: absolute;
        background: url("../img/mask/arrows_left_tablet.webp") no-repeat center / contain;
        width: clamp(300px, min(75vw, 100vh), 1463px);
        left: calc(clamp(100px, min(55vw, 55vh), 600px) * -1);
        transform: none;
        top: calc(clamp(200px, min(30vw, 20vh), 300px) * -1);
        z-index: 1;
    }

    .arrow-left {
        background: url("../img/mask/arrows_left_tablet.webp") no-repeat center / contain;
        width: clamp(300px, min(125vw, 100vh), 1463px);
        bottom: calc(clamp(10px, min(26vw, 25vh), 200px) * -1);
        left: 40%;
        transform: translateX(-60%);
    }

    .arrow-right {
        background: url("../img/mask/arrows_right_tablet.webp") no-repeat center / contain;
        width: clamp(300px, min(125vw, 100vh), 1738px);
        bottom: calc(clamp(250px, min(56vw, 55vh), 500px) * -1);
        right: 0;
    }

    .spray {
        aspect-ratio: 946 / 568;
        background: url("../img/mask/spray_tablet.webp") no-repeat center / contain;
    }

    .bubbles {
        aspect-ratio: 941 / 565;
        background: url("../img/mask/bubbles_tablet.webp") no-repeat center / contain;
    }
}

@media (orientation: landscape) and (min-width: 0px) {
    .arrow-top--portrait {
        display: none;
    }

    .arrow-left {
        background: url("../img/mask/arrows_left_mobile.webp") no-repeat center / contain;
        width: clamp(300px, min(75vw, 85vh), 700px);
        left: 40%;
        transform: translateX(-60%);
        bottom: calc(clamp(30px, min(5vw, 35vh), 250px) * -1);
        z-index: 5;
    }

    .arrow-right--landscape {
        position: fixed;
        aspect-ratio: 647 / 556;
        background: url("../img/mask/arrows_right_mobile.webp") no-repeat center / contain;
        width: clamp(300px, min(130vw, 70vh), 647px);
        bottom: calc(clamp(30px, min(10vw, 45vh), 250px) * -1);
        right: -10%;
        z-index: 5;
    }

    .arrow-top--landscape {
        position: fixed;
        aspect-ratio: 533 / 425;
        background: url("../img/mask/arrows_left_mobile.webp") no-repeat center / contain;
        width: clamp(300px, min(75vw, 85vh), 700px);
        left: -15%;
        top: calc(clamp(30px, min(10vw, 45vh), 250px) * -1.5);
        z-index: 5;
    }

    .spray {
        position: absolute;
        aspect-ratio: 552 / 331;
        background: url("../img/mask/spray_mobile.webp") no-repeat center / contain;
        width: clamp(300px, min(55vw, 95vh), 552px);
        bottom: -1%;
        left: 0;
        z-index: 5;
    }

    .bubbles {
        position: absolute;
        aspect-ratio: 552 / 331;
        background: url("../img/mask/bubbles_mobile.webp") no-repeat center / contain;
        width: clamp(300px, min(55vw, 95vh), 552px);
        bottom: -1%;
        left: 0;
        z-index: 5;
    }
}

@media (orientation: landscape) and (min-width: 1024px) {
    .arrow-left {
        background: url("../img/mask/arrows_left_tablet.webp") no-repeat center / contain;
        width: clamp(300px, min(85vw, 95vh), 1463px);
        bottom: calc(clamp(10px, min(4vw, 5vh), 230px) * -3);
        z-index: 5;
    }

    .arrow-right--landscape {
        position: fixed;
        aspect-ratio: 647 / 556;
        background: url("../img/mask/arrows_right_tablet.webp") no-repeat center / contain;
        width: clamp(300px, min(150vw, 100vh), 1736px);
        bottom: calc(clamp(30px, min(30vw, 65vh), 250px) * -1);
        right: -20%;
        z-index: 5;
    }

    .arrow-top--landscape {
        position: fixed;
        aspect-ratio: 533 / 425;
        background: url("../img/mask/arrows_left_tablet.webp") no-repeat center / contain;
        width: clamp(300px, min(85vw, 95vh), 1463px);
        left: -15%;
        top: calc(clamp(30px, min(20vw, 55vh), 230px) * -1.5);
        z-index: 5;
    }

    .spray {
        aspect-ratio: 946 / 568;
        background: url("../img/mask/spray_tablet.webp") no-repeat center / contain;
        width: clamp(400px, min(70vw, 100vh), 946px);
    }

    .bubbles {
        aspect-ratio: 941 / 565;
        background: url("../img/mask/bubbles_tablet.webp") no-repeat center / contain;
        width: clamp(400px, min(65vw, 95vh), 946px);
    }
}

@media (orientation: landscape) and (min-width: 1920px) {
    .arrow-left {
        background: url("../img/mask/arrows_left_desktop.webp") no-repeat center / contain;
        width: clamp(300px, min(95vw, 105vh), 2068px);
        bottom: calc(clamp(10px, min(4vw, 5vh), 250px) * -3);
        z-index: 5;
    }

    .arrow-right--landscape {
        position: fixed;
        aspect-ratio: 647 / 556;
        background: url("../img/mask/arrows_left_desktop.webp") no-repeat center / contain;
        width: clamp(300px, min(150vw, 100vh), 1736px);
        bottom: calc(clamp(30px, min(50vw, 75vh), 450px) * -1);
        right: -25%;
        z-index: 5;
    }

    .arrow-top--landscape {
        position: fixed;
        aspect-ratio: 533 / 425;
        background: url("../img/mask/arrows_left_desktop.webp") no-repeat center / contain;
        width: clamp(300px, min(95vw, 105vh), 2068px);
        z-index: 5;
    }

    .spray {
        aspect-ratio: 1887 / 1133;
        background: url("../img/mask/spray_desktop.webp") no-repeat center / contain;
        width: clamp(400px, min(85vw, 115vh), 1887px);
    }

    .bubbles {
        aspect-ratio: 1377 / 826;
        background: url("../img/mask/bubbles_desktop.webp") no-repeat center / contain;
        width: clamp(400px, min(65vw, 95vh), 1377px);
    }
}