/* Transiciones de toda la web (el lado JS esta en web/transiciones.js).

   Cuatro ideas, nada mas:
   1. Cambiar de vista funde lo que habia con lo que llega (View Transitions).
      La barra lateral, la barrita del telefono y la charla flotante quedan
      quietas: tienen nombre propio y no entran en el fundido.
   2. Lo que se toca cambia de color, borde y sombra con suavidad, y al pulsar
      se hunde un pelo.
   3. Lo que aparece —avisos, dialogos, menus, tarjetas de una lista— entra con
      un fundido corto; las tarjetas, escalonadas.
   4. En la portada, cada franja aparece al llegar a ella.
   Y en la mesa: la narracion nueva aparece, la opcion elegida se ilumina y el
   globo del turno entra.

   Con "reducir movimiento" activado en el sistema, nada de esto se mueve. */

:root{--curva:cubic-bezier(.22,.8,.26,1);--tr-rapido:.18s}

/* --- 1. cambio de vista ---------------------------------------------------- */
nav.lado{view-transition-name:lado}
.barra-movil{view-transition-name:barra-movil}
.flotante{view-transition-name:charla}
::view-transition-old(root){animation:tr-vista-sale .2s ease both}
::view-transition-new(root){animation:tr-vista-entra .38s var(--curva) both}
@keyframes tr-vista-sale{to{opacity:0}}
@keyframes tr-vista-entra{from{opacity:0;transform:translateY(12px)}}
/* Sin View Transitions (Firefox, Safari viejo): la vista nueva entra igual. */
.tr-vista{animation:tr-vista-entra .38s var(--curva) both}

/* --- 2. lo que se toca ----------------------------------------------------- */
/* Con selectores de etiqueta a proposito: pesan poco y nunca pisan una
   transicion que ya tenga una clase. */
button,a,summary,input,select,textarea{
  transition-property:background-color,border-color,color,box-shadow,opacity,transform,filter;
  transition-duration:var(--tr-rapido);transition-timing-function:ease}
.btn:not(:disabled):active,.mini:not(:disabled):active,.opcion:not(:disabled):active,
.mesa-icono:active,.rapido:active,.hamburguesa:active,.cronica-cerrar:active,
.turno-plegar:active{transform:scale(.97)}

/* --- 3. lo que aparece ----------------------------------------------------- */
.aviso{animation:tr-asoma .3s var(--curva)}
dialog[open]{animation:tr-dialogo .3s var(--curva)}
dialog[open]::backdrop{animation:tr-velo .3s ease}
.idioma-bienvenida{animation:tr-velo .3s ease}
.idioma-caja{animation:tr-dialogo .44s var(--curva)}
.idioma-menu:not([hidden]),.burbuja-ajustes:not([hidden]){animation:tr-asoma .2s var(--curva)}
details[open]>:not(summary){animation:tr-asoma .26s var(--curva)}
/* Tarjetas de una lista: `--i` es su posicion, para escalonar la entrada. */
.tr-entra{animation:tr-entra .44s var(--curva) both;animation-delay:calc(var(--i,0) * 45ms)}
@keyframes tr-asoma{from{opacity:0;transform:translateY(-6px)}}
@keyframes tr-dialogo{from{opacity:0;transform:translateY(14px) scale(.97)}}
@keyframes tr-velo{from{opacity:0}}
@keyframes tr-entra{from{opacity:0;transform:translateY(14px)}}

/* --- 4. la portada, franja a franja --------------------------------------- */
.tr-revelar{opacity:0;transform:translateY(22px);
  transition:opacity .7s var(--curva),transform .7s var(--curva)}
.tr-revelar.tr-visto{opacity:1;transform:none}

/* --- la mesa --------------------------------------------------------------- */
.narracion.tr-nueva{animation:tr-narracion .7s var(--curva)}
@keyframes tr-narracion{from{opacity:0;filter:blur(4px)}}
/* La opcion elegida se ilumina hasta que llega la escena siguiente. */
.opcion.tr-elegida{border-color:var(--oro)!important;background:#e6b4551a!important;
  box-shadow:0 0 0 1px #e6b45588,0 0 26px #e6b45544}
.turno-burbuja:not([hidden]):not(.plegada) .turno-globo{animation:tr-dialogo .34s var(--curva)}

@media(prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  .tr-vista,.tr-entra,.aviso,dialog[open],dialog[open]::backdrop,.idioma-bienvenida,.idioma-caja,
  .idioma-menu,.burbuja-ajustes,details[open]>:not(summary),.narracion.tr-nueva,
  .turno-burbuja .turno-globo{animation:none!important}
  .tr-revelar{opacity:1;transform:none;transition:none}
  .btn:active,.mini:active,.opcion:active,.mesa-icono:active,.rapido:active,
  .hamburguesa:active,.cronica-cerrar:active,.turno-plegar:active{transform:none}
}