/* ============================================================ TheTryck · CSS compartido de navegación - Transiciones entre páginas (View Transitions API) - Respeto a prefers-reduced-motion Se carga en todas las páginas desde . Sin dependencias. Los navegadores que no soportan la API ignoran estas reglas y la navegación sigue funcionando igual (progressive enhancement). ============================================================ */ /* 1) Activar transiciones entre documentos (misma web) */ @view-transition { navigation: auto; } /* 2) Elementos que persisten entre páginas: no parpadean, se mantienen. El nav y el logo son únicos por página, así que no hay riesgo de nombres duplicados. El título lo asigna tt-nav.js (ver nota abajo). */ nav { view-transition-name: tt-nav; } nav .logo, nav .brand { view-transition-name: tt-logo; } /* 3) Ritmo cinematográfico: fundido pausado con un respiro de escala, como un encadenado de montaje. La página que sale se aleja un punto y la que entra aterriza; nunca hay corte seco. */ ::view-transition-old(root) { animation: tt-salir .58s cubic-bezier(.4,0,.2,1) both; } ::view-transition-new(root) { animation: tt-entrar .72s cubic-bezier(.16,1,.3,1) both; } @keyframes tt-salir { from { opacity:1; transform:scale(1); filter:blur(0) } to { opacity:0; transform:scale(1.015); filter:blur(2px) } } @keyframes tt-entrar { from { opacity:0; transform:scale(1.022); filter:blur(3px) } to { opacity:1; transform:scale(1); filter:blur(0) } } /* la barra de navegación se mantiene fija y acompaña con el mismo compás */ ::view-transition-group(tt-nav), ::view-transition-group(tt-logo) { animation-duration: .6s; animation-timing-function: cubic-bezier(.16,1,.3,1); } /* el título de página cruza más despacio: es el protagonista del cambio */ ::view-transition-old(tt-titulo), ::view-transition-new(tt-titulo) { animation-duration: .78s; animation-timing-function: cubic-bezier(.16,1,.3,1); } /* 4) Accesibilidad: si el sistema pide menos movimiento, sin animación */ @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } html { scroll-behavior: auto; } }