/* ============================
   flipbook.css – Motor flip
   Tótem Alimentaria 2026
   ============================ */

/* Contenedor principal del flipbook */
#flipbook-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 2400px;
  perspective-origin: center center;
  position: relative;
}

/* El libro abierto (doble página) */
#flipbook {
  position: relative;
  display: flex;
  align-items: stretch;
  height: 100%;
  max-height: calc(100vh - 60px);
  /* aspect-ratio de doble página A4: 2*(794/1123) ≈ 1.413 */
  aspect-ratio: 1.413;
  /* Limitar el ancho también para que no sea más ancho que el área */
  max-width: min(calc((100vh - 60px) * 1.413), calc(100vw - 180px));
  box-shadow:
    0 40px 100px rgba(0,0,0,0.7),
    0 0 0 1px rgba(255,255,255,0.06);
  border-radius: 3px 3px 0 0;
}

/* Página izquierda (par) */
.page-left,
/* Página derecha (impar) */
.page-right {
  position: relative;
  width: 50%;
  height: 100%;
  overflow: hidden;
  background: #fff;
}

.page-left {
  border-radius: 4px 0 0 4px;
  border-right: 1px solid rgba(0,0,0,0.12);
  box-shadow: inset -6px 0 20px rgba(0,0,0,0.08);
}

.page-right {
  border-radius: 0 4px 4px 0;
  box-shadow: inset 6px 0 20px rgba(0,0,0,0.08);
}

.page-left img,
.page-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

/* ─── Animación de FLIP ─── */

/* Hoja volando al girar */
.flip-page {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  transform-origin: left center;
  transform-style: preserve-3d;
  z-index: 30;
  pointer-events: none;
}

.flip-page.flip-right {
  left: 50%;
  transform-origin: left center;
}

.flip-page.flip-left {
  left: 0;
  transform-origin: right center;
}

/* Cara frontal / trasera de la hoja */
.flip-front,
.flip-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  background: #fff;
}

.flip-back {
  transform: rotateY(180deg);
}

.flip-front img,
.flip-back img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Sombra de página volando */
.flip-shadow {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(0,0,0,0.0) 0%,
    rgba(0,0,0,0.15) 50%,
    rgba(0,0,0,0.0) 100%
  );
  pointer-events: none;
  z-index: 5;
}

.page-left .flip-shadow {
  background: linear-gradient(to left,
    rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.18) 100%);
}

/* Efecto de curvatura en la página durante el flip */
@keyframes flipForward {
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(-180deg); }
}

@keyframes flipBackward {
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(180deg); }
}

.flip-page.animating-forward {
  animation: flipForward 0.65s cubic-bezier(0.455, 0.03, 0.515, 0.955) forwards;
}

.flip-page.animating-backward {
  animation: flipBackward 0.65s cubic-bezier(0.455, 0.03, 0.515, 0.955) forwards;
}

/* ─── Página única (portada / contratapa) ─── */

.single-page-mode .page-right {
  display: none;
}

.single-page-mode #flipbook {
  aspect-ratio: 0.707; /* una sola página A4 */
  width: auto;
}

.single-page-mode .page-left {
  width: 100%;
  border-radius: 4px;
  border-right: none;
}

/* ─── Lomo central del libro ─── */
.book-spine {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 6px;
  transform: translateX(-50%);
  background: linear-gradient(
    to right,
    rgba(0,0,0,0.18) 0%,
    rgba(0,0,0,0.04) 40%,
    rgba(0,0,0,0.04) 60%,
    rgba(0,0,0,0.18) 100%
  );
  z-index: 25;
  pointer-events: none;
}

/* ─── Overlay de swipe (feedback visual) ─── */
.swipe-hint {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255,209,0,0.35);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 40;
}

.swipe-hint.left  { right: 60px; }
.swipe-hint.right { left: 60px; }

.swipe-hint.visible {
  opacity: 1;
}

/* ─── Loading placeholder ─── */
.page-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #f5f5f5 25%, #ebebeb 50%, #f5f5f5 75%);
  background-size: 200% 200%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ─── Zoom ─── */
#flipbook.zoomed {
  cursor: zoom-out;
  transform-origin: center center;
}