/* ═══════════════════════════════════════════════════════════════════════
   Живые маргиналии pack_v1 v2 — компаньоны книги в читалке.

   Подключается ТОЛЬКО когда пак существует на диске и knob
   scenario_book_marginalia включён (story_public.html, head_extra).
   Контракт вёрстки читалки не трогается: виньетка — это ::after ВНУТРИ
   потока .reader-page-body (flex-колонка), после последнего абзаца.
   Она никогда не перекрывает текст и скроллится вместе с ним в режиме
   «Книга».

   v2: какой зверёк живёт в книге (мышонок/ёжик/зайчонок/лисёнок/совёнок)
   и какие позы циклятся — решает СЕРВЕР (book_marginalia.
   reader_marginalia_enabled(story_id), детерминированно по story id — тот
   же выбор, что и в PDF). Шаблон ставит класс reader-marg-k-<ключ-виньетки>,
   а этот файл лишь маппит ключ на картинку через CSS-переменную --marg-img:
   одно правило на ассет пака, никакой логики персонажей в CSS.
   Последний текстовый экран (reader-marg-fin) — sleep-слот зверька, чуть
   крупнее. Переход к «После сказки» — transition-слот на дивайдере.
   ═══════════════════════════════════════════════════════════════════════ */

.reader-marg .reader-page-body::after {
  content: "";
  display: block;
  flex: 0 0 auto;
  height: clamp(56px, 9vh, 84px);
  margin-top: 1.15rem;
  background-image: var(--marg-img);
  background-position: center bottom;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.92;
  pointer-events: none;
}

/* Финальный текстовый экран: компаньон уснул — книга дочитана. */
.reader-marg-fin .reader-page-body::after {
  height: clamp(64px, 11vh, 96px);
}

/* На РАЗВОРОТЕ виньетка живёт внизу полосы — как колонтитул бумажной книги.
   Полоса разворота имеет фиксированную высоту, и короткий текст оставлял под
   собой пустую треть страницы: зверёк стоял сразу под последним абзацем, а
   ниже зияла пустота. `margin-top: auto` в flex-колонке прижимает его к низу и
   этой пустотой пользуется. В ленте высота полосы равна содержимому, поэтому
   правило нарочно ограничено разворотом на широком экране. */
@media (min-width: 1180px) {
  .reader-swiper .reader-marg .reader-page-body::after {
    margin-top: auto;
    padding-top: 1.15rem;
  }
}

/* Переход к «После сказки»: transition-слот компаньона. */
.reader-marginalia-divider {
  height: 64px;
  margin: 20px auto 4px;
  max-width: 320px;
  background-image: var(--marg-img);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.9;
  pointer-events: none;
}

/* Лёгкое появление — только когда пользователь не просил убрать движение. */
@media (prefers-reduced-motion: no-preference) {
  .reader-marg .reader-page-body::after {
    animation: reader-marg-fade-in 0.7s ease 0.05s backwards;
  }
}

@keyframes reader-marg-fade-in {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 0.92; transform: none; }
}

/* ── Ключ виньетки → картинка (по одному правилу на ассет пака) ────────── */
.reader-marg-k-bunny_basket { --marg-img: url("/static/marginalia/pack_v1/bunny_basket.png"); }
.reader-marg-k-bunny_candle { --marg-img: url("/static/marginalia/pack_v1/bunny_candle.png"); }
.reader-marg-k-bunny_carrot { --marg-img: url("/static/marginalia/pack_v1/bunny_carrot.png"); }
.reader-marg-k-bunny_cloud { --marg-img: url("/static/marginalia/pack_v1/bunny_cloud.png"); }
.reader-marg-k-bunny_letter { --marg-img: url("/static/marginalia/pack_v1/bunny_letter.png"); }
.reader-marg-k-bunny_skip { --marg-img: url("/static/marginalia/pack_v1/bunny_skip.png"); }
.reader-marg-k-bunny_train { --marg-img: url("/static/marginalia/pack_v1/bunny_train.png"); }
.reader-marg-k-bunny_wave { --marg-img: url("/static/marginalia/pack_v1/bunny_wave.png"); }
.reader-marg-k-fox_butterfly { --marg-img: url("/static/marginalia/pack_v1/fox_butterfly.png"); }
.reader-marg-k-fox_compass { --marg-img: url("/static/marginalia/pack_v1/fox_compass.png"); }
.reader-marg-k-fox_dandelion { --marg-img: url("/static/marginalia/pack_v1/fox_dandelion.png"); }
.reader-marg-k-fox_lantern_pole { --marg-img: url("/static/marginalia/pack_v1/fox_lantern_pole.png"); }
.reader-marg-k-fox_paper_crown { --marg-img: url("/static/marginalia/pack_v1/fox_paper_crown.png"); }
.reader-marg-k-fox_sleep_tail { --marg-img: url("/static/marginalia/pack_v1/fox_sleep_tail.png"); }
.reader-marg-k-fox_star_fishing { --marg-img: url("/static/marginalia/pack_v1/fox_star_fishing.png"); }
.reader-marg-k-fox_tiptoe { --marg-img: url("/static/marginalia/pack_v1/fox_tiptoe.png"); }
.reader-marg-k-hedge_apple { --marg-img: url("/static/marginalia/pack_v1/hedge_apple.png"); }
.reader-marg-k-hedge_flower { --marg-img: url("/static/marginalia/pack_v1/hedge_flower.png"); }
.reader-marg-k-hedge_kite { --marg-img: url("/static/marginalia/pack_v1/hedge_kite.png"); }
.reader-marg-k-hedge_lantern_stick { --marg-img: url("/static/marginalia/pack_v1/hedge_lantern_stick.png"); }
.reader-marg-k-hedge_leaf_umbrella { --marg-img: url("/static/marginalia/pack_v1/hedge_leaf_umbrella.png"); }
.reader-marg-k-hedge_minibooks { --marg-img: url("/static/marginalia/pack_v1/hedge_minibooks.png"); }
.reader-marg-k-hedge_sock { --marg-img: url("/static/marginalia/pack_v1/hedge_sock.png"); }
.reader-marg-k-hedge_yarn { --marg-img: url("/static/marginalia/pack_v1/hedge_yarn.png"); }
.reader-marg-k-mouse_boat { --marg-img: url("/static/marginalia/pack_v1/mouse_boat.png"); }
.reader-marg-k-mouse_book { --marg-img: url("/static/marginalia/pack_v1/mouse_book.png"); }
.reader-marg-k-mouse_candle { --marg-img: url("/static/marginalia/pack_v1/mouse_candle.png"); }
.reader-marg-k-mouse_cart { --marg-img: url("/static/marginalia/pack_v1/mouse_cart.png"); }
.reader-marg-k-mouse_flute { --marg-img: url("/static/marginalia/pack_v1/mouse_flute.png"); }
.reader-marg-k-mouse_lantern { --marg-img: url("/static/marginalia/pack_v1/mouse_lantern.png"); }
.reader-marg-k-mouse_plane { --marg-img: url("/static/marginalia/pack_v1/mouse_plane.png"); }
.reader-marg-k-mouse_read { --marg-img: url("/static/marginalia/pack_v1/mouse_read.png"); }
.reader-marg-k-mouse_sleep_moon { --marg-img: url("/static/marginalia/pack_v1/mouse_sleep_moon.png"); }
.reader-marg-k-mouse_teacup { --marg-img: url("/static/marginalia/pack_v1/mouse_teacup.png"); }
.reader-marg-k-mouse_umbrella { --marg-img: url("/static/marginalia/pack_v1/mouse_umbrella.png"); }
.reader-marg-k-mouse_wave { --marg-img: url("/static/marginalia/pack_v1/mouse_wave.png"); }
.reader-marg-k-orn_acorn_leaves { --marg-img: url("/static/marginalia/pack_v1/orn_acorn_leaves.png"); }
.reader-marg-k-orn_books_candle { --marg-img: url("/static/marginalia/pack_v1/orn_books_candle.png"); }
.reader-marg-k-orn_branch_firefly { --marg-img: url("/static/marginalia/pack_v1/orn_branch_firefly.png"); }
.reader-marg-k-orn_cloud_stars { --marg-img: url("/static/marginalia/pack_v1/orn_cloud_stars.png"); }
.reader-marg-k-orn_hot_air_mini { --marg-img: url("/static/marginalia/pack_v1/orn_hot_air_mini.png"); }
.reader-marg-k-orn_key_ribbon { --marg-img: url("/static/marginalia/pack_v1/orn_key_ribbon.png"); }
.reader-marg-k-orn_lantern_string { --marg-img: url("/static/marginalia/pack_v1/orn_lantern_string.png"); }
.reader-marg-k-orn_moon_nightcap { --marg-img: url("/static/marginalia/pack_v1/orn_moon_nightcap.png"); }
.reader-marg-k-orn_mushroom_house { --marg-img: url("/static/marginalia/pack_v1/orn_mushroom_house.png"); }
.reader-marg-k-orn_open_book_stars { --marg-img: url("/static/marginalia/pack_v1/orn_open_book_stars.png"); }
.reader-marg-k-orn_quill_ink { --marg-img: url("/static/marginalia/pack_v1/orn_quill_ink.png"); }
.reader-marg-k-orn_sailboat_wave { --marg-img: url("/static/marginalia/pack_v1/orn_sailboat_wave.png"); }
.reader-marg-k-orn_sleeping_stars { --marg-img: url("/static/marginalia/pack_v1/orn_sleeping_stars.png"); }
.reader-marg-k-orn_stars_moon { --marg-img: url("/static/marginalia/pack_v1/orn_stars_moon.png"); }
.reader-marg-k-orn_teapot_stars { --marg-img: url("/static/marginalia/pack_v1/orn_teapot_stars.png"); }
.reader-marg-k-orn_toy_train { --marg-img: url("/static/marginalia/pack_v1/orn_toy_train.png"); }
.reader-marg-k-owl_bell { --marg-img: url("/static/marginalia/pack_v1/owl_bell.png"); }
.reader-marg-k-owl_bookstack { --marg-img: url("/static/marginalia/pack_v1/owl_bookstack.png"); }
.reader-marg-k-owl_cocoa { --marg-img: url("/static/marginalia/pack_v1/owl_cocoa.png"); }
.reader-marg-k-owl_moon_balloon { --marg-img: url("/static/marginalia/pack_v1/owl_moon_balloon.png"); }
.reader-marg-k-owl_sleep { --marg-img: url("/static/marginalia/pack_v1/owl_sleep.png"); }
.reader-marg-k-owl_stretch { --marg-img: url("/static/marginalia/pack_v1/owl_stretch.png"); }
.reader-marg-k-owl_swing { --marg-img: url("/static/marginalia/pack_v1/owl_swing.png"); }
.reader-marg-k-owl_telescope { --marg-img: url("/static/marginalia/pack_v1/owl_telescope.png"); }