/* cms/css/transicoes.css */

:root {
    --tempo-transicao: 0.3s;
}

.viewport-browser {
    /* Otimização: Isola o elemento em uma camada da GPU */
    will-change: transform, opacity;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    
    /* Configuração Base da Transição */
    transition: 
        opacity var(--tempo-transicao) ease, 
        transform var(--tempo-transicao) ease; /* Removido o Filter para performance */
        
    opacity: 1;
    transform: translate3d(0,0,0) scale(1);
    transform-origin: center top;
}

/* --- ESTADOS DE SAÍDA (OUT) --- */

/* FADE */
body.transicao-fade .viewport-browser.saindo {
    opacity: 0;
}

/* SLIDE (Lateral) */
body.transicao-slide .viewport-browser.saindo {
    opacity: 0;
    transform: translate3d(-30px, 0, 0);
}

/* ZOOM */
body.transicao-zoom .viewport-browser.saindo {
    opacity: 0;
    transform: scale(0.98);
}

/* --- ESTADOS DE PREPARAÇÃO (Antes de Entrar) --- */
/* Esta classe posiciona o elemento instantaneamente para a entrada */

body.transicao-slide .viewport-browser.preparar-entrada {
    transition: none !important;
    transform: translate3d(30px, 0, 0);
    opacity: 0;
}

body.transicao-zoom .viewport-browser.preparar-entrada {
    transition: none !important;
    transform: scale(1.02);
    opacity: 0;
}