/* ================================================================ FRAN96MC.ES — CAPA DE MOVIMIENTO COMPARTIDA includes/movimiento.css — catálogo de micro-interacciones. Requiere includes/tokens.css (duraciones --dur-*, easings --ease-*, escala z --z-*). Va con includes/movimiento.js (toasts, contadores, pestañas), pero todo lo de esta hoja es usable sin JS. Principios (Fase 4 de la reforma, sept. 2026): · Solo transform y opacity (clip-path en los revelados de banda). · Entrar con ease-out, salir con ease-in y más corto y más sutil. · Uso diario: --dur-1..3 (120-240 ms). Entradas: --dur-4 (400). Portada y escaparate: --dur-5..6. Nada de UI por encima de 500 ms. · El contenido es visible sin JS: las entradas se activan con la clase .js en , nunca ocultan por defecto. · Movimiento reducido: tokens.css pone las duraciones a 0; aquí, además, se apagan bucles y desplazamientos. Prefijo de clases: .mv- ================================================================ */ /* ---------------------------------------------------------------- 1) RESPUESTA AL GESTO — botones, enlaces-botón, filas, chips ---------------------------------------------------------------- */ .mv-pulsa{ transition:transform var(--dur-1) var(--ease-out-quart), background-color var(--dur-2) var(--ease-out-quart), border-color var(--dur-2) var(--ease-out-quart), color var(--dur-2) var(--ease-out-quart), box-shadow var(--dur-2) var(--ease-out-quart); } .mv-pulsa:hover{transform:translateY(-1px)} .mv-pulsa:active{transform:translateY(0) scale(.98);transition-duration:var(--dur-1)} .mv-pulsa:focus-visible{outline:3px solid var(--foco);outline-offset:2px} /* Fila o bloque que se "eleva" al pasar (tarjetas, filas de índice) */ .mv-eleva{transition:transform var(--dur-2) var(--ease-out-quart),box-shadow var(--dur-2) var(--ease-out-quart)} .mv-eleva:hover{transform:translateY(-2px);box-shadow:var(--sombra-2)} /* Icono que se desplaza 2 px hacia la acción (flechas "Abrir →") */ .mv-empuja .mv-empuja__icono{display:inline-block;transition:transform var(--dur-2) var(--ease-out-quart)} .mv-empuja:hover .mv-empuja__icono, .mv-empuja:focus-visible .mv-empuja__icono{transform:translateX(2px)} /* ---------------------------------------------------------------- 2) MODAL — . Entra con escala .96→1 y opacidad (240 ms, ease-out); sale solo con opacidad (180 ms, ease-in). @starting-style + allow-discrete animan también la apertura/cierre nativos de ; en navegadores sin soporte el diálogo simplemente aparece. ---------------------------------------------------------------- */ .mv-modal{ opacity:0; transform:scale(.96) translateY(6px); transition:opacity var(--dur-2) ease-in, transform var(--dur-2) ease-in, display var(--dur-2) allow-discrete, overlay var(--dur-2) allow-discrete; } .mv-modal[open]{ opacity:1; transform:none; transition:opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out), display var(--dur-3) allow-discrete, overlay var(--dur-3) allow-discrete; } @starting-style{ .mv-modal[open]{opacity:0;transform:scale(.96) translateY(6px)} } .mv-modal::backdrop{ background:color-mix(in srgb,var(--n-950) 55%,transparent); opacity:0; transition:opacity var(--dur-2) ease-in,display var(--dur-2) allow-discrete,overlay var(--dur-2) allow-discrete; } .mv-modal[open]::backdrop{opacity:1;transition:opacity var(--dur-3) var(--ease-out),display var(--dur-3) allow-discrete,overlay var(--dur-3) allow-discrete} @starting-style{.mv-modal[open]::backdrop{opacity:0}} /* Panel lateral (cajón): mismo contrato, entra por transform desde el borde */ .mv-cajon{ opacity:0;transform:translateX(24px); transition:opacity var(--dur-2) ease-in,transform var(--dur-2) ease-in,display var(--dur-2) allow-discrete,overlay var(--dur-2) allow-discrete; } .mv-cajon[open]{opacity:1;transform:none;transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out),display var(--dur-3) allow-discrete,overlay var(--dur-3) allow-discrete} @starting-style{.mv-cajon[open]{opacity:0;transform:translateX(24px)}} /* ---------------------------------------------------------------- 3) DESPLEGABLE — menús, popovers, sugerencias. Nace 6 px arriba y transparente; sale en 120 ms solo con opacidad. Se usa con el atributo hidden (JS quita/pone) o con [popover]. ---------------------------------------------------------------- */ .mv-desplegable{ opacity:0;transform:translateY(-6px); transition:opacity var(--dur-1) ease-in,transform var(--dur-1) ease-in,display var(--dur-1) allow-discrete,overlay var(--dur-1) allow-discrete; transform-origin:top center; } .mv-desplegable:not([hidden]), .mv-desplegable:popover-open{ opacity:1;transform:none; transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out),display var(--dur-2) allow-discrete,overlay var(--dur-2) allow-discrete; } @starting-style{ .mv-desplegable:not([hidden]), .mv-desplegable:popover-open{opacity:0;transform:translateY(-6px)} } /* ---------------------------------------------------------------- 4) TOAST — contenedor fijo abajo a la derecha; cada aviso entra subiendo 12 px (240 ms) y sale desvaneciéndose (180 ms). Lo crea movimiento.js (FMMov.toast); el CSS también vale para toasts pintados en servidor. ---------------------------------------------------------------- */ .mv-toasts{ position:fixed;right:var(--e-4);bottom:calc(var(--e-4) + env(safe-area-inset-bottom,0px)); z-index:var(--z-toast);display:flex;flex-direction:column;gap:var(--e-2); pointer-events:none;max-width:min(360px,calc(100vw - 2*var(--e-4))); } .mv-toast{ pointer-events:auto; background:var(--sup-2);color:var(--tx-1); border:1px solid var(--sup-borde-2);border-radius:var(--r-2); padding:var(--e-3) var(--e-4);font:500 var(--t-sm)/var(--lh-media) var(--f-cuerpo); box-shadow:var(--sombra-2); opacity:0;transform:translateY(12px); transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out); } .mv-toast.mv-toast--visible{opacity:1;transform:none} .mv-toast.mv-toast--sale{opacity:0;transform:none;transition:opacity var(--dur-2) ease-in} .mv-toast--exito{border-color:var(--exito)} .mv-toast--error{border-color:var(--error)} .mv-toast--aviso{border-color:var(--aviso)} /* ---------------------------------------------------------------- 5) ACORDEÓN —
. La altura no se anima (sería layout): el contenido entra con opacidad y 4 px de desplazamiento, y el marcador gira por transform. ---------------------------------------------------------------- */ .mv-acordeon > summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:var(--e-3)} .mv-acordeon > summary::-webkit-details-marker{display:none} .mv-acordeon > summary .mv-acordeon__marca{ display:inline-block;transition:transform var(--dur-2) var(--ease-out-quart) } .mv-acordeon[open] > summary .mv-acordeon__marca{transform:rotate(90deg)} .mv-acordeon > :not(summary){animation:mv-aparece var(--dur-3) var(--ease-out) both} @keyframes mv-aparece{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}} /* ---------------------------------------------------------------- 6) PESTAÑAS DESLIZANTES — un indicador (.mv-pestanas__marca) que movimiento.js coloca con transform (translateX + scaleX) bajo la pestaña activa. Sin JS, la activa se subraya por color. ---------------------------------------------------------------- */ .mv-pestanas{position:relative;display:flex;gap:var(--e-1);overflow-x:auto;scrollbar-width:none} .mv-pestanas::-webkit-scrollbar{display:none} .mv-pestanas > [role="tab"]{ position:relative;min-height:44px;padding:0 var(--e-4);border:0;background:none; color:var(--tx-2);font:500 var(--t-sm)/1 var(--f-cuerpo);cursor:pointer;white-space:nowrap; transition:color var(--dur-2) var(--ease-out-quart) } .mv-pestanas > [role="tab"][aria-selected="true"]{color:var(--acento-tx)} .mv-pestanas > [role="tab"]:focus-visible{outline:3px solid var(--foco);outline-offset:-3px} .mv-pestanas__marca{ position:absolute;left:0;bottom:0;height:2px;width:1px;background:var(--acento-tx); transform-origin:left center; transition:transform var(--dur-2) var(--ease-out-quart); pointer-events:none; } /* Sin JS: subrayado de la activa */ html:not(.js) .mv-pestanas > [role="tab"][aria-selected="true"]{box-shadow:inset 0 -2px 0 var(--acento-tx)} html:not(.js) .mv-pestanas__marca{display:none} /* Paneles de pestaña: el que entra se desliza 8 px desde la dirección del cambio (data-dir="1" hacia la derecha, "-1" hacia la izquierda) */ .mv-panel-pestana{animation:mv-panel var(--dur-3) var(--ease-out) both} .mv-panel-pestana[data-dir="-1"]{animation-name:mv-panel-inv} @keyframes mv-panel{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:none}} @keyframes mv-panel-inv{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}} /* ---------------------------------------------------------------- 7) SKELETON — bloque de carga con brillo que recorre por transform. Nunca un spinner en medio del contenido. ---------------------------------------------------------------- */ .mv-skeleton{ position:relative;overflow:hidden; background:var(--sup-2);border-radius:var(--r-1);color:transparent; min-height:1em; } .mv-skeleton::after{ content:"";position:absolute;inset:0; background:linear-gradient(90deg,transparent 0%,color-mix(in srgb,var(--tx-1) 8%,transparent) 50%,transparent 100%); transform:translateX(-100%); animation:mv-brillo 1.4s var(--ease-inout) infinite; } @keyframes mv-brillo{to{transform:translateX(100%)}} /* ---------------------------------------------------------------- 8) CONTADOR — movimiento.js anima el número (rAF, ease-out, --dur-5). El CSS solo fija cifras tabulares para que no baile. ---------------------------------------------------------------- */ .mv-contador{font-variant-numeric:tabular-nums} /* ---------------------------------------------------------------- 9) ENTRADAS — una sola coreografía por página. .mv-entra sube 12 px con opacidad (--dur-4); dentro de .mv-cascada cada hijo espera 30 ms más que el anterior (tope 16). Solo con .js en : sin JS todo está visible desde el primer fotograma. ---------------------------------------------------------------- */ html.js .mv-entra{animation:mv-entra var(--dur-4) var(--ease-out) both;animation-delay:var(--mv-retardo,0ms)} html.js .mv-cascada > *{animation:mv-entra var(--dur-4) var(--ease-out) both} html.js .mv-cascada > :nth-child(1){animation-delay:0ms} html.js .mv-cascada > :nth-child(2){animation-delay:30ms} html.js .mv-cascada > :nth-child(3){animation-delay:60ms} html.js .mv-cascada > :nth-child(4){animation-delay:90ms} html.js .mv-cascada > :nth-child(5){animation-delay:120ms} html.js .mv-cascada > :nth-child(6){animation-delay:150ms} html.js .mv-cascada > :nth-child(7){animation-delay:180ms} html.js .mv-cascada > :nth-child(8){animation-delay:210ms} html.js .mv-cascada > :nth-child(9){animation-delay:240ms} html.js .mv-cascada > :nth-child(10){animation-delay:270ms} html.js .mv-cascada > :nth-child(11){animation-delay:300ms} html.js .mv-cascada > :nth-child(12){animation-delay:330ms} html.js .mv-cascada > :nth-child(13){animation-delay:360ms} html.js .mv-cascada > :nth-child(14){animation-delay:390ms} html.js .mv-cascada > :nth-child(15){animation-delay:420ms} html.js .mv-cascada > :nth-child(n+16){animation-delay:450ms} @keyframes mv-entra{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} /* ---------------------------------------------------------------- 10) ESCAPARATE — solo portada, bienvenida, Sala Premium, donar y cabeceras de apartado (dirección Horizonte). .mv-horizonte: las estrellas se encienden (opacidad, --dur-4). .mv-banda: la banda de color se revela desde el horizonte hacia abajo con clip-path (--dur-5, ease-out) y su borde inferior en escalones de 4 px lo pinta la hoja de la página. .mv-titulo-banda: el título entra 24 px (--dur-4, retardo 120 ms). .mv-flota: bucle lento (6 s) para el libro; se apaga en reducido. ---------------------------------------------------------------- */ html.js .mv-horizonte .mv-estrella{animation:mv-enciende var(--dur-4) var(--ease-out) both;animation-delay:var(--mv-retardo,0ms)} @keyframes mv-enciende{from{opacity:0}to{opacity:1}} html.js .mv-banda{animation:mv-revela var(--dur-5) var(--ease-out) both} @keyframes mv-revela{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}} html.js .mv-titulo-banda{animation:mv-sube var(--dur-4) var(--ease-out) both;animation-delay:120ms} @keyframes mv-sube{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}} .mv-flota{animation:mv-flota 6s var(--ease-inout) infinite} @keyframes mv-flota{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}} /* Cortina pixel entre páginas: la sigue gestionando transiciones.css */ /* ---------------------------------------------------------------- 11) MOVIMIENTO REDUCIDO — las duraciones ya son 0 por tokens.css; aquí se apagan bucles y se anulan desplazamientos para que nada "salte" al instante. ---------------------------------------------------------------- */ @media (prefers-reduced-motion:reduce){ .mv-skeleton::after,.mv-flota{animation:none} html.js .mv-entra,html.js .mv-cascada > *,html.js .mv-banda,html.js .mv-titulo-banda, html.js .mv-horizonte .mv-estrella,.mv-acordeon > :not(summary),.mv-panel-pestana{animation:none} .mv-modal,.mv-cajon,.mv-desplegable,.mv-toast,.mv-pulsa,.mv-eleva{transition:none;transform:none} .mv-pulsa:hover,.mv-eleva:hover,.mv-pulsa:active{transform:none} }