/* ============================================================
   Animaciones sutiles (detalles de «vidilla»)
   - Todo respeta «reducir movimiento» del sistema (al final).
   - Lo que aparece al hacer scroll solo se oculta si motion.js
     está activo (html.rm-motion), así sin JS todo se ve normal.
   ============================================================ */

/* 1 · Estadísticas del Archivo: icono que se dibuja una vez */
.archive-stats > div { flex-direction: row; align-items: center; gap: .9rem; }
.archive-stats .stat-ico { width: 30px; height: 30px; flex: none; color: var(--c-olive); }
.archive-stats .stat-txt { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.rm-motion .archive-stats .stat-ico * { stroke-dasharray: 120; stroke-dashoffset: 120; }
.rm-motion .archive-stats.is-in .stat-ico * { animation: rmDraw 1.1s ease-out forwards; }
.rm-motion .archive-stats.is-in > div:nth-child(2) .stat-ico * { animation-delay: .15s; }
.rm-motion .archive-stats.is-in > div:nth-child(3) .stat-ico * { animation-delay: .3s; }
.rm-motion .archive-stats.is-in > div:nth-child(4) .stat-ico * { animation-delay: .45s; }
@keyframes rmDraw { to { stroke-dashoffset: 0; } }

/* 2 · Botón «Colaborar»: el corazón late y salen corazoncitos al pulsar */
.btn-collaborate { position: relative; transition: background .15s, transform .2s; }
.btn-collaborate:hover { transform: translateY(-1px); }
.btn-collaborate svg { transform-origin: center; }
.btn-collaborate:hover svg { animation: rmBeat 1s ease-in-out infinite; }
@keyframes rmBeat { 0%,100% { transform: scale(1); } 15% { transform: scale(1.25); } 30% { transform: scale(1); } 45% { transform: scale(1.15); } 60% { transform: scale(1); } }
.rm-burst { position: fixed; pointer-events: none; z-index: 9999; }
.rm-burst i { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; color: var(--c-terracotta); animation: rmFly .8s ease-out forwards; }
.rm-burst i svg { width: 100%; height: 100%; fill: currentColor; display: block; }
@keyframes rmFly { 0% { opacity: 1; transform: translate(0,0) scale(.6); } 100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(1); } }

/* 3 · Pantalla de «Gracias»: rebote + un latido */
.don-done-icon { animation: rmPop .6s cubic-bezier(.3,1.6,.5,1) both; }
.don-done-icon svg { animation: rmBeat 1.2s .55s ease-in-out 1; transform-origin: center; }
.don-pay-done h4 { animation: rmUp .5s .25s both; }
@keyframes rmPop { 0% { transform: scale(0); } 100% { transform: scale(1); } }
@keyframes rmUp { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: none; } }

/* 4 · Portadas: se elevan un poco y cruza un brillo */
.book-cover::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
    background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.32) 50%, transparent 70%);
    transform: translateX(-120%); transition: transform .7s ease;
}
.book-card:hover .book-cover::after { transform: translateX(120%); }
.book-cover img { transition: transform .45s cubic-bezier(.2,.7,.3,1), opacity .4s ease; }
.book-card:hover .book-cover img { transform: scale(1.03); }

/* 5 · Aparición al bajar (tarjetas y bloques) */
.rm-motion .rm-reveal { opacity: 0; transform: translateY(14px); }
.rm-motion .rm-reveal.is-in { animation: rmUp .55s ease-out forwards; animation-delay: var(--d, 0s); }

/* 6 · Botón «Descargar»: la flecha baja; al pulsar, ✓ */
.btn-download .rm-dl-ico { display: inline-block; position: relative; width: 1em; height: 1em; overflow: hidden; vertical-align: -0.12em; }
.btn-download .rm-dl-ico svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.btn-download:hover .rm-dl-ico .rm-arrow, .book-card:hover .btn-download .rm-arrow { animation: rmDrop .9s ease-in-out infinite; }
@keyframes rmDrop { 0%,100% { transform: translateY(0); } 50% { transform: translateY(22%); } }
.btn-download .rm-check { opacity: 0; transform: scale(.4); }
.btn-download.is-done .rm-arrow { opacity: 0; animation: none; }
.btn-download.is-done .rm-check { opacity: 1; transform: scale(1); transition: all .35s cubic-bezier(.3,1.6,.5,1); }

/* 7 · «Copiar»: ✓ «¡Copiado!» con un saltito */
.don-instr-copy.is-copied { background: var(--c-sage-soft); border-color: var(--c-sage); color: var(--c-olive-dark); animation: rmPopSm .35s cubic-bezier(.3,1.6,.5,1); }
.don-instr-copy.is-copied::before { content: "✓ "; }
@keyframes rmPopSm { 0% { transform: scale(.92); } 100% { transform: scale(1); } }

/* 8 · Buscadores: borde verde y la lupa gira un poco */
.hero-search input, .search-page input[type="search"], .bib-search input[type="search"] { transition: border-color .25s, box-shadow .25s; }
.hero-search input:focus { box-shadow: 0 0 0 4px rgba(90,112,82,.14); }
.hero-search-icon svg { transition: transform .4s cubic-bezier(.3,1.4,.5,1), color .25s; }
.hero-search:focus-within .hero-search-icon svg { transform: rotate(-12deg) scale(1.12); color: var(--c-olive); }
input[type="search"]:focus { outline: none; border-color: var(--c-olive) !important; box-shadow: 0 0 0 4px rgba(90,112,82,.14); }

/* 9 · Modo oscuro: el icono gira al cambiar (luna ↔ sol) */
#dark-toggle svg { transition: transform .5s cubic-bezier(.3,1.4,.5,1); }
#dark-toggle.is-spin svg { transform: rotate(-200deg); }

/* 10 · Logo: el globo gira una vez (una vez por visita) */
.brand-logo.rm-spin svg ellipse:last-of-type { transform-origin: 16px 16px; animation: rmGlobe 1.6s ease-in-out 1; }
@keyframes rmGlobe { 0% { transform: scaleX(1); } 50% { transform: scaleX(-1); } 100% { transform: scaleX(1); } }

/* 11 · Etiqueta «Nuevo»: un brillo la cruza una vez */
.book-badge-new { overflow: hidden; }
.book-badge-new::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.7) 50%, transparent 65%);
    transform: translateX(-120%);
}
.book-card.is-in .book-badge-new::after, .rm-motion-off .book-badge-new::after { animation: rmShine 1.2s .4s ease-in-out 1; }
@keyframes rmShine { to { transform: translateX(120%); } }

/* 12 · Portadas mientras cargan: reflejo suave */
.book-cover.is-loading {
    background: linear-gradient(90deg, var(--c-bg-warm) 25%, #f7f3ea 50%, var(--c-bg-warm) 75%);
    background-size: 200% 100%; animation: rmShimmer 1.4s linear infinite;
}
body.dark .book-cover.is-loading { background: linear-gradient(90deg, var(--c-surface-alt) 25%, var(--c-surface) 50%, var(--c-surface-alt) 75%); background-size: 200% 100%; }
.book-cover.is-loading img { opacity: 0; }
@keyframes rmShimmer { to { background-position: -200% 0; } }

/* 13 · Aviso de confirmación */
.rm-toast {
    position: fixed; left: 50%; bottom: 24px; z-index: 10000;
    display: flex; align-items: center; gap: .6rem;
    max-width: calc(100vw - 32px); padding: .8rem 1.1rem; border-radius: 10px;
    background: var(--c-ink); color: #f9f7ef; font-size: .92rem;
    box-shadow: 0 10px 30px rgba(45,61,44,.25);
    transform: translate(-50%, 16px); opacity: 0; transition: opacity .3s, transform .3s;
}
.rm-toast.is-in { opacity: 1; transform: translate(-50%, 0); }
.rm-toast svg { width: 18px; height: 18px; flex: none; color: var(--c-sage); }
body.dark .rm-toast { background: #e8e3d2; color: #1c241b; }
body.dark .rm-toast svg { color: #3f5138; }

/* 14 · Enlaces del menú y del pie: línea fina que se dibuja */
.footer-col a, .footer-legal a, .header-more-menu a {
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat; background-position: 0 100%; background-size: 0 1px;
    transition: background-size .3s ease, color .15s;
}
.footer-col a { align-self: flex-start; }
.footer-col a:hover, .footer-legal a:hover { background-size: 100% 1px; text-decoration: none; }
.header-more-menu a { background-position: .75rem calc(100% - .35rem); }
.header-more-menu a:hover { background-size: calc(100% - 1.5rem) 1px; }

/* Reducir movimiento: sin animaciones */
@media (prefers-reduced-motion: reduce) {
    .rm-motion .rm-reveal, .rm-motion .archive-stats .stat-ico * { opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}