/* Scroll-reveal animations driven by useReveal() data attributes. */

.reveal {
  opacity: 1;
  transform: none;
  transition: opacity var(--motion-slow) var(--ease-out-quart),
    transform var(--motion-slow) var(--ease-out-expo);
}

.reveal[data-visible="false"] {
  opacity: 0.28;
  transform: translateY(34px);
}

.reveal-list > * {
  opacity: 1;
  transform: none;
  transition: opacity var(--motion-slow) var(--ease-out-quart),
    transform var(--motion-slow) var(--ease-out-expo);
  transition-delay: calc(min(var(--motion-index, 0), 8) * 54ms);
}

.reveal-list[data-visible="false"] > * {
  opacity: 0.2;
  transform: translateY(28px);
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal[data-visible="false"],
  .reveal-list > *,
  .reveal-list[data-visible="false"] > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}