/* Стили для 3D-сферы */

/* Устанавливаем базовые стили для body (пересекаются с основными стилями, но уточняем для сферы) */
body {
    margin: 0; /* Убираем отступы */
    overflow: hidden; /* Скрываем прокрутку */
    background: #000; /* Черный фон */
    user-select: none; /* Отключаем выделение текста */
    -webkit-user-select: none; /* Для Safari */
    -moz-user-select: none; /* Для Firefox */
    -ms-user-select: none; /* Для IE */
    position: relative; /* Для позиционирования свечения */
    touch-action: none; /* Отключаем стандартные жесты браузера */
    height: 100vh; /* Полная высота экрана */
}

/* Свечение вокруг сферы */
/* Программное свечение с радиальным градиентом, синхронизировано с THREE.js (radius * 1.05) */
.glow {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle at center, rgba(129, 129, 129, 0.5) 0%, rgba(102, 102, 102, 0) 70%);
    filter: blur(30px);
    -webkit-filter: blur(30px);
    z-index: 0;
    pointer-events: none;
    will-change: transform;
}

/* Контейнер для 3D-перспективы */
/* Теперь позиционируется относительно #headerContainer, занимает всю доступную высоту до меню */
/* Полноэкранный контейнер для центрирования сферы */
.container {
    position: absolute; /* Абсолютное позиционирование внутри #headerContainer */
    width: 100vw; /* Полная ширина экрана */
    height: 100vh; /* Полная высота экрана */
    top: 0; /* Начинается от верха экрана */
    left: 0; /* Прижато к левому краю */
    perspective: 800px; /* 3D-перспектива */
    cursor: default; /* Курсор для захвата */
    transform-style: preserve-3d; /* Поддержка 3D-трансформаций */
    z-index: 1; /* Уменьшен до 1, чтобы быть ниже header-container (z-index: 1000) и bottom-menu (z-index: 2000) */
    pointer-events: auto; /* Восстанавливаем события для вращения и зума */
    overflow: hidden; /* Обрезаем звёзды, чтобы они не выходили за пределы контейнера */
    clip-path: inset(60px 0 72px 0); /* Отступ сверху (header = 60px) и снизу (bottom-menu ≈ 60px) */
}

/* Центральная сфера */
/* Оставляем исходные размеры, обрезка происходит на уровне .container */
.center-sphere {
    position: absolute; /* Абсолютное позиционирование */
    left: 50%; /* Центр по горизонтали */
    top: 50%; /* Центр по вертикали */
    transform: translate(-50%, -50%); /* Смещение для центрирования */
    width: 500px; /* Ширина сферы */
    height: 500px; /* Высота сферы */
    z-index: 2; /* Выше фона сферы, но ниже шапки и кнопки */
    transform-origin: center center; /* Центр трансформаций */
    will-change: transform; /* Оптимизация трансформаций */
}

/* Вращающаяся часть сферы */
.rotate-sphere {
    width: 100%; /* Полная ширина контейнера */
    height: 100%; /* Полная высота контейнера */
    transform-style: preserve-3d; /* Поддержка 3D */
    transform-origin: center center; /* Центр вращения */
    will-change: transform; /* Оптимизация */
}

/* Внутренний фон сферы */
.inner-background {
    position: absolute; /* Абсолютное позиционирование */
    width: 100%; /* Полная ширина */
    height: 100%; /* Полная высота */
    background: rgb(0, 0, 0); /* Черный фон сферы */
    border-radius: 50%; /* Круглая форма */
    z-index: 0; /* За звездами */
    transform-style: preserve-3d; /* Поддержка 3D */
    will-change: transform; /* Оптимизация */
}

/* Контейнер для звёзд */
.star-container {
    position: absolute; /* Абсолютное позиционирование */
    transform-style: preserve-3d; /* Поддержка 3D */
    pointer-events: none; /* Отключаем события для контейнера */
}

/* Сами звёзды */
.star {
    display: block; /* Блочный элемент */
    transform-origin: center center; /* Центр трансформаций */
    pointer-events: auto; /* Включаем события только для звезд */
    backface-visibility: hidden; /* Оптимизация рендеринга */
    opacity: 0; /* Изначально невидимые */
    transition: opacity 2s ease, transform 0.3s ease, filter 0.3s ease; /* Плавные переходы для opacity, transform и filter */
    position: relative; /* Для наложения слоя */
    filter: brightness(100%); /* Исходная яркость */
}

/* Видимые звёзды */
.star-visible {
    opacity: 1; /* Видимая звезда */
}

/* Скрытые звёзды */
.star-hidden {
    opacity: 0; /* Невидимая звезда */
}

/* Осветление звезды при выделении */
.star-highlighted {
    filter: brightness(150%); /* Увеличиваем яркость при выделении */
}

/* Адаптация для мобильных устройств */
@media (max-width: 768px) {
    .center-sphere {
        width: 300px; /* Уменьшаем сферу для мобильных */
        height: 300px;
    }
    .glow {
        width: 315px; /* Уменьшаем свечение для мобильных (300px * 1.05) */
        height: 315px;
    }
    .container {
        perspective: 600px; /* Уменьшаем перспективу для мобильных */
    }
}