/* =========================================================
   Анимации и keyframes
   ========================================================= */

/* ---------- Keyframes ---------- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@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 pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.3);
        opacity: 0.7;
    }
}

@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 15px rgba(234, 118, 0, 0.4);
    }
    50% {
        box-shadow: 0 0 30px rgba(234, 118, 0, 0.8), 0 0 50px rgba(234, 118, 0, 0.3);
    }
}

@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-12px) rotate(2deg); }
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* ---------- Классы для скролл-анимаций ---------- */
/* Стартовое состояние — невидимо, с трансформом */
.fade-in,
.fade-in-up,
.fade-in-down,
.fade-in-left,
.fade-in-right {
    opacity: 0;
    transition: opacity 0.8s ease, transform 0.8s ease;
    will-change: opacity, transform;
}

.fade-in-up { transform: translateY(40px); }
.fade-in-down { transform: translateY(-25px); }
.fade-in-left { transform: translateX(-40px); }
.fade-in-right { transform: translateX(40px); }

/* При появлении — возврат в исходное положение */
.fade-in.is-visible,
.fade-in-up.is-visible,
.fade-in-down.is-visible,
.fade-in-left.is-visible,
.fade-in-right.is-visible {
    opacity: 1;
    transform: translate(0, 0);
}

/* ---------- Задержки (stagger) ---------- */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }

/* ---------- Анимации отдельных элементов ---------- */
.hero-kicker {
    animation: fadeInDown 0.8s ease both;
}

.hero h1 {
    animation: fadeInUp 0.8s ease 0.1s both;
}

.hero p.lead {
    animation: fadeInUp 0.8s ease 0.2s both;
}

.hero .btn {
    animation: fadeInUp 0.8s ease 0.3s both;
}

.hero-art {
    animation: fadeIn 1s ease 0.4s both, float 6s ease-in-out 1.5s infinite;
}

/* Пульсация активного shading-mode (rendered) во вьюпорте автора */
.viewport-shading .shade.active {
    animation: glow 3.5s ease-in-out infinite;
}

/* Плавное покачивание иконок возможностей */
.feature-card:hover .feature-icon {
    animation: float 2s ease-in-out infinite;
}

/* Карусель: плавные переходы */
.carousel-item {
    transition: transform 0.7s ease-in-out;
}

/* Lightbox: плавное открытие */
#lightboxModal .modal-dialog {
    transform: scale(0.95);
    transition: transform 0.25s ease;
}

#lightboxModal.show .modal-dialog {
    transform: scale(1);
}

/* Hover-подсветка */
.tile-row .tile,
.req-card,
.tech-pill,
.download-card {
    transition: all 0.3s ease;
}

/* Кнопка «Наверх» при появлении */
.back-to-top {
    transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease;
}