.scene {
  width: 260px;
  height: 360px;
  perspective: 1200px;
}

.book {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 1s ease;
  cursor: pointer;
}

.book:hover {
  transform: rotateY(-35deg) rotateX(10deg);
}

.face,
.side {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}

/* CAPA */
.cover {
  transform: rotateY(0deg) translateZ(20px);
}

/* VERSO */
.back {
  transform: rotateY(180deg) translateZ(20px);
}

/* LATERAL ESQUERDA (LOMBADA) */
.spine {
  width: 40px;
  left: 0;
  transform: rotateY(-90deg) translateZ(20px);
  background: linear-gradient(to right, #111, #333);
}

/* LATERAL DIREITA (PÁGINAS) */
.pages {
  width: 40px;
  right: 0;
  transform: rotateY(90deg) translateZ(20px);
  background: repeating-linear-gradient(
    to bottom,
    #f2f2f2,
    #f2f2f2 2px,
    #e5e5e5 3px
  );
}

/* TOPO */
.top {
  height: 40px;
  transform: rotateX(90deg) translateZ(20px);
  background: #ddd;
}

/* BASE */
.bottom {
  height: 40px;
  bottom: 0;
  transform: rotateX(-90deg) translateZ(20px);
  background: #ccc;
}

.book::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.25);
  filter: blur(20px);
  transform: translateZ(-40px);
}

.book {
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0% { transform: rotateY(-20deg) rotateX(8deg); }
  50% { transform: rotateY(-30deg) rotateX(12deg); }
  100% { transform: rotateY(-20deg) rotateX(8deg); }
}

.book-content {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.book-content .text {
  max-width: 50%;
}

/* =========================
   Responsive patch (3D book)
   ========================= */

/* Scene com tamanho fluido e limite por viewport */
.scene {
  width: clamp(180px, 42vw, 260px);
  height: clamp(250px, 58vw, 360px);
  perspective: clamp(700px, 120vw, 1200px);
}

/* Mantém proporção do "miolo" */
.face,
.side {
  width: 100%;
  height: 100%;
}

/* Lombada e páginas escaláveis */
.spine,
.pages {
  width: clamp(22px, 6vw, 40px);
}

/* Top/bottom escaláveis */
.top,
.bottom {
  height: clamp(22px, 6vw, 40px);
}

/* Ajusta profundidade do livro proporcional (translateZ) */
.cover { transform: rotateY(0deg) translateZ(clamp(12px, 3vw, 20px)); }
.back  { transform: rotateY(180deg) translateZ(clamp(12px, 3vw, 20px)); }

.spine {
  transform: rotateY(-90deg) translateZ(clamp(12px, 3vw, 20px));
}

.pages {
  transform: rotateY(90deg) translateZ(clamp(12px, 3vw, 20px));
}

.top {
  transform: rotateX(90deg) translateZ(clamp(12px, 3vw, 20px));
}

.bottom {
  transform: rotateX(-90deg) translateZ(clamp(12px, 3vw, 20px));
}

/* Sombra responsiva */
.book::after {
  filter: blur(clamp(12px, 3vw, 20px));
  transform: translateZ(calc(clamp(12px, 3vw, 20px) * -2));
}

/* Hover só em devices com hover real (desktop/notebook) */
@media (hover: hover) and (pointer: fine) {
  .book:hover {
    transform: rotateY(-35deg) rotateX(10deg);
  }
}

/* Touch: sem hover, animação mais leve e controle por tap se quiser */
@media (hover: none) and (pointer: coarse) {
  .book {
    animation-duration: 7.5s;
  }
}

/* Layout do texto ao lado: vira stack no mobile */
.book-content {
  display: flex;
  gap: clamp(12px, 2.5vw, 24px);
  align-items: center;
}

.book-content .text {
  max-width: 50%;
}

@media (max-width: 860px) {
  .book-content .text {
    max-width: 56%;
  }
}

@media (max-width: 640px) {
  .book-content {
    flex-direction: column;
    align-items: flex-start;
  }

  .book-content .text {
    max-width: 100%;
  }
}

/* Mobile pequeno: reduz inclinação base da animação pra não cortar */
@media (max-width: 380px) {
  @keyframes float {
    0% { transform: rotateY(-16deg) rotateX(6deg); }
    50% { transform: rotateY(-22deg) rotateX(10deg); }
    100% { transform: rotateY(-16deg) rotateX(6deg); }
  }
}