/* Scroll reveal. O HTML permanece visível sem a inicialização do JavaScript. */
:root {
  --reveal-distance:20px;
  --reveal-duration:550ms;
  --reveal-easing:cubic-bezier(.22,1,.36,1);
}

.reveal-item[data-reveal-state="pending"] {
  opacity:0;
  transform:none;
  transition:none;
}

.reveal-item[data-reveal-state="visible"] {
  opacity:1;
  transform:none;
}

.reveal-item[data-reveal-state="visible"][data-reveal-running] {
  animation:catelani-reveal var(--reveal-duration) var(--reveal-easing) var(--reveal-delay,0ms) both;
}

.reveal-item[data-reveal-running] {will-change:opacity,transform;}
.reveal-item[data-reveal-instant] {animation:none;}

/* A base acompanha o movimento, mantendo o recorte limpo durante o fade. */
.reveal-item[data-reveal-layer="mask"][data-reveal-state] {opacity:1;}
.reveal-item[data-reveal-layer="mask"][data-reveal-running] {
  animation-name:catelani-reveal-mask;
  will-change:transform;
}

@keyframes catelani-reveal {
  from {opacity:0;transform:translate3d(0,var(--reveal-distance),0);}
  to {opacity:1;transform:none;}
}

@keyframes catelani-reveal-mask {
  from {transform:translate3d(0,var(--reveal-distance),0);}
  to {transform:none;}
}

@media (max-width:767px) {
  :root {--reveal-distance:12px;--reveal-duration:450ms;}
}

/* Os reveals também executam quando a redução de movimento está ativada. */