/* =====================================================================
   T-004 · Обложка книги (cover.html)
   Только @layer screens, только токены, классы с префиксом .cover-…
   Новые токены (tokens.css → «Добавлено экранами»): --cover-texture,
   --cover-spine, --cover-frame.
   ===================================================================== */
@layer screens {
  /* Демо-состояние (born | pregnancy) — без мигания до JS */
  [data-stage="born"] [data-stage-only="pregnancy"],
  [data-stage="pregnancy"] [data-stage-only="born"] { display: none; }

  /* ---------- Лист обложки: фактура переплёта + корешок ---------- */
  .cover-page {
    /* корешок — первый слой фона: не уезжает при скролле листа */
    background: var(--cover-spine) left top / 14px 100% no-repeat, var(--cover-texture), var(--texture-page), var(--color-page);
    transform-origin: left center;
  }
  .cover-spread {
    align-content: center;
    padding-left: calc(var(--space-4) + 14px);
  }
  /* Тиснёная рамка по краю обложки */
  .cover-spread::before {
    content: "";
    position: absolute;
    inset: 10px 10px 10px 24px;
    border: var(--cover-frame);
    border-radius: var(--radius-lg);
    pointer-events: none;
  }

  .cover-layout {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: var(--space-4);
    text-align: center;
    padding-block: var(--space-2);
  }

  /* ---------- Фото (клик = открыть книгу) ---------- */
  .cover-photo {
    position: relative;
    display: block;
    width: min(60%, 260px, max(180px, calc((100dvh - 480px) * 0.8)));
    color: inherit;
    text-decoration: none;
    border-radius: var(--radius-photo);
  }
  /* Тёплый ореол позади фото */
  .cover-photo::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -14% -18%;
    background: radial-gradient(closest-side, var(--color-secondary-soft), transparent);
    opacity: 0.9;
    pointer-events: none;
  }
  .cover-photo__frame {
    transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base);
  }
  .cover-photo:hover .cover-photo__frame { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
  .cover-photo__hint {
    position: absolute;
    z-index: 3;
    left: 50%;
    bottom: var(--space-7);
    translate: -50% 0;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--color-page);
    color: var(--color-accent-ink);
    box-shadow: var(--shadow-md);
    font-size: var(--fs-xs);
    font-weight: 700;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity var(--dur-base), transform var(--dur-base) var(--ease-out);
    pointer-events: none;
  }
  .cover-photo__hint svg { width: 16px; height: 16px; }
  @media (hover: hover) {
    .cover-photo:hover .cover-photo__hint { opacity: 1; transform: none; }
  }
  .cover-photo:focus-visible .cover-photo__hint { opacity: 1; transform: none; }

  /* ---------- Заглавие ---------- */
  .cover-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
    width: 100%;
  }
  .cover-title__name {
    font-size: calc(clamp(3.75rem, 2rem + 8vw, 6.5rem) * var(--font-display-scale));
    line-height: 0.95;
    color: var(--color-ink);
    margin-top: var(--space-1);
  }
  .cover-title__ornament {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-secondary);
  }
  .cover-title__ornament span { width: 48px; height: 1px; background: currentColor; opacity: 0.8; }
  .cover-title__ornament svg { width: 14px; height: 14px; fill: currentColor; }
  .cover-title__sub {
    font-size: calc(var(--fs-xl) * var(--font-display-scale));
    color: var(--color-secondary-ink);
  }
  .cover-title__lead { max-width: 28rem; }

  .cover-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
    width: min(100%, 340px);
    margin-top: var(--space-2);
  }
  .cover-actions .btn { white-space: normal; text-align: center; }

  /* ---------- Низ обложки: темы + демо-состояние ---------- */
  .cover-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4) var(--space-6);
    width: 100%;
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-line);
  }
  .cover-foot__themes .theme-switch__legend { margin-inline: auto; }
  .cover-foot__themes .theme-switch__list { justify-content: center; }

  .cover-stage {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    border: 0; padding: 0; margin: 0; min-width: 0;
  }
  .cover-stage__legend {
    margin-inline: auto;
    margin-bottom: var(--space-2);
    padding: 0;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--color-ink-muted);
  }
  .cover-stage .choice { min-height: var(--tap); font-size: var(--fs-xs); padding-inline: var(--space-3); }

  /* ---------- Появление (только transform/opacity) ---------- */
  @keyframes cover-rise { from { opacity: 0; transform: translateY(12px); } }
  .cover-photo, .cover-title > *, .cover-foot { animation: cover-rise 520ms var(--ease-out) both; }
  .cover-title > :nth-child(1) { animation-delay: 80ms; }
  .cover-title > :nth-child(2) { animation-delay: 140ms; }
  .cover-title > :nth-child(3) { animation-delay: 200ms; }
  .cover-title > :nth-child(4) { animation-delay: 240ms; }
  .cover-title > :nth-child(5) { animation-delay: 280ms; }
  .cover-title > :nth-child(6) { animation-delay: 320ms; }
  .cover-foot { animation-delay: 380ms; }

  /* ---------- Десктоп: фото слева, заглавие справа, темы внизу ---------- */
  @media (min-width: 900px) {
    .cover-page { background: var(--cover-spine) left top / 22px 100% no-repeat, var(--cover-texture), var(--texture-page), var(--color-page); }
    .cover-spread { padding: var(--space-6) clamp(var(--space-6), 6vw, var(--space-8)) var(--space-5) calc(clamp(var(--space-6), 6vw, var(--space-8)) + 22px); }
    .cover-spread::before { inset: 16px 16px 16px 38px; }
    .cover-layout {
      grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
      grid-template-areas: "photo title" "foot foot";
      align-items: center;
      justify-items: stretch;
      column-gap: clamp(var(--space-6), 5vw, var(--space-8));
      row-gap: var(--space-5);
      text-align: start;
    }
    .cover-photo {
      grid-area: photo;
      justify-self: center;
      width: min(100%, 400px, max(240px, calc((100dvh - 400px) * 0.8)));
    }
    .cover-title { grid-area: title; align-items: flex-start; }
    .cover-actions { flex-direction: row; flex-wrap: wrap; width: auto; }
    .cover-actions .btn { white-space: nowrap; }
    .cover-foot { grid-area: foot; justify-content: space-between; align-items: flex-end; }
    .cover-foot__themes .theme-switch__legend { margin-inline: 0; }
    .cover-foot__themes .theme-switch__list { justify-content: flex-start; }
    .cover-stage { justify-content: flex-end; }
    .cover-stage__legend { margin-inline: auto 0; }
  }
}