/* Paso entre páginas: un desliz muy sutil y coherente. El planeta de la portada es el mismo elemento en todas las
   páginas (cambia de tamaño y posición), así que viaja de una a otra en vez de desaparecer y reaparecer. */

@view-transition { navigation: auto; }

.hero-planet { view-transition-name: hero-planet; }

/* El contenido lo anima la propia web (más abajo, más suave); la transición del documento solo mueve el planeta */
::view-transition-group(root) { animation-duration: 0s; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.01s; }
::view-transition-group(hero-planet) { animation-duration: 520ms; animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); }

/* El desliz de la web: de 56 px con desenfoque a 14 px casi sin desenfoque */
@keyframes pageEnter {
  from { opacity: 0; transform: translateX(14px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes pageLeave {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(-14px); }
}

main.page-entering { animation-duration: 340ms; }
main.page-leaving { animation-duration: 220ms; }

/* Al volver a Inicio en la misma sesión no se repite el logo de entrada: la portada aparece enseguida */
html.tav-splash-seen .hero-intro { display: none !important; }
html.tav-splash-seen .hero-topline,
html.tav-splash-seen .hero-kicker,
html.tav-splash-seen .home-hero-centered .hero-title,
html.tav-splash-seen .home-hero-centered .hero-tagline,
html.tav-splash-seen .home-hero-centered .hero-actions { animation-delay: 0.08s !important; animation-duration: 520ms !important; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  main.page-entering, main.page-leaving { animation: none; }
}