/* Paso de páginas con perspectiva y doble cara.
   Independiente del arte final: el contenido sigue viniendo de data/album.js. */

.book {
  isolation: isolate;
}
.book.turning {
  user-select: none;
}
.book.turning > .sheet {
  pointer-events: none;
}
.turn-layer {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  perspective: 2000px;
  transform-style: preserve-3d;
}
.turn-leaf {
  position: absolute;
  inset-block: 0;
  width: 50%;
  transform-style: preserve-3d;
  will-change: transform;
  animation-duration: 1080ms;
  animation-timing-function: cubic-bezier(.44, .02, .18, 1);
  animation-fill-mode: both;
}
.turn-layer.forward .turn-leaf {
  left: 50%;
  transform-origin: 0% 50%;
  animation-name: paper-turn-forward;
}
.turn-layer.backward .turn-leaf {
  left: 0;
  transform-origin: 100% 50%;
  animation-name: paper-turn-backward;
}
.turn-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  background: #e6e0cf;
  box-shadow: 0 0 2px #0008;
}
.turn-front {
  transform: rotateY(0deg) translateZ(1px);
}
.turn-back {
  transform: rotateY(180deg) translateZ(1px);
}
.turn-face > .sheet {
  width: 100%;
  height: 100%;
  flex: none;
  aspect-ratio: auto;
  overflow: hidden;
  pointer-events: none;
}
.turn-face > .sheet .slot {
  pointer-events: none;
}
.turn-front::after, .turn-back::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.turn-layer.forward .turn-front::after {
  background: linear-gradient(90deg, #00000036, transparent 21%, #ffffff23 64%, #00000055);
  animation: paper-light 1080ms ease-in-out both;
}
.turn-layer.backward .turn-front::after {
  background: linear-gradient(270deg, #00000036, transparent 21%, #ffffff23 64%, #00000055);
  animation: paper-light 1080ms ease-in-out both;
}
.turn-back::after {
  background: linear-gradient(90deg, #0000004f, transparent 29%, #ffffff2b 66%, #00000026);
}
.turn-shadow {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  animation: paper-cast-shadow 1080ms ease-in-out both;
}
.turn-layer.forward .turn-shadow {
  left: 0;
  background: linear-gradient(270deg, #000000a1 0%, #0000004b 12%, transparent 67%);
}
.turn-layer.backward .turn-shadow {
  right: 0;
  background: linear-gradient(90deg, #000000a1 0%, #0000004b 12%, transparent 67%);
}
@keyframes paper-turn-forward {
  0%   {transform: rotateY(0deg) rotateZ(0deg);}
  18%  {transform: rotateY(-20deg) rotateZ(-.35deg);}
  48%  {transform: rotateY(-84deg) rotateZ(-.7deg);}
  65%  {transform: rotateY(-129deg) rotateZ(-.5deg);}
  85%  {transform: rotateY(-167deg) rotateZ(-.15deg);}
  100% {transform: rotateY(-180deg) rotateZ(0deg);}
}
@keyframes paper-turn-backward {
  0%   {transform: rotateY(0deg) rotateZ(0deg);}
  18%  {transform: rotateY(20deg) rotateZ(.35deg);}
  48%  {transform: rotateY(84deg) rotateZ(.7deg);}
  65%  {transform: rotateY(129deg) rotateZ(.5deg);}
  85%  {transform: rotateY(167deg) rotateZ(.15deg);}
  100% {transform: rotateY(180deg) rotateZ(0deg);}
}
@keyframes paper-cast-shadow {
  0%, 100% {opacity: 0;}
  39%, 60% {opacity: .8;}
}
@keyframes paper-light {
  0%, 100% {opacity: .32;}
  45%, 62% {opacity: 1;}
}
/* En móvil, la página se pliega sobre el borde del libro.
   El siguiente contenido queda visible por debajo durante el giro. */
@media (max-width:760px) {
  .book.turning {overflow: hidden;}
  .turn-layer .turn-leaf {
    width: 100%;
    left: 0;
    right: 0;
  }
  .turn-layer.forward .turn-leaf {left: 0;}
  .turn-layer.backward .turn-leaf {left: 0;}
  .turn-layer .turn-shadow {
    left: 0;
    width: 100%;
  }
}
@media (prefers-reduced-motion:reduce) {
  .turn-layer, .turn-leaf, .turn-shadow, .turn-front::after {
    animation: none !important;
  }
}

/* Versión ligera: solo se animan dos texturas WebP y sombras GPU. */
.turn-layer{perspective:1600px;contain:layout style}
.turn-leaf{animation-duration:820ms;animation-timing-function:cubic-bezier(.38,.05,.18,1);backface-visibility:hidden}
.turn-face{overflow:hidden;box-shadow:none}
.turn-face>img,.turn-hold>img{display:block;width:100%;height:100%;object-fit:fill}
.turn-hold{position:absolute;inset-block:0;left:0;width:50%;z-index:1;overflow:hidden}
.turn-layer.backward .turn-hold{left:50%}
.turn-shadow{animation-duration:820ms;z-index:2}
.turn-leaf{z-index:3}
.turn-layer.forward .turn-front::after,.turn-layer.backward .turn-front::after{animation-duration:820ms}
.book.turn-loading > .sheet{pointer-events:none}
.book.turn-loading .slot-wrap{pointer-events:none}
@keyframes paper-turn-forward{
  0%{transform:rotateY(0deg)}
  36%{transform:rotateY(-58deg)}
  64%{transform:rotateY(-124deg)}
  100%{transform:rotateY(-180deg)}
}
@keyframes paper-turn-backward{
  0%{transform:rotateY(0deg)}
  36%{transform:rotateY(58deg)}
  64%{transform:rotateY(124deg)}
  100%{transform:rotateY(180deg)}
}
@media(max-width:760px){.turn-hold{display:none}.turn-layer{perspective:1100px}}