/* ============================================ АНИМАЦИИ — keyframes и кастомные эффекты ============================================ */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes blobFloat { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(30px, -20px) scale(1.05); } 66% { transform: translate(-20px, 20px) scale(0.97); } } @keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } @keyframes pulseGlow { 0%, 100% { box-shadow: 0 16px 40px rgba(0, 201, 167, 0.28); } 50% { box-shadow: 0 16px 56px rgba(0, 201, 167, 0.48); } } /* Плавающие blob'ы в hero */ .hero-blob { animation: blobFloat 18s ease-in-out infinite; } .hero-blob.blob-2 { animation-duration: 22s; animation-direction: reverse; } /* Парящие карточки в hero */ .hero-card-top { animation: floatY 5s ease-in-out infinite; } .hero-card-bottom { animation: floatY 5s ease-in-out infinite 1.2s; } /* Пульсация CTA-кнопки в hero (мягкая) */ .hero-actions .btn-primary { animation: pulseGlow 3.2s ease-in-out infinite; } /* Пока AOS не загрузился — скрываем data-aos элементы, чтобы не мелькали. Фолбэк: если AOS недоступен, JS добавит .aos-failed на — контент виден. */ [data-aos]:not(.aos-animate) { opacity: 0; } /* Сбрасываем и transform: сдвиг задаёт CSS самого AOS, до .aos-animate fade-left/right держат translate3d(±100px) и разъезжаются за экран. */ .aos-failed [data-aos]:not(.aos-animate) { opacity: 1; transform: none; } /* На телефоне AOS не запускается — контент должен быть виден сразу. Класс ставит JS до инициализации, иначе блоки остались бы прозрачными. */ .aos-off [data-aos]:not(.aos-animate) { opacity: 1; transform: none; } /* Бесконечные анимации на телефоне выключены: pulseGlow перерисовывает тень каждый кадр, blobFloat двигает элементы под filter: blur(70px). Оба эффекта декоративные, а кадры едят постоянно. */ @media (max-width: 768px) { .hero-blob, .hero-card-top, .hero-card-bottom, .hero-actions .btn-primary, .btn-call { animation: none; } } /* Уважение к настройкам пользователя — уменьшаем анимации */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } [data-aos]:not(.aos-animate) { opacity: 1; } }