/* Начало стилей для анимации колонок */

.col1a-1, .col1a-2, .col1a-3 {
  opacity: 0; /* Изначально колонки невидимы */
  transform: translateY(-200px); /* Смещение вверх на 200 пикселей */
}

.col1a-1.animate {
  animation: slide-down 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.4s forwards;
}

.col1a-2.animate {
  animation: slide-down 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.6s forwards;
}

.col1a-3.animate {
  animation: slide-down 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.8s forwards;
}

@keyframes slide-down {
  0% {
    opacity: 0;
    transform: translateY(-200px);
  }
  70% {
    opacity: 1;
    transform: translateY(20px); /* Проваливание ниже места */
  }
  100% {
    opacity: 1;
    transform: translateY(0); /* Возвращение на место */
  }
}

/* Конец стилей для анимации колонок минигалереи */


/* Начало стилей для анимации колонок */

/* Левые колонки */
.tlpic, .blpic {
  opacity: 0; /* Изначально колонки невидимы */
  transform: translateX(-100%); /* Смещение влево */
}

.tlpic.animate {
  animation: slide-left 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.4s forwards;
}

.blpic.animate {
  animation: slide-left 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.8s forwards;
}

/* Правые колонки */
.trpic, .brpic {
  opacity: 0; /* Изначально колонки невидимы */
  transform: translateX(100%); /* Смещение вправо */
}

.trpic.animate {
  animation: slide-right 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.4s forwards;
}

.brpic.animate {
  animation: slide-right 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.8s forwards;
}

@keyframes slide-left {
  to {
    opacity: 1; /* Колонки становятся видимыми */
    transform: translateX(0); /* Возвращаются на своё место */
  }
}

@keyframes slide-right {
  to {
    opacity: 1; /* Колонки становятся видимыми */
    transform: translateX(0); /* Возвращаются на своё место */
  }
}

/* Конец стилей для анимации колонок минигалереи */


/* Начало стилей для анимации элемента o2oval */

.o2oval {
  opacity: 0; /* Изначально элемент невидим */
  transform: scale(0.5); /* Начальный размер 50% от нормального */
}

.o2oval.animate {
  animation: grow-bounce 0.8s cubic-bezier(0.4, 0, 0.6, 1.6) 0.2s forwards;
}

@keyframes grow-bounce {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  50% {
    opacity: 1;
    transform: scale(1.2); /* Большее увеличение */
  }
  70% {
    transform: scale(0.95); /* Немного меньше нормального размера */
  }
  100% {
    opacity: 1;
    transform: scale(1); /* Возвращение к нормальному размеру */
  }
}

/* Конец стилей для анимации элемента o2oval */

/* Начало стилей для анимации элемента oval1 */

.oval1 {
  opacity: 0; /* Изначально элемент невидим */
  transform: rotate(0deg); /* Начальный угол поворота */
}

.oval1.animate {
  animation: fade-rotate-reverse 1.5s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

@keyframes fade-rotate-reverse {
  0% {
    opacity: 0;
    transform: rotate(0deg);
  }
  100% {
    opacity: 1;
    transform: rotate(-360deg); /* Полный оборот против часовой стрелки */
  }
}

/* Конец стилей для анимации элемента oval1 */

/* Начало стилей для анимации колонок col1b-1, col1b-2, col1b-3 */

.col1b-1, .col1b-2, .col1b-3 {
  opacity: 0; /* Изначально колонки невидимы */
  transform: translateY(200px); /* Смещение вниз на 200 пикселей */
}

.col1b-1.animate {
  animation: slide-up 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.4s forwards;
}

.col1b-2.animate {
  animation: slide-up 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.6s forwards;
}

.col1b-3.animate {
  animation: slide-up 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.8s forwards;
}

@keyframes slide-up {
  to {
    opacity: 1; /* Колонки становятся видимыми */
    transform: translateY(0); /* Возвращаются на своё место */
  }
}

/* Конец стилей для анимации колонок col1b-1, col1b-2, col1b-3 */