/* ---------- Transición "capa por capa" entre páginas ---------- */
/* Donde el navegador lo permite (Chrome, Safari 18.2+), la página vieja se queda en pantalla
   hasta que la nueva está lista y se cambia sin destello. Las franjas las pone la página nueva. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}

::view-transition-group(root),
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
}

/* 8 franjas que cubren la página nueva al llegar y se retiran de abajo hacia arriba,
   como capas que se depositan. No bloquean toques: la página se puede usar desde el inicio. */
.transicion {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 50;
  flex-direction: column;
  pointer-events: none;
}

.transicion-entrando .transicion { display: flex; }

.transicion i {
  flex: 1;
  background: var(--fondo);
  border-bottom: 1px solid rgb(91 156 255 / 0.35);
  transform-origin: top;
  animation: transicion-capa 0.22s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.transicion i:nth-child(even) { background: var(--fondo-alto); }

/* De abajo hacia arriba: la última franja se va primero. Total: 0,22 s + 7 × 30 ms = 430 ms */
.transicion i:nth-child(8) { animation-delay: 0ms; }
.transicion i:nth-child(7) { animation-delay: 30ms; }
.transicion i:nth-child(6) { animation-delay: 60ms; }
.transicion i:nth-child(5) { animation-delay: 90ms; }
.transicion i:nth-child(4) { animation-delay: 120ms; }
.transicion i:nth-child(3) { animation-delay: 150ms; }
.transicion i:nth-child(2) { animation-delay: 180ms; }
.transicion i:nth-child(1) { animation-delay: 210ms; }

@keyframes transicion-capa {
  to { transform: scaleY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .transicion { display: none !important; }
}