:root {
  --reveal-text-duration: 800ms;
  --reveal-media-duration: 1000ms;
  --reveal-card-duration: 850ms;
  --reveal-easing: cubic-bezier(0.22, 1, 0.36, 1);
}

html.has-scroll-reveal,
html.has-scroll-reveal body {
  overflow-x: clip;
}

html.has-scroll-reveal [data-reveal] {
  opacity: 0;
  transition-property: opacity, translate, scale;
  transition-duration: var(--reveal-duration, var(--reveal-text-duration));
  transition-timing-function: var(--reveal-easing);
  transition-delay: var(--reveal-delay, 0ms);
}

html.has-scroll-reveal [data-reveal="text"] {
  translate: 40px 0;
}

html.has-scroll-reveal [data-reveal="media"] {
  --reveal-duration: var(--reveal-media-duration);
  translate: 0 20px;
  scale: 0.96;
}

html.has-scroll-reveal [data-reveal="card"] {
  --reveal-duration: var(--reveal-card-duration);
  translate: 0 20px;
}

html.has-scroll-reveal [data-reveal].is-revealed,
html.has-scroll-reveal [data-reveal]:focus-visible,
html.has-scroll-reveal [data-reveal]:focus-within {
  opacity: 1;
  translate: 0 0;
  scale: 1;
}

html.has-scroll-reveal [data-reveal]:focus-visible,
html.has-scroll-reveal [data-reveal]:focus-within {
  transition-delay: 0ms;
  transition-duration: 0.01ms;
}

@media (prefers-reduced-motion: reduce) {
  html.has-scroll-reveal [data-reveal] {
    opacity: 1;
    translate: 0 0;
    scale: 1;
    transition: none;
  }
}