/* Стили для эффектов скролла и переходов между страницами */

/* Базовые настройки для плавных переходов */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 1.5s; /* Общая длительность View Transition */
  animation: none;
  mix-blend-mode: normal;
}

/* Ensure the background canvas persists without animation during page transitions */
::view-transition-old(cosmic-background),
::view-transition-new(cosmic-background) {
    animation: none;
}

/* Стили для гиперпространства */
.hyperspace-active {
  --hyperspace-speed: 1;
  --hyperspace-density: 1;
}

/* Эффект появления из гиперпространства */
@keyframes fade-from-hyperspace {
  0% {
    opacity: 0;
    transform: scale(0.7) translateZ(-300px); /* Уменьшаем масштаб и увеличиваем Z для "вылета" */
  }
  60% {
    opacity: 0.7;
    transform: scale(0.95) translateZ(-50px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateZ(0);
  }
}

/* Эффект исчезновения в гиперпространство */
@keyframes fade-to-hyperspace {
  0% {
    opacity: 1;
    transform: scale(1) translateZ(0);
  }
  40% {
    opacity: 0.7;
    transform: scale(1.1) translateZ(100px);
  }
  100% {
    opacity: 0;
    transform: scale(1.3) translateZ(600px); /* Увеличиваем масштаб и Z для "улета" */
  }
}

/* Анимация звезд в режиме гиперпространства - эффект ускорения и превращения в линии */
@keyframes hyperspace-stars-animation {
  0% {
    opacity: 0;
    transform: scale(0.1) translateZ(-100px);
    width: 4px;
    height: 6px;
    background-color: rgba(230, 240, 255, 1);
  }
  10% {
    opacity: 1;
    transform: scale(1) translateZ(50px);
    width: 4px;
    height: 20px;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(3.5) translateZ(900px);
    width: 4px;
    height: 60px;
  }
}

/* Стили для плавного появления страницы */
.page-transition-fade-in {
  animation: page-fade-in 0.8s ease-out forwards;
}

@keyframes page-fade-in {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Специальные эффекты для гиперпространства - маленькие звезды, превращающиеся в линии */
.hyperspace-stars {
  position: absolute;
  width: 4px;
  height: 4px;
  background-color: #fff;
  border-radius: 2px;
  opacity: 0;
  z-index: 10;
  transform-style: preserve-3d; /* Важно для 3D трансформаций */
  will-change: transform, opacity, width, height; /* Оптимизация производительности */
  animation: hyperspace-stars-animation calc(0.8s / var(--hyperspace-speed, 1)) linear infinite;
  animation-play-state: paused;
}

/* Создаем светящиеся линии вместо "хвостов" для звезд в гиперпространстве */
.hyperspace-active .hyperspace-stars {
  box-shadow: 0 0 3px 2px rgba(220, 235, 255, 0.7), /* Более мягкое свечение */
              0 0 8px 4px rgba(180, 210, 255, 0.5);
  transition: width 0.3s ease-out, height 0.3s ease-out; /* Плавное изменение размера */
}

/* Стили для линейного растягивания звезд в режиме гиперпространства 
   Этот класс будет добавляться и убираться динамически JS */
.hyperspace-active.traveling .hyperspace-stars {
  animation-play-state: running !important; /* Гарантируем, что анимация проигрывается */
}

/* Стили для ускоренного режима звезд основного фона canvas */
.stars-canvas-simplified.hyperspace-mode {
  filter: blur(0.5px); /* Легкое размытие для скорости */
}

/* Стили для глобального эффекта размытия при полете в гиперпространстве */
.hyperspace-active.traveling {
  /* Глобальный блюр всего фона при путешествии можно убрать, если он мешает */
  /* filter: blur(0.5px); */
  /* animation: hyperspace-blur 1.5s forwards; */
}

/* @keyframes hyperspace-blur { 
  0% {
    filter: blur(0px);
  }
  50% {
    filter: blur(1px);
  }
  100% {
    filter: blur(0.5px);
  }
} */

/* Добавляем глобальный класс для правильного отображения при переходах */
html.view-transition-active {
  overflow: hidden;
  height: 100vh;
}

/* Убеждаемся, что контент всегда виден и правильно размещен */
.page-content, .content {
  z-index: 5; /* Должно быть ниже шапки во время перехода */
  position: relative;
}

/* Для старых браузеров, не поддерживающих View Transitions API */
.fallback-transition {
  transition: opacity 0.5s ease-in-out;
}

.fallback-hidden {
  opacity: 0;
}

/* Новые стили для разделения слоёв звёзд и линий */

#cosmic-background-container {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: #05000D;
  z-index: -1;
  pointer-events: none;
  transition: opacity 0.5s ease-in-out;
  /* This tells the browser to treat this element as persistent across transitions */
  view-transition-name: cosmic-background;
}

.stars-canvas-static,
.stars-canvas-lines {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}

.stars-canvas-static {
  z-index: 1;
  opacity: 1;
  transition: opacity 0.1s linear;
}

.stars-canvas-lines {
  z-index: 2;
  opacity: 0;
  transition: opacity 0.1s linear;
}

/* оставляем как мягкий вспомогательный слой (используется локально поверх видимых звёзд) */
#hyperspace-gradient-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(circle at center, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.35) 5%, transparent 12%);
  opacity: 0;
  transition: opacity 1.2s ease-out;
}

/* Классы управления фазами */
html.hyperspace-entering .stars-canvas-static {
  opacity: 0;
}

html.hyperspace-entering .stars-canvas-lines,
html.hyperspace-entering #hyperspace-gradient-overlay {
  opacity: 1;
}

html.hyperspace-traveling .stars-canvas-static {
  opacity: 0;
}

html.hyperspace-traveling .stars-canvas-lines {
  opacity: 1;
}

html.hyperspace-exiting .stars-canvas-static {
  opacity: 1;
}

html.hyperspace-exiting .stars-canvas-lines,
html.hyperspace-exiting #hyperspace-gradient-overlay {
  opacity: 0;
}

/* Плавный показ черной дыры в обеих фазах */
html.hyperspace-entering #hyperspace-gradient-overlay,
html.hyperspace-traveling #hyperspace-gradient-overlay {
  opacity: 1;
}

/* Полное скрытие статичных точек в гиперпространстве */
html.hyperspace-entering .stars-canvas-static,
html.hyperspace-traveling .stars-canvas-static {
  opacity: 0 !important;
  transition: opacity 0.5s ease-out;
}

/* Smooth fade-out for hyperspace stars container and elements */
.hyperspace-exit #hyperspace-stars-container {
  opacity: 0;
  transition: opacity 1.8s ease-out;
}

.hyperspace-exit .hyperspace-stars {
  opacity: 0;
  transition: opacity 1.8s ease-out;
}

/* Скрываем шапку сайта во время переходов через гиперпространство */
html.hyperspace-entering header,
html.hyperspace-traveling header,
html.hyperspace-exiting header,
body.hyperspace-transition header,
body.hyperspace-exit header {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Allow pages to override visibility of hyperspace stars (default hidden only if not overridden) */
#hyperspace-stars-container,
.hyperspace-stars {
  display: none;
}