/* Основные настройки */
.press1-body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #F8F8F8;
}

.presentation-container {
  width: 100%; /* Занимает всю ширину окна */
  height: 100vh; /* Высота по-прежнему 100% от высоты окна */
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}







.svg-sprite {
  background-image: url('../img/video/text.svg'); /* Спрайт */
  width: 467px; /* Фиксированная ширина для большого экрана */
  height: 47px; /* Высота одного изображения */
  background-repeat: no-repeat;
  display: none;
  background-size: 100% auto; /* Масштабируем фон под размер элемента */
}

/* Позиции для каждого изображения */
.image-1 { background-position: 0 0; }
.image-2 { background-position: 0 -47px; }
.image-3 { background-position: 0 -94px; }

.image-14 { background-position: 0 -141px; }
.image-15 { background-position: 0 -188px; }
.image-16 { background-position: 0 -235px; }

.image-21 { background-position: 0 -282px; }
.image-22 { background-position: 0 -329px; }
.image-23 { background-position: 0 -376px; }

.image-27 { background-position: 0 -423px; }
.image-28 { background-position: 0 -470px; }
.image-29 { background-position: 0 -517px; }

.image-35 { background-position: 0 -562px; }
.image-36 { background-position: 0 -609px; }
.image-37 { background-position: 0 -656px; }


@media screen and (max-width: 600px) {
  .svg-sprite {
    width: calc(467px * 0.7); /* Уменьшаем ширину на 30% */
    height: calc(47px * 0.7); /* Уменьшаем высоту на 30% */
    background-size: calc(467px * 0.7) auto; /* Масштабируем фон */
  }

  /* Пересчитываем позиции с учетом уменьшения */
  .image-1 { background-position: 0 0; }
  .image-2 { background-position: 0 calc(-47px * 0.7); }
  .image-3 { background-position: 0 calc(-94px * 0.7); }
  .image-14 { background-position: 0 calc(-141px * 0.7); }
  .image-15 { background-position: 0 calc(-188px * 0.7); }
  .image-16 { background-position: 0 calc(-235px * 0.7); }
  .image-21 { background-position: 0 calc(-282px * 0.7); }
  .image-22 { background-position: 0 calc(-329px * 0.7); }
  .image-23 { background-position: 0 calc(-376px * 0.7); }
  .image-27 { background-position: 0 calc(-423px * 0.7); }
  .image-28 { background-position: 0 calc(-470px * 0.7); }
  .image-29 { background-position: 0 calc(-517px * 0.7); }
  .image-35 { background-position: 0 calc(-562px * 0.7); }
  .image-36 { background-position: 0 calc(-609px * 0.7); }
  .image-37 { background-position: 0 calc(-656px * 0.7); }



}













.svg-top {
  margin-bottom: 6%;
  animation: moveLeft 2s linear forwards;
}

.svg-center {
  animation: moveRight 2s linear forwards;
}

.svg-bottom {
  margin-top: 6%;
  animation: moveLeft 2s linear forwards;
}



/* Анимации движений */
@keyframes moveLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-10%);
  }
}

@keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10%);
  }

}

@keyframes slideLeft {
  0% {
    transform: translateX(0); /* Начальная позиция — изображение полностью внутри контейнера */
  }
  100% {
    transform: translateX(calc(50vw - 100%)); /* Конечная позиция — правый край изображения совпадает с правым краем контейнера */
  }
}



.image-5, .image-6, .image-7, .image-8, .image-9, .image-10, .image-11, .image-12, .image-13 {
  display: none;
  width: 100%; /* Сделать ширину 100%, чтобы изображение было адаптивным */
  height: 100%; /* Занимает всю высоту контейнера */
  object-fit: cover; /* Масштабировать изображение, сохраняя пропорции */
  position: relative;
  z-index: 10;
}


.svg-full {
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  height: 100%;
  display: none; /* Отображается через JS */
  animation: none; /* Сбрасывается через JS */
}



.image-14 {

  margin-bottom: 6%;
  animation: moveLeft 2s forwards;
}

.image-15 {
  display: none;
  animation: moveRight 2s forwards;
}

.image-16 {
  display: none;
  margin-top: 6%;
  animation: moveLeft 2s forwards;
}


.presentation-container {
  display: flex;
  flex-direction: column;
}

@keyframes moveUp {
  0% {
    transform: translateY(30%); /* Начальная позиция для image-17 */
  }
  100% {
    transform: translateY(0); /* Конечная позиция */
  }
}

@keyframes moveUpSecond {
  0% {
    transform: translateY(40%); /* Начальная позиция для image-18 */
  }
  100% {
    transform: translateY(0); /* Конечная позиция */
  }
}

.container {
  display: grid;
  grid-template-columns: 60% 40%; /* Одна колонка занимает 60%, другая 40% */
  gap: 10px; /* Расстояние между изображениями */
  width: 100%;
}

.container img {
  width: 100%;
  height: auto; /* Сохраняет пропорции */
  object-fit: contain; /* Вписывает изображение в контейнер, сохраняя пропорции */
}

.image-17 {
  display: none;
  animation: moveUp 3s linear forwards; /* Линейная анимация для движения вверх */
}

.image-18 {
  display: none;
  animation: moveUpSecond 3s linear forwards; /* Линейная анимация для движения вверх */
}



.image-19 {
  transform: translateY(10%); 
  height: 50vw;  /* Пропорциональная ширина */
}

.image-20 {
  transform: translateY(-10%); 
height: 50vw;  /* Пропорциональная ширина */
}


.image-19{
  display: none;  /* Элементы изначально скрыты */
  position: absolute;
  transition: transform 14s linear;
}

.image-20 {
  display: none;  /* Элементы изначально скрыты */
  position: absolute;
  transition: transform 10s linear;
}



.move-left {
  transform: translateX(-100%); /* Двигаем изображение влево */
}

.move-right {
  transform: translateX(100%); /* Двигаем изображение влево */
}


.image-21 {
  display: none;
  margin-bottom: 6%;
  animation: moveLeft 2s forwards;
}

.image-22 {
  display: none;
  animation: moveRight 2s forwards;
}

.image-23 {
  display: none;
  margin-top: 6%;
  animation: moveLeft 2s forwards;
}



@keyframes move2Up {
  0% {
      transform: translateY(0); /* Начальная позиция - изображение на месте */
  }
  100% {
      transform: translateY(-100%); /* Конечная позиция - изображение движется вверх */
  }
}

.image-24 {
  position: absolute;
  top: 0;
  left: 22%; /* Можно скорректировать, чтобы изображение было по центру */
  transform: translateX(-50%); /* Центрируем по горизонтали */
  display: none; /* Изображение скрыто до анимации */
  width: auto;
  height: 100%;
}


@keyframes move2Down {
  0% {
      transform: translateY(-100%); /* Начальная позиция - сверху */
  }
  100% {
      transform: translateY(0); /* Конечная позиция - на месте */
  }
}

@keyframes move2Up {
  0% {
      transform: translateY(50%); /* Начальная позиция - снизу */
  }
  100% {
      transform: translateY(0); /* Конечная позиция - на месте */
  }
}

.image-25 {
  position: absolute;
  left: 40%; /* Можно скорректировать, чтобы изображение было по центру */
  transform: translateX(-50%); /* Центрируем по горизонтали */
  top: 100%;
  width: auto;
  height: 130%;
  display: none;
}

.image-26 {
  position: absolute;
  left: 14%; /* Можно скорректировать, чтобы изображение было по центру */
  transform: translateX(-50%); /* Центрируем по горизонтали */
  bottom: 0;
  width: auto;
  height: 130%;
  display: none;
}

.image-27 {
  display: none;
  margin-bottom: 6%;
  animation: moveLeft 2s forwards;
}

.image-28 {
  display: none;
  animation: moveRight 2s forwards;
}

.image-29 {
  display: none;
  margin-top: 6%;
  animation: moveLeft 2s forwards;
}


.image-30 {
  bottom: 53%;
  display: none;
  position: absolute;
  transition: transform 14s linear;
  width: 180vw;  /* Ширина изображения будет пропорциональна ширине окна */
  height: auto; /* Автоматически подстраивается высота для сохранения пропорций */
}

.image-31 {
  top: 53%;
  display: none;
  position: absolute;
  transition: transform 10s linear;
  width: 180vw;  /* Пропорциональная ширина */
  height: auto; /* Автоматически регулирует высоту */
}


@keyframes shrink {
  0% {
      transform: scale(1); /* Начальный размер - 100% */
  }
  100% {
      transform: scale(0.55); /* Конечный размер - 70% */
  }
}

.image-32 {
  position: absolute;
  top: -30%;
  left: -30%;
  transform: translate(-50%, -50%); /* Центрируем изображение */
  width: 160vw;  /* Пропорциональная ширина */
  display: none; /* Изображение скрыто до анимации */
}


.image-33 {
  position: absolute;
  top: 0;
  left: 19%; /* Можно скорректировать, чтобы изображение было по центру */
  transform: translateX(-50%); /* Центрируем по горизонтали */
  display: none; /* Изображение скрыто до анимации */
  width: 60vw;  /* Пропорциональная ширина */
  height: auto;
}

@keyframes move3Up {
  0% {
    transform: translateY(2%); /* Начальная позиция */
  }
  100% {
    transform: translateY(-35%); /* Конечная позиция */
  }
}


@keyframes move2Right {
    0% {
        transform: translateX(0); /* Начальная позиция - изображение на месте */
    }
    100% {
        transform: translateX(68%); /* Конечная позиция - изображение уходит вправо */
    }
}

.image-34 {
    position: absolute;
    top: 25%;
    left: -180%;
    transform: translateY(-10%); /* Центрируем изображение по вертикали */
    width: 270vw;  /* Пропорциональная ширина */
    display: none; /* Изображение скрыто до анимации */
}



.image-35 {
  display: none;
  margin-bottom: 6%;
  animation: moveLeft 2s forwards;
}

.image-36 {
  display: none;
  animation: moveRight 2s forwards;
}

.image-37 {
  display: none;
  margin-top: 6%;
  animation: moveLeft 2s forwards;
}


.image-38 {
  position: absolute;
  top: -35%;
  left: -35%;
  transform: translate(-50%, -50%); /* Центрируем изображение */
  width: 160vw;  /* Пропорциональная ширина */
  display: none; /* Изображение скрыто до анимации */
}


@keyframes shrink {
  0% {
      transform: scale(0.99); /* Начальный размер - 100% */
  }
  100% {
      transform: scale(0.68); /* Конечный размер - 70% */
  }
}


.image-39 {
  position: absolute;
  top: 0;
  left: 0; /* Можно скорректировать, чтобы изображение было по центру */
  transform: translateX(-50%); /* Центрируем по горизонтали */
  display: none; /* Изображение скрыто до анимации */
  width: 100%;

}

@keyframes move4Up {
  0% {
    transform: translateY(-1%); /* Начальная позиция */
  }
  100% {
    transform: translateY(-67%); /* Конечная позиция */
  }
}