:root {
    --modal-padding-coef: 0.035;
    --logo-width-coef: 0.21;
    --modal-notify-fs-coef: 0.065;
    --modal-notify-top-coef: 0.13;
    --modal-notify-right-coef: 0.256;
    --modal-title-fs-coef: 0.062;
    --modal-top-title-coef: 0.305;
    --modal-win-fs-coef: 0.08;
    --modal-top-win-coef: 0.38;
    --modal-btn-fs-coef: 0.044;
    --modal-btn-width-coef: 0.352;
    --modal-btn-height-coef: 0.08;
    --modal-top-btn-coef: 0.465;
    --modal-image-width: 100%;
}

.modal {
    position: fixed;
    inset: 0;
    z-index: -1;
    opacity: 0;
    pointer-events: none;
    -webkit-transition: all .3s ease;
    transition: all .5s ease;
    overflow: hidden;
}

.modal--active {
    z-index: 101;
    opacity: 1;
    pointer-events: all;
}

.modal__content {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: calc(var(--modal-image-width) * var(--modal-padding-coef)) calc(var(--modal-image-width) * var(--modal-padding-coef)) 0;
}

.modal__logo {
    position: relative;
    z-index: 5;
    aspect-ratio: 316 / 101;
    width: calc(var(--modal-image-width) * var(--logo-width-coef));
    max-width: 316px;
}

.modal__img {
    position: relative;
    z-index: 2;
    aspect-ratio: 1485 / 1155;
    width: var(--modal-image-width);
    max-width: 1485px;
}

.modal__notification {
    font-family: "Neucha", cursive;
    font-weight: 400;
    font-style: normal;
    color: #440040;
    font-size: calc(var(--modal-image-width) * var(--modal-notify-fs-coef));
    position: absolute;
    right: calc(var(--modal-image-width) * var(--modal-notify-right-coef));
    top: calc(var(--modal-image-width) * var(--modal-notify-top-coef));
    transform: rotate(5deg);
}

.modal__title {
    font-family: "Roboto Condensed", sans-serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
    font-size: calc(var(--modal-image-width) * var(--modal-title-fs-coef));
    color: #440040;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: calc(var(--modal-image-width) * var(--modal-top-title-coef));
}

.modal__win {
    font-family: "Neucha", cursive;
    font-weight: 400;
    font-style: normal;
    font-size: calc(var(--modal-image-width) * var(--modal-win-fs-coef));
    color: #FF004E;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: calc(var(--modal-image-width) * var(--modal-top-win-coef));
}

.modal__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Roboto Condensed", sans-serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
    color: #FFF;
    font-size: calc(var(--modal-image-width) * var(--modal-btn-fs-coef));
    width: calc(var(--modal-image-width) * var(--modal-btn-width-coef));
    height: calc(var(--modal-image-width) * var(--modal-btn-height-coef));
    border-radius: calc((var(--modal-image-width) * var(--modal-btn-height-coef)) / 2);
    border: calc(var(--modal-image-width) * var(--modal-btn-height-coef) * 0.1) solid #AC2F11;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: calc(var(--modal-image-width) * var(--modal-top-btn-coef));
    animation: btnPulse 2s linear infinite;
    -webkit-animation: btnPulse 2s linear infinite;
    overflow: hidden;
}

.modal__btn-label {
    position: relative;
    z-index: 1;
    line-height: 1;
}

.modal__btn::before,
.modal__btn::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    backface-visibility: hidden;
    will-change: opacity;
}

.modal__btn::before {
    background: linear-gradient(to right, #0ABD6F 0%, #09E98E 56%, #0ABD6F 100%);
    opacity: 1;
    transition: opacity 0.3s ease;
}

.modal__btn::after {
    background: linear-gradient(to right, #0ABD6F 0%, #07FF6E 56%, #0ABD6F 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal__btn:hover::after {
    opacity: 1;
}

.modal__mask-stars {
    position: absolute;
    width: 100%;
    height: 80%;
    bottom: 0;
    z-index: 0;
}

.modal__mask-hearts {
    position: absolute;
    width: 100%;
    height: 60%;
    top: 0;
    z-index: 2;
}

@media (orientation: portrait) and (min-width: 0px) {
    :root {
        --modal-image-width: clamp(100px, min(200vw, 105svh), 940px);
        --modal-padding-coef: 0.05;
        --logo-width-coef: 0.24;
        --modal-notify-fs-coef: 0.065;
        --modal-notify-top-coef: 0.237;
        --modal-notify-right-coef: 0.285;
        --modal-title-fs-coef: 0.046;
        --modal-top-title-coef: 0.525;
        --modal-win-fs-coef: 0.05;
        --modal-top-win-coef: 0.576;
        --modal-btn-fs-coef: 0.044;
        --modal-btn-width-coef: 0.42;
        --modal-btn-height-coef: 0.09;
        --modal-top-btn-coef: 0.465;
    }

    .modal {
        background: image-set(
                url("../img/modal/bg_mobile_portrait@1x.webp") 1x,
                url("../img/modal/bg_mobile_portrait@2x.webp") 2x
        ) center/cover no-repeat;
    }

    .modal__img {
        background: image-set(
                url("../img/modal/modal_mobile_portrait@1x.webp") 1x,
                url("../img/modal/modal_mobile_portrait@2x.webp") 2x
        ) center/contain no-repeat;
    }

    .modal__btn {
        position: fixed;
        top: auto;
        bottom: calc((var(--modal-image-width) * var(--modal-padding-coef)) * 0.9);
    }

    .modal__notification {
        transform: rotate(-15deg);
    }

    .modal__mask-hearts {
        background: image-set(
                url("../img/modal/modal_hearts_mobile@1x.webp") 1x,
                url("../img/modal/modal_hearts_mobile@2x.webp") 2x
        ) center/contain no-repeat;
        height: 45%;
    }

    .modal__mask-stars {
        background: image-set(
                url("../img/modal/modal_stars_mobile@1x.webp") 1x,
                url("../img/modal/modal_stars_mobile@2x.webp") 2x
        ) center/cover no-repeat;
        height: 70%;
    }
}

@media (orientation: portrait) and (min-width: 768px) and (min-height: 1024px) {
    :root {
        --modal-image-width: clamp(100px, min(200vw, 105svh), 1480px);
        --modal-padding-coef: 0.05;
        --logo-width-coef: 0.24;
        --modal-notify-top-coef: 0.11;
        --modal-notify-right-coef: 0.21;
        --modal-top-title-coef: 0.38;
        --modal-win-fs-coef: 0.056;
        --modal-top-win-coef: 0.435;
        --modal-btn-fs-coef: 0.044;
        --modal-btn-width-coef: 0.42;
        --modal-btn-height-coef: 0.09;
        --modal-top-btn-coef: 0.465;
    }

    .modal {
        background: image-set(
                url("../img/modal/bg_tablet_portrait@1x.webp") 1x,
                url("../img/modal/bg_tablet_portrait@2x.webp") 2x
        ) center/cover no-repeat;
    }

    .modal__img {
        background: image-set(
                url("../img/modal/modal_tablet_portrait@1x.webp") 1x,
                url("../img/modal/modal_tablet_portrait@2x.webp") 2x
        ) center/contain no-repeat;
        width: clamp(100px, min(200vw, 90svh), 1480px);
    }

    .modal__notification {
        transform: rotate(5deg);
    }

    .modal__mask-hearts {
        background: image-set(
                url("../img/modal/modal_hearts_tablet@1x.webp") 1x,
                url("../img/modal/modal_hearts_tablet@2x.webp") 2x
        ) center/contain no-repeat;
        height: 45%;
    }

    .modal__mask-stars {
        background: image-set(
                url("../img/modal/modal_stars_tablet@1x.webp") 1x,
                url("../img/modal/modal_stars_tablet@2x.webp") 2x
        ) center/cover no-repeat;
        height: 70%;
    }
}

@media (orientation: landscape) and (min-width: 0px) {
    :root {
        --modal-image-width: clamp(100px, min(75vw, 105svh), 1485px);
    }

    .modal {
        background: image-set(
                url("../img/modal/bg_mobile_landscape@1x.webp") 1x,
                url("../img/modal/bg_mobile_landscape@2x.webp") 2x
        ) center/cover no-repeat;
    }

    .modal__img {
        background: image-set(
                url("../img/modal/modal_mobile_landscape@1x.webp") 1x,
                url("../img/modal/modal_mobile_landscape@2x.webp") 2x
        ) center/contain no-repeat;
    }

    .modal__mask-hearts {
        background: image-set(
                url("../img/modal/modal_hearts_mobile@1x.webp") 1x,
                url("../img/modal/modal_hearts_mobile@2x.webp") 2x
        ) center/contain no-repeat;
    }

    .modal__mask-stars {
        background: image-set(
                url("../img/modal/modal_stars_mobile@1x.webp") 1x,
                url("../img/modal/modal_stars_mobile@2x.webp") 2x
        ) center/cover no-repeat;
    }
}

@media (orientation: landscape) and (min-width: 1024px) {
    .modal {
        background: image-set(
                url("../img/modal/bg_tablet_landscape@1x.webp") 1x,
                url("../img/modal/bg_tablet_landscape@2x.webp") 2x
        ) center/cover no-repeat;
    }

    .modal__img {
        background: image-set(
                url("../img/modal/modal_tablet_landscape@1x.webp") 1x,
                url("../img/modal/modal_tablet_landscape@2x.webp") 2x
        ) center/contain no-repeat;
    }

    .modal__mask-hearts {
        background: image-set(
                url("../img/modal/modal_hearts_tablet@1x.webp") 1x,
                url("../img/modal/modal_hearts_tablet@2x.webp") 2x
        ) center/contain no-repeat;
    }

    .modal__mask-stars {
        background: image-set(
                url("../img/modal/modal_stars_tablet@1x.webp") 1x,
                url("../img/modal/modal_stars_tablet@2x.webp") 2x
        ) center/cover no-repeat;
    }
}

@media (orientation: landscape) and (min-width: 1440px) {
    .modal {
        background: image-set(
                url("../img/modal/bg_desktop_landscape@1x.webp") 1x,
                url("../img/modal/bg_desktop_landscape@2x.webp") 2x
        ) center/cover no-repeat;
    }

    .modal__img {
        background: image-set(
                url("../img/modal/modal_desktop_landscape@1x.webp") 1x,
                url("../img/modal/modal_desktop_landscape@2x.webp") 2x
        ) center/contain no-repeat;
    }

    .modal__mask-hearts {
        background: image-set(
                url("../img/modal/modal_hearts_desktop@1x.webp") 1x,
                url("../img/modal/modal_hearts_desktop@2x.webp") 2x
        ) center/contain no-repeat;
    }

    .modal__mask-stars {
        background: image-set(
                url("../img/modal/modal_stars_desktop@1x.webp") 1x,
                url("../img/modal/modal_stars_desktop@2x.webp") 2x
        ) center/contain no-repeat;
    }
}