/* Background Animations CSS */

/* === Глобальные оптимизации для анимаций === */
.particles-bg,
.gradient-bg,
.wave-bg,
.geometric-bg,
.grid-bg,
.pulse-bg,
.lines-bg,
.smoke-bg,
.circles-bg,
.combined-bg,
.calm-particles-bg,
.very-calm-particles-bg,
.floating-dots-bg,
.soft-clouds-bg {
    /* Оптимизация производительности для мобильных устройств */
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);

    /* Улучшение рендеринга */
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;

    /* Оптимизация слоев */
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -ms-perspective: 1000;
    perspective: 1000;
}

/* === 1. Анимированные частицы (Particles) === */
.particles-bg {
    position: relative;
    overflow: hidden;
}

.particles-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 20% 80%, rgba(30, 240, 160, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(30, 240, 160, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(30, 240, 160, 0.06) 0%, transparent 50%),
        radial-gradient(circle at 60% 60%, rgba(30, 240, 160, 0.04) 0%, transparent 50%);
    animation: particles-float 20s ease-in-out infinite;
    z-index: -1;
}

@keyframes particles-float {

    0%,
    100% {
        transform: translateY(0px) rotate(0deg);
    }

    25% {
        transform: translateY(-20px) rotate(90deg);
    }

    50% {
        transform: translateY(-40px) rotate(180deg);
    }

    75% {
        transform: translateY(-20px) rotate(270deg);
    }
}

/* === 2. Анимированный градиентный фон === */
.gradient-bg {
    position: relative;
    overflow: hidden;
}

.gradient-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(-45deg,
            rgba(30, 240, 160, 0.08),
            rgba(32, 42, 52, 0.06),
            rgba(30, 240, 160, 0.04),
            rgba(232, 249, 241, 0.05));
    background-size: 400% 400%;
    animation: gradient-shift 15s ease infinite;
    z-index: -1;
}

@keyframes gradient-shift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* === 3. Волновой анимированный фон === */
.wave-bg {
    position: relative;
    overflow: hidden;
}

.wave-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 100%;
    background:
        linear-gradient(45deg,
            rgba(30, 240, 160, 0.08) 25%,
            transparent 25%,
            transparent 50%,
            rgba(30, 240, 160, 0.08) 50%,
            rgba(30, 240, 160, 0.08) 75%,
            transparent 75%,
            transparent);
    background-size: 60px 60px;
    animation: wave-move 8s linear infinite;
    z-index: -1;
}

@keyframes wave-move {
    0% {
        transform: translateX(-50%);
    }

    100% {
        transform: translateX(0%);
    }
}

/* === 4. Плавающие геометрические фигуры === */
.geometric-bg {
    position: relative;
    overflow: hidden;
}

.geometric-bg::before,
.geometric-bg::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    opacity: 0.1;
    z-index: -1;
}

.geometric-bg::before {
    width: 300px;
    height: 300px;
    background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
    top: -150px;
    right: -150px;
    animation: geometric-float-1 12s ease-in-out infinite;
}

.geometric-bg::after {
    width: 200px;
    height: 200px;
    background: linear-gradient(-45deg, var(--primary-light), var(--primary-color));
    bottom: -100px;
    left: -100px;
    animation: geometric-float-2 15s ease-in-out infinite reverse;
}

@keyframes geometric-float-1 {

    0%,
    100% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-30px) rotate(180deg);
    }
}

@keyframes geometric-float-2 {

    0%,
    100% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(30px) rotate(-180deg);
    }
}

/* === 5. Анимированная сетка === */
.grid-bg {
    position: relative;
    overflow: hidden;
}

.grid-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(rgba(30, 240, 160, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(30, 240, 160, 0.08) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: grid-move 20s linear infinite;
    z-index: -1;
}

@keyframes grid-move {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(50px, 50px);
    }
}

/* === 6. Пульсирующий фон === */
.pulse-bg {
    position: relative;
    overflow: hidden;
}

.pulse-bg::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(30, 240, 160, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: pulse-expand 4s ease-out infinite;
    z-index: -1;
}

@keyframes pulse-expand {
    0% {
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        width: 1000px;
        height: 1000px;
        opacity: 0;
    }
}

/* === 7. Анимированные линии === */
.lines-bg {
    position: relative;
    overflow: hidden;
}

.lines-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        repeating-linear-gradient(90deg,
            transparent,
            transparent 40px,
            rgba(30, 240, 160, 0.08) 40px,
            rgba(30, 240, 160, 0.08) 42px);
    animation: lines-slide 10s linear infinite;
    z-index: -1;
}

@keyframes lines-slide {
    0% {
        transform: translateX(-42px);
    }

    100% {
        transform: translateX(0);
    }
}

/* === 8. Анимированный дым/туман === */
.smoke-bg {
    position: relative;
    overflow: hidden;
}

.smoke-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(ellipse at 30% 70%, rgba(30, 240, 160, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 30%, rgba(32, 42, 52, 0.06) 0%, transparent 50%);
    filter: blur(20px);
    animation: smoke-drift 25s ease-in-out infinite;
    z-index: -1;
}

@keyframes smoke-drift {

    0%,
    100% {
        transform: translateX(0px) translateY(0px) scale(1);
        filter: blur(20px);
    }

    33% {
        transform: translateX(-30px) translateY(-20px) scale(1.1);
        filter: blur(25px);
    }

    66% {
        transform: translateX(20px) translateY(-30px) scale(0.9);
        filter: blur(15px);
    }
}

/* === 9. Анимированные круги === */
.circles-bg {
    position: relative;
    overflow: hidden;
}

.circles-bg::before,
.circles-bg::after {
    content: '';
    position: absolute;
    border: 2px solid rgba(30, 240, 160, 0.15);
    border-radius: 50%;
    z-index: -1;
}

.circles-bg::before {
    width: 400px;
    height: 400px;
    top: -200px;
    right: -200px;
    animation: circles-rotate-1 20s linear infinite;
}

.circles-bg::after {
    width: 300px;
    height: 300px;
    bottom: -150px;
    left: -150px;
    animation: circles-rotate-2 25s linear infinite reverse;
}

@keyframes circles-rotate-1 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes circles-rotate-2 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(-360deg);
    }
}

/* === 10. Комбинированный анимированный фон === */
.combined-bg {
    position: relative;
    overflow: hidden;
}

.combined-bg::before,
.combined-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.combined-bg::before {
    background:
        radial-gradient(circle at 20% 80%, rgba(30, 240, 160, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(32, 42, 52, 0.06) 0%, transparent 50%);
    animation: combined-float 18s ease-in-out infinite;
}

.combined-bg::after {
    background:
        linear-gradient(45deg,
            rgba(232, 249, 241, 0.04) 25%,
            transparent 25%,
            transparent 50%,
            rgba(232, 249, 241, 0.04) 50%,
            rgba(232, 249, 241, 0.04) 75%,
            transparent 75%,
            transparent);
    background-size: 80px 80px;
    animation: combined-grid 12s linear infinite;
}

@keyframes combined-float {

    0%,
    100% {
        transform: translateY(0px) scale(1);
    }

    50% {
        transform: translateY(-25px) scale(1.05);
    }
}

@keyframes combined-grid {
    0% {
        transform: translateX(-80px) translateY(-80px);
    }

    100% {
        transform: translateX(0) translateY(0);
    }
}

/* === 11. Спокойные частицы (Calm Particles) === */
.calm-particles-bg {
    position: relative;
    overflow: hidden;
}

.calm-particles-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 15% 85%, rgba(30, 240, 160, 0.06) 0%, transparent 60%),
        radial-gradient(circle at 85% 15%, rgba(30, 240, 160, 0.04) 0%, transparent 60%),
        radial-gradient(circle at 35% 35%, rgba(30, 240, 160, 0.03) 0%, transparent 60%),
        radial-gradient(circle at 65% 65%, rgba(30, 240, 160, 0.02) 0%, transparent 60%),
        radial-gradient(circle at 50% 50%, rgba(30, 240, 160, 0.01) 0%, transparent 70%);
    animation: calm-particles-float 35s ease-in-out infinite;
    z-index: -1;
}

@keyframes calm-particles-float {

    0%,
    100% {
        transform: translateY(0px) rotate(0deg) scale(1);
        opacity: 0.8;
    }

    25% {
        transform: translateY(-8px) rotate(45deg) scale(1.02);
        opacity: 0.9;
    }

    50% {
        transform: translateY(-15px) rotate(90deg) scale(1.05);
        opacity: 1;
    }

    75% {
        transform: translateY(-8px) rotate(135deg) scale(1.02);
        opacity: 0.9;
    }
}

/* === 12. Очень спокойные частицы (Very Calm Particles) === */
.very-calm-particles-bg {
    position: relative;
    overflow: hidden;
}

.very-calm-particles-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 20% 80%, rgba(30, 240, 160, 0.03) 0%, transparent 70%),
        radial-gradient(circle at 80% 20%, rgba(30, 240, 160, 0.02) 0%, transparent 70%),
        radial-gradient(circle at 40% 40%, rgba(30, 240, 160, 0.015) 0%, transparent 70%),
        radial-gradient(circle at 60% 60%, rgba(30, 240, 160, 0.01) 0%, transparent 70%);
    animation: very-calm-particles-float 50s ease-in-out infinite;
    z-index: -1;
}

@keyframes very-calm-particles-float {

    0%,
    100% {
        transform: translateY(0px) rotate(0deg) scale(1);
        opacity: 0.6;
    }

    33% {
        transform: translateY(-5px) rotate(30deg) scale(1.01);
        opacity: 0.7;
    }

    66% {
        transform: translateY(-10px) rotate(60deg) scale(1.02);
        opacity: 0.8;
    }
}

/* === 13. Плавающие точки (Floating Dots) === */
.floating-dots-bg {
    position: relative;
    overflow: hidden;
}

.floating-dots-bg::before,
.floating-dots-bg::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    background: rgba(30, 240, 160, 0.15);
    border-radius: 50%;
    z-index: -1;
}

.floating-dots-bg::before {
    top: 20%;
    left: 25%;
    animation: floating-dot-1 25s ease-in-out infinite;
}

.floating-dots-bg::after {
    top: 70%;
    right: 30%;
    animation: floating-dot-2 30s ease-in-out infinite;
}

@keyframes floating-dot-1 {

    0%,
    100% {
        transform: translateY(0px) translateX(0px);
        opacity: 0.3;
    }

    25% {
        transform: translateY(-20px) translateX(10px);
        opacity: 0.6;
    }

    50% {
        transform: translateY(-35px) translateX(0px);
        opacity: 0.8;
    }

    75% {
        transform: translateY(-20px) translateX(-10px);
        opacity: 0.6;
    }
}

@keyframes floating-dot-2 {

    0%,
    100% {
        transform: translateY(0px) translateX(0px);
        opacity: 0.3;
    }

    33% {
        transform: translateY(-15px) translateX(-15px);
        opacity: 0.5;
    }

    66% {
        transform: translateY(-30px) translateX(0px);
        opacity: 0.7;
    }
}

/* === 14. Мягкие облака (Soft Clouds) === */
.soft-clouds-bg {
    position: relative;
    overflow: hidden;
}

.soft-clouds-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(ellipse at 25% 75%, rgba(30, 240, 160, 0.16) 0%, transparent 33%),
        radial-gradient(ellipse at 75% 25%, rgba(30, 240, 160, 0.12) 0%, transparent 33%),
        radial-gradient(ellipse at 50% 50%, rgba(30, 240, 160, 0.08) 0%, transparent 40%);
    filter: blur(15px);
    animation: soft-clouds-drift 40s ease-in-out infinite;
    z-index: -1;
}

@keyframes soft-clouds-drift {

    0%,
    100% {
        transform: translateX(0px) translateY(0px) scale(1);
        opacity: 0.8;
    }

    25% {
        transform: translateX(-15px) translateY(-10px) scale(1.02);
        opacity: 0.9;
    }

    50% {
        transform: translateX(-25px) translateY(-20px) scale(1.05);
        opacity: 1;
    }

    75% {
        transform: translateX(-15px) translateY(-10px) scale(1.02);
        opacity: 0.9;
    }
}

/* === Медиа-запросы для мобильных устройств === */
@media (max-width: 768px) {

    /* Увеличиваем длительность анимаций для более плавного эффекта на мобильных */
    .particles-bg::before {
        animation-duration: 25s;
        animation-timing-function: ease-in-out;
    }

    .gradient-bg::before {
        animation-duration: 20s;
        animation-timing-function: ease-in-out;
    }

    .wave-bg::before {
        animation-duration: 12s;
        animation-timing-function: linear;
    }

    .geometric-bg::before {
        animation-duration: 18s;
        animation-timing-function: ease-in-out;
    }

    .geometric-bg::after {
        animation-duration: 22s;
        animation-timing-function: ease-in-out;
    }

    .grid-bg::before {
        animation-duration: 30s;
        animation-timing-function: linear;
    }

    .pulse-bg::before {
        animation-duration: 6s;
        animation-timing-function: ease-out;
    }

    .lines-bg::before {
        animation-duration: 15s;
        animation-timing-function: linear;
    }

    .smoke-bg::before {
        animation-duration: 35s;
        animation-timing-function: ease-in-out;
    }

    .circles-bg::before {
        animation-duration: 30s;
        animation-timing-function: linear;
    }

    .circles-bg::after {
        animation-duration: 35s;
        animation-timing-function: linear;
    }

    .combined-bg::before {
        animation-duration: 25s;
        animation-timing-function: ease-in-out;
    }

    .combined-bg::after {
        animation-duration: 18s;
        animation-timing-function: linear;
    }

    /* Новые спокойные анимации */
    .calm-particles-bg::before {
        animation-duration: 45s;
        animation-timing-function: ease-in-out;
    }

    .very-calm-particles-bg::before {
        animation-duration: 60s;
        animation-timing-function: ease-in-out;
    }

    .floating-dots-bg::before {
        animation-duration: 35s;
        animation-timing-function: ease-in-out;
    }

    .floating-dots-bg::after {
        animation-duration: 40s;
        animation-timing-function: ease-in-out;
    }

    .soft-clouds-bg::before {
        animation-duration: 50s;
        animation-timing-function: ease-in-out;
    }

    /* Уменьшаем интенсивность анимаций на мобильных для лучшей производительности */
    .particles-bg::before,
    .gradient-bg::before,
    .wave-bg::before,
    .geometric-bg::before,
    .geometric-bg::after,
    .grid-bg::before,
    .pulse-bg::before,
    .lines-bg::before,
    .smoke-bg::before,
    .circles-bg::before,
    .circles-bg::after,
    .combined-bg::before,
    .combined-bg::after,
    .calm-particles-bg::before,
    .very-calm-particles-bg::before,
    .floating-dots-bg::before,
    .floating-dots-bg::after,
    .soft-clouds-bg::before {
        will-change: transform;
        backface-visibility: hidden;
        transform: translateZ(0);
    }
}

/* === Дополнительные медиа-запросы для очень маленьких экранов === */
@media (max-width: 480px) {

    /* Еще более медленные анимации для очень маленьких экранов */
    .particles-bg::before {
        animation-duration: 30s;
    }

    .gradient-bg::before {
        animation-duration: 25s;
    }

    .wave-bg::before {
        animation-duration: 15s;
    }

    .geometric-bg::before {
        animation-duration: 22s;
    }

    .geometric-bg::after {
        animation-duration: 28s;
    }

    .grid-bg::before {
        animation-duration: 35s;
    }

    .pulse-bg::before {
        animation-duration: 8s;
    }

    .lines-bg::before {
        animation-duration: 18s;
    }

    .smoke-bg::before {
        animation-duration: 40s;
    }

    .circles-bg::before {
        animation-duration: 35s;
    }

    .circles-bg::after {
        animation-duration: 40s;
    }

    .combined-bg::before {
        animation-duration: 30s;
    }

    .combined-bg::after {
        animation-duration: 22s;
    }
}

/* === Отключение анимаций для пользователей с предпочтением reduced motion === */
@media (prefers-reduced-motion: reduce) {

    .particles-bg::before,
    .gradient-bg::before,
    .wave-bg::before,
    .geometric-bg::before,
    .geometric-bg::after,
    .grid-bg::before,
    .pulse-bg::before,
    .lines-bg::before,
    .smoke-bg::before,
    .circles-bg::before,
    .circles-bg::after,
    .combined-bg::before,
    .combined-bg::after,
    .calm-particles-bg::before,
    .very-calm-particles-bg::before,
    .floating-dots-bg::before,
    .floating-dots-bg::after,
    .soft-clouds-bg::before {
        animation: none !important;
        opacity: 0.1 !important;
    }
}

/* === Медиа-запрос для устройств с низкой производительностью === */
@media (max-width: 768px) and (max-device-pixel-ratio: 1.5) {

    /* Упрощенные анимации для устройств с низким DPI */
    .particles-bg::before,
    .gradient-bg::before,
    .wave-bg::before,
    .geometric-bg::before,
    .geometric-bg::after,
    .grid-bg::before,
    .pulse-bg::before,
    .lines-bg::before,
    .smoke-bg::before,
    .circles-bg::before,
    .circles-bg::after,
    .combined-bg::before,
    .combined-bg::after {
        animation-duration: 40s !important;
        animation-timing-function: ease-in-out !important;
    }
}

/* === Медиа-запрос для устройств с очень низкой производительностью === */
@media (max-width: 480px) and (max-device-pixel-ratio: 1) {

    /* Минимальные анимации для очень слабых устройств */
    .particles-bg::before,
    .gradient-bg::before,
    .wave-bg::before,
    .geometric-bg::before,
    .geometric-bg::after,
    .grid-bg::before,
    .pulse-bg::before,
    .lines-bg::before,
    .smoke-bg::before,
    .circles-bg::before,
    .circles-bg::after,
    .combined-bg::before,
    .combined-bg::after {
        animation-duration: 60s !important;
        animation-timing-function: ease-in-out !important;
        opacity: 0.05 !important;
    }
}

/* === Утилиты для применения анимаций === */
.bg-animation-none {
    position: relative;
}

.bg-animation-none::before,
.bg-animation-none::after {
    display: none !important;
}

/* === Примеры использования классов === */
/* 
  Добавьте один из этих классов к секции:
  
  <section class="particles-bg">...</section>
  <section class="gradient-bg">...</section>
  <section class="wave-bg">...</section>
  <section class="geometric-bg">...</section>
  <section class="grid-bg">...</section>
  <section class="pulse-bg">...</section>
  <section class="lines-bg">...</section>
  <section class="smoke-bg">...</section>
  <section class="circles-bg">...</section>
  <section class="combined-bg">...</section>
*/