/* -----------
Общие стили
------------*/

html {
    overflow: hidden;
}

body {
    background-color: #03140a;
    background-image: url(bg-d.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    margin: 0;
    height: 100vh;
    overflow: hidden;
    position: relative;

    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: #FFFFFF;
}

.stage {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);

    width: min(100vw, calc(100vh * 1920 / 1024));
    aspect-ratio: 1920 / 1024;
    container-type: inline-size;
}

@media (max-width: 768px) {
    body {
        --stage-w: min(100vw, calc(100vh * 428 / 926));
        background-size: calc(var(--stage-w) * 1949 / 428) calc(var(--stage-w) * 1087.81 / 428);
        background-position:
            calc((100vw - var(--stage-w)) / 2 - var(--stage-w) * 906 / 428)
            calc(100vh - var(--stage-w) * 926 / 428 - var(--stage-w) * 104 / 428);
    }

    .stage {
        width: min(100vw, calc(100vh * 428 / 926));
        aspect-ratio: 428 / 926;
    }
}

/* -----------
Main
------------*/

.logo {
    position: absolute;
    z-index: 4;

    width: 14.48%;
    left: 50%;
    transform: translateX(-50%);
    top: 4%;
}

.girl {
    position: absolute;
    z-index: 1;
    pointer-events: none;

    animation: girl-float 3.5s ease-in-out infinite;
}

.girl_1 {
    width: 45.26%;
    left: -10.68%;
    top: 8.3%;
}

.girl_2 {
    width: 41.3%;
    left: 68.125%;
    top: 6.84%;
    animation-delay: -1.75s;
}

@keyframes girl-float {
    0%   { translate: 0 0; }
    40%  { translate: 0 -14px; }
    100% { translate: 0 0; }
}

@keyframes girl-float-mobile {
    0%   { translate: 0 14px; }
    40%  { translate: 0 0; }
    100% { translate: 0 14px; }
}

@media (max-width: 768px) {
    .logo {
        width: 49.3%;
        top: 3.46%;
    }

    .girl {
        animation-name: girl-float-mobile;
    }

    .girl_1 {
        width: 98.36%;
        left: -35.98%;
        top: 49.24%;
    }

    .girl_2 {
        width: 85.51%;
        left: 46.5%;
        top: 49.24%;
    }
}
/* -----------
Wheel
------------*/

.wheel_wrapper {
    position: absolute;
    z-index: 2;

    width: 38.39%;
    aspect-ratio: 737 / 709.32;
    left: 30.78%;
    top: 11.6%;
    pointer-events: none;
}

.wheel_border {
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.wheel {
    position: absolute;
    z-index: 1;
    left: 12.16%;
    top: 11.17%;
    width: 75.27%;
    height: 78.17%;
    transform-origin: 50% 50%;

    animation: shake 2s ease-in-out infinite;
}

.wheel.is-spinning {
    animation: none;
}

@keyframes shake {
    0%   { transform: rotate(-1deg); }
    50%  { transform: rotate(1deg); }
    100% { transform: rotate(-1deg); }
}

.leon {
    position: absolute;
    z-index: 3;
    left: 38.76%;
    top: 38.53%;
    width: 22.49%;
    height: 22.87%;
}

.spin {
    position: absolute;
    z-index: 3;

    width: 19.48%;
    left: 50%;
    translate: -50% 0;
    top: 81.84%;

    cursor: pointer;
    animation: pulse 1.4s ease-in-out infinite;
}

.spin.is-spinning {
    animation: none;
}

@keyframes pulse {
    0%   { scale: 1; }
    50%  { scale: 1.06; }
    100% { scale: 1; }
}

@media (max-width: 768px) {
    .wheel_wrapper {
        width: 97.66%;
        left: 1.17%;
        top: 10.37%;
    }

    .spin {
        width: 68.2%;
        top: 84.85%;
    }
}

/* -----------
Modals
------------*/

.modal_bg {
    position: fixed;
    z-index: 10;

    width: 100%;
    height: 100%;
    top: 0;
    left: 0;

    background: rgba(0, 0, 0, 0.8);
}

.modal {
    position: absolute;
    inset: 0;
    transform-origin: 50% 45%;

    animation: popup-in 0.5s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}

@keyframes popup-in {
    from { scale: 0.2; opacity: 0; }
    to   { scale: 1; opacity: 1; }
}

.pop-up_mobile {
    display: none;
}

.modal_btn {
    position: absolute;
    box-sizing: border-box;
    margin: 0;
    padding: 0;

    width: 25.5%;
    height: 8.37%;
    left: 50%;
    translate: -50% 0;

    background: linear-gradient(180deg, #FF2400 0%, #E12000 100%);
    border: none;
    border-radius: 0.64cqw;
    box-shadow: -0.14cqw -0.14cqw 0.68cqw rgba(255, 36, 0, 0.8), 0.14cqw 0.14cqw 0.68cqw rgba(255, 36, 0, 0.8);

    font-family: inherit;
    font-weight: 700;
    font-size: 1.72cqw;
    text-transform: uppercase;
    color: #FFFFFF;

    cursor: pointer;
    animation: pulse 1.4s ease-in-out infinite;
}

/* 1: Your bonus */

.pop-up_1 {
    position: absolute;
    width: 52.3%;
    left: 50%;
    top: 42.4%;
    transform: translate(-50%, -50%);
}

.pop-up_1_btn {
    top: 63.6%;
}

/* 2: Super bonus */

.pop-up_2 {
    position: absolute;
    width: 56.93%;
    left: 50%;
    top: 8.2%;
    transform: translateX(-50%);
}

.pop-up_2_btn {
    top: 84.1%;
}

.bonus_text {
    position: absolute;
    margin: 0;
    z-index: 1;
    left: 50%;
    translate: -50% 0;

    font-style: italic;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    color: #FFFFFF;
}

.bonus_text span {
    display: block;
}

.bonus_accent,
.bonus_big {
    color: #E1FF00;
}

.bonus_text_d {
    width: 34.32%;
    top: 40.2%;

    font-size: 3.19cqw;
    line-height: 3.9cqw;
    white-space: nowrap;
}

.bonus_text_d .bonus_accent {
    font-size: 2.9cqw;
}

.bonus_text_m {
    display: none;
}

@media (max-width: 768px) {
    .pop-up_desktop,
    .bonus_text_d {
        display: none;
    }

    .pop-up_mobile {
        display: block;
    }

    .modal_btn {
        width: 82%;
        height: 6.63%;
        border-radius: 2.05cqw;
        font-size: 5.53cqw;
    }

    .pop-up_1 {
        width: 106.3%;
        top: 46.5%;
    }

    .pop-up_1_btn {
        top: 61%;
    }

    .pop-up_2 {
        width: 84.1%;
        left: 7.95%;
        top: 11.99%;
        transform: none;
    }

    .pop-up_2_btn {
        width: 88.1%;
        height: 7.12%;
        top: 84.9%;
        font-size: 5.94cqw;
    }

    .bonus_text_m {
        display: block;
        width: 36.7%;
        top: 32.83%;
    }

    .bonus_text_m .bonus_white,
    .bonus_text_m .bonus_accent {
        width: 80%;
        margin: 0 auto;
        font-size: 7.53cqw;
        line-height: 7.5cqw;
    }

    .bonus_text_m .bonus_accent {
        width: 88%;
        margin-top: 1cqw;
    }

    .bonus_text_m .bonus_big {
        font-size: 13.78cqw;
        line-height: 15.2cqw;
        margin-top: 1cqw;
    }
}