/* Фон. Три мягких засвета медленно дрейфуют за полупрозрачными панелями и
   чуть сдвигаются вслед за курсором; под ними — тонкая чертёжная сетка,
   гаснущая к краям, сверху — зерно, чтобы поле не выглядело пластиковым.
   Всё движение — только transform/opacity на маленьких слоях: никаких
   blur-фильтров, ничего не считается при прокрутке. Тёмная тема — засветы
   в полную силу и виньетка, светлая — те же слои, но едва заметные.
   Слои: .glow (в index.html) — засветы, body::before — сетка,
   body::after — зерно. Сдвиг параллакса приходит из js/theme.js
   переменными --px/--py, глубина слоя — --depth. */

/* ── засветы ───────────────────────────────────────────── */

.glow {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  overflow: hidden; contain: strict;
  animation: glow-in .9s ease both;
}
@keyframes glow-in { from { opacity: 0; } to { opacity: 1; } }

.glow i {
  position: absolute; display: block; border-radius: 50%;
  background: radial-gradient(closest-side, var(--c), transparent);
  translate: calc(var(--px, 0px) * var(--depth)) calc(var(--py, 0px) * var(--depth));
  transition: translate .8s var(--ease);
  animation: drift var(--t) ease-in-out infinite alternate;
  animation-delay: var(--d);
  will-change: transform;
}

/* цвет группы, верхний левый угол — ближе всех, потому двигается сильнее */
.glow i:nth-child(1) {
  --c: color-mix(in srgb, var(--accent) 22%, transparent);
  --depth: 1.6; --t: 74s; --d: -20s;
  width: 900px; height: 620px; left: -26%; top: -36%;
}
/* серый свет справа сверху — дальний слой */
.glow i:nth-child(2) {
  --c: color-mix(in srgb, #9a9da3 8%, transparent);
  --depth: .7; --t: 96s; --d: -50s;
  width: 760px; height: 560px; right: -28%; top: -28%;
}
/* снизу — слабый отсвет группы, «дышит» */
.glow i:nth-child(3) {
  --c: color-mix(in srgb, var(--accent) 9%, transparent);
  --depth: 1.2; --t: 118s; --d: -35s;
  width: 800px; height: 560px; left: 32%; bottom: -40%;
  animation: drift var(--t) ease-in-out infinite alternate, breathe 14s ease-in-out infinite alternate;
  animation-delay: var(--d), -4s;
}

@keyframes drift {
  from { transform: translate(-4%, -3%) scale(1); }
  to   { transform: translate(5%, 4%) scale(1.08); }
}
@keyframes breathe { from { opacity: .55; } to { opacity: 1; } }

/* виньетка поверх засветов и тонкая кромка света по верху — в тёмной теме */
:root[data-theme='dark'] .glow::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .03), transparent 2px),
    radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0, 0, 0, .3));
}

/* светлая тема: засветы приглушены, сверху лёгкий свет — бумага, а не пластик */
:root[data-theme='light'] .glow { background: linear-gradient(180deg, rgba(255, 255, 255, .55), transparent 45%); }
:root[data-theme='light'] .glow i:nth-child(1) { --c: color-mix(in srgb, var(--accent) 11%, transparent); }
:root[data-theme='light'] .glow i:nth-child(2) { --c: color-mix(in srgb, #4d6a9a 9%, transparent); }
:root[data-theme='light'] .glow i:nth-child(3) { --c: color-mix(in srgb, var(--accent) 6%, transparent); }

/* ── сетка и зерно ────────────────────────────────────── */

body::before, body::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1;
}

/* чертёжная сетка, тает к краям */
body::before {
  --grid: rgba(18, 23, 34, .05);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(90% 80% at 50% 35%, #000 20%, transparent 100%);
  mask-image: radial-gradient(90% 80% at 50% 35%, #000 20%, transparent 100%);
}
:root[data-theme='dark'] body::before { --grid: rgba(255, 255, 255, .025); }

/* зерно — только в тёмной теме, на светлой бумаге оно грязнит */
body::after { display: none; }
:root[data-theme='dark'] body::after {
  display: block; opacity: .05;
  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='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* ── панели ────────────────────────────────────────────── */

/* панели чуть просвечивают, чтобы засветы читались сквозь них; окна и меню — плотные */
:root[data-theme='dark'] { --panel: rgba(22, 23, 26, .8); --solid: #16171a; }
:root[data-theme='dark'] .top { background: rgba(10, 11, 13, .9); }
:root[data-theme='dark'] .sheet, :root[data-theme='dark'] .menu, :root[data-theme='dark'] nav { background: var(--solid); }
:root[data-theme='dark'] .band, :root[data-theme='dark'] .day, :root[data-theme='dark'] .strip { box-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 8px 24px rgba(0, 0, 0, .22); }

/* ── покой ─────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .glow, .glow i { animation: none; transition: none; translate: none; }
}