/* ============================================================
   MOTION — Srta Realidad · premium estándar
   Reveals al scroll + microinteracciones + transiciones de página.
   TODO gated bajo prefers-reduced-motion. Sin librerías pesadas.
   ============================================================ */

/* Tokens de motion */
:root {
  --sr-dur: 0.7s;
  --sr-dur-fast: 0.28s;
  --sr-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Nota: se retiraron las cross-document View Transitions (@view-transition):
   en Chrome hacían flashear como texto los <script> inline del <head>
   (flag sr-js, JSON-LD, emojis de WP) al navegar. Los reveals y las
   microinteracciones se mantienen. */

@media (prefers-reduced-motion: no-preference) {

  /* Reveals: estado inicial → .is-in (lo añade motion.js vía IntersectionObserver).
     Gated en .sr-js: si no hay JS, el contenido se ve siempre (nunca invisible). */
  .sr-js [data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity var(--sr-dur) var(--sr-ease-out), transform var(--sr-dur) var(--sr-ease-out);
    will-change: opacity, transform;
  }
  .sr-js [data-reveal].is-in { opacity: 1; transform: none; }

  /* Reveal con stagger: cada hijo entra en cascada (--i lo fija motion.js) */
  .sr-js [data-reveal-stagger] > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s var(--sr-ease-out), transform 0.6s var(--sr-ease-out);
    transition-delay: calc(var(--i, 0) * 80ms);
  }
  .sr-js [data-reveal-stagger].is-in > * { opacity: 1; transform: none; }

  /* Hero: la firma "se escribe" (barrido izq→der) */
  .sr-hero .sr-signature-svg {
    animation: sr-sign 1.15s var(--sr-ease-out) 0.55s both;
  }
  @keyframes sr-sign {
    from { clip-path: inset(0 100% 0 0); }
    to   { clip-path: inset(0 0 0 0); }
  }

  /* Hero: imagen con flotación muy sutil */
  .sr-hero__media img { animation: sr-float 7s ease-in-out 1.5s infinite; }
  @keyframes sr-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
  }

  /* Header: se compacta y gana sombra al hacer scroll */
  .site-header {
    transition: box-shadow var(--sr-dur-fast) ease, background-color var(--sr-dur-fast) ease;
  }
  .is-scrolled .site-header {
    box-shadow: 0 6px 24px -18px rgba(93, 29, 125, 0.45);
    backdrop-filter: saturate(1.1);
  }

  /* Microinteracciones de movimiento (solo si el usuario no pide reducirlo) */
  .sr-btn { transition: transform var(--sr-dur-fast) var(--sr-ease-out), box-shadow var(--sr-dur-fast) var(--sr-ease-out), background-color var(--sr-dur-fast) ease, color var(--sr-dur-fast) ease; }
  .sr-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -14px rgba(93, 29, 125, 0.55); }
  .sr-btn--secondary:hover { transform: translateY(-2px); }

  /* Tarjetas de libro: elevación + zoom sutil de portada */
  .sr-book-card { transition: transform var(--sr-dur-fast) var(--sr-ease-out), box-shadow var(--sr-dur-fast) var(--sr-ease-out); }
  .sr-book-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px -22px rgba(93, 29, 125, 0.5); }
  .sr-book-card img { transition: transform 0.5s var(--sr-ease-out); }
  .sr-book-card:hover img { transform: scale(1.045); }
}

/* ---- Microinteracciones SIN movimiento (siempre activas, seguras con reduced-motion) ---- */

/* Enlaces de navegación: subrayado que crece desde el centro */
.main-navigation .main-nav ul li a {
  position: relative;
}
.main-navigation .main-nav ul li a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0.35em;
  width: 0;
  height: 1.5px;
  background: currentColor;
  transform: translateX(-50%);
  transition: width var(--sr-dur-fast) var(--sr-ease-out);
}
.main-navigation .main-nav ul li a:hover::after,
.main-navigation .main-nav ul li.current-menu-item a::after { width: 1.1em; }

/* Portada del libro: el badge de estado también recibe el hover del card */
.sr-book-card { overflow: hidden; }
.sr-book-card img { display: block; }

/* Botón ghost «→»: la flecha se desliza en hover (sin desplazar el layout) */
.sr-btn--ghost { position: relative; }
.sr-btn--ghost:hover { color: var(--sr-ink); }

/* Foco visible siempre por encima de cualquier animación */
.sr-btn:focus-visible, .sr-book-card:focus-visible { outline: 3px solid var(--sr-focus); outline-offset: 3px; }
