/* Hosteate · transiciones entre vistas (View Transitions), 10-oct-2026. La carga v4_transiciones()
   (app/v4.php) en la home y en todas las páginas de v4_cabeza(); el panel, el admin y el acceso no.
   · Navegar entre páginas de la web: la cápsula de la barra se queda quieta y el contenido sale 8 px
     hacia arriba y entra desde abajo con un fundido (~350 ms).
   · Tema (sol/luna) e idioma (ES/EN): revelado circular que nace en el botón pulsado (html.vt-circulo,
     con --vt-x/--vt-y/--vt-r que pone assets/js/v4-transiciones.js).
   Sin View Transitions el navegador navega normal; con «reducir movimiento», nada se anima. */

@view-transition{navigation:auto}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

.bn-cap{view-transition-name:barra}
html.vt-circulo .bn-cap{view-transition-name:none}

::view-transition-group(barra){animation-duration:.35s;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
::view-transition-old(root){animation:vt-sale .26s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:vt-entra .36s cubic-bezier(.2,.7,.2,1) .04s both}
@keyframes vt-sale{to{opacity:0;transform:translateY(-8px)}}
@keyframes vt-entra{from{opacity:0;transform:translateY(8px)}}

/* Revelado circular (tema e idioma) */
html.vt-circulo::view-transition-old(root){animation:none}
html.vt-circulo::view-transition-new(root){animation:vt-circulo .55s cubic-bezier(.2,.7,.2,1) both}
@keyframes vt-circulo{
  from{clip-path:circle(0 at var(--vt-x,50%) var(--vt-y,0))}
  to{clip-path:circle(var(--vt-r,150vmax) at var(--vt-x,50%) var(--vt-y,0))}
}

/* Sin View Transitions: un fundido corto de la página ya cambiada (nada a medio camino) */
html.vt-fundido body{animation:vt-fundido .28s ease}
@keyframes vt-fundido{from{opacity:.5}}

@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  html.vt-fundido body{animation:none}
}