/* =========================
   СБРОС
========================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* =========================
   ОСНОВА
========================= */

html,
body {
    width: 100%;
    min-height: 100%;
}


body {

    min-height: 100vh;

    background: #07080d;

    color: #ffffff;

    font-family:
        Arial,
        sans-serif;

    overflow: hidden;

}


/* =========================
   ФОНОВАЯ САКУРА
========================= */

.sakura-background {

    position: fixed;

    top: -20px;
    left: -20px;

    width: calc(100% + 40px);
    height: calc(100% + 40px);

    background-image: url("sakura.jpg");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    z-index: 0;

    opacity: 0.45;

    animation:
        sakura-move
        12s
        ease-in-out
        infinite;

}


/* =========================
   ДВИЖЕНИЕ ФОНА
========================= */

@keyframes sakura-move {

    0% {

        transform:
            scale(1.03)
            translate(0, 0);

    }


    50% {

        transform:
            scale(1.06)
            translate(8px, -5px);

    }


    100% {

        transform:
            scale(1.03)
            translate(0, 0);

    }

}


/* =========================
   ЗАТЕМНЕНИЕ
========================= */

.dark-overlay {

    position: fixed;

    inset: 0;

    background:
        rgba(5, 6, 12, 0.55);

    z-index: 1;

}


/* =========================
   СТРАНИЦА
========================= */

.page {

    position: relative;

    z-index: 2;

    width: 100%;
    min-height: 100vh;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 30px;

}


/* =========================
   КОНТЕНТ
========================= */

.content {

    width: 100%;

    max-width: 1200px;

    text-align: center;

}


/* =========================
   ВЕРХНИЙ ТЕКСТ
========================= */

.small-text {

    color: #9da0aa;

    font-size: 13px;

    text-transform: uppercase;

    letter-spacing: 4px;

    margin-bottom: 25px;

    opacity: 0;

    animation:
        appear
        0.8s
        ease
        forwards;

}


/* =========================
   ГЛАВНЫЙ ЗАГОЛОВОК
========================= */

h1 {

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(52px, 6vw, 95px);

    font-weight: 500;

    line-height: 1;

    letter-spacing: -4px;

    margin-bottom: 70px;

    text-shadow:
        0 10px 50px
        rgba(0, 0, 0, 0.5);

    opacity: 0;

    animation:
        appear
        1s
        ease
        forwards;

    animation-delay: 0.15s;

}


h1 span {

    color: #ffffff;

}


/* =========================
   МАРШРУТ
========================= */

.route-section {

    width: 100%;

    margin-bottom: 50px;

    opacity: 0;

    animation:
        appear
        1s
        ease
        forwards;

    animation-delay: 0.35s;

}


.route {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

}


/* =========================
   ГОРОДА
========================= */

.city {

    display: flex;

    align-items: center;

    gap: 12px;

    font-size: 21px;

    color: #e5e5e8;

    white-space: nowrap;

}


.city-left {

    justify-content: flex-start;

}


.city-right {

    justify-content: flex-end;

}


/* =========================
   ТОЧКА ГОРОДА
========================= */

.city-dot {

    width: 14px;
    height: 14px;

    border-radius: 50%;

    background: #f4f4f4;

    box-shadow:

        0 0 10px white,

        0 0 25px
        rgba(255, 255, 255, 0.45);

}


/* =========================
   ЛИНИЯ
========================= */

.route-line {

    flex: 1;

    max-width: 720px;

    height: 80px;

    position: relative;

    margin:
        0 30px;

}


/* Сама линия */

.route-line::before {

    content: "";

    position: absolute;

    left: 0;

    top: 50%;

    width: 100%;

    height: 2px;

    transform:
        translateY(-50%);

    background:

        linear-gradient(

            90deg,

            rgba(255,255,255,0.25),

            rgba(255,255,255,0.9),

            rgba(255,255,255,0.25)

        );

}


/* =========================
   РАССТОЯНИЕ
========================= */

.distance {

    position: absolute;

    top: 0;

    left: 50%;

    transform:
        translateX(-50%);

    color: #b3b5be;

    font-size: 16px;

    letter-spacing: 2px;

    white-space: nowrap;

}


/* =========================
   ТОЧКА СЛЕВА ОТ МОСКВЫ
========================= */

.message-dot {

    width: 16px;
    height: 16px;

    border-radius: 50%;

    background: #ffffff;

    flex-shrink: 0;

    box-shadow:

        0 0 10px white,

        0 0 25px white,

        0 0 50px
        rgba(255,255,255,0.4);

    animation:
        message-glow
        2s
        ease-in-out
        infinite;

}


/* =========================
   СВЕЧЕНИЕ ТОЧКИ
========================= */

@keyframes message-glow {

    0% {

        transform:
            scale(1);

        box-shadow:

            0 0 8px white,

            0 0 20px
            rgba(255,255,255,0.5);

    }


    50% {

        transform:
            scale(1.35);

        box-shadow:

            0 0 15px white,

            0 0 40px
            rgba(255,255,255,0.8);

    }


    100% {

        transform:
            scale(1);

    }

}


/* =========================
   ОПИСАНИЕ
========================= */

.description {

    color: #b8bac2;

    font-size: 19px;

    line-height: 1.8;

    margin-bottom: 40px;

    opacity: 0;

    animation:
        appear
        1s
        ease
        forwards;

    animation-delay: 0.55s;

}


/* =========================
   КНОПКА
========================= */

.next-button {

    display: inline-block;

    padding:
        16px
        38px;

    border:

        1px solid
        rgba(255,255,255,0.3);

    border-radius: 50px;

    color: white;

    text-decoration: none;

    font-size: 14px;

    letter-spacing: 2px;

    transition:
        0.3s ease;

    opacity: 0;

    animation:
        appear
        1s
        ease
        forwards;

    animation-delay: 0.75s;

}


.next-button:hover {

    background: white;

    color: #08090d;

    transform:
        translateY(-4px);

    box-shadow:

        0 10px 30px
        rgba(0,0,0,0.4);

}


/* =========================
   АНИМАЦИЯ ПОЯВЛЕНИЯ
========================= */

@keyframes appear {

    from {

        opacity: 0;

        transform:
            translateY(35px);

        filter:
            blur(8px);

    }


    to {

        opacity: 1;

        transform:
            translateY(0);

        filter:
            blur(0);

    }

}


/* =========================
   МОБИЛЬНАЯ ВЕРСИЯ
========================= */

@media (max-width: 800px) {


    body {

        overflow-y: auto;

    }


    .page {

        padding:
            40px
            20px;

    }


    h1 {

        font-size:
            clamp(44px, 12vw, 75px);

        letter-spacing:
            -2px;

        margin-bottom:
            50px;

    }


    .route {

        gap: 5px;

    }


    .city {

        font-size: 14px;

        gap: 7px;

    }


    .city-dot {

        width: 9px;
        height: 9px;

    }


    .route-line {

        min-width: 100px;

        margin:
            0 10px;

    }


    .distance {

        font-size: 12px;

    }


    .message-dot {

        width: 11px;
        height: 11px;

    }


    .description {

        font-size: 16px;

    }

}/* =================================
   СБРОС
================================= */

* {
    margin: 0;
    padding: 0;

    box-sizing: border-box;
}


/* =================================
   ОСНОВА
================================= */

html,
body {
    width: 100%;
    min-height: 100%;
}


body {

    min-height: 100vh;

    background: #0b0c12;

    color: white;

    font-family:
        Arial,
        sans-serif;

    overflow: hidden;

}


/* =================================
   ФОН
================================= */

.sakura-background {

    position: fixed;

    top: -20px;
    left: -20px;

    width: calc(100% + 40px);
    height: calc(100% + 40px);

    background-image:
        url("sakura.jpg");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    opacity: 0.45;

    z-index: 0;

    animation:
        background-move
        10s
        ease-in-out
        infinite;

}


/* =================================
   ПОКАЧИВАНИЕ ФОНА
================================= */

@keyframes background-move {

    0% {

        transform:
            scale(1.03)
            translate(0, 0);

    }


    50% {

        transform:
            scale(1.06)
            translate(8px, -6px);

    }


    100% {

        transform:
            scale(1.03)
            translate(0, 0);

    }

}


/* =================================
   ТЁМНЫЙ СЛОЙ
================================= */

body::before {

    content: "";

    position: fixed;

    inset: 0;

    background:
        rgba(5, 6, 12, 0.45);

    z-index: 1;

}


/* =================================
   СТРАНИЦА
================================= */

.page {

    position: relative;

    z-index: 2;

    width: 100%;
    min-height: 100vh;

    display: flex;

    justify-content: center;
    align-items: center;

    padding: 30px;

}


/* =================================
   КОНТЕНТ
================================= */

.content {

    width: 100%;

    max-width: 1100px;

    text-align: center;

}


/* =================================
   МАЛЕНЬКИЙ ТЕКСТ
================================= */

.small-text {

    color: #a3a5ae;

    font-size: 13px;

    text-transform: uppercase;

    letter-spacing: 4px;

    margin-bottom: 25px;

    animation:
        appear
        0.8s
        ease
        forwards;

    opacity: 0;

}


/* =================================
   ЗАГОЛОВОК
================================= */

h1 {

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(52px, 6vw, 90px);

    font-weight: 500;

    line-height: 1;

    letter-spacing: -4px;

    margin-bottom: 55px;

    text-shadow:

        0 10px 50px
        rgba(0, 0, 0, 0.5);

    animation:
        appear
        1s
        ease
        forwards;

    animation-delay: 0.2s;

    opacity: 0;

}


/* =================================
   СЕКЦИЯ МАРШРУТА
================================= */

.route-section {

    width: 100%;

    position: relative;

    margin-bottom: 35px;

    animation:
        appear
        1s
        ease
        forwards;

    animation-delay: 0.4s;

    opacity: 0;

}


/* =================================
   МАРШРУТ
================================= */

.route {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

}


/* =================================
   ГОРОДА
================================= */

.city {

    display: flex;

    align-items: center;

    gap: 12px;

    min-width: 150px;

    font-size: 19px;

    font-weight: 500;

}


.city-right {

    justify-content: flex-end;

}


/* =================================
   ТОЧКИ ГОРОДОВ
================================= */

.city-dot {

    width: 11px;
    height: 11px;

    border-radius: 50%;

    background: white;

    box-shadow:

        0 0 10px white,

        0 0 25px
        rgba(255, 255, 255, 0.4);

}


/* =================================
   ЛИНИЯ МАРШРУТА
================================= */

.route-line {

    flex: 1;

    max-width: 600px;

    height: 80px;

    position: relative;

}


.route-line::before {

    content: "";

    position: absolute;

    top: 50%;
    left: 0;

    width: 100%;

    height: 2px;

    transform:
        translateY(-50%);

    background:

        linear-gradient(
            90deg,

            rgba(255,255,255,0.2),

            rgba(255,255,255,0.9),

            rgba(255,255,255,0.2)
        );

}


/* =================================
   РАССТОЯНИЕ
================================= */

.distance {

    position: absolute;

    top: 0;
    left: 50%;

    transform:
        translateX(-50%);

    color: #a3a5ae;

    font-size: 14px;

    letter-spacing: 1px;

    white-space: nowrap;

}


/* =================================
   СООБЩЕНИЕ, ЛЕТЯЩЕЕ ПО МАРШРУТУ
================================= */

.message-dot {

    position: absolute;

    top: 50%;
    left: 0;

    width: 14px;
    height: 14px;

    border-radius: 50%;

    transform:
        translateY(-50%);

    background: white;

    box-shadow:

        0 0 10px white,

        0 0 25px white,

        0 0 50px
        rgba(255,255,255,0.5);

    animation:
        message-fly
        4s
        linear
        infinite;

}


/* =================================
   ПОЛЁТ СООБЩЕНИЯ
================================= */

@keyframes message-fly {

    0% {

        left: 0;

        opacity: 0;

        transform:
            translateY(-50%)
            scale(0.3);

    }


    8% {

        opacity: 1;

        transform:
            translateY(-50%)
            scale(1);

    }


    85% {

        opacity: 1;

    }


    100% {

        left:
            calc(100% - 14px);

        opacity: 0;

        transform:
            translateY(-50%)
            scale(0.5);

    }

}


/* =================================
   ЗОНА ВИНТОВКИ
================================= */

.gun-area {

    width: 100%;

    height: 170px;

    display: flex;

    justify-content: center;

    align-items: center;

    margin-top: -10px;

}


/* =================================
   ОСНОВА ВИНТОВКИ
================================= */

.pixel-rifle {

    width: 700px;
    height: 150px;

    position: relative;

    animation:
        rifle-recoil
        4s
        ease-in-out
        infinite;

}


/* =================================
   ПРИКЛАД
================================= */

.stock {

    position: absolute;

    left: 0;
    top: 65px;

    width: 160px;
    height: 55px;

    background: #062300;

    border: 9px solid #090b0b;

    box-shadow:

        inset 0 -10px
        #031700;

}


/* =================================
   КОРПУС
================================= */

.body-part {

    position: absolute;

    left: 130px;
    top: 55px;

    width: 290px;
    height: 65px;

    background: #062b00;

    border: 9px solid #090b0b;

    box-shadow:

        inset 0 10px
        rgba(25, 100, 20, 0.5),

        inset 0 -10px
        #031900;

}


/* =================================
   ВЕРХНЯЯ ЧАСТЬ
================================= */

.upper-part {

    position: absolute;

    left: 220px;
    top: 30px;

    width: 190px;
    height: 40px;

    background: #073300;

    border: 8px solid #090b0b;

}


/* =================================
   СТВОЛ
================================= */

.barrel {

    position: absolute;

    left: 400px;
    top: 65px;

    width: 300px;
    height: 30px;

    background: #0a0b0b;

    border-top:
        7px solid
        #252728;

    border-bottom:
        7px solid
        #050606;

}


/* =================================
   РУКОЯТКА
================================= */

.handle {

    position: absolute;

    left: 190px;
    top: 110px;

    width: 40px;
    height: 65px;

    background: #061700;

    border: 8px solid #090b0b;

    transform:
        skewX(-15deg);

}


/* =================================
   МАГАЗИН
================================= */

.magazine {

    position: absolute;

    left: 260px;
    top: 110px;

    width: 65px;
    height: 75px;

    background: #071b04;

    border: 8px solid #090b0b;

    transform:
        skewX(-12deg);

}


/* =================================
   ПРИЦЕЛ
================================= */

.scope {

    position: absolute;

    left: 330px;
    top: 5px;

    width: 90px;
    height: 35px;

    background: #d9d9d9;

    border: 8px solid #090b0b;

}


/* =================================
   ДОПОЛНИТЕЛЬНЫЙ ПРИЦЕЛ
================================= */

.scope::before {

    content: "";

    position: absolute;

    left: -230px;
    top: 10px;

    width: 120px;
    height: 25px;

    background: #e5e5e5;

    border: 7px solid #090b0b;

}


/* =================================
   ВСПЫШКА
================================= */

.flash {

    position: absolute;

    right: -25px;
    top: 45px;

    width: 60px;
    height: 60px;

    opacity: 0;

    background:

        radial-gradient(

            circle,

            #ffffff 0%,

            #c8ffbd 25%,

            #62ff4e 50%,

            transparent 70%

        );

    animation:

        flash-shot
        4s
        ease-in-out
        infinite;

}


/* =================================
   ОТДАЧА ВИНТОВКИ
================================= */

@keyframes rifle-recoil {

    0%,
    5% {

        transform:
            translateX(0);

    }


    7% {

        transform:
            translateX(-14px);

    }


    12% {

        transform:
            translateX(0);

    }


    100% {

        transform:
            translateX(0);

    }

}


/* =================================
   АНИМАЦИЯ ВСПЫШКИ
================================= */

@keyframes flash-shot {

    0%,
    5% {

        opacity: 0;

        transform:
            scale(0.3);

    }


    7% {

        opacity: 1;

        transform:
            scale(1.3);

    }


    12% {

        opacity: 0;

        transform:
            scale(1);

    }


    100% {

        opacity: 0;

    }

}


/* =================================
   ОПИСАНИЕ
================================= */

.description {

    color: #b4b5bd;

    font-size: 19px;

    line-height: 2;

    margin-bottom: 40px;

    animation:
        appear
        1s
        ease
        forwards;

    animation-delay: 0.6s;

    opacity: 0;

}


.description span {

    color: white;

}


/* =================================
   КНОПКА
================================= */

.next-button {

    display: inline-block;

    padding: 15px 32px;

    color: white;

    text-decoration: none;

    border:

        1px solid
        rgba(255,255,255,0.3);

    border-radius: 50px;

    font-size: 14px;

    letter-spacing: 2px;

    transition:
        0.3s ease;

    animation:
        appear
        1s
        ease
        forwards;

    animation-delay: 0.8s;

    opacity: 0;

}


.next-button:hover {

    background: white;

    color: #0b0c12;

    transform:
        translateY(-3px);

}


/* =================================
   ПОЯВЛЕНИЕ ЭЛЕМЕНТОВ
================================= */

@keyframes appear {

    from {

        opacity: 0;

        transform:
            translateY(40px);

        filter:
            blur(8px);

    }


    to {

        opacity: 1;

        transform:
            translateY(0);

        filter:
            blur(0);

    }

}


/* =================================
   МОБИЛЬНАЯ ВЕРСИЯ
================================= */

@media (max-width: 800px) {


    body {

        overflow-y: auto;

    }


    .page {

        padding:
            40px
            20px;

    }


    h1 {

        font-size:
            clamp(45px, 12vw, 70px);

        margin-bottom:
            45px;

    }


    .route {

        gap: 7px;

    }


    .city {

        min-width: auto;

        font-size: 14px;

        gap: 6px;

    }


    .city-dot {

        width: 8px;
        height: 8px;

    }


    .route-line {

        min-width: 90px;

    }


    .gun-area {

        height: 110px;

        transform:
            scale(0.6);

        margin-top:
            -20px;

    }


    .description {

        font-size: 16px;

        line-height: 1.8;

    }

}/* =================================
   СБРОС
================================= */

* {
    margin: 0;
    padding: 0;

    box-sizing: border-box;
}


/* =================================
   ОСНОВА
================================= */

html,
body {
    width: 100%;
    min-height: 100%;
}


body {

    min-height: 100vh;

    background: #0b0c12;

    color: white;

    font-family:
        Arial,
        sans-serif;

    overflow: hidden;

}


/* =================================
   ФОН
================================= */

.sakura-background {

    position: fixed;

    top: -20px;
    left: -20px;

    width: calc(100% + 40px);
    height: calc(100% + 40px);

    background-image:
        url("sakura.jpg");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    opacity: 0.45;

    z-index: 0;

    animation:
        background-move
        10s
        ease-in-out
        infinite;

}


/* =================================
   ПОКАЧИВАНИЕ ФОНА
================================= */

@keyframes background-move {

    0% {

        transform:
            scale(1.03)
            translate(0, 0);

    }


    50% {

        transform:
            scale(1.06)
            translate(8px, -6px);

    }


    100% {

        transform:
            scale(1.03)
            translate(0, 0);

    }

}


/* =================================
   ТЁМНЫЙ СЛОЙ
================================= */

body::before {

    content: "";

    position: fixed;

    inset: 0;

    background:
        rgba(5, 6, 12, 0.45);

    z-index: 1;

}


/* =================================
   СТРАНИЦА
================================= */

.page {

    position: relative;

    z-index: 2;

    width: 100%;
    min-height: 100vh;

    display: flex;

    justify-content: center;
    align-items: center;

    padding: 30px;

}


/* =================================
   КОНТЕНТ
================================= */

.content {

    width: 100%;

    max-width: 1100px;

    text-align: center;

}


/* =================================
   МАЛЕНЬКИЙ ТЕКСТ
================================= */

.small-text {

    color: #a3a5ae;

    font-size: 13px;

    text-transform: uppercase;

    letter-spacing: 4px;

    margin-bottom: 25px;

    animation:
        appear
        0.8s
        ease
        forwards;

    opacity: 0;

}


/* =================================
   ЗАГОЛОВОК
================================= */

h1 {

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(52px, 6vw, 90px);

    font-weight: 500;

    line-height: 1;

    letter-spacing: -4px;

    margin-bottom: 55px;

    text-shadow:

        0 10px 50px
        rgba(0, 0, 0, 0.5);

    animation:
        appear
        1s
        ease
        forwards;

    animation-delay: 0.2s;

    opacity: 0;

}


/* =================================
   СЕКЦИЯ МАРШРУТА
================================= */

.route-section {

    width: 100%;

    position: relative;

    margin-bottom: 35px;

    animation:
        appear
        1s
        ease
        forwards;

    animation-delay: 0.4s;

    opacity: 0;

}


/* =================================
   МАРШРУТ
================================= */

.route {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

}


/* =================================
   ГОРОДА
================================= */

.city {

    display: flex;

    align-items: center;

    gap: 12px;

    min-width: 150px;

    font-size: 19px;

    font-weight: 500;

}


.city-right {

    justify-content: flex-end;

}


/* =================================
   ТОЧКИ ГОРОДОВ
================================= */

.city-dot {

    width: 11px;
    height: 11px;

    border-radius: 50%;

    background: white;

    box-shadow:

        0 0 10px white,

        0 0 25px
        rgba(255, 255, 255, 0.4);

}


/* =================================
   ЛИНИЯ МАРШРУТА
================================= */

.route-line {

    flex: 1;

    max-width: 600px;

    height: 80px;

    position: relative;

}


.route-line::before {

    content: "";

    position: absolute;

    top: 50%;
    left: 0;

    width: 100%;

    height: 2px;

    transform:
        translateY(-50%);

    background:

        linear-gradient(
            90deg,

            rgba(255,255,255,0.2),

            rgba(255,255,255,0.9),

            rgba(255,255,255,0.2)
        );

}


/* =================================
   РАССТОЯНИЕ
================================= */

.distance {

    position: absolute;

    top: 0;
    left: 50%;

    transform:
        translateX(-50%);

    color: #a3a5ae;

    font-size: 14px;

    letter-spacing: 1px;

    white-space: nowrap;

}


/* =================================
   СООБЩЕНИЕ, ЛЕТЯЩЕЕ ПО МАРШРУТУ
================================= */

.message-dot {

    position: absolute;

    top: 50%;
    left: 0;

    width: 14px;
    height: 14px;

    border-radius: 50%;

    transform:
        translateY(-50%);

    background: white;

    box-shadow:

        0 0 10px white,

        0 0 25px white,

        0 0 50px
        rgba(255,255,255,0.5);

    animation:
        message-fly
        4s
        linear
        infinite;

}


/* =================================
   ПОЛЁТ СООБЩЕНИЯ
================================= */

@keyframes message-fly {

    0% {

        left: 0;

        opacity: 0;

        transform:
            translateY(-50%)
            scale(0.3);

    }


    8% {

        opacity: 1;

        transform:
            translateY(-50%)
            scale(1);

    }


    85% {

        opacity: 1;

    }


    100% {

        left:
            calc(100% - 14px);

        opacity: 0;

        transform:
            translateY(-50%)
            scale(0.5);

    }

}


/* =================================
   ЗОНА ВИНТОВКИ
================================= */

.gun-area {

    width: 100%;

    height: 170px;

    display: flex;

    justify-content: center;

    align-items: center;

    margin-top: -10px;

}


/* =================================
   ОСНОВА ВИНТОВКИ
================================= */

.pixel-rifle {

    width: 700px;
    height: 150px;

    position: relative;

    animation:
        rifle-recoil
        4s
        ease-in-out
        infinite;

}


/* =================================
   ПРИКЛАД
================================= */

.stock {

    position: absolute;

    left: 0;
    top: 65px;

    width: 160px;
    height: 55px;

    background: #062300;

    border: 9px solid #090b0b;

    box-shadow:

        inset 0 -10px
        #031700;

}


/* =================================
   КОРПУС
================================= */

.body-part {

    position: absolute;

    left: 130px;
    top: 55px;

    width: 290px;
    height: 65px;

    background: #062b00;

    border: 9px solid #090b0b;

    box-shadow:

        inset 0 10px
        rgba(25, 100, 20, 0.5),

        inset 0 -10px
        #031900;

}


/* =================================
   ВЕРХНЯЯ ЧАСТЬ
================================= */

.upper-part {

    position: absolute;

    left: 220px;
    top: 30px;

    width: 190px;
    height: 40px;

    background: #073300;

    border: 8px solid #090b0b;

}


/* =================================
   СТВОЛ
================================= */

.barrel {

    position: absolute;

    left: 400px;
    top: 65px;

    width: 300px;
    height: 30px;

    background: #0a0b0b;

    border-top:
        7px solid
        #252728;

    border-bottom:
        7px solid
        #050606;

}


/* =================================
   РУКОЯТКА
================================= */

.handle {

    position: absolute;

    left: 190px;
    top: 110px;

    width: 40px;
    height: 65px;

    background: #061700;

    border: 8px solid #090b0b;

    transform:
        skewX(-15deg);

}


/* =================================
   МАГАЗИН
================================= */

.magazine {

    position: absolute;

    left: 260px;
    top: 110px;

    width: 65px;
    height: 75px;

    background: #071b04;

    border: 8px solid #090b0b;

    transform:
        skewX(-12deg);

}


/* =================================
   ПРИЦЕЛ
================================= */

.scope {

    position: absolute;

    left: 330px;
    top: 5px;

    width: 90px;
    height: 35px;

    background: #d9d9d9;

    border: 8px solid #090b0b;

}


/* =================================
   ДОПОЛНИТЕЛЬНЫЙ ПРИЦЕЛ
================================= */

.scope::before {

    content: "";

    position: absolute;

    left: -230px;
    top: 10px;

    width: 120px;
    height: 25px;

    background: #e5e5e5;

    border: 7px solid #090b0b;

}


/* =================================
   ВСПЫШКА
================================= */

.flash {

    position: absolute;

    right: -25px;
    top: 45px;

    width: 60px;
    height: 60px;

    opacity: 0;

    background:

        radial-gradient(

            circle,

            #ffffff 0%,

            #c8ffbd 25%,

            #62ff4e 50%,

            transparent 70%

        );

    animation:

        flash-shot
        4s
        ease-in-out
        infinite;

}


/* =================================
   ОТДАЧА ВИНТОВКИ
================================= */

@keyframes rifle-recoil {

    0%,
    5% {

        transform:
            translateX(0);

    }


    7% {

        transform:
            translateX(-14px);

    }


    12% {

        transform:
            translateX(0);

    }


    100% {

        transform:
            translateX(0);

    }

}


/* =================================
   АНИМАЦИЯ ВСПЫШКИ
================================= */

@keyframes flash-shot {

    0%,
    5% {

        opacity: 0;

        transform:
            scale(0.3);

    }


    7% {

        opacity: 1;

        transform:
            scale(1.3);

    }


    12% {

        opacity: 0;

        transform:
            scale(1);

    }


    100% {

        opacity: 0;

    }

}


/* =================================
   ОПИСАНИЕ
================================= */

.description {

    color: #b4b5bd;

    font-size: 19px;

    line-height: 2;

    margin-bottom: 40px;

    animation:
        appear
        1s
        ease
        forwards;

    animation-delay: 0.6s;

    opacity: 0;

}


.description span {

    color: white;

}


/* =================================
   КНОПКА
================================= */

.next-button {

    display: inline-block;

    padding: 15px 32px;

    color: white;

    text-decoration: none;

    border:

        1px solid
        rgba(255,255,255,0.3);

    border-radius: 50px;

    font-size: 14px;

    letter-spacing: 2px;

    transition:
        0.3s ease;

    animation:
        appear
        1s
        ease
        forwards;

    animation-delay: 0.8s;

    opacity: 0;

}


.next-button:hover {

    background: white;

    color: #0b0c12;

    transform:
        translateY(-3px);

}


/* =================================
   ПОЯВЛЕНИЕ ЭЛЕМЕНТОВ
================================= */

@keyframes appear {

    from {

        opacity: 0;

        transform:
            translateY(40px);

        filter:
            blur(8px);

    }


    to {

        opacity: 1;

        transform:
            translateY(0);

        filter:
            blur(0);

    }

}


/* =================================
   МОБИЛЬНАЯ ВЕРСИЯ
================================= */

@media (max-width: 800px) {


    body {

        overflow-y: auto;

    }


    .page {

        padding:
            40px
            20px;

    }


    h1 {

        font-size:
            clamp(45px, 12vw, 70px);

        margin-bottom:
            45px;

    }


    .route {

        gap: 7px;

    }


    .city {

        min-width: auto;

        font-size: 14px;

        gap: 6px;

    }


    .city-dot {

        width: 8px;
        height: 8px;

    }


    .route-line {

        min-width: 90px;

    }


    .gun-area {

        height: 110px;

        transform:
            scale(0.6);

        margin-top:
            -20px;

    }


    .description {

        font-size: 16px;

        line-height: 1.8;

    }

}/* =========================
   СБРОС
========================= */

* {
    margin: 0;
    padding: 0;

    box-sizing: border-box;
}


/* =========================
   ОСНОВНЫЕ НАСТРОЙКИ
========================= */

html,
body {
    width: 100%;
    min-height: 100%;
}


body {

    background:
        #0b0c12;

    color:
        white;

    font-family:
        "Trebuchet MS",
        Arial,
        sans-serif;

    overflow:
        hidden;

}


/* =========================
   САКУРА
========================= */

.sakura-background {

    position:
        fixed;

    top:
        -15px;

    left:
        -15px;

    width:
        calc(100% + 30px);

    height:
        calc(100% + 30px);

    background-image:
        url("sakura.jpg");

    background-size:
        cover;

    background-position:
        center;

    background-repeat:
        no-repeat;

    z-index:
        0;

    opacity:
        0.45;

    animation:
        sakura-move
        10s
        ease-in-out
        infinite;

}


/* =========================
   ДВИЖЕНИЕ ФОНА
========================= */

@keyframes sakura-move {

    0% {

        transform:
            scale(1.03)
            translate(0, 0);

    }


    50% {

        transform:
            scale(1.06)
            translate(8px, -6px);

    }


    100% {

        transform:
            scale(1.03)
            translate(0, 0);

    }

}


/* =========================
   ТЁМНЫЙ СЛОЙ
========================= */

body::before {

    content:
        "";

    position:
        fixed;

    inset:
        0;

    background:
        rgba(5, 6, 12, 0.35);

    z-index:
        1;

    pointer-events:
        none;

}


/* =========================
   СТРАНИЦА
========================= */

.page {

    position:
        relative;

    z-index:
        2;

    width:
        100%;

    min-height:
        100vh;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    padding:
        30px;

}


/* =========================
   КОНТЕНТ
========================= */

.content {

    width:
        100%;

    max-width:
        1100px;

    text-align:
        center;

}


/* =========================
   ВЕРХНИЙ ТЕКСТ
========================= */

.small-text {

    color:
        #a6a7af;

    font-size:
        13px;

    text-transform:
        uppercase;

    letter-spacing:
        4px;

    margin-bottom:
        28px;

    animation:
        appear
        0.8s
        ease
        forwards;

    opacity:
        0;

}


/* =========================
   ЗАГОЛОВОК
========================= */

h1 {

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(50px, 6vw, 85px);

    font-weight:
        500;

    line-height:
        1;

    letter-spacing:
        -3px;

    margin-bottom:
        65px;

    animation:
        appear
        1s
        ease
        forwards;

    animation-delay:
        0.2s;

    opacity:
        0;

}


/* =========================
   КОНТЕЙНЕР МАРШРУТА
========================= */

.route-container {

    width:
        100%;

    position:
        relative;

    margin-bottom:
        55px;

    animation:
        appear
        1s
        ease
        forwards;

    animation-delay:
        0.45s;

    opacity:
        0;

}


/* =========================
   МАРШРУТ
========================= */

.route {

    width:
        100%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


/* =========================
   ГОРОДА
========================= */

.city {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    min-width:
        150px;

    font-size:
        19px;

    font-weight:
        500;

}


.city-right {

    justify-content:
        flex-end;

}


/* =========================
   ТОЧКА ГОРОДА
========================= */

.city-dot {

    width:
        11px;

    height:
        11px;

    flex-shrink:
        0;

    border-radius:
        50%;

    background:
        #ffffff;

    box-shadow:

        0 0 10px
        rgba(255, 255, 255, 0.8),

        0 0 25px
        rgba(255, 255, 255, 0.3);

}


/* =========================
   ЛИНИЯ
========================= */

.route-line {

    height:
        70px;

    flex:
        1;

    max-width:
        600px;

    position:
        relative;

}


.route-line::before {

    content:
        "";

    position:
        absolute;

    top:
        50%;

    left:
        0;

    width:
        100%;

    height:
        2px;

    transform:
        translateY(-50%);

    background:

        linear-gradient(
            90deg,

            rgba(255, 255, 255, 0.2),

            rgba(255, 255, 255, 0.9),

            rgba(255, 255, 255, 0.2)

        );

}


/* =========================
   РАССТОЯНИЕ
========================= */

.distance {

    position:
        absolute;

    left:
        50%;

    top:
        -5px;

    transform:
        translateX(-50%);

    padding:
        5px 14px;

    color:
        #a7a8af;

    font-size:
        14px;

    letter-spacing:
        1px;

    white-space:
        nowrap;

}


/* =========================
   ЛЕТЯЩАЯ ТОЧКА
========================= */

.bullet {

    position:
        absolute;

    top:
        50%;

    left:
        0;

    width:
        14px;

    height:
        14px;

    transform:
        translateY(-50%);

    border-radius:
        50%;

    background:
        white;

    box-shadow:

        0 0 10px
        white,

        0 0 25px
        rgba(255, 255, 255, 0.8),

        0 0 50px
        rgba(255, 255, 255, 0.3);

    animation:

        bullet-fly
        3.5s
        ease-in-out
        infinite;

}


/* =========================
   АНИМАЦИЯ ПУЛИ
========================= */

@keyframes bullet-fly {

    0% {

        left:
            0;

        opacity:
            0;

        transform:
            translateY(-50%)
            scale(0.4);

    }


    8% {

        opacity:
            1;

        transform:
            translateY(-50%)
            scale(1);

    }


    85% {

        opacity:
            1;

    }


    100% {

        left:
            calc(100% - 14px);

        opacity:
            0;

        transform:
            translateY(-50%)
            scale(0.5);

    }

}


/* =========================
   ПИКСЕЛЬНАЯ ДЕКОРАТИВНАЯ ПУШКА
========================= */

.pixel-gun {

    position:
        absolute;

    left:
        -80px;

    top:
        50%;

    width:
        110px;

    height:
        70px;

    transform:
        translateY(-50%);

    animation:

        gun-recoil
        3.5s
        ease-in-out
        infinite;

}


/* Корпус */

.gun-body {

    position:
        absolute;

    left:
        20px;

    top:
        24px;

    width:
        55px;

    height:
        20px;

    background:
        #f0d6da;

    box-shadow:

        5px 0
        #d79ca7,

        10px 0
        #c77d8b,

        -5px 5px
        #f0d6da;

}


/* Ствол */

.gun-barrel {

    position:
        absolute;

    left:
        70px;

    top:
        27px;

    width:
        40px;

    height:
        12px;

    background:
        #f5f5f5;

    box-shadow:

        8px 0
        #d4d4d4;

}


/* Рукоятка */

.gun-handle {

    position:
        absolute;

    left:
        35px;

    top:
        42px;

    width:
        18px;

    height:
        25px;

    background:
        #c77d8b;

    transform:
        skewX(-18deg);

}


/* Прицел */

.gun-sight {

    position:
        absolute;

    left:
        43px;

    top:
        16px;

    width:
        12px;

    height:
        8px;

    background:
        white;

}


/* =========================
   ВСПЫШКА
========================= */

.shot-flash {

    position:
        absolute;

    left:
        25px;

    top:
        50%;

    width:
        35px;

    height:
        35px;

    transform:
        translateY(-50%);

    background:

        radial-gradient(

            circle,

            rgba(255, 255, 255, 1) 0%,

            rgba(255, 210, 220, 0.8) 30%,

            transparent 70%

        );

    opacity:
        0;

    animation:

        shot-flash
        3.5s
        ease-in-out
        infinite;

}


/* =========================
   ОТДАЧА
========================= */

@keyframes gun-recoil {

    0%,
    8% {

        transform:
            translateY(-50%)
            translateX(0);

    }


    12% {

        transform:
            translateY(-50%)
            translateX(-8px);

    }


    18% {

        transform:
            translateY(-50%)
            translateX(0);

    }


    100% {

        transform:
            translateY(-50%)
            translateX(0);

    }

}


/* =========================
   ВСПЫШКА ВЫСТРЕЛА
========================= */

@keyframes shot-flash {

    0%,
    8% {

        opacity:
            0;

        transform:
            translateY(-50%)
            scale(0.5);

    }


    10% {

        opacity:
            1;

        transform:
            translateY(-50%)
            scale(1.3);

    }


    18% {

        opacity:
            0;

        transform:
            translateY(-50%)
            scale(1);

    }


    100% {

        opacity:
            0;

    }

}


/* =========================
   НИЖНИЙ ТЕКСТ
========================= */

.description {

    color:
        #b3b4bc;

    font-size:
        19px;

    line-height:
        2;

    margin-bottom:
        45px;

    animation:
        appear
        1s
        ease
        forwards;

    animation-delay:
        0.7s;

    opacity:
        0;

}


.description span {

    color:
        white;

}


/* =========================
   КНОПКА
========================= */

.next-button {

    display:
        inline-block;

    text-decoration:
        none;

    color:
        #d7d7dc;

    font-size:
        15px;

    letter-spacing:
        2px;

    padding:
        14px
        30px;

    border-bottom:

        1px solid
        rgba(255, 255, 255, 0.3);

    transition:
        0.3s ease;

    animation:
        appear
        1s
        ease
        forwards;

    animation-delay:
        0.9s;

    opacity:
        0;

}


.next-button:hover {

    color:
        white;

    transform:
        translateY(-3px);

    border-color:
        white;

}


/* =========================
   ПОЯВЛЕНИЕ
========================= */

@keyframes appear {

    from {

        opacity:
            0;

        transform:
            translateY(40px);

        filter:
            blur(8px);

    }


    to {

        opacity:
            1;

        transform:
            translateY(0);

        filter:
            blur(0);

    }

}


/* =========================
   МОБИЛЬНАЯ ВЕРСИЯ
========================= */

@media (max-width: 750px) {


    body {

        overflow-y:
            auto;

    }


    .page {

        padding:
            30px
            18px;

    }


    h1 {

        font-size:
            clamp(45px, 13vw, 70px);

        margin-bottom:
            55px;

    }


    .route {

        gap:
            8px;

    }


    .city {

        min-width:
            auto;

        font-size:
            15px;

        gap:
            7px;

    }


    .city-dot {

        width:
            8px;

        height:
            8px;

    }


    .route-line {

        min-width:
            80px;

    }


    .pixel-gun {

        display:
            none;

    }


    .shot-flash {

        display:
            none;

    }


    .description {

        font-size:
            16px;

    }


    .sakura-background {

        background-position:
            center;

    }

}