/* ========================================================================== Finde · Hito de fin de onboarding (D-16) Un momento especial, una sola vez — no el slide lateral de los pasos (motion.css). Se probó una versión con resplandor de color (gradiente radial dorado + escala) y se veía mal — con pocas formas de revisarlo en vivo en esta sesión, un efecto con más piezas (forma de gradiente, color, distorsión de escala) tenía más formas de salir mal. Esta versión es mucho más simple: la pantalla se funde a blanco cálido con un leve destello de brillo (filter: brightness, sobre el contenido real — no una capa de color nueva) y la siguiente emerge del mismo lugar. Sin forma, sin gradiente, sin zoom — más difícil de arruinar. Enlazar este archivo no activa nada por sí solo — las clases .screen--leaving-milestone / .screen--arriving-milestone las agrega a mano js/motion.js (al salir) y el script propio de inicio.html (al llegar, solo si el sessionStorage dice que se viene de ahí). ========================================================================== */ .screen--leaving-milestone { animation: finde-milestone-out 360ms var(--ease-in) both; } @keyframes finde-milestone-out { 0% { opacity: 1; filter: brightness(1); } 60% { filter: brightness(1.18); } 100% { opacity: 0; filter: brightness(1.35); } } /* El "llegar" se marca en , no en .screen directamente — el script que lo agrega corre ANTES de que .screen exista en el DOM (para que no haya ni un frame sin animar), así que necesita algo que ya exista. */ html[data-milestone-arriving] .screen { animation: finde-milestone-in 460ms var(--ease) both; } @keyframes finde-milestone-in { 0% { opacity: 0; filter: brightness(1.35); } 40% { filter: brightness(1.15); } 100% { opacity: 1; filter: brightness(1); } }