.reveal {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(6px);
  transition:
    opacity .9s var(--ease) var(--d, 0s),
    transform .9s var(--ease) var(--d, 0s),
    filter .9s var(--ease) var(--d, 0s);
  will-change: opacity, transform, filter;
}
.reveal.is-in {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

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