/* Фоновая анимация: большие круги и маленькие частицы */

.background-animation-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1; /* Между фоном (z-index: -1) и плеером (z-index: 10) */
    overflow: hidden;
    /* Оптимизация для плавной анимации */
    transform: translate3d(0, 0, 0);
    will-change: contents;
}


/* Маленькие частицы с меняющимся свечением */
.background-small-particle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    will-change: transform;
    transform: translate3d(0, 0, 0); /* Аппаратное ускорение GPU */
    backface-visibility: hidden; /* Оптимизация рендеринга */
    -webkit-backface-visibility: hidden;
    --glow-size: 1;
    --glow-opacity: 0.5;
}

.background-small-particle--cream {
    background: radial-gradient(
        circle,
        rgba(255, 248, 231, 1) 0%,
        rgba(255, 248, 231, 0.8) 30%,
        rgba(255, 248, 231, 0.5) 60%,
        rgba(255, 248, 231, 0.25) 80%,
        rgba(255, 248, 231, 0) 100%
    );
    /* Свечение с градиентом от 50% до 0% opacity по цвету частицы */
    box-shadow: 
        0 0 calc(3px * var(--glow-size)) calc(1.5px * var(--glow-size)) rgba(255, 248, 231, calc(0.5 * var(--glow-opacity))),
        0 0 calc(6px * var(--glow-size)) calc(3px * var(--glow-size)) rgba(255, 248, 231, calc(0.3 * var(--glow-opacity))),
        0 0 calc(9px * var(--glow-size)) calc(4.5px * var(--glow-size)) rgba(255, 248, 231, calc(0.15 * var(--glow-opacity))),
        0 0 calc(12px * var(--glow-size)) calc(6px * var(--glow-size)) rgba(255, 248, 231, calc(0.05 * var(--glow-opacity)));
}

.background-small-particle--gold {
    background: radial-gradient(
        circle,
        rgba(255, 215, 0, 1) 0%,
        rgba(255, 215, 0, 0.8) 30%,
        rgba(255, 215, 0, 0.5) 60%,
        rgba(255, 215, 0, 0.25) 80%,
        rgba(255, 215, 0, 0) 100%
    );
    /* Свечение с градиентом от 50% до 0% opacity по цвету частицы */
    box-shadow: 
        0 0 calc(3px * var(--glow-size)) calc(1.5px * var(--glow-size)) rgba(255, 215, 0, calc(0.5 * var(--glow-opacity))),
        0 0 calc(6px * var(--glow-size)) calc(3px * var(--glow-size)) rgba(255, 215, 0, calc(0.3 * var(--glow-opacity))),
        0 0 calc(9px * var(--glow-size)) calc(4.5px * var(--glow-size)) rgba(255, 215, 0, calc(0.15 * var(--glow-opacity))),
        0 0 calc(12px * var(--glow-size)) calc(6px * var(--glow-size)) rgba(255, 215, 0, calc(0.05 * var(--glow-opacity)));
}

/* Оптимизация производительности */
@media (prefers-reduced-motion: reduce) {
    .background-animation-container * {
        animation: none !important;
        transition: none !important;
    }
}

/* Адаптивность для мобильных устройств - полностью отключаем анимацию */
@media (max-width: 768px) {
    .background-animation-container {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    .background-small-particle {
        display: none !important;
    }
}

/* Оптимизация для слабых устройств - полностью отключаем анимацию */
@media (max-width: 480px) {
    .background-animation-container {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    .background-small-particle {
        display: none !important;
    }
}