/* Transiciones entre páginas: «pasar la regla».
   1) View Transitions entre documentos (Chromium/Safari recientes): la página nueva entra de izquierda a
      derecha como si se midiera con una regla, con un filo azul; la anterior se desplaza y se apaga.
   2) Sin soporte: telón JS azul con los dos corchetes (js/modules/transitions.js).
   3) Sin JS: enlaces normales. Con reduced-motion: sin transición. */

@view-transition { navigation: auto; }

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: vt-out 0.85s var(--ease-snap) both; }
  ::view-transition-new(root) { animation: vt-in 0.85s var(--ease-snap) both; }
  ::view-transition-group(root) { background: var(--blue); }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

@keyframes vt-out {
  to { transform: translateX(-12vw); opacity: 0.35; }
}
@keyframes vt-in {
  from { clip-path: inset(0 100% 0 0); transform: translateX(4vw); }
  to { clip-path: inset(0 0 0 0); transform: none; }
}

.curtain {
  position: fixed; inset: 0; z-index: 95; pointer-events: none; background: var(--blue); color: #fff;
  display: grid; place-items: center; clip-path: inset(0 100% 0 0);
}
.curtain__brk { width: min(40vw, 360px); height: auto; overflow: visible; }
.curtain.is-covering { animation: curtain-in 0.6s var(--ease-snap) forwards; pointer-events: auto; }
.curtain.is-leaving { animation: curtain-out 0.75s var(--ease-snap) forwards; }
@keyframes curtain-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes curtain-out { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 0 100%); } }