@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&display=swap');

/* Уникальные спецэффекты и темы */
.glow-effect {
    box-shadow: 0 0 15px rgba(75, 108, 253, 0.5);
}
.star {
    position: absolute;
    background-color: white;
    border-radius: 50%;
    animation: twinkle var(--duration) ease-in-out infinite;
}
@keyframes twinkle {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 1; }
}
@keyframes rotateSky {
    0%   { transform: rotate(-12deg); }
    50%  { transform: rotate(12deg);  }
    100% { transform: rotate(-12deg); }
}
.meteor {
    position: absolute;
    width: 120px;
    height: 3px;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(173,190,255,0.7) 60%, #ffffff 100%);
    box-shadow: 0 0 12px 4px rgba(173,190,255,0.35);
    border-radius: 2px;
    opacity: 0.9;
    pointer-events: none;
    z-index: 2;
    transition: transform 2s linear, opacity 1.2s linear;
}
body.light-theme {
    background: #f7f7f7 !important;
    color: #222 !important;
}
.light-theme .star, .light-theme .meteor {
    opacity: 0.15 !important;
}
.light-theme .meteor {
    background: linear-gradient(90deg, transparent 0%, #e53935 40%, #fff 100%) !important;
    box-shadow: 0 0 8px 2px #e53935 !important;
}
.light-theme .rounded-full img {
    filter: grayscale(0.2) brightness(0.95);
}
#stars-container {
    position: fixed;
    top: -10vh;
    left: -10vw;
    width: 100vw;
    height: 100vh;
    overflow: visible;
    animation: rotateSky 200s linear infinite;
    transform-origin: 50% 150%;
    pointer-events: none;
    z-index: -1;
}

/* Анимация появления карточек */
.animate-fade-in {
    opacity: 0;
    transform: translateY(16px);
    animation: fadeInUp 0.3s ease-in forwards;
}
@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: none;
    }
}

/* Космический фон для тёмной темы */
.cosmic-bg {
    background: linear-gradient(120deg, #0a0a13 0%, #10121a 60%, #18181b 100%) !important;
    color: #f3f3fa !important;
    text-shadow: 0 1px 8px #000a, 0 0px 1px #222b;
}
.cosmic-bg * {
    color: #f3f3fa !important;
    text-shadow: 0 1px 8px #000a, 0 0px 1px #222b;
}

/* В тёмной теме звёзды и метеоры видимы, в светлой — почти прозрачны */
body.light-theme .star, body.light-theme .meteor {
    opacity: 0.15 !important;
}
body:not(.light-theme) .star, body:not(.light-theme) .meteor {
    opacity: 0.9 !important;
}

/* Скрыть кнопку докладов по умолчанию */
#nav-reports {
    display: none;
}