/* ==========================================================================
   effects.css — декоративные фоны (слои декора)
   -------------------------------------------------------------------------
   Слой добавляется на секцию атрибутом data-fx со списком типов через пробел:
     aurora   — 3 мягких градиентных пятна (статика) (A)
                модификатор soft (добавляется в data-fx) — деликатнее
     lens     — мягкое пятно, следует за курсором (только десктоп: pointer:fine) (C)
     mesh     — статичный софт-градиент (mesh) (B)
     grid     — тонкая CSS-сетка, растворяется к краям (B)
     glow     — мягкое пульсирующее свечение (B)
     soft     — модификатор: снижает активность авроры
   Слои вставляются JS-ом (см. script.js → initEffects) как реальные <div>,
   поэтому никакие существующие ::before/::after не ломаются. Раскрашиваются
   через токены --fx-* из variables.css → автоматически следят за темой.
   ========================================================================== */

[data-fx] {
  position: relative;
  overflow: hidden;
}

/* Общие для всех функциональных слоёв: absolute-«подложки» под контентом */
.fx-aurora,
.fx-mesh,
.fx-grid,
.fx-glow,
.fx-lens {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Контент секции (обычно .container) — поверх декоративных слоёв */
[data-fx] .container {
  position: relative;
  z-index: 1;
}


/* ---------- A · Аврора: три мягких градиентных пятна (статика) ---------- */
.fx-aurora {
  opacity: var(--fx-aurora-opacity, 0.5);
}
.fx-aurora[data-variant="0"] {
  background: radial-gradient(circle at 28% 24%, var(--fx-aurora-1), transparent 62%);
}
.fx-aurora[data-variant="1"] {
  background: radial-gradient(circle at 72% 38%, var(--fx-aurora-2), transparent 56%);
}
.fx-aurora[data-variant="2"] {
  background: radial-gradient(circle at 50% 92%, var(--fx-aurora-3), transparent 60%);
}

/* Мягкий вариант — деликатнее */
.fx-soft .fx-aurora {
  --fx-aurora-opacity: 0.28;
}

/* В тёмной теме аврора чуть тише, чтобы не фонить */
:root[data-theme="dark"] .fx-aurora {
  --fx-aurora-opacity: 0.38;
}


/* ---------- C · Lens: пятно следует за курсором ---------- */
.fx-lens {
  background: radial-gradient(
    circle 620px at var(--mx, 50%) var(--my, 50%),
    var(--fx-lens),
    transparent 70%
  );
}


/* ---------- B · Mesh: статичный софт-градиент ---------- */
.fx-mesh {
  background:
    radial-gradient(46% 62% at 18% 18%, var(--fx-mesh-1), transparent 60%),
    radial-gradient(52% 52% at 84% 30%, var(--fx-mesh-2), transparent 60%),
    radial-gradient(42% 52% at 50% 100%, var(--fx-mesh-1), transparent 60%);
}


/* ---------- B · Grid: тонкая сетка, растворяется к краям ---------- */
.fx-grid {
  background-image:
    linear-gradient(var(--fx-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--fx-grid-line) 1px, transparent 1px);
  background-size: 3.5rem 3.5rem;
  -webkit-mask-image: radial-gradient(circle at 50% 42%, #000, transparent 78%);
          mask-image: radial-gradient(circle at 50% 42%, #000, transparent 78%);
}


/* ---------- B · Glow: мягкое пульсирующее свечение ---------- */
.fx-glow {
  background: radial-gradient(52% 58% at 50% 26%, var(--fx-glow), transparent 72%);
  animation: fx-glow-breathe 9s ease-in-out infinite;
}
@keyframes fx-glow-breathe {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 0.9; }
}


/* ---------- Доступность и адаптивность ---------- */
@media (prefers-reduced-motion: reduce) {
  .fx-glow { animation: none; }
  .fx-aurora { opacity: 0.5; }
  .fx-soft .fx-aurora { opacity: 0.28; }
  .fx-glow { opacity: 0.55; }
}

/* Пятно за курсором не нужно на тач-устройствах / малых экранах */
@media (max-width: 1023px) {
  .fx-lens { display: none; }
}