/*
 * Прелоадер «подсолнух» — лепестки знака БИО-ТОН появляются по одному по кругу, цветок
 * медленно вращается. Файл лежит в public/ и подключается прямо из index.html; у каждой
 * переменной темы — запасное значение на случай, если styles.css с токенами ещё не пришёл.
 * Статичной заставки в index.html больше нет: до ответа «кто вошёл» цветок не показывается,
 * чтобы не мелькать перед формой входа. Файл оформляет заставку React и встроенный прелоадер списков.
 *
 * Длительности раскрытия (290 мс, шаг 100 мс), волны (3 с, шаг 300 мс) и оборота (12 с) — не переходы, а
 * период ожидания; они вне шкалы micro/enter осознанно, см. DESIGN.md → «Решения».
 * Проявление и растворение — токен enter, 200 мс.
 */

.подсолнух {
  --подсолнух-цикл: 3000ms;
  --подсолнух-шаг: 100ms;
  --подсолнух-волна-шаг: 300ms;
  --подсолнух-оборот: 12s;
  --подсолнух-кривая: cubic-bezier(0.2, 0.8, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--шрифт, 'Onest Variable', system-ui, sans-serif);
  font-size: var(--кегль-текст, 14px);
  line-height: 1.45;
  animation: подсолнух-проявление 200ms var(--подсолнух-кривая) both;
}

/* ── Во весь экран: цветок прямо на раме, как монограмма в шапке ─────── */

.подсолнух--экран {
  position: fixed;
  inset: 0;
  z-index: 1000;
  flex-direction: column;
  gap: var(--шаг-4, 16px);
  background: var(--рама, #0e3a1c);
  color: var(--рама-чернила, #c9d8cc);
}

.подсолнух--экран .подсолнух__знак {
  width: 72px;
  height: 75px;
}

@media (prefers-color-scheme: dark) {
  .подсолнух--экран {
    background: var(--рама, #0a140d);
    color: var(--рама-чернила, #a7b3a5);
  }
}

/* ── Внутри листа: медальон цвета борта на месте списка ─────────────── */

.подсолнух--встроенный {
  gap: var(--шаг-3, 12px);
  padding: var(--шаг-7, 32px) var(--шаг-4, 16px);
  color: var(--чернила-3, #5f6c59);
}

.подсолнух--встроенный .подсолнух__медальон {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--борт, #0e3a1c);
}

.подсолнух--встроенный .подсолнух__знак {
  width: 24px;
  height: 25px;
}

/* ── Проявление и уход ─────────────────────────────────────────────── */

.подсолнух--уходит {
  pointer-events: none;
  animation: подсолнух-растворение 200ms var(--подсолнух-кривая) both;
}

@keyframes подсолнух-проявление {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes подсолнух-растворение {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* ── Цветок ───────────────────────────────────────────────────────── */

.подсолнух__знак {
  display: block;
  overflow: visible;
}

/* Оборот — единственная линейная кривая в проекте: у вращения без начала и конца
   ускорение на стыке читалось бы как рывок раз в 12 секунд. */
.подсолнух__цветок {
  transform-box: view-box;
  transform-origin: 12.5px 13.05px;
  animation: подсолнух-оборот var(--подсолнух-оборот) linear infinite;
}

/* Лепесток растёт из центра цветка: масштаб от 0.3 и прозрачность. Каждый следующий
   по кругу запаздывает на шаг; цикл кончается там же, где начался, — стыка не видно. */
.подсолнух__лепесток {
  fill: var(--акцент, #fad565);
  transform-box: view-box;
  transform-origin: 12.5px 13.05px;
  animation:
    подсолнух-раскрытие 290ms var(--подсолнух-кривая)
      calc(var(--n, 0) * var(--подсолнух-шаг)) both,
    подсолнух-волна var(--подсолнух-цикл) var(--подсолнух-кривая)
      calc(1300ms + var(--n, 0) * var(--подсолнух-волна-шаг)) infinite;
}

.подсолнух__лепесток:nth-child(2) {
  --n: 1;
}
.подсолнух__лепесток:nth-child(3) {
  --n: 2;
}
.подсолнух__лепесток:nth-child(4) {
  --n: 3;
}
.подсолнух__лепесток:nth-child(5) {
  --n: 4;
}
.подсолнух__лепесток:nth-child(6) {
  --n: 5;
}
.подсолнух__лепесток:nth-child(7) {
  --n: 6;
}
.подсолнух__лепесток:nth-child(8) {
  --n: 7;
}
.подсолнух__лепесток:nth-child(9) {
  --n: 8;
}
.подсолнух__лепесток:nth-child(10) {
  --n: 9;
}

@keyframes подсолнух-оборот {
  to {
    transform: rotate(360deg);
  }
}

/* Раскрытие — один раз: лепестки выходят из центра по одному по кругу, весь цветок
   раскрыт за ~1,2 с. Дальше волна: лепесток ненадолго приседает к центру и возвращается,
   соседний — через 300 мс; 10 × 300 мс = цикл 3 с, поэтому в любой момент проседает
   ровно один лепесток и по кругу бежит одна волна. Начало и конец волны — раскрытый
   лепесток, как и конец раскрытия: ни на стыке раскрытия с волной, ни на стыке циклов
   рывка нет. */
@keyframes подсолнух-раскрытие {
  from {
    opacity: 0;
    transform: scale(0.3);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes подсолнух-волна {
  0%,
  70%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  85% {
    opacity: 0.35;
    transform: scale(0.62);
  }
}

/* Без движения: раскрытый неподвижный цветок. Общее правило styles.css укорачивает
   анимации до 0,01 мс — лепесток встал бы в конечный кадр, то есть исчез бы; здесь
   анимация снимается совсем, и лепестки остаются в покое, видимыми. */
@media (prefers-reduced-motion: reduce) {
  .подсолнух__цветок,
  .подсолнух__лепесток {
    animation: none !important;
  }
}