:root {
    --transition-duration: 280ms;
    --transition-ease: cubic-bezier(.4,0,.2,1);
}

#main-content {
    transition: opacity var(--transition-duration) var(--transition-ease), transform var(--transition-duration) var(--transition-ease);
}

    /* Entrada */
    #main-content.enter {
        opacity: 0;
        transform: translateY(12px);
    }

    #main-content.enter-active {
        opacity: 1;
        transform: translateY(0);
    }

    /* Salida */
    #main-content.exit {
        opacity: 1;
        transform: translateY(0);
    }

    #main-content.exit-active {
        opacity: 0;
        transform: translateY(-8px);
    }

@media (prefers-reduced-motion: reduce) {
    #main-content {
        transition: none !important;
    }
}