/* style.css */

/* Базовые настройки */
html, body {
    overflow-x: hidden;
    width: 100%;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #0A0A0A;
    color: white;
    text-rendering: optimizeLegibility;
}

/* === Анимация фона (Пузыри) === */
/* Контейнер для фона, чтобы он не перекрывал контент */
.soap-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate3d(0,0,0); /* Включает аппаратное ускорение */
}

.soap-blob {
    position: relative;
    width: 500px;
    height: 500px;
    filter: blur(40px);
    opacity: 0.6;
    will-change: transform;
}

.blob-layer-1, .blob-layer-2, .blob-layer-3 {
    position: absolute;
    will-change: transform, border-radius;
    transform: translateZ(0);
}

.blob-layer-1 {
    inset: 0;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 70%);
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    animation: morph 15s ease-in-out infinite;
}

.blob-layer-2 {
    top: 15%;
    left: 15%;
    right: 15%;
    bottom: 15%;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    animation: morph 10s ease-in-out infinite reverse;
}

.blob-layer-3 {
    top: 30%;
    left: 30%;
    right: 30%;
    bottom: 30%;
    background: rgba(255, 255, 255, 0.2);
    filter: blur(20px);
    border-radius: 50%;
    animation: breathe 8s ease-in-out infinite;
}

@keyframes morph { 
    0% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; transform: rotate(0deg) scale(1); }
    50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; transform: rotate(180deg) scale(1.1); }
    100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; transform: rotate(360deg) scale(1); }
}

@keyframes breathe { 
    0%, 100% { transform: scale(0.9); opacity: 0.5; } 
    50% { transform: scale(1.1); opacity: 0.8; } 
}

/* === Анимация Звезды в заголовке === */
@keyframes star-spin { 
    0% { transform: rotate(0deg); } 
    25% { transform: rotate(15deg); } 
    75% { transform: rotate(-15deg); } 
    100% { transform: rotate(0deg); } 
}

.star-animate {
    display: inline-block;
    animation: star-spin 3s ease-in-out infinite;
    transform-origin: center;
}

/* === Кастомный скроллбар === */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: #0A0A0A; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }

/* === Индикатор прокрутки (мышка) === */
@keyframes bounce-scroll { 
    0%, 100% { transform: translateY(0); } 
    50% { transform: translateY(10px); } 
}

.scroll-indicator { animation: bounce-scroll 2s infinite; }

/* === Карточки с эффектом стекла (Тарифы и Преимущества) === */
.hover-card {
    transition: transform 0.3s ease, background 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(20, 20, 20, 0.4);
    backdrop-filter: blur(8px); 
}

.hover-card:hover {
    transform: scale(1.02);
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(30, 30, 30, 0.6);
}

/* === Эффект нажатия на кнопки === */
.btn-hover { transition: transform 0.1s; }
.btn-hover:active { transform: scale(0.96); }

/* === Мобильная оптимизация (Performance) === */
@media (max-width: 768px) {
    /* Отключаем тяжелый блюр на мобильных для повышения FPS */
    .backdrop-blur-md, .backdrop-blur-sm, .backdrop-blur-lg, .hover-card {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background-color: rgba(20, 20, 20, 0.95) !important;
    }
    
    /* Убираем лишние тени */
    * { box-shadow: none !important; }
    
    /* Замедляем и упрощаем анимацию фона */
    .soap-blob {
        width: 300px;
        height: 300px;
        animation-duration: 20s;
        filter: blur(60px); /* Сильнее размываем, чтобы скрыть артефакты */
    }

    /* AOS fix: принудительно показываем элементы, если скрипт анимации тупит на мобильных */
    [data-aos] {
        opacity: 1 !important;
        transform: translate(0) scale(1) !important;
        transition: none !important;
        visibility: visible !important;
    }
}