/* ───────────────────────────────────────────────────────────────────
   Тематические фоны предметных лендингов (math/science/reading/physics/
   astronomy). Чистый CSS: градиент-сцена на body + лёгкий SVG-мотив в
   фиксированном псевдоэлементе ПОЗАДИ контента, поэтому не мешают
   скроллу/тачу и не трогают существующую вёрстку.
   Контент остаётся читаемым: поверх мотива лежит затемняющий scrim, а
   карточки сайта и так полупрозрачные (var(--card)).
   Подключается на 5 лендингов; подуроки НЕ трогаем.

   Слои (снизу вверх):
     1. body background         — градиент-сцена (фиксированная)
     2. body::before  z-index:-2 — SVG-мотив (звёзды/сетка/орбиты/линии)
     3. .subj-scrim   z-index:-1 — затемняющий слой для читаемости
     4. весь контент страницы   — поверх scrim'а
   ─────────────────────────────────────────────────────────────────── */

/* градиент-сцена живёт на самом body (фиксированная, не скроллится) */
body.subj-bg {
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
}

/* SVG-мотив: фиксированный псевдоэлемент позади контента и scrim'а */
.subj-bg::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-repeat: repeat;
  background-position: center;
}

/* затемняющий scrim — гарантирует читаемость текста/карточек поверх фона */
.subj-bg .subj-scrim {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5,9,19,0.55) 0%, rgba(5,9,19,0.30) 40%, rgba(5,9,19,0.62) 100%);
}

/* ── reading → космос / Земля: сине-чёрный радиал + редкие звёзды ── */
.subj-reading {
  background-image:
    radial-gradient(120% 90% at 78% 12%, rgba(76,201,255,0.22) 0%, transparent 48%),
    radial-gradient(90% 70% at 18% 92%, rgba(36,90,180,0.30) 0%, transparent 55%),
    radial-gradient(140% 120% at 50% 50%, #0b1733 0%, #060b1a 60%, #03060f 100%);
}
.subj-reading::before {
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='30' cy='50' r='1.2'/%3E%3Ccircle cx='120' cy='30' r='0.8'/%3E%3Ccircle cx='220' cy='70' r='1.4'/%3E%3Ccircle cx='290' cy='40' r='0.9'/%3E%3Ccircle cx='70' cy='140' r='1'/%3E%3Ccircle cx='180' cy='160' r='0.7'/%3E%3Ccircle cx='260' cy='130' r='1.3'/%3E%3Ccircle cx='40' cy='230' r='0.9'/%3E%3Ccircle cx='150' cy='250' r='1.1'/%3E%3Ccircle cx='250' cy='240' r='0.8'/%3E%3Ccircle cx='100' cy='290' r='1'/%3E%3Ccircle cx='300' cy='285' r='1.2'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 320px 320px;
}

/* ── science → светящийся глобус / сеть мира: бирюзовый + сетка-паутинка ── */
.subj-science {
  background-image:
    radial-gradient(95% 75% at 50% 32%, rgba(94,234,212,0.22) 0%, transparent 52%),
    radial-gradient(120% 100% at 78% 88%, rgba(52,211,153,0.18) 0%, transparent 55%),
    radial-gradient(140% 120% at 50% 50%, #08202a 0%, #061821 58%, #030d12 100%);
}
.subj-science::before {
  opacity: 0.16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cg fill='none' stroke='%235eead4' stroke-width='0.6'%3E%3Cpath d='M0 45 H90 M45 0 V90'/%3E%3Cpath d='M0 0 L90 90 M90 0 L0 90'/%3E%3Ccircle cx='45' cy='45' r='30'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 90px 90px;
}

/* ── math → чертёж / геометрия: тёмно-синий + еле видные линии/треугольники ── */
.subj-math {
  background-image:
    radial-gradient(95% 75% at 24% 16%, rgba(76,201,255,0.18) 0%, transparent 50%),
    radial-gradient(110% 95% at 82% 90%, rgba(124,92,255,0.16) 0%, transparent 55%),
    radial-gradient(140% 120% at 50% 50%, #0a1430 0%, #070e22 60%, #04081a 100%);
}
.subj-math::before {
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%239fc4ff' stroke-width='0.7'%3E%3Cpath d='M0 0 H80 V80 H0 Z'/%3E%3Cpath d='M0 80 L40 0 L80 80'/%3E%3Cpath d='M0 40 H80'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 80px 80px;
}

/* ── physics → атом / орбиты: тёмно-индиго + орбитальные эллипсы ── */
.subj-physics {
  background-image:
    radial-gradient(95% 75% at 50% 28%, rgba(255,179,71,0.16) 0%, transparent 50%),
    radial-gradient(120% 100% at 80% 92%, rgba(255,111,145,0.16) 0%, transparent 55%),
    radial-gradient(140% 120% at 50% 50%, #120c2a 0%, #0c0820 60%, #06041a 100%);
}
.subj-physics::before {
  opacity: 0.12;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23ffb347' stroke-width='0.8'%3E%3Cellipse cx='100' cy='100' rx='80' ry='30'/%3E%3Cellipse cx='100' cy='100' rx='80' ry='30' transform='rotate(60 100 100)'/%3E%3Cellipse cx='100' cy='100' rx='80' ry='30' transform='rotate(120 100 100)'/%3E%3C/g%3E%3Ccircle cx='100' cy='100' r='4' fill='%23ff6f91'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* ── astronomy → звёздное небо: чёрно-фиолетовый + звёзды ── */
.subj-astronomy {
  background-image:
    radial-gradient(100% 80% at 70% 18%, rgba(167,139,250,0.24) 0%, transparent 50%),
    radial-gradient(90% 70% at 22% 90%, rgba(94,234,212,0.16) 0%, transparent 55%),
    radial-gradient(140% 120% at 50% 50%, #160e2e 0%, #0c0820 60%, #050310 100%);
}
.subj-astronomy::before {
  opacity: 0.6;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='25' cy='40' r='1.3'/%3E%3Ccircle cx='90' cy='20' r='0.8'/%3E%3Ccircle cx='160' cy='55' r='1.5'/%3E%3Ccircle cx='240' cy='30' r='1'/%3E%3Ccircle cx='285' cy='70' r='0.9'/%3E%3Ccircle cx='55' cy='110' r='1.1'/%3E%3Ccircle cx='130' cy='130' r='0.7'/%3E%3Ccircle cx='205' cy='115' r='1.3'/%3E%3Ccircle cx='270' cy='150' r='0.8'/%3E%3Ccircle cx='35' cy='190' r='1'/%3E%3Ccircle cx='110' cy='210' r='1.4'/%3E%3Ccircle cx='185' cy='195' r='0.8'/%3E%3Ccircle cx='250' cy='225' r='1.1'/%3E%3Ccircle cx='70' cy='265' r='0.9'/%3E%3Ccircle cx='145' cy='280' r='1.2'/%3E%3Ccircle cx='225' cy='270' r='0.8'/%3E%3Ccircle cx='290' cy='250' r='1'/%3E%3C/g%3E%3Cg fill='%23cbb6ff'%3E%3Ccircle cx='160' cy='55' r='2.4' opacity='0.5'/%3E%3Ccircle cx='110' cy='210' r='2.2' opacity='0.5'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 300px 300px;
}

/* мобайл: чуть мягче мотив, чтобы не съедал контраст на малых экранах */
@media (max-width: 640px) {
  .subj-reading::before,
  .subj-astronomy::before { opacity: 0.42; }
  .subj-math::before { opacity: 0.05; }
  .subj-science::before { opacity: 0.12; }
  .subj-physics::before { opacity: 0.1; }
}