/*
    Hello Pop!

    Reveal animation library.
    by Jason Gerard
*/

/* Initial hidden state */
/*
  Adding CSS variables for duration, easing, and delay allows for easy customization
   of the animation timing without needing to change the core CSS. You can set these
    variables on individual elements or globally to control the animation behavior.

    e.g. style="--reveal-delay: 0.5s; --reveal-ease: cubic-bezier(0.32, 1.54, 0.62, 1);"

  Use delay to vary the timing of when elements appear, and easing to create different
  animation effects (e.g., bounce, ease-in-out, etc.).
*/
.reveal {
  opacity: 0;
  transform: translateY(45px);
  /* transition: all 0.6s ease-out; */
  transition: all var(--reveal-duration, 0.6s) var(--reveal-ease, ease-out) var(--reveal-delay, 0s);
}

/* State when visible */
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}