/* 1. Classes para ocultar */
.ocultar-left,
.ocultar-top,
.ocultar-right,
.ocultar-bottom {
  opacity: 0;
  transition: opacity .5s ease, transform .5s ease, filter .5s ease;
  filter: blur(8px);
}

/* 2. Classes para ocultar e manter fora da tela */
.ocultar-left {
  transform: translateX(-50px);
}

.ocultar-top {
  transform: translateY(-50px);
}

.ocultar-right {
  transform: translateX(50px);
}

.ocultar-bottom {
  transform: translateY(50px);
}

/* Usar no editor sem efeito */
.elementor-editor-active .ocultar-left,
.elementor-editor-active .ocultar-right,
.elementor-editor-active .ocultar-top,
.elementor-editor-active .ocultar-bottom,
.elementor-editor-active .animated-element,
.elementor-editor-active .fade-left,
.elementor-editor-active .fade-right,
.elementor-editor-active .fade-top,
.elementor-editor-active .fade-bottom {
  opacity: 1;
  transform: translate(0, 0);
  filter: blur(0);
}

/* 3. Classes para entrada do elemento */
.ocultar-left.exibir,
.ocultar-right.exibir {
  opacity: 1;
  transform: translateX(0);
  filter: blur(0);
}

.ocultar-top.exibir,
.ocultar-bottom.exibir {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Outra versão, somente uma vez */

/* 1. Classes auxiliar */
.animated-element {
  position: relative;
  opacity: 0;
  transition: opacity 1s;
}

.fade-left {
  position: relative;
  transform: translateX(-20px);
  transition: opacity 1s, transform 1s;
}

.fade-right {
  position: relative;
  transform: translateX(20px);
  transition: opacity 1s, transform 1s;
}

.fade-top {
  position: relative;
  transform: translateY(-20px);
  transition: opacity 1s, transform 1s;
}

.fade-bottom {
  position: relative;
  transform: translateY(20px);
  transition: opacity 1s, transform 1s;
}