/* ═══ Обложка книги ═══
   Книга как предмет, а не картинка на фоне. Толщина набрана торцом
   страниц справа и затенением у корешка слева — это те две детали,
   по которым глаз узнаёт книгу.

   Файл общий: обложка стоит и на главной, и на странице книги.
   Двух копий быть не должно — однажды поправишь одну и забудешь вторую. */

.cover-3d{
  perspective:1600px;
  max-width:340px;
  width:100%;
  margin-inline:auto;
  padding:14px 26px 44px 14px;   /* место тени и торцу, чтобы их не срезало */
  /* Парит обёртка, а поворачивается книга. Держать и то и другое на одном
     элементе нельзя: анимация задаёт transform и перебивает :hover — тогда
     наведение просто ничего не делает. */
  animation:coverFloat 9s ease-in-out infinite;
}

@keyframes coverFloat{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(-9px)}
}

.cover-3d__book{
  position:relative;
  transform:rotateY(-12deg) rotateX(1.5deg);
  transform-origin:50% 50%;
  transition:transform .7s cubic-bezier(.2,.7,.2,1);
  /* тень собрана из трёх слоёв: контактная под корешком, мягкая от объёма
     и дальняя рассеянная — так тень выглядит светом, а не размытым пятном */
  filter:
    drop-shadow(0 2px 2px rgba(0,0,0,.34))
    drop-shadow(0 14px 22px rgba(0,0,0,.30))
    drop-shadow(0 40px 60px rgba(0,0,0,.26));
}
.cover-3d:hover{animation-play-state:paused}
.cover-3d:hover .cover-3d__book{
  transform:rotateY(-5deg) rotateX(.5deg) scale(1.02);
}

.cover-img{
  display:block;width:100%;height:auto;
  border:0;
  border-radius:1px 3px 3px 1px;   /* у корешка сгиб острее, у торца мягче */
}

/* Корешок: у левого края бумага уходит в сгиб, туда не попадает свет */
.cover-3d__spine{
  position:absolute;inset:0 auto 0 0;width:13%;
  pointer-events:none;
  background:linear-gradient(90deg,
    rgba(0,0,0,.46) 0%, rgba(0,0,0,.26) 26%,
    rgba(0,0,0,.06) 62%, transparent 100%);
  mix-blend-mode:multiply;
}

/* Торец: срез страниц. Полоски неровные — ровные читаются как штрихкод */
.cover-3d__edge{
  position:absolute;top:1.5%;bottom:1.5%;left:100%;width:13px;
  pointer-events:none;
  transform:skewY(-2.4deg);
  transform-origin:left center;
  background:
    linear-gradient(90deg, rgba(0,0,0,.30), rgba(0,0,0,0) 55%),
    repeating-linear-gradient(90deg,
      #EDE8DE 0 1px, #DAD3C6 1px 2px, #E6E1D6 2px 4px);
  border-radius:0 2px 2px 0;
}

/* Блик: одна широкая полоса света поперёк, как от окна */
.cover-3d__gloss{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(104deg,
    transparent 30%, rgba(255,255,255,.13) 46%,
    rgba(255,255,255,.05) 54%, transparent 66%);
  mix-blend-mode:screen;
  border-radius:1px 3px 3px 1px;
}

@media (max-width:960px){
  .cover-3d{max-width:264px;padding-bottom:36px}
  .cover-3d__edge{width:10px}
}

@media (max-width:640px){
  /* На телефоне разворот меньше: на узком экране сильный наклон
     съедает ширину обложки и мешает читать название */
  .cover-3d__book{transform:rotateY(-7deg)}
  .cover-3d{animation-duration:11s}
}

@media (prefers-reduced-motion:reduce){
  .cover-3d{animation:none}
  .cover-3d__book{transition:none}
  .cover-3d:hover .cover-3d__book{transform:rotateY(-12deg) rotateX(1.5deg)}
}