/* ========================================
   Анимации (Animations) - Scroll Triggered
   ======================================== */

/* Плавное появление (Fade) */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Плавное появление снизу */
@keyframes slideInBottom {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Плавное появление слева */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Плавное появление справа */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Плавное появление сверху */
@keyframes slideInTop {
    from {
        opacity: 0;
        transform: translateY(-40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Плавное появление с масштабированием */
@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Анимация выезда сверху для логотипа */
@keyframes fadeInSlideTop {
    from {
        opacity: 0;
        margin-top: -100px;
    }
    to {
        opacity: 1;
        margin-top: 0;
    }
}

/* ========================================
   Screen 1 - Анимация при загрузке (без скролла)
   ======================================== */
.screen1 {
    opacity: 0;
    animation: slideInBottom 1.6s ease forwards;
}

.screen1 header > .container {
    opacity: 0;
    animation: fadeInScale 1.6s ease forwards;
    animation-delay: 0.2s;
}

.screen1 header > .container .main-logo {
    opacity: 0;
    animation: fadeInSlideTop 1.6s ease forwards;
    animation-delay: 0.4s;
}

.screen1 .title-block .title-text {
    opacity: 0;
    animation: slideInRight 2s ease forwards;
    animation-delay: 0.6s;
}

/* title-name-line - простой fade эффект */
.screen1 .title-v,
.screen1 .title-name,
.screen1 .title-description {
    opacity: 0;
    animation: fadeIn 1.6s ease forwards;
}

.screen1 .title-v {
    animation-delay: 0.8s;
}

.screen1 .title-name {
    animation-delay: 1s;
}

.screen1 .title-description {
    animation-delay: 1.4s;
}

/* ========================================
   Scroll-triggered анимации для остальных экранов
   ======================================== */

/* Экран появляется при скролле */
.screen {
    opacity: 0;
    transition: opacity 1.2s ease;
}

.screen.visible {
    opacity: 1;
}

/* Контейнер внутри экрана */
.screen .container {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1.2s ease, transform 1.2s ease;
}

.screen.visible .container {
    opacity: 1;
    transform: translateY(0);
}

/* Заголовки h2, h3 */
.screen h2,
.screen h3 {
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 1.2s ease 0.2s, transform 1.2s ease 0.2s;
}

.screen.visible h2,
.screen.visible h3 {
    opacity: 1;
    transform: translateY(0);
}

/* Разделитель */
.spliter {
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 1.2s ease 0.4s, transform 1.2s ease 0.4s;
}

.screen.visible .spliter {
    opacity: 1;
    transform: translateX(0);
}

/* Параграфы и списки */
.screen p,
.screen ul,
.screen ol {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1.2s ease, transform 1.2s ease;
}

.screen.visible p,
.screen.visible ul,
.screen.visible ol {
    opacity: 1;
    transform: translateY(0);
}

/* Кнопки и ссылки для скачивания */
.button,
.download {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 1.2s ease, transform 1.2s ease;
}

.screen.visible .button,
.screen.visible .download {
    opacity: 1;
    transform: scale(1);
}

/* Правая колонка (цитаты) */
.screen3 .col-right,
.screen7 .col-right {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 1.2s ease, transform 1.2s ease;
}

.screen.visible .col-right {
    opacity: 1;
    transform: translateX(0);
}

/* Карточки в правой колонке */
.screen3 .col-right .col-right-in,
.screen7 .col-right .col-right-in {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 1.2s ease, transform 1.2s ease;
}

.screen.visible .col-right .col-right-in {
    opacity: 1;
    transform: translateX(0);
}

.screen.visible .col-right .col-right-in:nth-child(1) { transition-delay: 0.2s; }
.screen.visible .col-right .col-right-in:nth-child(2) { transition-delay: 0.4s; }
.screen.visible .col-right .col-right-in:nth-child(3) { transition-delay: 0.6s; }

/* Фоновые изображения */
.screen .images-bg img {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 1.6s ease, transform 1.6s ease;
}

.screen.visible .images-bg img {
    opacity: 1;
    transform: scale(1);
}

.screen.visible .images-bg img:nth-child(1) { transition-delay: 0.2s; }
.screen.visible .images-bg img:nth-child(2) { transition-delay: 0.4s; }
.screen.visible .images-bg img:nth-child(3) { transition-delay: 0.6s; }
.screen.visible .images-bg img:nth-child(4) { transition-delay: 0.8s; }
.screen.visible .images-bg img:nth-child(5) { transition-delay: 1s; }