body {

    display: flex;

    justify-content: center;
    background-color: #000000;
    overflow: hidden;
  }

        .gif-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    overflow: hidden;
}

.gif-container img {
  
    object-fit: cover;
    display: block;
}

.gif-container img {
  object-fit: cover;
  display: block;
}

/* размеры каждому слою отдельно */
.gif-middle { width:100vw; height:100vh; object-fit:cover; }
.gif-bg     { width:auto;  height:120vh; object-fit:contain; }
.gif-front  { width:auto;  height:145vh; object-fit:contain;
              right:0; top:-140vh;
              animation: dragonMove 7.1s ease-in-out infinite; }
    
        /* Обе гифки одинаково */
        .gif-layer {
            position: fixed;
            top: 0;
           
          
           
            
            /* Сохраняем пропорции, растягиваем максимально */
          
            
            /* Центрируем */
            object-position: center;
        }

        /* Фоновая - сзади */
        .gif-bg {
            z-index: 1;
             right: 0;
            
                 object-fit: contain;
                  clip-path: inset(0 0 0 3px);
        }


             .gif-middle {
            z-index: 0;
          
              object-fit: cover; /* ← ИЗМЕНИ НА cover */

             
        }


        /* Передняя - поверх */
        .gif-front {
            z-index: 2;
           
              width: auto;
                object-fit: contain;

                 animation: dragonMove 7.1s ease-in-out infinite;
            
            /* Начальная позиция - выше экрана */
            top: -140vh;
                
        }

          @keyframes dragonMove {
            /* 0-1 сек: Прилетает сверху */
            0% {
                top: -150vh;
            }
            12.5% {
                top: 5%;
            }
            
            /* 1-7 сек: Стоит на месте 6 секунд */
            12.6%, 87.5% {
                top: 5%;
            }
            
            /* 7-8 сек: Падает вниз */
            100% {
                top: 150vh;
            }
        }

  




.bg1 {
    position: fixed;
    bottom: -1vh;
   
    width: 101vw;
    height: 101vh;
    right: -1vw;
   
   
 
    z-index: 1;
}

.bg1_1 {
    display: none;
}

.bg2 {
    position: fixed;
   
    right: 0;
    bottom: 0;
    width: 50vw;
    z-index: 8;
}

.bg3_1 {
    position: fixed;
    bottom: 0vh;   
    width: 100vw;
    z-index: 6;
    display: none;
}

.bg3 {
    position: fixed;
    bottom: 0;   
    width: 100vw;
    z-index: 8;
    display: none;
}

.drg {
    position: fixed;
    right: 0;
    bottom: 0;
    height: 100vh;
    z-index: 5;
    display: block;
}

.drg_1 {
    position: fixed;

    bottom: 0;
    width: 100vw;
    z-index: 5;
    display: none;
}

.logo {
    position: fixed;
    top: 6vh;
    left: 6vw;
    height: 8vh;
    z-index: 7;
    display: block;

     animation: dragonMove 7.1s ease-in-out infinite;
}


.logo_1 {
    position: fixed;
    top: 3.5vh;
    left: auto;
    height: 5.5vh;
    z-index: 6;
    display: none;

     animation: dragonMove 7.1s ease-in-out infinite;
}



.text {
    position: fixed;
    left: 6vw;
    margin-top: 18vh;
    height: 39vh;
    z-index: 7;

     animation: dragonMove 7.1s ease-in-out infinite;
}

.t1 {
   display: block;
}

.t2 {
   display: none;
}

.button {
    position: fixed;
    margin-top: 65vh;
    height: 8vh;
    left: 6vw;
    z-index: 7;
    cursor: pointer;

     animation: dragonMove 7.1s ease-in-out infinite;
}

.button:hover {
   scale: 1.05;
}





   .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 9999;
            display: none;
            justify-content: center;
            align-items: center;
            backdrop-filter: blur(20px);
        }

        /* Кнопка закрытия */
        .close-button {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 24px;
            cursor: pointer;
            background: none;
            border: none;
            color: #FFA500;
        }

        .close-button:hover {
            color: #ffb733;
        }

        /* Верхний блок */
        .modal-header {
            display: flex;
            margin-bottom: 10px;
            border-bottom: 1px solid white; 
        }

        .modal-header .large-text {
            flex: 0 0 20%;
            font-size: 1.8em;
            font-weight: bold;
        }

        .modal-header .small-text {
            margin-top: 2vh;
            flex: 1;
            font-size: 0.8em;
            color: #ccc;
            padding-left: 5vw;
        }

        /* Белая горизонтальная линия */
        .divider {
            height: 1px;
            background-color: white;
            width: 100%;
        }

        .modal {
            position: relative;
            background: #1e1e1e;
            color: white;
            padding: 20px;
            width: 40vw;
            max-width: 500px;
            height: auto;
            border-radius: 10px;
            font-family: "Roboto", sans-serif;
        }

        .modal-buttons {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            margin-top: 5vh;
            margin-bottom: 5vh;
        }

        .modal-buttons button {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            padding: 10px 15px;
            border: none;
            border-radius: 5px;
            font-size: 0.95em;
            cursor: pointer;
            transition: background-color 0.3s;
            width: 100%;
            height: auto;
            min-height: 45px;
        }

        .modal-buttons button img {
            height: 20px;
            width: 20px;
            margin-right: 10%;
        }

        /* Стили кнопок */
        .btn-1 {
            background-color: #588cf1;
            color: white;
        }

        .btn-2 {
            background-color: #efefef;
            color: black;
        }

        .btn-3 {
            background-color: #d7143a;
            color: white;
        }

        .btn-4 {
            background-color: #24a1de;
            color: white;
        }

        /* Disabled */
        .modal-checkbox {
            display: flex;
            align-items: flex-start; /* Изменено на flex-start для правильного выравнивания */
            font-size: 1.1em;
            padding-top: 10px;
            margin-top: 10px;
        }

        /* Скрытие дефолтного чекбокса и кастомный стиль */
        .modal-checkbox input[type="checkbox"] {
            appearance: none;
            -webkit-appearance: none;
            width: 20px; /* Фиксированная ширина */
            height: 20px; /* Фиксированная высота - СДЕЛАНО КВАДРАТНЫМ */
            min-width: 20px; /* Минимальная ширина */
            min-height: 20px; /* Минимальная высота */
            border: 2px solid #FFA500;
            border-radius: 4px;
            margin-right: 10px;
            position: relative;
            background-color: transparent;
            cursor: pointer;
            transition: background-color 0.2s, border-color 0.2s;
            flex-shrink: 0; /* Предотвращает сжатие */
        }

        /* Отображение галочки */
        .modal-checkbox input[type="checkbox"]::after {
            content: '';
            position: absolute;
            top: 2px;
            left: 5px;
            width: 5px;
            height: 10px;
            border: solid rgb(0, 0, 0);
            border-width: 0 2px 2px 0;
            opacity: 0;
            transform: rotate(45deg);
            transition: opacity 0.2s;
        }

        /* Активное состояние: фон оранжевый, галочка белая */
        .modal-checkbox input[type="checkbox"]:checked {
            background-color: #FFA500;
            border-color: #FFA500;
        }

        .modal-checkbox input[type="checkbox"]:checked::after {
            opacity: 1;
        }

        .modal-checkbox label {
            line-height: 1.4; /* Улучшаем читаемость текста */
        }

        .text {
            font-family: 'Druk Text Wide Trial', sans-serif;
            font-weight: 600;
            font-size: 2em;
        }

        .buttontext {
            font-family: 'Druk Text Wide Trial', sans-serif;
            font-weight: 700;
            font-size: 1.5em;
        }



   @media (max-width: 600px) and (min-height: 500px) {


    .logo {
   
    display: none;

    }


.logo_1 {
    position: fixed;
    top: 3.5vh;
    left: auto;
    height: 5vh;
    z-index: 6;
    display: block;

  
}



.text {
    position: fixed;
    left: auto;
    right: auto;
    margin-top: 5vh;
    height: 30vh;

}



.button {
    position: fixed;
    margin-top: 37vh;
    
    height: 7vh;
    left: auto;
    right: auto;
    
}


    .t1 {
  display: none;
}

.t2 {
   
    display: block;
}


    .gif-container img {
    
    object-fit: cover;
    display: block;
}


      .gif-layer {
            position: fixed;
            top: 0;
           
              
           
            
            /* Сохраняем пропорции, растягиваем максимально */
          
            
            /* Центрируем */
            object-position: center;
        }

        /* Фоновая - сзади */
        .gif-bg {
            z-index: 1;
             right: 0;
             height: 120vh;
               width: auto;
                 object-fit: contain;
                  clip-path: inset(0 0 0 2px);
        }


     

   


        /* Передняя - поверх */
       .gif-front {
    z-index: 2;
   margin-top: 40%;
   left: 25%;
    right: auto;
    transform: translateX(-40%);


    height: 100vh;
    width: auto;
    object-fit: contain;
    top: -160vh;

    opacity: 0;
    animation:
      dragonMoveMobile 7.1s ease-in-out infinite,
      showStatic 0.001s linear forwards;
    animation-delay: 0s, 1.8s;
  }

  @keyframes dragonMoveMobile {
    0%   { top: -170vh; }  /* прилетает сверху */
    12.5%{ top: 12%; }     /* НИЖЕ чем было 5% */
    12.6%, 87.5% { top: 12%; }
    100% { top: 170vh; }   /* улетает вниз дальше */
  }


         .btn {

    cursor: pointer;
    transition: transform 0.3s ease;
}

.btn:hover {
    transform: scale(1.1);
}

.btn:active {
    transform: scale(0.95);
}



.logo_1.static,
.text.static,
.button.static{
  opacity: 0;
  animation:
    dragonMove 7.1s ease-in-out infinite,
    showStatic 0.001s linear forwards;
  animation-delay:
    0s,
    1.8s; /* dragonMove сразу, showStatic позже */
}

@keyframes showStatic{
  to { opacity: 1; }
}
           

          .logo1 {
            display: none;
          }


           .logo2 {
            display: block;
             position: fixed;
                top: 5vh;
                left: 50%;
                transform: translateX(-50%);
                width: 40vw;
                max-width: 200px;
                z-index: 5;
                object-fit: contain;
           
        }

             .bg1 {
                display: none;
            }

            .bg1_1 {
                display: block;
                position: fixed;
                top: 0;
                height: 100vh;
                width: 100vw;
            }

            .modal-overlay {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: transparent;
                display: none;
                justify-content: center;
                align-items: center;
                z-index: 9999;
            }

            /* Кнопка закрытия */
            .close-button {
                position: absolute;
                top: 10px;
                right: 10px;
                font-size: 24px;
                cursor: pointer;
                background: none;
                border: none;
                color: #FFA500;
            }

            .close-button:hover {
                color: #ffb733;
            }

            /* Верхний блок */
            .modal-header {
                display: flex;
                margin-bottom: 10px;
                border-bottom: 1px solid white; 
            }

            .modal-header .large-text {
                margin-top: 2vh;
                flex: 0 0 20%;
                font-size: 1.2em;
                font-weight: bold;
            }

            .modal-header .small-text {
                margin-top: 2vh;
                flex: 1;
                font-size: 0.8em;
                color: #ccc;
                padding-left: 5vw;
            }

            /* Белая горизонтальная линия */
            .divider {
                height: 1px;
                background-color: white;
                width: 100%;
            }

            .modal {
                width: 85vw;
                height: auto;
                max-height: 90vh;
            }

            .modal-buttons {
                grid-template-columns: 1fr 1fr;
                gap: 8px;
            }

            .modal-buttons button {
                width: 100%;
                font-size: 0.9em;
                padding: 8px 12px;
            }

            .modal-buttons button img {
                height: 20px;
                width: 20px;
                margin-right: 25%;
            }

            /* Стили кнопок */
            .btn-1 {
                background-color: #588cf1;
                color: white;
            }

            .btn-2 {
                background-color: #efefef;
                color: black;
            }

            .btn-3 {
                background-color: #d7143a;
                color: white;
            }

            .btn-4 {
                background-color: #24a1de;
                color: white;
            }

            /* Disabled - Мобильная версия */
            .modal-checkbox {
                display: flex;
                align-items: flex-start;
                font-size: 0.7em;
                padding-top: 10px;
                margin-top: 10px;
                margin-left: 0;
                width: 100%;
            }

            /* Скрытие дефолтного чекбокса и кастомный стиль - квадратная форма */
            .modal-checkbox input[type="checkbox"] {
                appearance: none;
                -webkit-appearance: none;
                width: 20px; /* Фиксированная ширина */
                height: 20px; /* Фиксированная высота - квадрат */
                min-width: 20px;
                min-height: 20px;
                border: 2px solid #FFA500;
                border-radius: 4px;
                margin-right: 10px;
                position: relative;
                background-color: transparent;
                cursor: pointer;
                transition: background-color 0.2s, border-color 0.2s;
                flex-shrink: 0;
            }

            /* Отображение галочки */
            .modal-checkbox input[type="checkbox"]::after {
                content: '';
                position: absolute;
                top: 2px;
                left: 5px;
                width: 5px;
                height: 10px;
                border: solid rgb(0, 0, 0);
                border-width: 0 2px 2px 0;
                opacity: 0;
                transform: rotate(45deg);
                transition: opacity 0.2s;
            }

            /* Активное состояние: фон оранжевый, галочка белая */
            .modal-checkbox input[type="checkbox"]:checked {
                background-color: #FFA500;
                border-color: #FFA500;
            }

            .modal-checkbox input[type="checkbox"]:checked::after {
                opacity: 1;
            }
        }
      
      

        @media (max-width: 400px) {
            .modal-buttons {
                grid-template-columns: 1fr;
            }

            
        }