/* =================================================================
   BOOK LANDING · ANIMATIONS
   ──────────────────────────────────────────────────────────────────
   Keyframes + utilidades de reveal. Respeta prefers-reduced-motion
   (ya neutralizado en reset.css).
   ================================================================= */

/* =============================================================
   KEYFRAMES
   ============================================================= */

/* Libro flotando en el hero */
@keyframes bl-float {
  0%, 100% {
    transform: rotateY(-22deg) rotateX(6deg) translateY(0);
  }
  50% {
    transform: rotateY(-22deg) rotateX(6deg) translateY(-14px);
  }
}

/* Sombra del libro — se reduce cuando el libro sube */
@keyframes bl-float-shadow {
  0%, 100% {
    opacity: 0.55;
    transform: rotateX(80deg) translateZ(-20px) scale(1);
  }
  50% {
    opacity: 0.30;
    transform: rotateX(80deg) translateZ(-20px) scale(0.85);
  }
}

/* Fade-in genérico */
@keyframes bl-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Slide-up + fade-in (entradas de sección) */
@keyframes bl-slide-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Barrido de luz sobre el libro */
@keyframes bl-shine {
  0%   { transform: translateX(-120%) skewX(-20deg); }
  60%  { transform: translateX(220%)  skewX(-20deg); }
  100% { transform: translateX(220%)  skewX(-20deg); opacity: 0; }
}


/* =============================================================
   SCROLL REVEAL (driven by IntersectionObserver in JS)
   ──────────────────────────────────────────────────────────────
   Estado inicial: oculto, empujado hacia abajo.
   Estado .is-visible: opacity 1, translateY 0.
   Cualquier elemento con .bl-reveal será animado al entrar en viewport.

   Variants:
   - .bl-reveal--delay-1/2/3 = escalonado para cascada
   - .bl-reveal--left / --right = entrada lateral
   ============================================================= */

.book-landing .bl-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--bl-duration-slow) var(--bl-ease-out),
    transform var(--bl-duration-slow) var(--bl-ease-out);
  will-change: opacity, transform;
}

.book-landing .bl-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Variantes de dirección */
.book-landing .bl-reveal--left {
  transform: translateX(-32px);
}
.book-landing .bl-reveal--right {
  transform: translateX(32px);
}
.book-landing .bl-reveal--left.is-visible,
.book-landing .bl-reveal--right.is-visible {
  transform: translateX(0);
}

/* Cascada (delay manual para grupos) */
.book-landing .bl-reveal--delay-1 { transition-delay: 100ms; }
.book-landing .bl-reveal--delay-2 { transition-delay: 200ms; }
.book-landing .bl-reveal--delay-3 { transition-delay: 300ms; }
.book-landing .bl-reveal--delay-4 { transition-delay: 400ms; }

/* =============================================================
   ANIMACIONES ADICIONALES (animations.js)
   ============================================================= */

/* ── Shine sweep sobre el libro 3D ───────────────────────────── */
.book-landing .bl-book3d--image {
  overflow: visible;
}

.book-landing .bl-book3d--image .bl-book3d__cover-img {
  position: relative;
  overflow: hidden;
}

/* Pseudo-elemento de luz — activado por JS con .is-shining */
.book-landing .bl-book3d--image.is-shining .bl-book3d__cover-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent      30%,
    rgba(255,255,255,0.35) 50%,
    transparent      70%
  );
  animation: bl-shine 0.65s var(--bl-ease-out) forwards;
  pointer-events: none;
  border-radius: inherit;
}

/* ── Hero entrance — fade + slide de cada bloque ─────────────── */
/* Por defecto: invisible y empujado */
.book-landing .bl-hero__badges,
.book-landing .bl-hero__tagline,
.book-landing .bl-hero__title,
.book-landing .bl-hero__desc,
.book-landing .bl-hero__cta,
.book-landing .bl-hero__meta,
.book-landing .bl-hero__chips,
.book-landing .bl-hero__visual {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.55s var(--bl-ease-out),
    transform 0.55s var(--bl-ease-out);
}

/* Cuando JS añade .is-hero-ready, se activan con delay escalonado */
.book-landing .bl-hero.is-hero-ready .bl-hero__badges  { opacity: 1; transform: none; transition-delay: 0ms;   }
.book-landing .bl-hero.is-hero-ready .bl-hero__tagline { opacity: 1; transform: none; transition-delay: 60ms;  }
.book-landing .bl-hero.is-hero-ready .bl-hero__title   { opacity: 1; transform: none; transition-delay: 120ms; }
.book-landing .bl-hero.is-hero-ready .bl-hero__desc    { opacity: 1; transform: none; transition-delay: 200ms; }
.book-landing .bl-hero.is-hero-ready .bl-hero__cta     { opacity: 1; transform: none; transition-delay: 280ms; }
.book-landing .bl-hero.is-hero-ready .bl-hero__meta    { opacity: 1; transform: none; transition-delay: 340ms; }
.book-landing .bl-hero.is-hero-ready .bl-hero__chips   { opacity: 1; transform: none; transition-delay: 390ms; }
.book-landing .bl-hero.is-hero-ready .bl-hero__visual  {
  opacity: 1;
  transform: none;
  transition-delay: 150ms;
  transition-duration: 0.7s;
}

/* Respeta prefers-reduced-motion: muestra todo inmediatamente */
@media (prefers-reduced-motion: reduce) {
  .book-landing .bl-hero__badges,
  .book-landing .bl-hero__tagline,
  .book-landing .bl-hero__title,
  .book-landing .bl-hero__desc,
  .book-landing .bl-hero__cta,
  .book-landing .bl-hero__meta,
  .book-landing .bl-hero__chips,
  .book-landing .bl-hero__visual {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── Count-up: resalta el número mientras anima ──────────────── */
@keyframes bl-num-pulse {
  0%   { color: var(--bl-color-primary); }
  100% { color: var(--bl-color-primary); }
}

/* ── Hover lift extra en benefit cards ───────────────────────── */
@media (hover: hover) {
  .book-landing .bl-card--lift {
    will-change: transform, box-shadow;
  }
}

/* ── Parallax: pausa la animación float mientras JS controla ──── */
.book-landing .bl-book3d[style*="rotateY"] {
  animation-play-state: paused;
}