/* CF UI · Transiciones entre vistas · requiere transiciones.js (o solo CSS entre páginas: ver README) */
::view-transition-old(root),::view-transition-new(root){animation-duration:.4s}
/* círculo que crece desde el punto pulsado */
html.cf-vt-circle::view-transition-old(root){animation:none}
html.cf-vt-circle::view-transition-new(root){animation:cf-vt-circle .65s cubic-bezier(.45,0,.2,1) both}
@keyframes cf-vt-circle{from{clip-path:circle(0 at var(--cf-vt-x,50%) var(--cf-vt-y,50%))}to{clip-path:circle(150vmax at var(--cf-vt-x,50%) var(--cf-vt-y,50%))}}
/* transformación de elementos con nombre */
html.cf-vt-morph::view-transition-group(*){animation-duration:.55s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
html.cf-vt-morph::view-transition-old(root){animation:.25s ease both cf-vt-out}
html.cf-vt-morph::view-transition-new(root){animation:.35s .15s ease both cf-vt-in}
@keyframes cf-vt-out{to{opacity:0}}
@keyframes cf-vt-in{from{opacity:0;transform:translateY(12px)}}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}