/* Títulos ficam legíveis sem JavaScript; quando entram na tela, a luz os revela da esquerda para a direita. */
h1[data-reveal],
h2[data-reveal],
h3[data-reveal] {
  position: relative;
  isolation: isolate;
  visibility: visible !important;
  opacity: 1;
  transform: none;
  filter: none;
}

h1[data-reveal]::before,
h2[data-reveal]::before {
  position: absolute;
  z-index: -1;
  top: -0.48em;
  bottom: -0.48em;
  left: -45%;
  width: 48%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgb(139 220 100 / 72%) 0%,
    rgb(204 255 112 / 58%) 34%,
    rgb(204 255 112 / 0%) 78%
  );
  content: "";
  filter: blur(18px);
  opacity: 0;
  pointer-events: none;
}

/* app.js adiciona .is-visible ao título quando ele entra na área visível. */
html.motion-ready h1[data-reveal].is-visible,
html.motion-ready h2[data-reveal].is-visible {
  -webkit-mask-image: linear-gradient(to right, #000 0 50%, transparent 50% 100%);
  -webkit-mask-size: 200% 100%;
  -webkit-mask-position: 100% 0;
  mask-image: linear-gradient(to right, #000 0 50%, transparent 50% 100%);
  mask-size: 200% 100%;
  mask-position: 100% 0;
  animation: title-aura-wipe 1.5s ease-in-out both;
}

html.motion-ready h1[data-reveal].is-visible::before,
html.motion-ready h2[data-reveal].is-visible::before {
  animation: title-aura-travel 1.5s ease-in-out both;
}

@keyframes title-aura-wipe {
  from {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }
  to {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
}

@keyframes title-aura-travel {
  0% {
    left: -45%;
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  82% {
    opacity: 0.85;
  }
  100% {
    left: 100%;
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.motion-ready h1[data-reveal].is-visible,
  html.motion-ready h2[data-reveal].is-visible {
    -webkit-mask-image: none;
    mask-image: none;
    animation: none;
  }

  h1[data-reveal]::before,
  h2[data-reveal]::before {
    display: none;
    animation: none;
  }
}