[data-scroll-reveal] {
  --scroll-anim-stagger-delay: 250ms;
}

[data-scroll-reveal][data-scroll-reveal="fast"] {
  --scroll-anim-stagger-delay: 100ms;
}

[data-scroll-reveal] [data-scroll-reveal-item="fade-in"] > * {
  opacity: 0;
  transition-property: opacity;
  transition-duration: 750ms;
}

[data-scroll-reveal] [data-scroll-reveal-item="slide-up"] {
  --child-height: 20px;
  width: 100%;
  overflow: hidden;
  /* height: var(--child-height); */
}

[data-scroll-reveal] [data-scroll-reveal-item="slide-up"] > * {
  opacity: 0;
  transform: translateY(100%);
  transition-property: margin-top, transform, opacity;
  transition-duration: 1000ms;
}

[data-scroll-reveal] [data-scroll-reveal-item="widen"] {
  width: 100%;
  overflow: hidden;
}

[data-scroll-reveal] [data-scroll-reveal-item="widen"] > * {
  opacity: 1;
  width: 0;
  display: block;
  transition-property: width;
  transition-duration: 1500ms;
}

[data-scroll-reveal].scroll-revealed [data-scroll-reveal-item="fade-in"] > * {
  opacity: 1;
}

[data-scroll-reveal].scroll-revealed [data-scroll-reveal-item="slide-up"] > * {
  opacity: 1;
  transform: translateY(0);
}

[data-scroll-reveal].scroll-revealed [data-scroll-reveal-item="widen"] > * {
  width: 100%;
}