/* ===== Scroll-scene: фоновая анимация «сборка сервера» (главная) ===== */

.scroll-scene {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  color: var(--color-primary);
}

.scroll-scene svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Уровни «чернил» line-art, чтобы сцена оставалась фоном под контентом */
.ss-ink       { opacity: 0.5; }
.ss-ink-soft  { opacity: 0.35; }
.ss-ink-faint { opacity: 0.14; }

/* Элементы, прорисовываемые штрихом по мере скролла (JS управляет offset) */
.ss-draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

/* Секции с фоном-поверхностью: полупрозрачные, чтобы сцена просвечивала */
.section--veil {
  background: rgba(247, 247, 249, 0.82);
}

/* Футер на главной: «матовое стекло» — плотнее секций, чтобы меню
   читалось поверх сцены, но фон продолжал мягко просвечивать.
   Класс вешает scroll-scene.js, поэтому другие страницы не затронуты. */
.footer--veil {
  background: rgba(247, 247, 249, 0.88);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* Терминальная строка статуса и мелкие мониширинные подписи.
   Лог статуса заметнее остальной «мягкой» графики — это навигация по сцене */
#ss-status { opacity: 0.6; }

.ss-status {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
}
.ss-mono {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 10px;
  letter-spacing: 0.05em;
}
.ss-mono-xs {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 8.5px;
  letter-spacing: 0.04em;
}
.ss-caret {
  animation: ss-caret-blink 1.1s linear infinite;
}

@keyframes ss-caret-blink {
  0%, 45%  { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* Пакеты данных по кабелям — включаются классом .is-online на сцене */
.ss-packets {
  opacity: 0;
  transition: opacity 0.8s ease;
}
.is-online .ss-packets {
  opacity: 0.55;
}

/* Радар-пульс над стойкой в состоянии online */
.ss-pulse {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
.is-online .ss-pulse {
  animation: ss-pulse 3.2s ease-out infinite;
}

@keyframes ss-pulse {
  0%        { transform: scale(0.4); opacity: 0.5; }
  70%, 100% { transform: scale(2.6); opacity: 0; }
}

/* «Дыхание» свечения под стойкой в состоянии online */
.is-online #ss-glow {
  animation: ss-glow-breathe 4s ease-in-out infinite alternate;
}

@keyframes ss-glow-breathe {
  from { opacity: 0.05; }
  to   { opacity: 0.12; }
}

/* Мини-график нагрузки рядом с терминальным логом */
.ss-load {
  opacity: 0;
  transition: opacity 0.8s ease;
}
.is-online .ss-load {
  opacity: 0.5;
}
.ss-load rect {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: scaleY(0.25);
  animation: ss-load-bar 1.3s ease-in-out infinite alternate;
}
.ss-load rect:nth-of-type(2) { animation-delay: 0.18s; }
.ss-load rect:nth-of-type(3) { animation-delay: 0.36s; }
.ss-load rect:nth-of-type(4) { animation-delay: 0.54s; }
.ss-load rect:nth-of-type(5) { animation-delay: 0.72s; }
.ss-load rect:nth-of-type(6) { animation-delay: 0.90s; }

@keyframes ss-load-bar {
  from { transform: scaleY(0.25); }
  to   { transform: scaleY(1); }
}

/* Вентиляторы на крыше стойки крутятся в состоянии online */
.ss-fan {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
.is-online .ss-fan {
  animation: ss-fan-spin 2.4s linear infinite;
}
.is-online .ss-fan--alt {
  animation-duration: 3.1s;
}

@keyframes ss-fan-spin {
  to { transform: rotate(360deg); }
}

/* Зарезервированный слот расширения проявляется после запуска */
.ss-next {
  opacity: 0;
}
.is-online .ss-next {
  animation: ss-next-pulse 2.8s ease-in-out 0.8s infinite;
}

@keyframes ss-next-pulse {
  0%, 100% { opacity: 0.12; }
  50%      { opacity: 0.4; }
}

/* Стрелки tx/rx у коммутатора мигают в противофазе в состоянии online */
.ss-tx, .ss-rx {
  opacity: 0;
}
.is-online .ss-tx {
  animation: ss-txrx-blink 1.2s steps(2, jump-none) infinite;
}
.is-online .ss-rx {
  animation: ss-txrx-blink 1.2s steps(2, jump-none) 0.6s infinite;
}

@keyframes ss-txrx-blink {
  0%, 100% { opacity: 0.15; }
  50%      { opacity: 0.9; }
}

/* Мигание индикаторов в состоянии online */
.is-online .ss-led {
  animation: ss-led-blink 2.2s ease-in-out infinite;
}
.is-online #ss-led-2 { animation-delay: 0.4s; }

/* Янтарный индикатор дисковой активности мигает чаще */
.is-online .ss-led--busy {
  animation: ss-led-blink 0.7s steps(2, jump-none) infinite;
}

@keyframes ss-led-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* ===== Подсказка «scroll» внизу первого экрана ===== */
.scroll-hint {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 28px);
  transform: translateX(-50%);
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.15rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 0.5rem);
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-md);
  color: var(--color-primary);
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.scroll-hint__arrow {
  animation: scroll-hint-bounce 1.6s ease-in-out infinite;
}

.scroll-hint.is-hidden {
  opacity: 0;
  transform: translateX(-50%) translateY(10px);
}

@keyframes scroll-hint-bounce {
  0%, 100% { transform: translateY(-2px); }
  50%      { transform: translateY(3px); }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-hint__arrow { animation: none; }
}

/* На узких экранах slice-кадрирование сильно сужает видимую полосу viewBox
   и линии становятся бледнее — усиливаем «чернила». Кадром управляет
   JS-«камера» (см. scroll-scene.js): она держит текущее действие в центре */
@media (max-width: 768px) {
  .ss-ink       { opacity: 0.65; }
  .ss-ink-soft  { opacity: 0.45; }
  .ss-ink-faint { opacity: 0.2; }
  #ss-status    { opacity: 0.75; }
  .is-online .ss-packets { opacity: 0.7; }
}