/* ============================================================
   STARFIELD — космический фон (v2: больше анимаций)
   Звёзды, туманности, мерцание, метеоры, кометы, параллакс
   ============================================================ */

.starfield {
  position: fixed;
  inset: 0;
  z-index: var(--z-starfield);
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 60% at 75% -10%, rgba(57,125,169,.16), transparent 60%),
    radial-gradient(ellipse 70% 50% at 10% 110%, rgba(53,40,116,.20), transparent 60%),
    radial-gradient(circle at 50% 50%, var(--color-bg), var(--color-void) 92%);
}

/* Вращающаяся туманность (медленная, за звёздами) */
.starfield__nebula {
  position: absolute;
  width: 80vmax; height: 80vmax;
  top: 50%; left: 50%;
  background:
    radial-gradient(circle at 35% 40%, rgba(129,233,242,.06), transparent 45%),
    radial-gradient(circle at 65% 60%, rgba(53,40,116,.14), transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(57,125,169,.05), transparent 60%);
  border-radius: 45% 55% 52% 48%;
  transform: translate(-50%, -50%);
  animation: nebula-spin 120s linear infinite;
  filter: blur(20px);
}
@keyframes nebula-spin { to { transform: translate(-50%,-50%) rotate(360deg); } }

/* Слои звёзд — параллакс по data-атрибуту (JS) */
.starfield__layer { position: absolute; inset: -50%; width: 200%; height: 200%; }

.starfield__layer--far {
  background-image:
    radial-gradient(1px 1px at 20% 30%,  rgba(255,255,255,.7), transparent),
    radial-gradient(1px 1px at 60% 70%,  rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 80% 10%,  rgba(255,255,255,.6), transparent),
    radial-gradient(1px 1px at 35% 85%,  rgba(255,255,255,.4), transparent),
    radial-gradient(1px 1px at 90% 55%,  rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 10% 60%,  rgba(255,255,255,.6), transparent),
    radial-gradient(1px 1px at 50% 20%,  rgba(255,255,255,.4), transparent),
    radial-gradient(1px 1px at 75% 90%,  rgba(255,255,255,.5), transparent);
  background-size: 50% 50%;
  animation: drift-far 240s linear infinite;
  opacity: .6;
}
.starfield__layer--mid {
  background-image:
    radial-gradient(1.5px 1.5px at 15% 45%, rgba(129,233,242,.9), transparent),
    radial-gradient(1.5px 1.5px at 70% 25%, rgba(255,255,255,.8), transparent),
    radial-gradient(2px 2px at 40% 75%,     rgba(57,125,169,.8), transparent),
    radial-gradient(1.5px 1.5px at 85% 65%, rgba(255,255,255,.7), transparent),
    radial-gradient(1.5px 1.5px at 25% 15%, rgba(255,255,255,.6), transparent);
  background-size: 60% 60%;
  animation: drift-mid 180s linear infinite, twinkle 6s ease-in-out infinite;
}
.starfield__layer--near {
  background-image:
    radial-gradient(2px 2px at 30% 35%, rgba(129,233,242,1), transparent),
    radial-gradient(2.5px 2.5px at 65% 80%, rgba(255,255,255,.95), transparent),
    radial-gradient(2px 2px at 88% 20%, rgba(165,242,249,.9), transparent);
  background-size: 80% 80%;
  animation: drift-near 120s linear infinite, twinkle 4s ease-in-out infinite alternate;
}

@keyframes drift-far  { from { transform: translate(0,0);} to { transform: translate(-2%, 2%);} }
@keyframes drift-mid  { from { transform: translate(0,0);} to { transform: translate(3%, -3%);} }
@keyframes drift-near { from { transform: translate(0,0);} to { transform: translate(-4%, -2%);} }
@keyframes twinkle    { 0%,100% { opacity:.5;} 50% { opacity:1;} }

/* Орбитальная координатная сетка */
.starfield__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(129,233,242,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(129,233,242,.03) 1px, transparent 1px);
  background-size: 80px 80px;
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 40%, #000, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 60% at 50% 40%, #000, transparent 75%);
}

/* ── МЕТЕОРЫ / падающие звёзды ── */
.starfield__meteors { position: absolute; inset: 0; }
.meteor {
  position: absolute;
  width: 140px; height: 1px;
  background: linear-gradient(90deg, rgba(129,233,242,.9), transparent);
  border-radius: 2px;
  opacity: 0;
  filter: drop-shadow(0 0 6px rgba(129,233,242,.6));
  transform: rotate(-32deg);
}
.meteor::before {
  content: '';
  position: absolute; right: 0; top: -1px;
  width: 3px; height: 3px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 8px 2px rgba(129,233,242,.8);
}
.meteor--1 { top: 12%; left: 70%; animation: meteor-fall 7s ease-in 1s infinite; }
.meteor--2 { top: 5%;  left: 40%; animation: meteor-fall 9s ease-in 4s infinite; }
.meteor--3 { top: 25%; left: 90%; animation: meteor-fall 11s ease-in 7s infinite; }

@keyframes meteor-fall {
  0%   { opacity: 0; transform: translate(0,0) rotate(-32deg); }
  3%   { opacity: 1; }
  16%  { opacity: 1; }
  22%  { opacity: 0; transform: translate(-420px, 260px) rotate(-32deg); }
  100% { opacity: 0; }
}

/* ── КОМЕТА (медленная, по дуге) ── */
.starfield__comet {
  position: absolute;
  top: 18%; left: -10%;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff, var(--color-gold));
  box-shadow: 0 0 12px 3px rgba(129,233,242,.7);
  animation: comet-cross 26s linear infinite;
  opacity: 0;
}
.starfield__comet::after {
  content: '';
  position: absolute; right: 4px; top: 50%;
  width: 120px; height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, rgba(129,233,242,.6));
}
@keyframes comet-cross {
  0%   { opacity: 0; transform: translate(0, 0); }
  8%   { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: translate(120vw, 30vh); }
}

@media (prefers-reduced-motion: reduce) {
  .starfield__layer, .starfield__nebula, .meteor, .starfield__comet { animation: none !important; }
  .meteor, .starfield__comet { display: none; }
}


/* ── СВЕТЛАЯ ТЕМА: тонкая звёздная текстура на светлом фоне ── */
[data-theme="light"] .starfield {
  background:
    radial-gradient(ellipse 80% 60% at 75% -10%, rgba(47,111,168,.10), transparent 60%),
    radial-gradient(ellipse 70% 50% at 10% 110%, rgba(91,75,196,.08), transparent 60%),
    radial-gradient(circle at 50% 50%, var(--color-bg), var(--color-void) 92%);
}
[data-theme="light"] .starfield__nebula { opacity:.5; }
[data-theme="light"] .starfield__layer { opacity:.35; mix-blend-mode: multiply; }
[data-theme="light"] .starfield__grid {
  background-image:
    linear-gradient(rgba(13,16,48,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13,16,48,.04) 1px, transparent 1px);
}
[data-theme="light"] .meteor { opacity:.0; }
[data-theme="light"] .meteor, [data-theme="light"] .meteor::before { filter:none; }
[data-theme="light"] .starfield__comet { mix-blend-mode: multiply; }