/**
 * Дополнительные CSS стили для плавных переходов между страницами
 * и анимаций появления элементов
 */

/* Базовые настройки переходов для всех элементов страницы */
html.page-transitions-ready * {
    transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1.0);
}

/* Улучшенные эффекты гиперпространства */
html.hyperspace-traveling #cosmic-background-container,
html.hyperspace-exiting #cosmic-background-container {
    animation: none !important;
    transform: none !important;
    filter: none !important;
}

html.hyperspace-entering #cosmic-background-container {
    animation: hyperspace-shake-light 0.3s 1 ease-in-out !important;
    animation-fill-mode: forwards !important;
}

/* Кинематографическая тряска камеры для имитации высокой скорости */
@keyframes hyperspace-shake {
    0% {
        transform: translate3d(-2px, -1px, 0) rotate3d(0, 0, 1, -0.1deg);
    }
    25% {
        transform: translate3d(3px, 1px, 0) rotate3d(0, 0, 1, 0.2deg);
    }
    50% {
        transform: translate3d(-2px, 2px, 0) rotate3d(0, 0, 1, -0.1deg);
    }
    75% {
        transform: translate3d(3px, -2px, 0) rotate3d(0, 0, 1, 0.2deg);
    }
    100% {
        transform: translate3d(-1px, 1px, 0) rotate3d(0, 0, 1, -0.1deg);
    }
}

/* Более лёгкая тряска для начала и завершения эффекта */
@keyframes hyperspace-shake-light {
    0% {
        transform: translate3d(-3px, -2px, 0) rotate3d(0, 0, 1, -0.2deg);
    }
    50% {
        transform: translate3d(3px, 2px, 0) rotate3d(0, 0, 1, 0.2deg);
    }
    100% {
        transform: translate3d(-2px, -1px, 0) rotate3d(0, 0, 1, -0.1deg);
    }
}

/* Улучшенные цвета для звёзд гиперпространства */
.hyperspace-stars {
    /* Доминирующий фиолетовый градиент */
    background-image: linear-gradient(90deg, var(--primary-color) 0%, var(--primary-color) 70%, var(--accent-color) 100%) !important;
    /* Усиленное свечение фиолетового цвета */
    box-shadow: 0 0 25px 12px rgba(var(--primary-color-rgb), 0.7),
                0 0 50px 25px rgba(var(--primary-color-rgb), 0.5) !important;
}

html.hyperspace-traveling .star-dot,
html.hyperspace-entering .star-dot,
html.hyperspace-exiting .star-dot {
    background-color: var(--primary-color) !important;
    box-shadow: 0 0 8px 3px rgba(var(--primary-color-rgb), 0.4) !important;
}

/* Улучшенный эффект растяжения звёзд в гиперпространстве */
html.hyperspace-traveling .hyperspace-stars,
html.hyperspace-entering .hyperspace-stars {
    height: 2px !important; /* Базовая высота */
    transform: scaleY(20) !important; /* Растягиваем по вертикали */
    opacity: 0.9 !important;
}

html.hyperspace-traveling .hyperspace-stars {
    height: 3px !important; /* Увеличенная высота в полёте */
    transform: scaleY(40) !important; /* Сильнее растягиваем при полёте */
}

/* Добавляем стилизацию для разноцветных линий в гиперпространстве */
html.hyperspace-traveling .hyperspace-stars:nth-child(3n+1) {
    background-image: linear-gradient(90deg, var(--accent-color), var(--primary-color)) !important;
}
html.hyperspace-traveling .hyperspace-stars:nth-child(3n+2) {
    background-image: linear-gradient(90deg, var(--primary-color), var(--secondary-color)) !important;
}
html.hyperspace-traveling .hyperspace-stars:nth-child(3n+3) {
    background-image: linear-gradient(90deg, var(--secondary-color), var(--primary-color)) !important;
}

/* Дополнительные цветовые варианты для разноцветных линий */
html.hyperspace-traveling .hyperspace-stars:nth-child(4n+1) {
    background-image: linear-gradient(90deg, var(--primary-color), var(--text-link-color)) !important;
}
html.hyperspace-traveling .hyperspace-stars:nth-child(4n+2) {
    background-image: linear-gradient(90deg, var(--primary-color), var(--accent-color)) !important;
}

/* Толстые хвосты для некоторых звёзд */
html.hyperspace-traveling .hyperspace-stars:nth-child(5n) {
    height: 5px !important;
    transform: scaleY(60) !important;
    box-shadow: 0 0 30px 20px rgba(var(--primary-color-rgb), 0.6) !important;
}
html.hyperspace-traveling .hyperspace-stars:nth-child(7n) {
    height: 4px !important;
    transform: scaleY(50) !important;
    box-shadow: 0 0 25px 15px rgba(var(--primary-color-rgb), 0.5) !important;
}

/* Стили для группового появления элементов */
.fade-in-staggered {
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-staggered.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Группировка элементов для последовательного появления */
.stagger-group-1 { transition-delay: 100ms; }
.stagger-group-2 { transition-delay: 200ms; }
.stagger-group-3 { transition-delay: 300ms; }
.stagger-group-4 { transition-delay: 400ms; }
.stagger-group-5 { transition-delay: 500ms; }

/* Анимация "раскрытия" элементов */
.scale-in {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.scale-in.is-visible {
    opacity: 1;
    transform: scale(1);
}

/* Плавное появление элементов после гиперпространства */
main > section,
.hero-content,
.feature-item,
.advantage-card,
.timeline-item,
.pricing-card,
.faq-item,
.news-item,
.section-header-centered {
    will-change: opacity, transform;
}

/* Анимация для секций текста */
.text-fade-in {
    opacity: 0;
    transition: opacity 0.8s ease-out;
}

.text-fade-in.is-visible {
    opacity: 1;
}

/* Улучшенные версии существующих анимаций */
.fade-in-up-item {
    transform: translateY(20px);
    opacity: 0;
    transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1), 
                opacity 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.fade-in-up-item.is-visible {
    transform: translateY(0);
    opacity: 1;
}

/* Анимация для кнопок и элементов взаимодействия */
.button-appear {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.button-appear.is-visible {
    opacity: 1;
    transform: scale(1);
}

/* Анимации при выходе из гиперпространства */
html.hyperspace-exiting .content,
html.hyperspace-exiting main, 
html.hyperspace-exiting header,
html.hyperspace-exiting footer {
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Переопределение поведения для mobile */
@media (max-width: 768px) {
    .fade-in-staggered,
    .scale-in,
    .fade-in-up-item {
        transition-duration: 0.6s; /* Немного быстрее на мобильных устройствах */
    }
    
    /* Уменьшаем интенсивность тряски на мобильных */
    @keyframes hyperspace-shake {
        0% {
            transform: translate3d(-1px, -0.5px, 0) rotate3d(0, 0, 1, -0.05deg);
        }
        100% {
            transform: translate3d(1px, 0.5px, 0) rotate3d(0, 0, 1, 0.05deg);
        }
    }
}

/* Дополнительные кинематографические эффекты для гиперпространства */
html.hyperspace-traveling .cosmic-background,
html.hyperspace-entering .cosmic-background,
html.hyperspace-exiting .cosmic-background {
    transform-style: preserve-3d;
    perspective: 1000px;
    overflow: hidden;
}

/* Кинематографические фильтры для гиперпространства */
html.hyperspace-traveling #cosmic-background-container canvas,
html.hyperspace-entering #cosmic-background-container canvas,
html.hyperspace-exiting #cosmic-background-container canvas {
    filter: contrast(1.3) brightness(1.2) saturate(1.2);
    transition: filter 0.5s ease-out;
}

/* Усиленные фильтры для активного перемещения */
html.hyperspace-traveling #cosmic-background-container canvas {
    filter: contrast(1.5) brightness(1.3) saturate(1.4) blur(1px);
}

/* Кинематографическое свечение туннеля гиперпространства */
html.hyperspace-traveling #cosmic-background-container::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vh;
    height: 100vh;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, 
                rgba(var(--primary-color-rgb), 0.05) 0%, 
                rgba(var(--accent-color-rgb), 0.02) 30%, 
                transparent 70%);
    pointer-events: none;
    z-index: 3;
    animation: pulse-glow 4s infinite alternate ease-in-out;
}

/* Пульсирующее свечение в центре */
@keyframes pulse-glow {
    0% {
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(0.8);
    }
    100% {
        opacity: 0.7;
        transform: translate(-50%, -50%) scale(1.2);
    }
}

/* Вспышки света в космосе для кинематографического эффекта - УДАЛЕНО */
/*
html.hyperspace-traveling #cosmic-background-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, 
                transparent 0%, 
                rgba(var(--primary-color-rgb), 0.03) 45%, 
                rgba(var(--accent-color-rgb), 0.05) 50%, 
                rgba(var(--primary-color-rgb), 0.03) 55%, 
                transparent 100%);
    animation: light-sweep 8s infinite linear;
    pointer-events: none;
    z-index: 2;
}
*/

/* Анимация прохождения света через гиперпространство - УДАЛЕНО */
/*
@keyframes light-sweep {
    0% {
        transform: translateX(-100%) rotate(45deg) scale(2);
    }
    100% {
        transform: translateX(100%) rotate(45deg) scale(2);
    }
} 
*/