/* ==========================================================================
   Lonja · woo.css · kit WOO (gramática de motion de la casa)
   Reglas: SOLO transform / opacity / filter · 2 curvas (--ex, --ex-ui) ·
   3 duraciones (160 / 320 / 640 ms) · sin bounce · una set-piece por pantalla
   · todo degrada a estático · gates: prefers-reduced-motion y (hover: none).
   Efectos: WOO-CINE (entrada de vista) · WOO-LETRAS (título) · WOO-CIFRAS
   (contadores, en woo.js) · WOO-ANCLA (sombra al hacer scroll, en woo.js) ·
   WOO-PASE (View Transitions) · hoja "Más" · aurora del hero · skeletons ·
   toasts · reveal genérico [data-woo].
   ========================================================================== */
@keyframes woo-cine   { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes woo-letras { from { opacity: 0; transform: translateY(8px); }  to { opacity: 1; transform: none; } }
@keyframes woo-subir  { from { transform: translateY(28px); opacity: .5; } to { transform: none; opacity: 1; } }
@keyframes woo-fundir { from { opacity: 0; } to { opacity: 1; } }
@keyframes woo-fundir-fuera { from { opacity: 1; } to { opacity: 0; } }
@keyframes woo-aurora { from { transform: translate3d(-4%, -3%, 0) rotate(0deg) scale(1); }
                        to   { transform: translate3d(5%, 4%, 0) rotate(8deg) scale(1.12); } }
@keyframes woo-brillo { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* WOO-CINE: cada vista entra (fill backwards: al acabar NO queda transform → los
   position:fixed de las páginas (modales) siguen anclados al viewport) */
main { animation: woo-cine var(--t-ui) var(--ex) backwards; }

/* WOO-LETRAS ligero: el título de página y hasta 3 líneas del hero, escalonadas */
main > h2:first-of-type, .hero-titulo .linea, .acceso-hero h1 .linea { animation: woo-letras var(--t-micro) var(--ex) backwards; animation-delay: 60ms; }
.hero-titulo .linea:nth-child(2) { animation-delay: 140ms; }
.hero-titulo .linea:nth-child(3) { animation-delay: 220ms; }

/* aurora del hero: 16 s, muy sutil, solo transform (el blur es estático) */
.hero-aurora { animation: woo-aurora 16s var(--ex-ui) infinite alternate; }

/* hoja "Más" (y cualquier details > .hoja) */
details[open] > .hoja > .hoja-panel { animation: woo-subir var(--t-ui) var(--ex) backwards; }
details[open] > .hoja > .hoja-fondo { animation: woo-fundir var(--t-ui) var(--ex-ui) backwards; }

/* reveal genérico: <div data-woo> aparece al entrar en viewport (woo.js añade .woo-visto).
   Solo se oculta cuando el JS ya está listo (.woo-listo en <html>) → sin JS todo se ve. */
.woo-listo [data-woo] { opacity: 0; transform: translateY(10px);
                        transition: opacity var(--t-ui) var(--ex), transform var(--t-ui) var(--ex); }
.woo-listo [data-woo].woo-visto { opacity: 1; transform: none; }

/* skeletons (solo donde hay fetch JS: planning, excel, precios) */
.skeleton { position: relative; overflow: hidden; background: var(--superficie-2); border-radius: 6px; color: transparent !important;
            min-height: 1em; pointer-events: none; }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
                   background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
                   animation: woo-brillo 1.4s var(--ex-ui) infinite; }
.skeleton-fila { height: 14px; margin: 8px 0; }
.skeleton-bloque { height: 120px; border-radius: var(--r2); }

/* toasts (WOO.toast en woo.js) */
.toast { animation: woo-cine var(--t-ui) var(--ex) backwards;
         transition: opacity var(--t-ui) var(--ex-ui), transform var(--t-ui) var(--ex-ui); }
.toast.fuera { opacity: 0; transform: translateY(6px); }

/* WOO-PASE: transición entre páginas si el navegador la tiene; si no, nada */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: woo-fundir-fuera var(--t-ui) var(--ex-ui) both; }
::view-transition-new(root) { animation: woo-fundir var(--t-ui) var(--ex-ui) both; }

/* ---- GATE: movimiento reducido → todo estático, contadores en su valor final ---- */
@media (prefers-reduced-motion: reduce) {
  main, main > h2:first-of-type, .hero-titulo .linea, .acceso-hero h1 .linea, .hero-aurora, .toast, .skeleton::after,
  details[open] > .hoja > .hoja-panel, details[open] > .hoja > .hoja-fondo { animation: none !important; }
  .woo-listo [data-woo] { opacity: 1 !important; transform: none !important; transition: none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  *, *::before, *::after { transition-duration: 0ms !important; }
}