/* Animation & Motion */

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

.reveal.visible {
  animation: revealUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes revealUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(24px);
}

.reveal-stagger.visible > *:nth-child(1) { animation: revealUp 0.65s 0.05s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.reveal-stagger.visible > *:nth-child(2) { animation: revealUp 0.65s 0.12s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.reveal-stagger.visible > *:nth-child(3) { animation: revealUp 0.65s 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.reveal-stagger.visible > *:nth-child(4) { animation: revealUp 0.65s 0.28s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.reveal-stagger.visible > *:nth-child(5) { animation: revealUp 0.65s 0.36s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.reveal-stagger.visible > *:nth-child(6) { animation: revealUp 0.65s 0.44s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.reveal-stagger.visible > *:nth-child(7) { animation: revealUp 0.65s 0.52s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.reveal-stagger.visible > *:nth-child(8) { animation: revealUp 0.65s 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.reveal-stagger.visible > *:nth-child(9) { animation: revealUp 0.65s 0.68s cubic-bezier(0.4, 0, 0.2, 1) forwards; }

/* Respect user motion preference */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-stagger > * {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .reveal.visible,
  .reveal-stagger.visible > * {
    animation: none;
  }
}