/*
  TRANSICIÓN MÁGICA entre el portafolio y las webs de ejemplo (la usan index.html y cada demo).
  La foto de la web que pinchas crece hasta convertirse en la portada de esa web, sin pantallazo
  en blanco; al volver atrás, la portada encoge hasta su tarjeta. Navegadores sin soporte: carga normal.
  El nombre "demo-hero" lo pone js en la tarjeta pinchada (portafolio) y aquí en la portada (demo).
*/
/* La activación (@view-transition) va en un <style> dentro del <head> de cada página, no aquí:
   en una hoja externa Edge la descartaba si la página tardaba en cargar sus scripts. */

.hero#inicio { view-transition-name: demo-hero; }

::view-transition-group(root) { animation-duration: 0.45s; }
::view-transition-group(demo-hero) {
  animation-duration: 0.8s;
  animation-timing-function: cubic-bezier(0.7, 0, 0.2, 1);
}
::view-transition-image-pair(demo-hero) { overflow: hidden; border-radius: 12px; }
::view-transition-old(demo-hero),
::view-transition-new(demo-hero) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
::view-transition-old(demo-hero) { animation-duration: 0.35s; }
::view-transition-new(demo-hero) { animation-delay: 0.15s; animation-duration: 0.5s; animation-fill-mode: both; }