/* sky.css — декоративный слой космического фона: grid + дрейфующие звёзды +
   тематичная «прыжковая дуга» + слабый силуэт коня.

   Архитектура SKY-FIX-ROOT — слоистая защита от обрыва фона ниже контента:
     1. ОСНОВНОЙ ФОН (gradient) теперь лежит на body (см. base.css).
        body растёт с контентом → gradient растянут на всё тело → НИКОГДА
        не обрывается раньше контента, на любой длине документа.
     2. .sky-layer (этот файл) — position:fixed для декора над body.
        Сам gradient ОСТАВЛЕН ниже как дубль — добавляет «глубины» поверх
        body-gradient в видимой viewport-зоне (звёзды смотрятся ярче на
        чуть более насыщенном слое). Если когда-то sky-layer fixed
        отвяжется от viewport (предок с transform/filter и т.п.) —
        body-gradient бесшовно подхватит фон без визуального обрыва.

   Контент сайта завёрнут в .site z-index:1 (НАД sky-layer и body
   gradient). НЕ ставить .sky-layer на z-index:-1 — body gradient тогда
   закроет звёзды/grid/horse сверху.
*/

.sky-layer{
  position:fixed;
  inset:0;
  /* MOBILE-BG-FIX (iteration 2):
     - inset:0 — top/right/bottom/left:0, базовый stretch к viewport.
     - height:100vh — fallback для древних браузеров.
     - height:100lvh — large viewport, ВСЕГДА максимум; iOS Safari 15.4+ /
       Chrome 108+ нормально поддерживают. Когда URL-bar виден — sky-layer
       уезжает за нижний край (не страшно), когда URL-bar скрыт — sky-layer
       идеально покрывает. Перекрывает оба сценария без flicker.
     - Раньше использовал dvh который динамический — мог давать миг
       стрипа при transition URL-bar. lvh = всегда max, без миганий. */
  height:100vh;
  height:100lvh;
  /* min-height гарантирует что даже если cascade сорвался — слой не
     схлопывается ниже максимума. */
  min-height:100lvh;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% 110%, rgba(36,119,189,.28) 0%, rgba(36,119,189,0) 55%),
    radial-gradient(80%  60% at 50% -10%, rgba(28,129,215,.18) 0%, rgba(28,129,215,0) 60%),
    linear-gradient(180deg, #08152a 0%, #0b1a30 40%, #060f1c 100%);
}

/* Обёртка контента — лежит НАД .sky-layer и в её собственном
   стэкинг-контексте. Все секции, nav, overlay внутри. */
.site{
  position:relative;
  z-index:1;
}

/* Технический grid */
.sky-layer::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:clamp(60px, 8vw, 110px) clamp(60px, 8vw, 110px);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 50%, #000 30%, transparent 100%);
          mask-image:radial-gradient(120% 90% at 50% 50%, #000 30%, transparent 100%);
  pointer-events:none;
}

/* Угловая виньетка */
.sky-layer::after{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(120% 100% at 50% 50%, transparent 55%, rgba(0,0,0,.55) 100%);
  pointer-events:none;
}

/* Силуэт коня — теперь только в общем фоне (Stage 5 убрал дубликат
   из секции Officials). */
.sky-layer .horse-bg{
  position:absolute;
  left:50%; top:50%;
  width:min(160vmin, 1700px);
  aspect-ratio:931 / 520;
  transform:translate(-50%, -52%);
  opacity:.055;
  pointer-events:none;
  filter:blur(.3px);
  animation:skyHorseFloat 18s ease-in-out infinite;
}
.sky-layer .horse-bg svg{ width:100%; height:100%; display:block; }
@keyframes skyHorseFloat{
  0%,100%{ transform:translate(-50%, -52%) scale(1); }
  50%    { transform:translate(-50%, -50.5%) scale(1.015); }
}

/* Прыжковая дуга + летящая точка («всадник»).
   По умолчанию ВИДНА НА ВСЁМ САЙТЕ — пролетает периодически (9s loop).
   STAGE5 addendum #3: пользователь смотрит и решит, оставить сквозной
   или ограничить hero — для ограничения достаточно перенести .arc-layer
   в hero-секцию и убрать отсюда. */
.hero .arc-layer{
  position:absolute; inset:0;
  pointer-events:none;
}
.hero .arc-layer svg{
  position:absolute; inset:0;
  width:100%; height:100%;
}
.hero .arc-path{
  fill:none;
  stroke:rgba(78,164,230,.55);
  stroke-width:1.3;
  stroke-dasharray:2 7;
  stroke-linecap:round;
  filter:drop-shadow(0 0 6px rgba(36,119,189,.45));
  animation:skyArcDraw 9s ease-in-out infinite;
}
@keyframes skyArcDraw{
  0%   { stroke-dashoffset:2200; opacity:0; }
  15%  { opacity:1; }
  85%  { opacity:1; }
  100% { stroke-dashoffset:0;    opacity:0; }
}
.hero .arc-rider{
  fill:#fff;
  filter:drop-shadow(0 0 10px rgba(78,164,230,.9)) drop-shadow(0 0 20px rgba(36,119,189,.55));
  offset-rotate:0deg;
  animation:skyArcRide 9s ease-in-out infinite;
}
@keyframes skyArcRide{
  0%   { offset-distance:0%;   opacity:0; transform:scale(.6); }
  8%   { opacity:1; transform:scale(1); }
  92%  { opacity:1; transform:scale(1); }
  100% { offset-distance:100%; opacity:0; transform:scale(.6); }
}

/* Дрейфующие звёзды-частицы (DOM-узлы, заполняются в sky.js). */
.sky-layer .stars{
  position:absolute; inset:0;
  pointer-events:none;
  opacity:.85;
}
.sky-layer .stars i{
  position:absolute;
  width:2px; height:2px;
  background:#fff;
  border-radius:50%;
  box-shadow:0 0 4px rgba(255,255,255,.6), 0 0 8px rgba(78,164,230,.35);
  opacity:0;
  animation:skyTwinkle 6s linear infinite;
  will-change:opacity, transform;
}
@keyframes skyTwinkle{
  0%   { opacity:0; transform:translateY(0) scale(.6); }
  15%  { opacity:.9; }
  85%  { opacity:.9; }
  100% { opacity:0; transform:translateY(-40px) scale(1); }
}

/* prefers-reduced-motion — всё в фоне замирает. */
@media (prefers-reduced-motion: reduce){
  .sky-layer .horse-bg,
  .sky-layer .stars i,
  .hero .arc-path,
  .hero .arc-rider{
    animation:none !important;
  }
}