/* Transiciones entre páginas: «la lama».
   1) View Transitions entre documentos (Chromium/Safari recientes): la página nueva sube con el canto
      inclinado 14,24° —el ángulo del acento del logo— mientras la anterior se desplaza y se apaga.
   2) Sin soporte: barrido JS (.curtain) con la misma forma y un filo cobalto (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-set) both; }
  ::view-transition-new(root) { animation: vt-in 0.85s var(--ease-set) both; }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

@keyframes vt-out {
  to { transform: translateY(-8vh); filter: brightness(0.55) grayscale(0.4); }
}
@keyframes vt-in {
  from { clip-path: polygon(0 100%, 100% calc(100% + 25.38vw), 100% 300%, 0 300%); }
  to { clip-path: polygon(0 calc(-25.38vw), 100% 0, 100% 300%, 0 300%); }
}

.curtain {
  position: fixed; inset: 0; z-index: 95; pointer-events: none; background: var(--night);
  clip-path: polygon(0 100%, 100% calc(100% + 25.38vw), 100% 300%, 0 300%);
}
.curtain::before {
  content: ""; position: absolute; inset: 0; background: var(--accent);
  clip-path: inherit; transform: translateY(-10px);
}
.curtain.is-covering { animation: curtain-in 0.7s var(--ease-set) forwards; pointer-events: auto; }
.curtain.is-leaving { animation: curtain-out 0.8s var(--ease-set) forwards; }
@keyframes curtain-in {
  to { clip-path: polygon(0 calc(-25.38vw), 100% 0, 100% 300%, 0 300%); }
}
@keyframes curtain-out {
  from { clip-path: polygon(0 calc(-25.38vw), 100% 0, 100% 300%, 0 300%); }
  to { clip-path: polygon(0 calc(-25.38vw), 100% calc(-25.38vw), 100% calc(-25.38vw), 0 calc(-50.76vw)); }
}