/* ================================================================
       Общий фон страниц AuroraPlan
       ================================================================
       Один слой фона на все внутренние страницы (кабинет, проект, …):
       раньше он жил внутри cabinet.css, а project.css имел свой,
       «небесный» — из-за этого страницы выглядели по-разному и любая
       правка фона требовала двух одинаковых изменений. Теперь фон
       описан здесь один раз, а страницы просто подключают этот файл
       ПЕРЕД своим (cabinet.css / project.css), чтобы при желании
       страница могла что-то переопределить.

       Подключение в <head>:
         <link rel="stylesheet" href="background.css">
         <link rel="stylesheet" href="project.css">

       Сам приём — обои в стиле «Color Circle»: мягкие перетекающие
       цветные круги (без сетки) в свежей утренней палитре: мятный,
       небесно-голубой, персиковый рассвет и тёплое золото поверх
       светлой базы. Всё — единым background на body, без отдельных
       «плавающих» элементов, чтобы ничего не могло «разъехаться» на
       разных экранах. Каждый круг — свой слой background-image с
       фиксированным background-size и центром «at 50% 50%»; позиция
       круга на странице задаётся через background-position (ниже), а
       не внутри градиента — так её можно плавно анимировать
       (@keyframes bg-drift) без пересчёта самих градиентов на каждый
       кадр: дёшево для CPU/GPU, всегда точно привязано к body,
       отключается при prefers-reduced-motion.
       ================================================================ */

    /* Краски кругов и базовой заливки берутся из theme.css (--bg-*), там же
       задан их ночной вариант. Здесь — только геометрия и движение, они от
       темы не зависят. --morning-base оставлен как синоним --page-base для
       совместимости, если где-то ещё на него ссылались. */
    :root {
      --morning-base: var(--page-base, #eef9f7);
    }

    html { background: var(--page-base, #eef9f7); }

    body {
      background-image:
        radial-gradient(circle at 50% 50%, rgba(var(--bg-c1-rgb), calc(0.65 * var(--bg-glow, 1))), rgba(var(--bg-c1-rgb), 0) 42%),
        radial-gradient(circle at 50% 50%, rgba(var(--bg-c2-rgb), calc(0.55 * var(--bg-glow, 1))), rgba(var(--bg-c2-rgb), 0) 45%),
        radial-gradient(circle at 50% 50%, rgba(var(--bg-c3-rgb), calc(0.55 * var(--bg-glow, 1))), rgba(var(--bg-c3-rgb), 0) 46%),
        radial-gradient(circle at 50% 50%, rgba(var(--bg-c4-rgb), calc(0.55 * var(--bg-glow, 1))), rgba(var(--bg-c4-rgb), 0) 46%),
        radial-gradient(circle at 50% 50%, rgba(var(--bg-c5-rgb), calc(0.8 * var(--bg-glow, 1))), rgba(var(--bg-c5-rgb), 0) 55%),
        radial-gradient(circle at 50% 50%, rgba(var(--bg-c6-rgb), calc(0.4 * var(--bg-glow, 1))), rgba(var(--bg-c6-rgb), 0) 50%),
        linear-gradient(160deg, var(--bg-base-1) 0%, var(--bg-base-2) 35%, var(--bg-base-3) 70%, var(--bg-base-4) 100%);
      background-size: 90vmax 90vmax, 95vmax 95vmax, 100vmax 100vmax, 100vmax 100vmax, 110vmax 110vmax, 120vmax 120vmax, auto;
      background-repeat: no-repeat;
      background-position:
        14% 20%, 82% 12%, 90% 62%, 20% 78%, 55% 45%, 45% 95%, 0 0;
      background-attachment: fixed;
      animation: bg-drift 28s ease-in-out infinite alternate;
    }

    @keyframes bg-drift {
      0% {
        background-position: 14% 20%, 82% 12%, 90% 62%, 20% 78%, 55% 45%, 45% 95%, 0 0;
      }
      50% {
        background-position: 20% 28%, 74% 20%, 82% 54%, 28% 70%, 50% 52%, 52% 88%, 0 0;
      }
      100% {
        background-position: 10% 16%, 88% 8%, 94% 68%, 16% 84%, 58% 40%, 40% 100%, 0 0;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      body { animation: none; }
    }