/* ══════════════════════════════════════════════════════════════
   Читальня: полка-библиотека.
   Книги стоят обложками на доске, сверху тёплый свет лампы (сцена
   reading-lamp из манифеста). «Читаю сейчас» лежит открытой поверх.
   Полка не знает, сколько книг: доска рисуется фоном контейнера с шагом
   в одну строку сетки, поэтому и на двух книгах, и на двадцати она
   продолжается ровно до края.
   Движение: только transform и opacity, reduced-motion гасит всё.
   ══════════════════════════════════════════════════════════════ */

.lib{
  /* поверхности: на /lessons/ токенов лендинга нет, держим свои,
     иначе var() без значения делает объявление недействительным */
  --shell:color-mix(in oklab, var(--ink) 5%, transparent);
  --shell-line:color-mix(in oklab, var(--ink) 11%, transparent);
  --core:color-mix(in oklab, var(--bg-2) 82%, var(--ink) 3%);
  --inner-light:inset 0 1px 0 color-mix(in oklab, var(--ink) 14%, transparent);
  --halo:color-mix(in oklab, var(--gold) 26%, transparent);
  /* доска и свет лампы */
  --plank-hi:color-mix(in oklab, var(--gold) 58%, transparent);
  --plank-1:color-mix(in oklab, var(--gold) 30%, var(--bg-0));
  --plank-2:color-mix(in oklab, var(--gold) 13%, var(--bg-0));
  --book-shadow:color-mix(in oklab, var(--bg-0) 78%, #000);

  min-height:100vh;
  background:var(--bg-1,#101511);
  color:var(--ink);
  font-family:var(--font-t);
  padding:clamp(20px,4vw,44px) clamp(16px,5vw,56px) 90px;
}
:is([data-theme="white"],[data-theme="sage"],[data-theme="cream"],[data-theme="sky"],[data-theme="lavender"]) .lib{
  --shell:color-mix(in oklab, var(--ink) 3.5%, transparent);
  --shell-line:color-mix(in oklab, var(--ink) 9%, transparent);
  --core:#fff;
  --inner-light:inset 0 1px 0 rgba(255,255,255,.9);
  --plank-1:color-mix(in oklab, var(--gold) 34%, #fff);
  --plank-2:color-mix(in oklab, var(--gold) 17%, #fff);
  --book-shadow:color-mix(in oklab, var(--ink) 30%, transparent);
}
[hidden]{display:none !important}

/* ── свет лампы: сцена reading-lamp ────────────────────────────
   LQIP приезжает в разметке (124 байта), постер догружается картинкой и
   ставится фоном, видео-луп включается только на устройстве с мышью и
   только когда экран виден. Ни один байт не тратится до этого. */
.lib-lamp{
  position:fixed;inset:0 0 auto 0;height:min(62vh,560px);z-index:0;
  pointer-events:none;overflow:hidden;
  background:var(--lqip) center top/cover no-repeat;
  opacity:0;transition:opacity .9s var(--ease);
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 34%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0,#000 34%,transparent 100%);
}
.lib-lamp.is-on{opacity:.5}
.lib-lamp video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s var(--ease)}
.lib-lamp video.on{opacity:1}
/* тёплое пятно поверх кадра: оно и в темах без картинки держит вечер */
.lib::before{
  content:"";position:fixed;inset:0 0 auto 0;height:min(62vh,560px);z-index:0;pointer-events:none;
  background:radial-gradient(60% 70% at 50% 0%, color-mix(in oklab, var(--gold) 16%, transparent) 0%, transparent 72%);
}
.lib>*:not(.lib-lamp){position:relative;z-index:1}

/* ── шапка ─────────────────────────────────────────────────────── */
.lib-top{display:flex;gap:18px;align-items:flex-start;max-width:1080px;margin:0 auto 8px}
.lib-back{
  flex:none;display:grid;place-items:center;width:44px;height:44px;margin-top:4px;
  border-radius:14px;color:var(--ink-dim);background:var(--shell);
  box-shadow:inset 0 0 0 1px var(--shell-line);
  transition:color .3s var(--ease),background .3s var(--ease),transform .3s var(--ease);
}
.lib-back:hover{color:var(--ink);background:var(--gold-soft)}
.lib-back:active{transform:scale(.94)}
.lib-back:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.lib-back svg{width:20px;height:20px}
.lib-h1{font-family:var(--font-d);font-size:clamp(1.5rem,3.4vw,2.25rem);font-weight:600;margin:0 0 8px}
.lib-lead{max-width:58ch;color:var(--ink-dim);font-size:.9688rem;line-height:1.55;margin:0}

/* ── «читаю сейчас»: раскрытая книга поверх полки ────────────────
   Разворот из двух страниц с корешком посередине, лёгкий наклон и тень:
   книга лежит на доске, а не нарисована рядом. Показывается ТОЛЬКО когда
   человек правда начинал читать (закон честной цифры). */
.lib-now{max-width:1080px;margin:26px auto 6px}
.lib-now-h{font-family:var(--font-d);font-size:1rem;font-weight:600;color:var(--gold);margin:0 0 10px;letter-spacing:.01em}
.lib-spread{
  display:grid;grid-template-columns:auto 1fr;gap:0;align-items:stretch;
  max-width:660px;border-radius:6px 16px 16px 6px;overflow:hidden;
  background:var(--core);
  box-shadow:
    inset 0 0 0 1px var(--shell-line),
    0 26px 60px -34px var(--book-shadow),
    0 6px 18px -12px var(--book-shadow);
  transform:rotate(-.5deg);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.lib-spread:hover{transform:rotate(0deg) translateY(-2px)}
.lib-spread:focus-within{transform:rotate(0deg)}
/* корешок: тень сгиба между страницами */
.lib-page-l{
  position:relative;padding:16px 14px 16px 16px;
  background:linear-gradient(to right, color-mix(in oklab,var(--bg-0) 22%,transparent), transparent 42%);
}
.lib-page-l::after{
  content:"";position:absolute;right:0;top:0;bottom:0;width:16px;
  background:linear-gradient(to right, transparent, color-mix(in oklab,var(--bg-0) 34%,transparent));
}
.lib-page-r{padding:18px 20px 18px 18px;display:flex;flex-direction:column;gap:8px;justify-content:center}
.lib-spread .lib-cover{width:96px}
.lib-now-title{font-family:var(--font-d);font-size:1.0625rem;font-weight:600;margin:0;line-height:1.3}
.lib-now-where{color:var(--ink-dim);font-size:.875rem;line-height:1.5;margin:0}
.lib-now-where b{color:var(--ink);font-weight:700}
.lib-bar{height:4px;border-radius:99px;background:var(--shell);box-shadow:inset 0 0 0 1px var(--shell-line);overflow:hidden}
.lib-bar i{display:block;height:100%;border-radius:99px;background:var(--gold);transform-origin:left center}
.lib-go{
  align-self:flex-start;margin-top:4px;min-height:44px;padding:0 20px;border:0;border-radius:14px;
  display:inline-flex;align-items:center;cursor:pointer;text-decoration:none;
  font-family:var(--font-t);font-weight:800;font-size:.9375rem;
  color:var(--bg-0);background:var(--gold);
  transition:transform .3s var(--ease),background .3s var(--ease);
}
.lib-go:hover{background:var(--gold-deep)}
.lib-go:active{transform:scale(.97)}
.lib-go:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media (max-width:520px){
  .lib-spread{grid-template-columns:1fr;transform:none}
  .lib-page-l{display:flex;justify-content:center;padding:16px}
  .lib-page-l::after{display:none}
}

/* ── полка ──────────────────────────────────────────────────────
   Размер книги фиксированный (clamp даёт одно число на ширину экрана),
   поэтому высота строки сетки известна заранее: доска встаёт ровно под
   обложками, а скелетон занимает ровно ту же клетку, и сдвига нет. */
.lib-shelf-h{font-family:var(--font-d);font-size:1.125rem;font-weight:600;margin:30px auto 4px;max-width:1080px}
.lib-shelf-line{color:var(--ink-dim);font-size:.875rem;line-height:1.55;max-width:60ch;margin:0 auto 16px;margin-left:auto;margin-right:auto}
.lib-shelf-wrap{max-width:1080px;margin:0 auto}
.lib-shelf-h,.lib-shelf-line{padding-inline:0}

.lib-shelf{
  --bw:clamp(104px,25vw,150px);
  --bh:calc(var(--bw) * 1.4906);
  --plank:12px;
  --meta:94px;
  --row:calc(var(--bh) + var(--plank) + var(--meta) + 26px);
  max-width:1080px;margin:0 auto;
  display:grid;
  grid-template-columns:repeat(auto-fill,var(--bw));
  grid-auto-rows:var(--row);
  column-gap:clamp(14px,3.4vw,34px);
  justify-content:start;
  background-repeat:repeat-y;
  background-size:100% var(--row);
  background-image:
    /* тень книг, падающая на доску */
    linear-gradient(to bottom,
      transparent calc(var(--bh) - 20px),
      color-mix(in oklab, var(--book-shadow) 30%, transparent) calc(var(--bh) - 1px),
      transparent calc(var(--bh) + 2px)),
    /* сама доска: блик от лампы сверху, тёплое дерево, тень снизу */
    linear-gradient(to bottom,
      transparent calc(var(--bh)),
      var(--plank-hi) calc(var(--bh)),
      var(--plank-1) calc(var(--bh) + 2px),
      var(--plank-2) calc(var(--bh) + var(--plank)),
      color-mix(in oklab, var(--book-shadow) 26%, transparent) calc(var(--bh) + var(--plank)),
      transparent calc(var(--bh) + var(--plank) + 9px));
}
@media (max-width:400px){.lib-shelf{--meta:104px}}

.lib-card{
  display:flex;flex-direction:column;align-items:stretch;
  width:var(--bw);height:calc(var(--bh) + var(--plank) + var(--meta));
  border:0;padding:0;background:none;text-align:left;text-decoration:none;
  color:var(--ink);font-family:var(--font-t);cursor:pointer;
}
.lib-card:focus-visible{outline:none}
.lib-card:focus-visible .lib-cover{outline:2px solid var(--gold);outline-offset:3px}

/* обложка: пропорции 848×1264 держит aspect-ratio, LQIP лежит фоном и
   виден те миллисекунды, пока идёт AVIF. Корешок слева, блик лампы сверху. */
.lib-cover{
  position:relative;flex:none;width:100%;aspect-ratio:848/1264;
  border-radius:3px 9px 9px 3px;overflow:hidden;
  background:var(--core) center/cover no-repeat;
  box-shadow:
    inset -7px 0 14px -10px rgba(0,0,0,.55),
    inset 7px 0 10px -8px rgba(0,0,0,.7),
    0 12px 26px -16px var(--book-shadow);
  transform-origin:left center;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
  will-change:transform;
}
.lib-cover img{display:block;width:100%;height:100%;object-fit:cover}
/* корешок и блик: чистый CSS, ни одного лишнего байта */
.lib-cover::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:7px;
  background:linear-gradient(to right, rgba(0,0,0,.42), rgba(255,255,255,.07) 60%, transparent);
}
.lib-cover::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(148deg, color-mix(in oklab, var(--gold) 18%, transparent) 0%, transparent 46%);
}
.lib-card:hover .lib-cover{transform:translateY(-7px) rotate(-1.1deg);box-shadow:inset -7px 0 14px -10px rgba(0,0,0,.55),inset 7px 0 10px -8px rgba(0,0,0,.7),0 22px 40px -20px var(--book-shadow)}
.lib-card:active .lib-cover{transform:translateY(-3px) rotate(-.5deg)}
/* открытие: обложка отходит на петле, дальше книгу подхватывает читалка */
.lib-card.is-opening .lib-cover{transform:perspective(900px) rotateY(-32deg) translateY(-7px);box-shadow:0 30px 50px -24px var(--book-shadow)}

/* корешок без обложки: книга есть, картинки нет, и мы не притворяемся */
.lib-spine{
  display:grid;place-items:center;padding:14px 10px;text-align:center;
  background:linear-gradient(160deg, color-mix(in oklab,var(--gold) 22%,var(--bg-2)), var(--bg-2));
}
.lib-spine span{font-family:var(--font-d);font-size:.75rem;font-weight:600;line-height:1.35;color:var(--ink)}

/* подпись под доской: как карточка у музейной полки */
.lib-meta{padding:calc(var(--plank) + 10px) 2px 0;display:flex;flex-direction:column;gap:3px;min-width:0}
.lib-title{
  font-size:.8438rem;font-weight:800;line-height:1.28;margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.lib-sub{font-size:.75rem;color:var(--ink-faint);line-height:1.35;margin:0}
.lib-lvl{color:var(--gold);font-weight:700}
.lib-where{font-size:.75rem;color:var(--mint);line-height:1.35;margin:0;font-weight:700}

/* скелетон: та же клетка, та же высота обложки, поэтому приход каталога
   ничего не двигает (CLS 0, как на полках Кинозала и Песен) */
.lib-skel{display:flex;flex-direction:column;width:var(--bw);height:calc(var(--bh) + var(--plank) + var(--meta))}
.lib-skel i{
  display:block;width:100%;aspect-ratio:848/1264;border-radius:3px 9px 9px 3px;
  background:var(--core);box-shadow:inset 0 0 0 1px var(--shell-line);
}
.lib-skel b{display:block;height:12px;margin-top:calc(var(--plank) + 12px);border-radius:6px;background:var(--shell)}
@media (prefers-reduced-motion:no-preference){
  .lib-skel{animation:lib-pulse 1.5s ease-in-out infinite}
}
@keyframes lib-pulse{0%,100%{opacity:.5}50%{opacity:.82}}

.lib-empty{
  max-width:64ch;margin:0 auto 4px;margin-left:0;
  color:var(--ink-dim);font-size:.875rem;line-height:1.6;
  padding:16px 18px;border-radius:16px;background:var(--shell);box-shadow:inset 0 0 0 1px var(--shell-line);
}
.lib-note{max-width:1080px;margin:36px auto 0;color:var(--ink-faint);font-size:.8125rem;line-height:1.6}
.lib-fail{color:var(--ink-dim);font-size:.9375rem;line-height:1.6;max-width:56ch}

@media (prefers-reduced-motion:reduce){
  .lib-lamp,.lib-lamp video{transition:none}
  .lib-cover,.lib-spread{transition:none}
  .lib-card:hover .lib-cover{transform:none}
  .lib-card.is-opening .lib-cover{transform:none}
}