/* Базовая настройка */
.animate-on-scroll {
    opacity: 0;
    transition: all 1.2s ease;
    will-change: transform, opacity;
}
  /* ЭФФЕКТЫ ДЛЯ h1 */
.slide-from-left {
    transform: translateX(-15%);
}
.slide-from-right {
    transform: translateX(15%);
}
.slide-from-top {
    transform: translateY(-20%);
}
.slide-from-bottom {
    transform: translateY(20%);
}
  /* ЭФФЕКТЫ ДЛЯ БЛОКОВ */
.zoom-in {
    transform: scale(0.9);
}
.flip-in-x {
    transform: rotateX(90deg);
    transform-origin: center;
}
.flip-in-y {
    transform: rotateY(90deg);
    transform-origin: center;
}
.fade-up {
    transform: translateY(15%);
}
.fade-down {
    transform: translateY(-15%);
}
.slide-left {
    transform: translateX(-15%);
}
.slide-right {
    transform: translateX(15%);
}
.grow-in {
    transform: scale(0);
}
  /* При появлении в зоне видимости */
.animate-on-scroll.animate {
    opacity: 1;
    transform: none;
    filter: none;
}