/* TRANSICIONES ENTRE PÁGINAS · View Transitions entre documentos (Chrome, Edge y Safari 18.2+; en Firefox la página cambia sin animación).
   Lo que se busca: que se note de dónde viene cada cosa y adónde va, y nada más.
   · La página nueva sube y aparece sobre la que se va, que se aleja un poco y se oscurece (sin que ninguna se vea a medias).
   · El tomate del menú se queda quieto: tiene el mismo tamaño y sitio en todas las páginas.
   Las animaciones de entrada de cada página (las imágenes que se destapan una a una, los textos que suben...) se mantienen tal cual:
   la transición solo cuida el paso de una página a otra. */
@view-transition { navigation: auto; }

:root {
  --vt-ease-out: cubic-bezier(0.23, 1, 0.32, 1);        /* entrar: sale rápido, frena suave */
  --vt-ease-in-out: var(--ease-in-out);    /* moverse por la pantalla: arranca y frena */
}

/* La página nueva sube y aparece (12 px, 0,3 s, con frenada suave) sobre la que se va; esta se queda debajo, se aleja un poco (0,985) y se oscurece,
   como si la nueva pasara por delante. Nunca se cruzan dos páginas a medias: la nueva llega opaca antes de que la vieja se note vacía. */
::view-transition-old(root) { animation: 300ms var(--vt-ease-out) both vt-recede; mix-blend-mode: normal; }
::view-transition-new(root) { animation: 300ms var(--vt-ease-out) both vt-in; mix-blend-mode: normal; }
@keyframes vt-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes vt-recede { to { transform: scale(.985); opacity: .6; } } /* opacidad en vez de filter: brightness, que obligaba a repintar la pantalla entera en cada fotograma */

/* Hacia About: la página nueva (foto y texto) se desliza desde la derecha sobre la anterior, que se desenfoca y se apaga, como la ficha «Information» de
   jacoblindblad.dk. Al salir de About, al revés: About se va hacia la derecha y la página de debajo recupera el foco. */
:root:active-view-transition-type(to-about) {
  &::view-transition-old(root) { animation: 700ms cubic-bezier(.32, .72, 0, 1) both vt-blur-back; }
  &::view-transition-new(root) { animation: 700ms cubic-bezier(.32, .72, 0, 1) both vt-from-right; background: var(--green, #125603); } /* el verde va con la página que se desliza: sin esto, la foto y los textos llegaban sobre la página anterior y el verde aparecía de golpe al terminar */
}
:root:active-view-transition-type(from-about) {
  &::view-transition-old(root) { animation: 550ms cubic-bezier(.32, .72, 0, 1) both vt-to-right; z-index: 2; background: var(--green, #125603); }
  &::view-transition-new(root) { animation: 600ms cubic-bezier(.32, .72, 0, 1) both vt-focus-in; }
}
@keyframes vt-from-right { from { transform: translateX(100%); } }
@keyframes vt-to-right { to { transform: translateX(100%); } }
@keyframes vt-blur-back { to { filter: blur(14px); opacity: .5; transform: scale(1.02); } }
@keyframes vt-focus-in { from { filter: blur(14px); opacity: .5; transform: scale(1.02); } }

/* El tomate del menú no se mueve entre páginas (mismo tamaño y sitio: css/nav-logo.css) */
.nav-logo, .case-logo { view-transition-name: site-logo; }
::view-transition-group(site-logo) { animation-duration: 0s; }
::view-transition-old(site-logo) { display: none; }
::view-transition-new(site-logo) { animation: none; }

/* "Reducir movimiento": solo el fundido, sin que nada se agrande ni vuele */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root) { animation: none; }
  ::view-transition-new(root) { animation: 150ms linear both vt-fade; }
  :root:active-view-transition-type(to-about)::view-transition-old(root), :root:active-view-transition-type(from-about)::view-transition-old(root) { animation: none; }
  :root:active-view-transition-type(to-about)::view-transition-new(root), :root:active-view-transition-type(from-about)::view-transition-new(root) { animation: 150ms linear both vt-fade; }
  @keyframes vt-fade { from { opacity: 0; } }
}