/* transitions.css — transição de página "canvas deslizante" (View Transitions
   API, cross-document/MPA). Nativo, sem JS. Navegadores sem suporte navegam
   normal (fallback gracioso). */
@view-transition {
    navigation: auto;
}

/* Página que sai desliza p/ a esquerda; a que entra vem da direita. */
::view-transition-old(root) {
    animation: canvas-out-left 0.42s ease both;
}
::view-transition-new(root) {
    animation: canvas-in-right 0.42s ease both;
}

@keyframes canvas-out-left {
    to { transform: translateX(-30%); opacity: 0; }
}
@keyframes canvas-in-right {
    from { transform: translateX(30%); opacity: 0; }
}

/* Respeita quem pediu menos movimento */
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none;
    }
}