/* style.css */

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff; /* Цвет фона прелоадера */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Убедитесь, что он поверх всего */
    transition: opacity 2s ease-out; /* <--- ИЗМЕНЕНО: теперь 2 секунды */
    opacity: 1; /* По умолчанию виден */
    pointer-events: auto; /* Позволяет блокировать взаимодействия */
}

/* Опционально: простой спиннер, если нет собственного */
.spinner {
    border: 8px solid #f3f3f3; /* Light grey */
    border-top: 8px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 1.5s linear infinite; /* Анимация вращения */
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Если у вас есть логотип для прелоадера */
.preloader-logo {
    max-width: 150px; /* Регулируйте размер логотипа */
    height: auto;
}

/* Класс для скрытия прелоадера */
#preloader.hidden {
    opacity: 0;
    pointer-events: none; /* Заблокировать все события мыши/касания после исчезновения */
}

/* --- Ваши остальные CSS стили ниже --- */
/* ... */
body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  overflow: hidden; /* Предотвращает прокрутку body, чтобы фон оставался зафиксированным */
}

.background-container {
  position: fixed;
  top: 0; /* Фон выравнивается по верхнему краю экрана */
  left: 0;
  width: 100vw; /* Ширина 100% от ширины окна просмотра */
  height: 100vh; /* Высота 100% от высоты окна просмотра */
  background-image: url('https://4a6bb77c-84a1-4012-a083-0bd9f2dea524.srvstatic.uz/back.jpg'); /* Убедитесь, что back.jpg находится в папке assets */
  background-size: cover; /* Гарантирует, что фон покрывает всю область, не обрезаясь */
  background-position: top center; /* Центрирует фоновое изображение по горизонтали, привязывает к верхнему краю */
  background-repeat: no-repeat; /* Предотвращает повторение изображения */
  z-index: -1; /* Помещает фон позади другого контента */
}

.relative-container {
  position: relative; /* Контейнер имеет относительное позиционирование */
  width: 100vw;
  height: 100vh;
  z-index: 1; /* Контейнер находится над фоном */
}

/* Если вы хотите, чтобы контейнер мог прокручиваться, но его дочерние элементы оставались позиционированными внутри него: */
.relative-container.scrollable {
  overflow-y: auto;
}

.logo{
  position: absolute;
  top: -1.6vw;
  left: 36vw;
  opacity: 1;

}

.logo__img{
  width: 20vw;
  height: auto;
}

.x{
  position: absolute;
  top: 0.4vw;
  right: 5vw;

}

.x__img{
  width: 5vw;
  height: auto;
}

.footer{
  position: absolute;
  bottom: -1vw;
  opacity: 1;
}

.footer__img{
  width: 100vw;
  height: auto;
}

.main{
  position: absolute;
 bottom: 5.7vw;
 left: 38vw;
}

.main__img{
  width: 20vw;
  height: auto;
}

.border1{
  position: absolute;
  top: 15vw;
  left: 20vw;
}

.border1__img{
  width: 17vw;
  height: auto;
}


.border1__video {
  position: absolute;
  top: 53.4%;
  left: 50.4%;
  transform: translate(-50%, -50%);
  border-radius: 1vw;
  width: 15vw; /* регулируй размер */
  height: auto;
  pointer-events: none;
}


.border2{
  position: absolute;
  top: 10vw;
  right: 20vw;
  display: flex; /* Используем Flexbox для центрирования содержимого */
  justify-content: center; /* Центрируем по горизонтали */
  align-items: center;
}

.border2__img{
  width: 17vw;
  height: auto;
}
.border2__video {
  position: absolute;
  top: 45%;
  left: 50.4%;
  transform: translate(-50%, -50%);
  border-radius: 1vw;
  width: 15vw; /* регулируй размер */
  height: auto;
  pointer-events: none;
}


.border3{
  position: absolute;
  top: 25vw;
  right: 20vw;
}

.border3__img{
  width: 17vw;
  height: auto;
}

.border3__video {
  position: absolute;
  top: 53.4%;
  left: 50.4%;
  transform: translate(-50%, -50%);
  border-radius: 1vw;
  width: 15vw; /* регулируй размер */
  height: auto;
  pointer-events: none;
}


/* style.css */

/* ... (ваш существующий CSS-код для body, background-container, relative-container, logo, x, border1, border2, border3, main, footer остается без изменений) ... */

/* Стили для элементов tap */
/* Общий стиль для всех тапов, управляющий их видимостью и добавляющий анимацию */
.tap1, .tap2, .tap3 {
  position: absolute;
  cursor: pointer;
  transition: opacity 0.5s ease-in-out; /* Плавный переход для появления/скрытия с помощью x-show */
  /* Добавляем пульсирующую анимацию */
  animation: tapPulse 1.5s infinite ease-in-out; /* Анимация: имя, длительность, повторение, сглаживание */
}

/* Стили для изображений внутри тапов */
.tap1__img, .tap2__img, .tap3__img {
  height: auto;
  display: block; /* Убеждаемся, что изображение ведет себя как блок */
}

/* Конкретные позиции и размеры для каждого tap, как вы указали */
.tap1 {
  top: 18vw;
  right: 36vw;
}
.tap1__img {
  width: 10vw;
}

.tap2 {
  top: 30vw;
  left: 30vw;
}
.tap2__img {
  width: 7vw;
}

.tap3 {
  top: 10vw;
  left: 35vw;
}
.tap3__img {
  width: 6vw;
}

/* --- */
/* Определение анимации пульсации */
@keyframes tapPulse {
  0% {
    transform: scale(1); /* Исходный размер */
    filter: brightness(1); /* Исходная яркость */
  }
  50% {
    transform: scale(1.05); /* Немного увеличиваем размер */
    filter: brightness(1.2); /* Делаем ярче */
  }
  100% {
    transform: scale(1); /* Возвращаемся к исходному размеру и яркости */
    filter: brightness(1);
  }
}

.textfooter {
  position: absolute;
  font-family: 'Inter', sans-serif; /* Шрифт Inter */
  bottom: 1.3vw;
  left: 32.7vw;
  margin: 0;
  font-size: 1.4vw; /* Размер шрифта в vw для адаптивности */
  color: #000; /* Цвет текста */
  text-align: center; /* Центрирование текста */
  z-index: 2; /* Убедитесь, что текст находится поверх других элементов */
  opacity: 1;
}

.blur {
  position: absolute;
  top: 0;
  left: 50vw;
  transform: translateX(-50%);
  width: 100vw;
  height: 100vh; /* блюр должен покрывать всю высоту экрана */
  backdrop-filter: blur(64px);
  -webkit-backdrop-filter: blur(64px); /* для Safari */
  pointer-events: none;
  opacity: 0;
}

.logo2 {
  position: absolute;
  top: 2.6vw;
  left: 47.3vw;
  transform: translate(-50%, -50%);
  opacity: 0;
}

.logo2__img {
  width: 20vw;
  height: auto;
}

.footer2 {
  position: absolute;
  bottom: -1vw;
  left: 50vw;
  transform: translateX(-50%);
  width: 101vw;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
}

.footer2__img {
    width: 100vw;
  display: block;
  margin: 0 auto;
  height: auto;
  max-width: none;
  opacity: 0;
}

.header {
  position: absolute;
  bottom: -1vw;
  left: 50vw;
  transform: translateX(-50%);
  width: 101vw;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
}

.header__img {
    width: 101vw;
  display: block;
  margin: 0 auto;
  height: auto;
  max-width: none;
}

.blur2 {
  position: absolute;
  bottom: 0;
  left: 50vw;
  transform: translateX(-50%);
  width: 100vw;
  height: 100vh; /* блюр должен покрывать всю высоту экрана */
  backdrop-filter: blur(64px);
  -webkit-backdrop-filter: blur(64px); /* для Safari */
  pointer-events: none;
  opacity: 0;
}



@media (max-width: 768px) {

body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  overflow-x: hidden;
  overflow-y: auto; /* Предотвращает прокрутку body, чтобы фон оставался зафиксированным */
}

.background-container {
  position: fixed;
  top: 0; /* Фон выравнивается по верхнему краю экрана */
  left: 0;
  width: 100vw; /* Ширина 100% от ширины окна просмотра */
  height: 1310px; /* Высота 100% от высоты окна просмотра */
  background-image: url('assets/mobile.jpg'); /* Убедитесь, что back.jpg находится в папке assets */
  background-size: cover; /* Гарантирует, что фон покрывает всю область, не обрезаясь */
  background-position: top center; /* Центрирует фоновое изображение по горизонтали, привязывает к верхнему краю */
  background-repeat: no-repeat; /* Предотвращает повторение изображения */
  z-index: -1; /* Помещает фон позади другого контента */
}

.relative-container {
  position: relative; /* Контейнер имеет относительное позиционирование */
  width: 100vw;
  height: 1310px;
  z-index: 1; /* Контейнер находится над фоном */
}

.blur {
  position: absolute;
  top: 0;
  left: 50vw;
  transform: translateX(-50%);
  width: 100vw;
  height: 10vh; /* блюр должен покрывать всю высоту экрана */
  backdrop-filter: blur(64px);
  -webkit-backdrop-filter: blur(64px); /* для Safari */
  pointer-events: none;
  opacity: 1;
}

.logo{
  position: absolute;
  top: -1.6vw;
  left: 36vw;
  opacity: 0;

}

.logo2 {
  position: absolute;
  top: 50vw;
  left: 47.3vw;
  transform: translate(-50%, -50%);
  opacity: 1;
}

.logo2__img {
  width: 90vw;
  height: auto;
}

.footer2 {
  position: absolute;
  top: 160vw;
  left: 50vw;
  transform: translateX(-50%);
  width: 100vw;
  overflow: hidden;
  pointer-events: none;
  opacity: 1;
}

.footer2__img {
    width: 100vw;
  display: block;
  margin: 0 auto;
  height: auto;
  max-width: none;
  opacity: 1;
}

.main{
  position: absolute;
 top: 80vw;
 left: 22vw;
}

.main__img{
  width: 50vw;
  height: auto;
}

.header {
  position: absolute;
  top:-4vw;
  left: 50vw;
  transform: translateX(-50%);
  width: 100vw;
  overflow: hidden;
  pointer-events: none;
  opacity: 1;
}

.header__img {
    width: 100vw;
  display: block;
  margin: 0 auto;
  height: auto;
  max-width: none;
}

.border1{
  position: absolute;
  top: 175vw;
  left: 17vw;
}

.border1__img{
  width: 67vw;
  height: auto;
}


.border1__video {
  position: absolute;
  top: 53%;
  left:50%;
  width: 55vw;
  height: auto;
   transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 1vw;
  pointer-events: none;
  overflow: hidden;
}

.border2{
  position: absolute;
  top: 235vw;
  right: 16vw;
  display: flex; /* Используем Flexbox для центрирования содержимого */
  justify-content: center; /* Центрируем по горизонтали */
  align-items: center;
}

.border2__img{
  width: 67vw;
  height: auto;
}
.border2__video {
  position: absolute;
  top: 45%;
  left: 50.4%;
  transform: translate(-50%, -50%);
  border-radius: 1vw;
   width: 55vw;
  height: auto;
  pointer-events: none;
}


.border3{
  position: absolute;
   top: 295vw;
  right: 16vw;
}

.border3__img{
   width: 67vw;
  height: auto;
}

.border3__video{
  position: absolute;
  top: 54%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 55vw;
  height: auto;
  background: #fff;
  border-radius: 1vw;
  pointer-events: none;
  overflow: hidden;
}


.tap1 {
  top: 68vw;
  right: 6vw;
}
.tap1__img {
  width: 30vw;
}

.tap2 {
  top: 70vw;
  left: 0vw;
}
.tap2__img {
  width: 25vw;
}

.tap3 {
  top: 110vw;
  left: 0vw;
}
.tap3__img {
  width: 20vw;
}

.footer{
  position: absolute;
  bottom: -1vw;
  opacity: 0;
}

.footer__img{
  width: 100vw;
  height: auto;
}

.blur2 {
  position: absolute;
  bottom: -21vw;
  left: 50vw;
  transform: translateX(-50%);
  width: 100vw;
  height: 10vh; /* блюр должен покрывать всю высоту экрана */
  backdrop-filter: blur(64px);
  -webkit-backdrop-filter: blur(64px); /* для Safari */
  pointer-events: none;
  opacity: 0;
}

.textfooter {
  position: absolute;
  font-family: 'Inter', sans-serif; /* Шрифт Inter */
  bottom: 1.3vw;
  left: 32.7vw;
  margin: 0;
  font-size: 1.4vw; /* Размер шрифта в vw для адаптивности */
  color: #000; /* Цвет текста */
  text-align: center; /* Центрирование текста */
  z-index: 2; /* Убедитесь, что текст находится поверх других элементов */
  opacity: 0;
}

.x{
  position: absolute;
  top: 3vw;
  right: 5vw;

}

.x__img{
  width: 15vw;
  height: auto;
}

}