.reveal {
  opacity: 0;
  transform: translateY(18px);
}

.reveal.is-visible {
  animation: rise-in 1000ms var(--ease-smooth) forwards;
}

.delay-1 {
  animation-delay: 200ms;
}

.delay-2 {
  animation-delay: 400ms;
}

.delay-3 {
  animation-delay: 600ms;
}

.site-header {
  animation: nav-in 800ms var(--ease-smooth) both;
}

@keyframes nav-in {
  from {
    opacity: 0;
    transform: translateY(-14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes slide-up-fade {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}