/* V21: menú con la entrada de la referencia. El panel se funde sin desplazarse, los enlaces entran en cascada desde la izquierda y el botón muestra tres barras que giran hasta formar la X de V7. Carga después de v7.css. */ /* Glifo: tres barras alineadas a la izquierda, la de en medio al 78%, con el mismo trazo de 2 px y las mismas puntas redondas que la X. Al abrir, la barra de en medio se recoge hacia la izquierda y las exteriores se centran y giran 45°: el resultado coincide punto por punto con la X de V7 (de 2.64,2.64 a 15.36,15.36). Cerrar invierte el mismo gesto. */ .menu-glyph{width:18px;height:18px;overflow:visible;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round} .menu-bar{transform-box:view-box;transform-origin:9px 9px;transition:transform .2s cubic-bezier(.3,.7,.25,1),opacity .12s ease} .menu-bar:nth-child(2){transform-origin:0 9px} :is(.menu-toggle[aria-expanded=true],.site-menu[data-state=open] .menu-close) .menu-bar:first-child{transform:rotate(45deg) translateY(5px)} :is(.menu-toggle[aria-expanded=true],.site-menu[data-state=open] .menu-close) .menu-bar:nth-child(2){transform:scaleX(0);opacity:0;transition-duration:.14s,.1s} :is(.menu-toggle[aria-expanded=true],.site-menu[data-state=open] .menu-close) .menu-bar:last-child{transform:rotate(-45deg) translateY(-5px)} /* Estado del botón: el feedback sale del propio botón, no de un anillo alrededor. Abierto: relleno y borde algo más claros, en sincronía con el giro de las barras. Pulsado: respuesta inmediata al toque. En pantallas táctiles no hay :hover pegajoso, así el botón clonado del diálogo y el del header se ven iguales al cerrar y nada salta. */ .site-menu:is([data-state=opening],[data-state=open]) .menu-close,.menu-toggle[aria-expanded=true]{background:#ffffff12;border-color:#ffffff70} @media(hover:none){.menu-toggle:hover{background:#ffffff06;border-color:#ffffff38}} .menu-toggle:active,.site-menu .menu-close:active{background:#ffffff1f;border-color:#ffffff80;transition-duration:0s} /* El anillo de foco queda para el teclado; menu-v21.js anota la modalidad en . */ :root[data-input=pointer] .menu-toggle:focus-visible{outline:none} /* Panel: solo opacidad, 150 ms. menu-v7.js sigue escuchando el transitionend de opacity. */ .site-menu::backdrop{transition-duration:.2s} .menu-reveal{transform:none;transition:opacity .15s cubic-bezier(.25,.6,.3,1)} .site-menu[data-state=closing] .menu-reveal{transform:none;transition-duration:.18s} /* Enlaces sin índice ni flecha. Entran en cascada, 50 ms entre uno y otro, con el gesto del video: se funden en 120 ms mientras llegan desde 5 px a la izquierda, rebasan 1.5 px y se asientan. 280 ms por enlace. */ .menu-links>a{gap:0;opacity:0;transition:color .16s} .menu-links>a>span{flex:1;min-width:0} .menu-links>a:nth-child(2){--menu-delay:50ms} .menu-links>a:nth-child(3){--menu-delay:100ms} .menu-links>a:nth-child(4){--menu-delay:150ms} .menu-links>a:nth-child(5){--menu-delay:200ms} .site-menu[data-state=open] .menu-links>a{animation:menu-item-in .28s cubic-bezier(.3,.7,.4,1) var(--menu-delay,0s) both} /* Al cerrar se apagan todos a la vez, sin retraso ni desplazamiento. */ .site-menu[data-state=closing] .menu-links>a{animation:menu-item-out .14s ease both} @keyframes menu-item-in{0%{opacity:0;transform:translateX(-5px)}45%{opacity:1;transform:translateX(1.5px);animation-timing-function:cubic-bezier(.3,.6,.4,1)}100%{opacity:1;transform:none}} @keyframes menu-item-out{from{opacity:1;transform:none}to{opacity:0;transform:none}} /* En dos columnas la cascada avanza por filas. */ @media(min-width:801px){.menu-links>a:nth-child(2){--menu-delay:0s}.menu-links>a:nth-child(3),.menu-links>a:nth-child(4){--menu-delay:50ms}.menu-links>a:nth-child(5){--menu-delay:100ms}} @media(prefers-reduced-motion:reduce){.menu-bar{transition:none!important}.menu-links>a{animation:none!important}.site-menu[data-state=open] .menu-links>a{opacity:1}}