/* ============================================================
   ALMANAC FIGURES — colorized PNG/SVG masks
   ------------------------------------------------------------
   1. <img class="almanac-figure__sizer"> задаёт пропорции
      контейнера. Ширина контейнера фиксирована (100% - 20px),
      высота подстраивается автоматически — как обычный <img>.
   2. ::before на .almanac-figure — маскированный цветной слой.
      Цвет берётся из темы (--fg) и меняется вместе с палитрой.
   3. .almanac-figure-wrap--not-negative::before — мягкая
      прямоугольная подсветка под фигурой (только тёмная тема).
   4. .almanac-figure--glow — drop-shadow вокруг маски.
   5. .almanac-figure--inner-glow — радиальный градиент ВНУТРИ
      маски, поверх цветного слоя.

   Форматы: PNG, SVG, WebP — любой, который умеет <img>
   и mask-image. Имена файлов не важны.
   ============================================================ */


/* ------------------------------------------------------------
   Обёртка
   ------------------------------------------------------------ */

.almanac-figure-wrap {
  position: relative;
  isolation: isolate;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-block: var(--space-5, 24px);
}

/* Превью-версия в свёрнутом разделе: та же логика,
   но ограниченная ширина и центрирование. */
.almanac-figure-wrap--preview {
  max-width: 480px;
  margin-inline: auto;
}


/* ------------------------------------------------------------
   Контейнер фигуры
   ------------------------------------------------------------ */

.almanac-figure {
  position: relative;
  display: block;
  /* Явная ширина: блок минус по 10px с каждой стороны.
     sizer-img внутри получит width: 100% от этой ширины. */
  width: calc(100% - 20px);
  max-width: calc(100% - 20px);
  margin-inline: auto;
  flex-shrink: 0;
}

/* Невидимый измеритель пропорций: растягивается по ширине
   контейнера, высоту берёт из натуральных пропорций файла.
   Именно он определяет фактическую высоту .almanac-figure. */
.almanac-figure__sizer {
  display: block;
  width: 100%;
  height: auto;
  visibility: hidden;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Маскированный цветной слой. Лежит поверх sizer-img ровно
   по его границам (inset: 0). mask-size: contain вписывает
   маску в контейнер без искажений и без обрезки. */
.almanac-figure::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--fg);
  -webkit-mask-image: var(--figure-src);
          mask-image: var(--figure-src);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  transition:
    background-color var(--dur-base, 200ms) var(--ease, ease),
    filter           var(--dur-base, 200ms) var(--ease, ease);
  pointer-events: none;
}


/* ------------------------------------------------------------
   is_glow — мягкое свечение вокруг маски.
   ------------------------------------------------------------ */

.almanac-figure--glow {
  filter: drop-shadow(
    0 0 20px color-mix(in oklab, var(--c-accent) 75%, transparent)
  );
}


/* ------------------------------------------------------------
   is_inner_glow — радиальный градиент ВНУТРИ маски.
   ------------------------------------------------------------ */

.almanac-figure--inner-glow::before {
  background-image: radial-gradient(
    circle at center,
    color-mix(in oklab, var(--c-accent) 75%, transparent) 0%,
    transparent 70%
  );
}


/* ------------------------------------------------------------
   not_negative — «не инвертировать» с темой.

   Светлая тема: как обычно, фигура тёмная (--fg == --c-d2).
   Тёмная тема: фигура НЕ становится светлой. Берётся тёмный
   токен палитры --c-d1, смешивается с чёрным на 10%.
   Под фигурой — мягкая ПРЯМОУГОЛЬНАЯ подсветка из светлого
   токена палитры --c-l2. Края размыты, радиальности нет.
   ------------------------------------------------------------ */

[data-theme="dark"] .almanac-figure--not-negative::before {
  background-color: color-mix(in oklab, var(--c-d1) 90%, black);
}

/* Мягкая прямоугольная подсветка под фигурой.
   Это прямоугольник (не эллипс), размытый через filter: blur —
   поэтому края не имеют резкой границы, а свет распределяется
   равномерно по всей площади. Прозрачность — 25%, мягко. */
[data-theme="dark"] .almanac-figure-wrap--not-negative::before {
  content: "";
  position: absolute;
  inset: 8% 5%;
  z-index: -1;
  background: color-mix(in oklab, var(--c-l2) 25%, transparent);
  filter: blur(60px);
  border-radius: 8px;
  pointer-events: none;
}

/* not_negative + inner_glow в тёмной теме: тёмная база + акцент
   радиальным градиентом внутри маски. */
[data-theme="dark"] .almanac-figure--not-negative.almanac-figure--inner-glow::before {
  background-color: color-mix(in oklab, var(--c-d1) 90%, black);
  background-image: radial-gradient(
    circle at center,
    color-mix(in oklab, var(--c-accent) 75%, transparent) 0%,
    transparent 70%
  );
}


/* ------------------------------------------------------------
   Fallback: браузер без поддержки mask-image.
   ------------------------------------------------------------ */

@supports not ((mask-image: url('')) or (-webkit-mask-image: url(''))) {
  .almanac-figure::before {
    background-color: transparent;
    background-image: none;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .almanac-figure__sizer {
    visibility: visible;
  }
}