/* cms/css/transicoes.css */

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

.viewport-browser {
  /* Isola o viewport para animacao fluida */
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform-style: preserve-3d;

  transition:
    opacity var(--tempo-transicao) ease,
    transform var(--tempo-transicao) ease;

  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  transform-origin: center top;
}

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

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

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

/* Estado de preparo para 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;
}