/* background-stars.css
   1) Статичная россыпь мелких звёзд + мягкие туманности (body::before)
      — с плавным движением и лёгким мерцанием
   2) Несколько мерцающих звёзд-крестиков (body::after, .page::before, .page::after)
      — медленное мерцание, не синхронное
   3) Базовый контейнер .page
*/

/* === СЛОЙ 1: МЕЛКИЕ ЗВЁЗДЫ + ТУМАННОСТИ === */

body::before {
  content: "";
  position: fixed;
  inset: -200px;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
  background-repeat: no-repeat;

  background-image:
    /* туманности: мягкие, слегка заметные */
    radial-gradient(circle at 22% 26%, rgba(88, 28, 135, 0.32), transparent 60%),
    radial-gradient(circle at 78% 20%, rgba(56, 189, 248, 0.22), transparent 60%),
    radial-gradient(circle at 68% 72%, rgba(129, 140, 248, 0.28), transparent 65%),

    /* звёздное поле: вручную раскиданные точки */
    radial-gradient(circle at 3% 6%,   rgba(248,250,252,0.9) 1px, transparent 3px),
    radial-gradient(circle at 8% 15%,  rgba(248,250,252,0.6) 1px, transparent 3px),
    radial-gradient(circle at 15% 4%,  rgba(248,250,252,0.8) 1px, transparent 3px),
    radial-gradient(circle at 21% 11%, rgba(248,250,252,0.7) 1px, transparent 3px),
    radial-gradient(circle at 28% 7%,  rgba(248,250,252,0.9) 1.1px, transparent 3px),
    radial-gradient(circle at 35% 3%,  rgba(248,250,252,0.7) 1px, transparent 3px),
    radial-gradient(circle at 42% 9%,  rgba(248,250,252,0.85) 1px, transparent 3px),
    radial-gradient(circle at 49% 5%,  rgba(248,250,252,0.7) 1px, transparent 3px),
    radial-gradient(circle at 56% 10%, rgba(248,250,252,0.9) 1.1px, transparent 3px),
    radial-gradient(circle at 63% 4%,  rgba(248,250,252,0.8) 1px, transparent 3px),
    radial-gradient(circle at 70% 9%,  rgba(248,250,252,0.9) 1px, transparent 3px),
    radial-gradient(circle at 77% 3%,  rgba(248,250,252,0.7) 1px, transparent 3px),
    radial-gradient(circle at 84% 11%, rgba(248,250,252,0.85) 1.1px, transparent 3px),
    radial-gradient(circle at 91% 6%,  rgba(248,250,252,0.8) 1px, transparent 3px),
    radial-gradient(circle at 97% 12%, rgba(248,250,252,0.9) 1px, transparent 3px),

    radial-gradient(circle at 5% 22%,  rgba(248,250,252,0.8) 1px, transparent 3px),
    radial-gradient(circle at 12% 28%, rgba(248,250,252,0.6) 1px, transparent 3px),
    radial-gradient(circle at 18% 34%, rgba(248,250,252,0.9) 1.1px, transparent 3px),
    radial-gradient(circle at 25% 24%, rgba(248,250,252,0.7) 1px, transparent 3px),
    radial-gradient(circle at 32% 31%, rgba(248,250,252,0.85) 1px, transparent 3px),
    radial-gradient(circle at 39% 22%, rgba(248,250,252,0.7) 1px, transparent 3px),
    radial-gradient(circle at 46% 29%, rgba(248,250,252,0.9) 1px, transparent 3px),
    radial-gradient(circle at 53% 20%, rgba(248,250,252,0.75) 1px, transparent 3px),
    radial-gradient(circle at 60% 28%, rgba(248,250,252,0.9) 1.1px, transparent 3px),
    radial-gradient(circle at 67% 23%, rgba(248,250,252,0.7) 1px, transparent 3px),
    radial-gradient(circle at 74% 32%, rgba(248,250,252,0.8) 1px, transparent 3px),
    radial-gradient(circle at 81% 24%, rgba(248,250,252,0.9) 1px, transparent 3px),
    radial-gradient(circle at 88% 30%, rgba(248,250,252,0.7) 1px, transparent 3px),
    radial-gradient(circle at 95% 22%, rgba(248,250,252,0.85) 1px, transparent 3px),

    radial-gradient(circle at 4% 44%,  rgba(248,250,252,0.75) 1px, transparent 3px),
    radial-gradient(circle at 10% 51%, rgba(248,250,252,0.65) 1px, transparent 3px),
    radial-gradient(circle at 18% 46%, rgba(248,250,252,0.9) 1.1px, transparent 3px),
    radial-gradient(circle at 24% 55%, rgba(248,250,252,0.7) 1px, transparent 3px),
    radial-gradient(circle at 31% 42%, rgba(248,250,252,0.9) 1px, transparent 3px),
    radial-gradient(circle at 38% 50%, rgba(248,250,252,0.75) 1px, transparent 3px),
    radial-gradient(circle at 45% 46%, rgba(248,250,252,0.85) 1px, transparent 3px),
    radial-gradient(circle at 52% 54%, rgba(248,250,252,0.7) 1px, transparent 3px),
    radial-gradient(circle at 59% 48%, rgba(248,250,252,0.9) 1.1px, transparent 3px),
    radial-gradient(circle at 66% 55%, rgba(248,250,252,0.7) 1px, transparent 3px),
    radial-gradient(circle at 73% 44%, rgba(248,250,252,0.85) 1px, transparent 3px),
    radial-gradient(circle at 80% 52%, rgba(248,250,252,0.7) 1px, transparent 3px),
    radial-gradient(circle at 87% 46%, rgba(248,250,252,0.9) 1px, transparent 3px),
    radial-gradient(circle at 94% 53%, rgba(248,250,252,0.75) 1px, transparent 3px),

    radial-gradient(circle at 6% 66%,  rgba(248,250,252,0.8) 1px, transparent 3px),
    radial-gradient(circle at 13% 74%, rgba(248,250,252,0.6) 1px, transparent 3px),
    radial-gradient(circle at 20% 60%, rgba(248,250,252,0.9) 1.1px, transparent 3px),
    radial-gradient(circle at 27% 69%, rgba(248,250,252,0.7) 1px, transparent 3px),
    radial-gradient(circle at 34% 64%, rgba(248,250,252,0.9) 1px, transparent 3px),
    radial-gradient(circle at 41% 72%, rgba(248,250,252,0.75) 1px, transparent 3px),
    radial-gradient(circle at 48% 66%, rgba(248,250,252,0.85) 1px, transparent 3px),
    radial-gradient(circle at 55% 74%, rgba(248,250,252,0.7) 1px, transparent 3px),
    radial-gradient(circle at 62% 60%, rgba(248,250,252,0.9) 1.1px, transparent 3px),
    radial-gradient(circle at 69% 68%, rgba(248,250,252,0.7) 1px, transparent 3px),
    radial-gradient(circle at 76% 63%, rgba(248,250,252,0.85) 1px, transparent 3px),
    radial-gradient(circle at 83% 71%, rgba(248,250,252,0.7) 1px, transparent 3px),
    radial-gradient(circle at 90% 66%, rgba(248,250,252,0.9) 1px, transparent 3px),

    radial-gradient(circle at 8% 86%,  rgba(248,250,252,0.8) 1px, transparent 3px),
    radial-gradient(circle at 16% 93%, rgba(248,250,252,0.6) 1px, transparent 3px),
    radial-gradient(circle at 24% 82%, rgba(248,250,252,0.9) 1.1px, transparent 3px),
    radial-gradient(circle at 32% 90%, rgba(248,250,252,0.7) 1px, transparent 3px),
    radial-gradient(circle at 40% 86%, rgba(248,250,252,0.9) 1px, transparent 3px),
    radial-gradient(circle at 48% 94%, rgba(248,250,252,0.75) 1px, transparent 3px),
    radial-gradient(circle at 56% 88%, rgba(248,250,252,0.85) 1px, transparent 3px),
    radial-gradient(circle at 64% 96%, rgba(248,250,252,0.7) 1px, transparent 3px),
    radial-gradient(circle at 72% 84%, rgba(248,250,252,0.9) 1.1px, transparent 3px),
    radial-gradient(circle at 80% 92%, rgba(248,250,252,0.7) 1px, transparent 3px),
    radial-gradient(circle at 88% 88%, rgba(248,250,252,0.85) 1px, transparent 3px),
    radial-gradient(circle at 95% 94%, rgba(248,250,252,0.8) 1px, transparent 3px);

  opacity: 0.9;

  animation:
    starsDrift 54s linear infinite,
    starsTwinkle 6s ease-in-out infinite alternate;
}

/* === СЛОЙ 2: МЕРЦАЮЩИЕ ЗВЁЗДЫ-КРЕСТИКИ (ГРУППА A) === */

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 8px rgba(167,139,250,0.9));

  background-image:
    radial-gradient(circle, rgba(255,255,255,1) 0, rgba(255,255,255,0) 55%),
    linear-gradient(0deg,  transparent 48%, rgba(255,255,255,0.95) 50%, transparent 52%),
    linear-gradient(90deg, transparent 48%, rgba(255,255,255,0.95) 50%, transparent 52%),

    radial-gradient(circle, rgba(255,255,255,1) 0, rgba(255,255,255,0) 55%),
    linear-gradient(0deg,  transparent 48%, rgba(255,255,255,0.95) 50%, transparent 52%),
    linear-gradient(90deg, transparent 48%, rgba(255,255,255,0.95) 50%, transparent 52%),

    radial-gradient(circle, rgba(255,255,255,1) 0, rgba(255,255,255,0) 55%),
    linear-gradient(0deg,  transparent 48%, rgba(255,255,255,0.95) 50%, transparent 52%),
    linear-gradient(90deg, transparent 48%, rgba(255,255,255,0.95) 50%, transparent 52%);

  background-size:
    20px 20px, 2px 26px, 26px 2px,
    18px 18px, 2px 24px, 24px 2px,
    16px 16px, 2px 22px, 22px 2px;

  background-position:
    18% 24%, 18% 24%, 18% 24%,
    42% 18%, 42% 18%, 42% 18%,
    70% 30%, 70% 30%, 70% 30%;

  opacity: 0.18;
  animation: starFlash 7s ease-in-out infinite;
}

/* === БАЗОВЫЙ КОНТЕЙНЕР .page === */

.page {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 32px;
}

/* === СЛОЙ 3: КРЕСТИКИ ВОКРУГ КОНТЕНТА (ГРУППА B) === */

.page::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 1;
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 7px rgba(196,181,253,0.9));

  background-image:
    radial-gradient(circle, rgba(255,255,255,1) 0, rgba(255,255,255,0) 55%),
    linear-gradient(0deg,  transparent 48%, rgba(255,255,255,0.95) 50%, transparent 52%),
    linear-gradient(90deg, transparent 48%, rgba(255,255,255,0.95) 50%, transparent 52%),

    radial-gradient(circle, rgba(255,255,255,1) 0, rgba(255,255,255,0) 55%),
    linear-gradient(0deg,  transparent 48%, rgba(255,255,255,0.95) 50%, transparent 52%),
    linear-gradient(90deg, transparent 48%, rgba(255,255,255,0.95) 50%, transparent 52%);

  background-size:
    18px 18px, 2px 24px, 24px 2px,
    16px 16px, 2px 22px, 22px 2px;

  background-position:
    24% 36%, 24% 36%, 24% 36%,
    82% 26%, 82% 26%, 82% 26%;

  opacity: 0.16;
  animation: starFlash 9s ease-in-out infinite;
  animation-delay: 2.3s;
}

/* === СЛОЙ 4: КРЕСТИКИ СНИЗУ (ГРУППА C) === */

.page::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 1;
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 7px rgba(167,139,250,0.9));

  background-image:
    radial-gradient(circle, rgba(255,255,255,1) 0, rgba(255,255,255,0) 55%),
    linear-gradient(0deg,  transparent 48%, rgba(255,255,255,0.95) 50%, transparent 52%),
    linear-gradient(90deg, transparent 48%, rgba(255,255,255,0.95) 50%, transparent 52%),

    radial-gradient(circle, rgba(255,255,255,1) 0, rgba(255,255,255,0) 55%),
    linear-gradient(0deg,  transparent 48%, rgba(255,255,255,0.95) 50%, transparent 52%),
    linear-gradient(90deg, transparent 48%, rgba(255,255,255,0.95) 50%, transparent 52%);

  background-size:
    17px 17px, 2px 22px, 22px 2px,
    15px 15px, 2px 20px, 20px 2px;

  background-position:
    32% 78%, 32% 78%, 32% 78%,
    86% 68%, 86% 68%, 86% 68%;

  opacity: 0.14;
  animation: starFlash 10.5s ease-in-out infinite;
  animation-delay: 4s;
}

/* На мобильных можно убрать дополнительные крестики, чтобы не шумели */

@media (max-width: 960px) {
  .page::before,
  .page::after {
    display: none;
  }
}

/* === АНИМАЦИИ === */

@keyframes starsDrift {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-120px, -90px, 0); }
}

@keyframes starsTwinkle {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 0.9; }
}

@keyframes starFlash {
  0%, 15%   { opacity: 0.05; }
  35%       { opacity: 1; }
  55%       { opacity: 0.35; }
  75%       { opacity: 0.7; }
  100%      { opacity: 0.1; }
}