/* ===========================================================
   ANIMATIONS.CSS
   Все ключевые кадры и анимационные классы
=========================================================== */

/* ---------- Анимация частиц (фон) ---------- */
@keyframes particles {
    from { transform: translateY(0); }
    to { transform: translateY(-300px); }
}

/* ---------- Скролл-индикатор ---------- */
@keyframes wheel {
    from { opacity: 1; transform: translate(-50%, 0); }
    to { opacity: 0; transform: translate(-50%, 20px); }
}

/* ---------- Плавающие карточки ---------- */
@keyframes floatCard {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
    100% { transform: translateY(0px); }
}

/* ---------- Плавающий блок hero-right ---------- */
@keyframes float {
    0% { transform: translateY(0); }
    50% { transform: translateY(-18px); }
    100% { transform: translateY(0); }
}

/* ---------- Анимация градиента заголовков ---------- */
@keyframes titleGradient {
    from { background-position: 0%; }
    to { background-position: 300%; }
}

/* ---------- Световая вспышка на кнопке ---------- */
@keyframes buttonLight {
    from { left: -180px; }
    to { left: 180%; }
}

/* ---------- Амбиентные частицы (светящиеся сферы) ---------- */
@keyframes floatAmbient {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(60px, -40px) scale(1.15); }
}

/* ---------- Классы для появления элементов ---------- */
.fade-up {
    opacity: 0;
    transform: translateY(80px);
    transition: opacity .8s ease, transform .8s ease;
}
.fade-up.active {
    opacity: 1;
    transform: none;
}

.scale {
    opacity: 0;
    transform: scale(.9);
    transition: .7s;
}
.scale.active {
    opacity: 1;
    transform: scale(1);
}

.rotate {
    opacity: 0;
    transform: rotate(8deg);
    transition: .8s;
}
.rotate.active {
    opacity: 1;
    transform: none;
}