.reveal {
  opacity: 0;
  filter: blur(var(--reveal-blur, 0px));
  transform: translate3d(var(--reveal-x, 0px), var(--reveal-y, 18px), 0) scale(var(--reveal-scale, 1));
  transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.65s ease;
  transition-delay: var(--reveal-delay, 0ms);
  will-change: transform, opacity, filter;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

.reveal--up {
  --reveal-y: 18px;
}

.reveal--left {
  --reveal-x: -18px;
  --reveal-y: 0px;
}

.reveal--right {
  --reveal-x: 18px;
  --reveal-y: 0px;
}

/* Celular: entrada lateral vira vertical — o deslocamento em X antes de aparecer
   empurrava a página além da largura da tela (rolagem horizontal de alguns px). */
@media (max-width: 767.98px) {
  .reveal--left,
  .reveal--right {
    --reveal-x: 0px;
    --reveal-y: 18px;
  }
}

.reveal--scale {
  --reveal-scale: 0.96;
  --reveal-y: 10px;
}

.reveal--blur {
  --reveal-blur: 10px;
  --reveal-y: 10px;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    transition: none;
    transform: none;
    opacity: 1;
    filter: none;
  }
}