/*
 * DM Block Animations 1.3.2
 *
 * O estado inicial existe em CSS antes do primeiro paint para os elementos no
 * topo também animarem. Fade/Slide usam a propriedade individual `translate`
 * em vez de `transform`, evitando conflitos com transforms do tema, .glass,
 * hover/zoom, Bootstrap e blocos de terceiros.
 */

html.dmba-js .dmba-animate {
  --dmba-duration: 650ms;
  --dmba-delay: 0ms;
  --dmba-easing: ease-out;
  --dmba-distance: 30px;
  --dmba-x: 0px;
  --dmba-y: 30px;
  --dmba-scale: .92;
  --dmba-blur: 14px;
  --dmba-angle: 12deg;

  opacity: 0;
  will-change: opacity, translate, transform, filter;
}

/* A transição só é ligada depois de o JS carregar os valores globais. */
html.dmba-js .dmba-animate.dmba-ready {
  transition-property: opacity, translate, transform, filter;
  transition-duration: var(--dmba-duration);
  transition-delay: var(--dmba-delay);
  transition-timing-function: var(--dmba-easing);
}

/*
 * Fade e Slide.
 * `!important` aqui é intencional: alguns blocos/temas definem movimento no
 * próprio elemento. Como usamos `translate` separado de `transform`, o transform
 * original continua intacto.
 */
html.dmba-js .dmba-animate[data-dmba-type="fade"],
html.dmba-js .dmba-animate[data-dmba-type="slide"] {
  translate: var(--dmba-x) var(--dmba-y) !important;
}

html.dmba-js .dmba-animate[data-dmba-type="fade"][data-dmba-direction="none"] {
  translate: 0 0 !important;
}

/* Zoom */
html.dmba-js .dmba-animate[data-dmba-type="zoom"] {
  transform: scale(var(--dmba-scale));
}

/* Blur */
html.dmba-js .dmba-animate[data-dmba-type="blur"] {
  filter: blur(var(--dmba-blur));
}

/* Flip */
html.dmba-js .dmba-animate[data-dmba-type="flip"] {
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
html.dmba-js .dmba-animate[data-dmba-type="flip"][data-dmba-direction="up"] { transform: perspective(900px) rotateX(var(--dmba-angle)); }
html.dmba-js .dmba-animate[data-dmba-type="flip"][data-dmba-direction="down"] { transform: perspective(900px) rotateX(calc(var(--dmba-angle) * -1)); }
html.dmba-js .dmba-animate[data-dmba-type="flip"][data-dmba-direction="left"] { transform: perspective(900px) rotateY(calc(var(--dmba-angle) * -1)); }
html.dmba-js .dmba-animate[data-dmba-type="flip"][data-dmba-direction="right"] { transform: perspective(900px) rotateY(var(--dmba-angle)); }

html.dmba-js .dmba-animate.dmba-ready.dmba-visible {
  opacity: 1;
}

/* Só os efeitos que usam translate precisam de voltar a zero. */
html.dmba-js .dmba-animate.dmba-ready.dmba-visible[data-dmba-type="fade"],
html.dmba-js .dmba-animate.dmba-ready.dmba-visible[data-dmba-type="slide"] {
  translate: 0 0 !important;
}

html.dmba-js .dmba-animate.dmba-ready.dmba-visible[data-dmba-type="zoom"],
html.dmba-js .dmba-animate.dmba-ready.dmba-visible[data-dmba-type="flip"] {
  transform: none;
}

html.dmba-js .dmba-animate.dmba-ready.dmba-visible[data-dmba-type="blur"] {
  filter: none;
}

/* Wrapper usado apenas como fallback para shortcodes sem raiz HTML nesta fase. */
.dmba-shortcode-wrap {
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html.dmba-js .dmba-animate {
    opacity: 1 !important;
    translate: 0 0 !important;
    transition: none !important;
  }

  html.dmba-js .dmba-animate[data-dmba-type="zoom"],
  html.dmba-js .dmba-animate[data-dmba-type="flip"] {
    transform: none !important;
  }

  html.dmba-js .dmba-animate[data-dmba-type="blur"] {
    filter: none !important;
  }
}