/* ── Фоны сайта (современные) ───────────────────────────────
   Меш-градиенты, аврора, туманности, орбы, киноплёночное зерно.
   Без картинок и тайловых узоров. Все дизайны используют
   CSS-переменные, поэтому цвет и насыщенность настраиваются из
   админки:
     --bg          базовый тёмный цвет фона
     --accent      акцентный цвет (например, золотой)
     --accent-rgb  акцентный цвет в виде "r, g, b"
     --intensity   множитель яркости (по умолчанию 1)
   Применяются на <body> через атрибут data-bg="<id>".
   В админке те же правила показывают превью в карточках. */

:root {
  --bg: #0A0A0A;
  --accent: #FFD700;
  --accent-rgb: 255, 215, 0;
  --intensity: 1;
}

body {
  background-color: var(--bg, #0A0A0A);
}

/* 1. Минимум — чистый фон с мягким свечением в углах */
[data-bg="mono"] {
  background-image:
    radial-gradient(ellipse 60% 45% at 78% 10%, rgba(var(--accent-rgb), calc(0.10 * var(--intensity))) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 12% 92%, rgba(var(--accent-rgb), calc(0.06 * var(--intensity))) 0%, transparent 60%);
}

/* 2. Сияние — большое мягкое свечение в центре */
[data-bg="glow"] {
  background-image:
    radial-gradient(ellipse 70% 55% at 50% 35%, rgba(var(--accent-rgb), calc(0.16 * var(--intensity))) 0%, transparent 70%),
    radial-gradient(ellipse 40% 30% at 50% 8%, rgba(255,255,255, calc(0.05 * var(--intensity))) 0%, transparent 60%);
}

/* 3. Меш-градиент — крупные размытые пятна, сливаются в глубину */
[data-bg="mesh"] {
  background-image:
    radial-gradient(ellipse 90% 60% at 12% 8%, rgba(var(--accent-rgb), calc(0.20 * var(--intensity))) 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 88% 12%, rgba(var(--accent-rgb), calc(0.14 * var(--intensity))) 0%, transparent 60%),
    radial-gradient(ellipse 80% 55% at 72% 72%, rgba(var(--accent-rgb), calc(0.12 * var(--intensity))) 0%, transparent 60%),
    radial-gradient(ellipse 60% 45% at 18% 86%, rgba(var(--accent-rgb), calc(0.10 * var(--intensity))) 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 45% 40%, rgba(255,255,255, calc(0.04 * var(--intensity))) 0%, transparent 60%);
}

/* 4. Аврора — вертикальные занавесы света */
[data-bg="aurora"] {
  background-image:
    radial-gradient(ellipse 18% 60% at 18% 18%, rgba(var(--accent-rgb), calc(0.22 * var(--intensity))) 0%, transparent 70%),
    radial-gradient(ellipse 14% 70% at 38% 48%, rgba(var(--accent-rgb), calc(0.16 * var(--intensity))) 0%, transparent 70%),
    radial-gradient(ellipse 20% 60% at 60% 12%, rgba(var(--accent-rgb), calc(0.18 * var(--intensity))) 0%, transparent 70%),
    radial-gradient(ellipse 15% 72% at 80% 52%, rgba(var(--accent-rgb), calc(0.12 * var(--intensity))) 0%, transparent 70%),
    radial-gradient(ellipse 22% 55% at 50% 90%, rgba(255,255,255, calc(0.04 * var(--intensity))) 0%, transparent 60%);
}

/* 5. Туманность — центральное свечение с орбами */
[data-bg="nebula"] {
  background-image:
    radial-gradient(ellipse 55% 45% at 50% 42%, rgba(var(--accent-rgb), calc(0.16 * var(--intensity))) 0%, transparent 65%),
    radial-gradient(30% 30% at 36% 30%, rgba(var(--accent-rgb), calc(0.30 * var(--intensity))) 0%, rgba(var(--accent-rgb), calc(0.08 * var(--intensity))) 45%, transparent 70%),
    radial-gradient(26% 26% at 68% 60%, rgba(var(--accent-rgb), calc(0.26 * var(--intensity))) 0%, rgba(var(--accent-rgb), calc(0.07 * var(--intensity))) 45%, transparent 70%),
    radial-gradient(18% 18% at 26% 70%, rgba(var(--accent-rgb), calc(0.22 * var(--intensity))) 0%, rgba(var(--accent-rgb), calc(0.06 * var(--intensity))) 45%, transparent 70%);
}

/* 6. Неоновые орбы — светящиеся диски */
[data-bg="orb"] {
  background-image:
    radial-gradient(34% 34% at 30% 24%, rgba(var(--accent-rgb), calc(0.35 * var(--intensity))) 0%, rgba(var(--accent-rgb), calc(0.12 * var(--intensity))) 40%, transparent 70%),
    radial-gradient(28% 28% at 70% 62%, rgba(var(--accent-rgb), calc(0.30 * var(--intensity))) 0%, rgba(var(--accent-rgb), calc(0.10 * var(--intensity))) 40%, transparent 70%),
    radial-gradient(12% 12% at 30% 24%, rgba(255,255,255, calc(0.10 * var(--intensity))) 0%, transparent 60%),
    radial-gradient(10% 10% at 70% 62%, rgba(255,255,255, calc(0.08 * var(--intensity))) 0%, transparent 60%),
    radial-gradient(ellipse 80% 45% at 50% 110%, rgba(var(--accent-rgb), calc(0.06 * var(--intensity))) 0%, transparent 60%);
}

/* 7. Сцена — конус света сверху */
[data-bg="spotlight"] {
  background-image:
    conic-gradient(from 270deg at 50% -12%, transparent 0deg 74deg, rgba(var(--accent-rgb), calc(0.15 * var(--intensity))) 88deg 96deg, transparent 110deg 254deg, rgba(var(--accent-rgb), calc(0.11 * var(--intensity))) 268deg 276deg, transparent 290deg 360deg),
    radial-gradient(ellipse 70% 45% at 50% 115%, rgba(var(--accent-rgb), calc(0.07 * var(--intensity))) 0%, transparent 60%);
}

/* 8. Стекло — размытые пятна и диагональные блики */
[data-bg="glass"] {
  background-image:
    radial-gradient(ellipse 55% 40% at 18% 22%, rgba(var(--accent-rgb), calc(0.18 * var(--intensity))) 0%, transparent 65%),
    radial-gradient(ellipse 48% 42% at 82% 28%, rgba(var(--accent-rgb), calc(0.13 * var(--intensity))) 0%, transparent 65%),
    radial-gradient(ellipse 60% 48% at 62% 82%, rgba(var(--accent-rgb), calc(0.10 * var(--intensity))) 0%, transparent 65%),
    linear-gradient(115deg, transparent 42%, rgba(255,255,255, calc(0.035 * var(--intensity))) 43%, rgba(255,255,255, calc(0.035 * var(--intensity))) 44%, transparent 45%),
    linear-gradient(115deg, transparent 66%, rgba(255,255,255, calc(0.02 * var(--intensity))) 67%, transparent 68%);
}

/* 9. Киноплёнка — зерно поверх мягкого свечения */
[data-bg="grain"] {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.13'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 70% 55% at 50% 35%, rgba(var(--accent-rgb), calc(0.16 * var(--intensity))) 0%, transparent 65%),
    radial-gradient(ellipse 38% 30% at 74% 10%, rgba(var(--accent-rgb), calc(0.10 * var(--intensity))) 0%, transparent 60%),
    radial-gradient(ellipse 32% 26% at 16% 80%, rgba(var(--accent-rgb), calc(0.08 * var(--intensity))) 0%, transparent 60%);
  background-size: 200px 200px, auto, auto, auto;
}

/* 10. Гало — световые кольца вокруг центра */
[data-bg="halo"] {
  background-image:
    radial-gradient(circle at 50% 42%, transparent 0 12%, rgba(var(--accent-rgb), calc(0.11 * var(--intensity))) 12% 12.5%, transparent 12.5% 24%, rgba(var(--accent-rgb), calc(0.08 * var(--intensity))) 24% 24.5%, transparent 24.5% 36%, rgba(var(--accent-rgb), calc(0.06 * var(--intensity))) 36% 36.5%, transparent 36.5% 48%, rgba(var(--accent-rgb), calc(0.04 * var(--intensity))) 48% 48.5%, transparent 48.5% 62%),
    radial-gradient(ellipse 80% 55% at 50% 45%, rgba(var(--accent-rgb), calc(0.12 * var(--intensity))) 0%, transparent 65%);
}

/* 11. Жемчуг — перламутровое дуотоновое свечение */
[data-bg="pearl"] {
  background-image:
    radial-gradient(ellipse 60% 45% at 28% 24%, rgba(var(--accent-rgb), calc(0.16 * var(--intensity))) 0%, rgba(255,255,255, calc(0.03 * var(--intensity))) 50%, transparent 70%),
    radial-gradient(ellipse 55% 42% at 76% 56%, rgba(var(--accent-rgb), calc(0.11 * var(--intensity))) 0%, rgba(255,255,255, calc(0.02 * var(--intensity))) 50%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 45% 88%, rgba(var(--accent-rgb), calc(0.08 * var(--intensity))) 0%, transparent 70%);
}

/* 12. Угли — тёплое свечение снизу и искры */
[data-bg="embers"] {
  background-image:
    radial-gradient(circle 7px at 22% 18%, rgba(var(--accent-rgb), calc(0.25 * var(--intensity))) 0%, transparent 100%),
    radial-gradient(circle 6px at 70% 12%, rgba(var(--accent-rgb), calc(0.20 * var(--intensity))) 0%, transparent 100%),
    radial-gradient(circle 6px at 84% 68%, rgba(var(--accent-rgb), calc(0.22 * var(--intensity))) 0%, transparent 100%),
    radial-gradient(circle 5px at 34% 62%, rgba(var(--accent-rgb), calc(0.18 * var(--intensity))) 0%, transparent 100%),
    radial-gradient(circle 5px at 58% 42%, rgba(var(--accent-rgb), calc(0.20 * var(--intensity))) 0%, transparent 100%),
    radial-gradient(circle 4px at 12% 55%, rgba(var(--accent-rgb), calc(0.16 * var(--intensity))) 0%, transparent 100%),
    radial-gradient(ellipse 80% 45% at 50% 112%, rgba(var(--accent-rgb), calc(0.15 * var(--intensity))) 0%, transparent 60%),
    radial-gradient(ellipse 55% 30% at 50% 100%, rgba(var(--accent-rgb), calc(0.08 * var(--intensity))) 0%, transparent 60%);
}

/* 13. Виньетка — затемнение по краям с акцентным кантом */
[data-bg="vignette"] {
  background-image:
    radial-gradient(ellipse 130% 105% at 50% 50%, transparent 52%, rgba(var(--accent-rgb), calc(0.03 * var(--intensity))) 74%, rgba(0,0,0, calc(0.32 * var(--intensity))) 100%),
    radial-gradient(ellipse 60% 45% at 50% 22%, rgba(var(--accent-rgb), calc(0.13 * var(--intensity))) 0%, transparent 60%);
  box-shadow:
    inset 0 0 0 1px rgba(var(--accent-rgb), calc(0.28 * var(--intensity)));
}

/* 14. Горизонт — мягкая световая полоса */
[data-bg="horizon"] {
  background-image:
    radial-gradient(ellipse 180% 18% at 50% 68%, rgba(var(--accent-rgb), calc(0.17 * var(--intensity))) 0%, transparent 70%),
    radial-gradient(ellipse 180% 18% at 50% 71%, rgba(var(--accent-rgb), calc(0.10 * var(--intensity))) 0%, transparent 70%),
    radial-gradient(ellipse 100% 30% at 50% 0%, rgba(var(--accent-rgb), calc(0.10 * var(--intensity))) 0%, transparent 60%);
}

/* 15. Сетка — тонкая чертёжная сетка с мягким свечением */
[data-bg="grid"] {
  background-image:
    radial-gradient(ellipse 100% 70% at 50% -20%, rgba(var(--accent-rgb), calc(0.10 * var(--intensity))) 0%, transparent 65%),
    linear-gradient(rgba(var(--accent-rgb), calc(0.06 * var(--intensity))) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--accent-rgb), calc(0.06 * var(--intensity))) 1px, transparent 1px);
  background-size: auto, 48px 48px, 48px 48px;
}

/* 15a. Сетка сияющая — чертёжная сетка с дышащим свечением */
[data-bg="gridglow"] {
  background-image:
    radial-gradient(ellipse 100% 70% at 50% -20%, rgba(var(--accent-rgb), calc(0.14 * var(--intensity))) 0%, transparent 60%),
    radial-gradient(ellipse 60% 45% at 50% 100%, rgba(var(--accent-rgb), calc(0.10 * var(--intensity))) 0%, transparent 60%),
    linear-gradient(rgba(var(--accent-rgb), calc(0.06 * var(--intensity))) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--accent-rgb), calc(0.06 * var(--intensity))) 1px, transparent 1px),
    linear-gradient(rgba(var(--accent-rgb), calc(0.03 * var(--intensity))) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--accent-rgb), calc(0.03 * var(--intensity))) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 48px 48px, 48px 48px, 12px 12px, 12px 12px;
  animation: amrGridGlow 9s ease-in-out infinite alternate;
}
@keyframes amrGridGlow {
  0%   { background-size: 100% 100%, 100% 100%, 48px 48px, 48px 48px, 12px 12px, 12px 12px; }
  100% { background-size: 125% 125%, 125% 125%, 48px 48px, 48px 48px, 12px 12px, 12px 12px; }
}

/* 16. Поток — анимированный меш-градиент (aurora mesh, плавно движущиеся орбы) */
[data-bg="flow"] {
  background-image:
    radial-gradient(ellipse 70% 55% at 20% 20%, rgba(var(--accent-rgb), calc(0.22 * var(--intensity))) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 80% 30%, rgba(var(--accent-rgb), calc(0.16 * var(--intensity))) 0%, transparent 55%),
    radial-gradient(ellipse 65% 55% at 50% 80%, rgba(var(--accent-rgb), calc(0.14 * var(--intensity))) 0%, transparent 55%),
    radial-gradient(ellipse 55% 45% at 30% 90%, rgba(255,255,255, calc(0.04 * var(--intensity))) 0%, transparent 55%);
  background-size: 160% 160%, 160% 160%, 160% 160%, 160% 160%;
  animation: amrFlow 18s ease-in-out infinite alternate;
}
@keyframes amrFlow {
  0%   { background-position: 0% 0%, 100% 100%, 50% 50%, 0% 100%; }
  50%  { background-position: 25% 15%, 75% 60%, 60% 40%, 20% 70%; }
  100% { background-position: 10% 30%, 90% 20%, 40% 70%, 40% 40%; }
}

/* 17. Прожекторы — движущиеся диагональные лучи света (театральный свет) */
[data-bg="beams"] {
  background-image:
    linear-gradient(115deg, transparent 30%, rgba(var(--accent-rgb), calc(0.10 * var(--intensity))) 38%, transparent 46%),
    linear-gradient(115deg, transparent 55%, rgba(var(--accent-rgb), calc(0.08 * var(--intensity))) 63%, transparent 71%),
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(var(--accent-rgb), calc(0.12 * var(--intensity))) 0%, transparent 60%);
  background-size: 200% 200%, 200% 200%, 100% 100%;
  animation: amrBeams 14s linear infinite;
}
@keyframes amrBeams {
  0%   { background-position: 0% 0%, 100% 0%, 50% 0%; }
  100% { background-position: 200% 0%, -100% 0%, 50% 0%; }
}

/* 18. Дыхание — пульсирующее центральное свечение */
[data-bg="pulse"] {
  background-image:
    radial-gradient(ellipse 60% 45% at 50% 40%, rgba(var(--accent-rgb), calc(0.14 * var(--intensity))) 0%, transparent 60%),
    radial-gradient(30% 30% at 50% 40%, rgba(var(--accent-rgb), calc(0.28 * var(--intensity))) 0%, transparent 60%),
    radial-gradient(18% 18% at 50% 40%, rgba(255,255,255, calc(0.05 * var(--intensity))) 0%, transparent 50%);
  background-size: 100% 100%, 100% 100%, 100% 100%;
  animation: amrPulse 8s ease-in-out infinite;
}
@keyframes amrPulse {
  0%, 100% { background-size: 100% 100%, 90% 90%, 85% 85%; }
  50%      { background-size: 115% 115%, 120% 120%, 110% 110%; }
}

@media (prefers-reduced-motion: reduce) {
  [data-bg="gridglow"], [data-bg="flow"], [data-bg="beams"], [data-bg="pulse"] { animation: none; }
}