/* ============================================================
   azgorator — космический фон
   Три слоя: звёзды на canvas, туманности градиентами, лёгкая зернистость.
   Всё лежит под содержимым и не перехватывает клики.
   ============================================================ */

.cosmos {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: var(--black);
}

.cosmos__stars {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* --- Туманности: медленно дышат, создают глубину --- */
.cosmos__nebula {
  position: absolute;
  inset: -18%;
  background:
    radial-gradient(46% 38% at 18% 22%, color-mix(in oklab, var(--violet) 26%, transparent) 0%,
                    color-mix(in oklab, var(--violet) 8%, transparent) 45%, transparent 72%),
    radial-gradient(40% 34% at 84% 16%, color-mix(in oklab, var(--night-2) 48%, transparent) 0%,
                    color-mix(in oklab, var(--night-2) 14%, transparent) 46%, transparent 70%),
    radial-gradient(52% 44% at 72% 82%, color-mix(in oklab, var(--magenta) 14%, transparent) 0%,
                    color-mix(in oklab, var(--magenta) 4%, transparent) 46%, transparent 74%),
    radial-gradient(44% 40% at 12% 88%, color-mix(in oklab, var(--night) 52%, transparent) 0%,
                    color-mix(in oklab, var(--night) 16%, transparent) 46%, transparent 72%);
  /* Без filter: blur — иначе браузер размывает весь фон при каждом кадре
     медленной анимации. Мягкие градиенты дают тот же эффект бесплатно. */
  opacity: 0.7;
  will-change: transform;
  animation: nebula-drift 46s var(--ease) infinite alternate;
}

/* Пока карточка раскрыта на весь экран, фон всё равно не виден — останавливаем его */
body.viewer-open .cosmos__nebula { animation-play-state: paused; }

@keyframes nebula-drift {
  from { transform: translate3d(-1.5%, -1%, 0) scale(1); }
  to   { transform: translate3d(2%, 1.5%, 0) scale(1.07); }
}

/* --- Зернистость: убирает полосы на градиентах, добавляет «плёнку» --- */
.cosmos__grain {
  position: absolute;
  inset: 0;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- Мандала «цветок жизни»: используется как портал и как декор --- */
.mandala {
  /* Цвет наследуется от родителя: так один и тот же рисунок бывает
     и лаймовым в логотипе, и бирюзовым в портале */
  color: inherit;
  overflow: visible;
}

.mandala circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.1;
  vector-effect: non-scaling-stroke;
}

.mandala--spin { animation: mandala-spin 64s linear infinite; }
.mandala--spin-rev { animation: mandala-spin 88s linear infinite reverse; }

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

@media (prefers-reduced-motion: reduce) {
  .cosmos__nebula,
  .mandala--spin,
  .mandala--spin-rev { animation: none; }
}