/* transicion.css — transición entre las páginas de Decora con Globo GO.

   Usa la API nativa de View Transitions entre documentos. Es la forma correcta para un
   sitio de páginas separadas como éste:

   - No lleva JavaScript, así que NO puede bloquear la navegación. La versión anterior
     (una cortina hecha a mano) tapaba la pantalla y esperaba 620 ms antes de cambiar de
     página: si la siguiente tardaba, el telón se quedaba ahí parado. Esto no puede pasar.
   - La animación la ejecuta el navegador sobre una instantánea de cada página, en la GPU.
   - Si el navegador no la soporta, no pasa absolutamente nada: la página cambia de golpe,
     como siempre. Abajo hay además una entrada suave para esos casos.

   Comprobado que funciona en el motor de Safari (pageswap y pagereveal devuelven
   viewTransition=true) y en Chrome.

   La animación: la página que se va retrocede y se difumina; la que llega SUBE desde
   abajo con el borde superior redondeado, como un arco de globos montándose.
   Se carga en la home, /taller y /decoradora. */

@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: dcg-se-va .30s cubic-bezier(.4, 0, .2, 1) both;
  z-index: 1;
}
::view-transition-new(root) {
  animation: dcg-llega .50s cubic-bezier(.22, .95, .25, 1) both;
  z-index: 2;
}

@keyframes dcg-se-va {
  to { transform: scale(.955) translateY(-1.5%); opacity: .28; filter: blur(2px); }
}

@keyframes dcg-llega {
  from { clip-path: inset(100% 0 0 0 round 46% 46% 0 0); transform: translateY(4%); }
  60%  { clip-path: inset(0 0 0 0 round 12% 12% 0 0); }
  to   { clip-path: inset(0 0 0 0 round 0 0 0 0);     transform: translateY(0); }
}

/* La cabecera no debe saltar: el navegador la trata como el mismo elemento en las dos
   páginas y la interpola en vez de recortarla con el resto. */
header, .barra { view-transition-name: dcg-cabecera; }
::view-transition-old(dcg-cabecera),
::view-transition-new(dcg-cabecera) { animation-duration: .34s; }

/* Navegadores sin View Transitions: una entrada suave, sin JavaScript y sin esperas. */
@supports not (view-transition-name: none) {
  @keyframes dcg-entrada-simple {
    from { opacity: 0; transform: translateY(9px); }
    to   { opacity: 1; transform: none; }
  }
  body { animation: dcg-entrada-simple .42s cubic-bezier(.22,.95,.25,1) both; }
}

/* Quien pide menos movimiento no ve nada de esto. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
  @supports not (view-transition-name: none) { body { animation: none; } }
}