/* ============================================================
   Akdeniz — звёздное небо.
   Три слоя параллакса, мерцание, редкая падающая звезда.
   Чем глубже погружение — тем меньше звёзд: под водой их не видно.
   ============================================================ */

.sky{
  position:fixed; inset:0; z-index:0;
  pointer-events:none; overflow:hidden;
  /* --sp: прогресс скролла 0…1, ставит stars.js */
  opacity:calc(1 - var(--sp,0) * .92);
  transition:opacity .3s linear;
}

/* холодная дымка для объёма — без неё небо плоское */
.sky::before{
  content:""; position:absolute; inset:-10%;
  background:
    radial-gradient(38% 30% at 18% 12%, rgba(53,224,200,.10) 0%, transparent 70%),
    radial-gradient(45% 34% at 82% 22%, rgba(58,120,190,.13) 0%, transparent 72%),
    radial-gradient(50% 40% at 60% 75%, rgba(90,60,170,.08) 0%, transparent 75%);
  filter:blur(18px);
}

/* ---------- слои звёзд: точки нарисованы box-shadow ---------- */
.sky__layer{
  position:absolute; top:0; left:0;
  width:1px; height:1px; border-radius:50%;
  background:transparent;
  will-change:transform;
}
.sky__layer--far{  transform:translateY(calc(var(--sp,0) * -40px));  }
.sky__layer--mid{  transform:translateY(calc(var(--sp,0) * -90px));  }
.sky__layer--near{ transform:translateY(calc(var(--sp,0) * -150px)); }

/* ---------- мерцающие звёзды ---------- */
.star{
  position:absolute; border-radius:50%;
  background:#eaf6fb;
  will-change:opacity, transform;
  animation:twinkle var(--dur,4s) ease-in-out var(--delay,0s) infinite;
}
@keyframes twinkle{
  0%,100%{ opacity:var(--min,.25); transform:scale(1); }
  50%    { opacity:var(--max,1);   transform:scale(1.35); }
}

/* крупные звёзды с бликом-крестом */
.star--bright{
  background:#fff;
  box-shadow:0 0 8px rgba(234,246,251,.9), 0 0 18px rgba(53,224,200,.45);
}
.star--bright::before,
.star--bright::after{
  content:""; position:absolute; left:50%; top:50%;
  background:linear-gradient(90deg,transparent,rgba(234,246,251,.75),transparent);
  transform:translate(-50%,-50%);
}
.star--bright::before{ width:26px; height:1px; }
.star--bright::after{ width:1px; height:26px;
  background:linear-gradient(180deg,transparent,rgba(234,246,251,.75),transparent); }

/* ---------- падающая звезда ---------- */
.shoot{
  position:absolute; width:2px; height:2px; border-radius:50%;
  background:#fff; opacity:0;
  box-shadow:0 0 6px 1px rgba(255,255,255,.9);
}
.shoot::after{
  content:""; position:absolute; right:2px; top:50%;
  width:130px; height:1px; transform:translateY(-50%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.85));
}
.shoot.fly{ animation:shoot 1.1s cubic-bezier(.4,0,.7,1); }
@keyframes shoot{
  0%   { opacity:0; transform:translate(0,0) rotate(18deg) scale(.6); }
  8%   { opacity:1; }
  70%  { opacity:1; }
  100% { opacity:0; transform:translate(560px,190px) rotate(18deg) scale(1); }
}

/* ---------- фон Hero пропускает небо ---------- */
.hero{ background:none; }
/* свечение живёт отдельным слоем и гаснет к низу — иначе на стыке
   с первой секцией виден горизонт */
.hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% 110%, rgba(11,58,92,.72) 0%, transparent 62%),
    radial-gradient(90% 60% at 15% 0%, rgba(7,31,51,.55) 0%, transparent 72%);
  -webkit-mask-image:linear-gradient(180deg, #000 62%, transparent 100%);
          mask-image:linear-gradient(180deg, #000 62%, transparent 100%);
}

/* ---------- Уважаем настройки движения ---------- */
@media (prefers-reduced-motion:reduce){
  .star{ animation:none; opacity:var(--max,.8); }
  .shoot{ display:none; }
  .sky__layer{ transform:none !important; }
}