.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 800ms ease, transform 800ms ease;
  transition-delay: var(--delay, 0ms);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

@keyframes glow-pulse {
  0% {
    box-shadow: var(--shadow);
  }
  60% {
    box-shadow: 0 0 35px rgba(63, 104, 255, 0.18), var(--shadow);
  }
  100% {
    box-shadow: var(--shadow);
  }
}

@keyframes brand-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes wave-sweep {
  to {
    transform: translateX(120%);
  }
}