/* Reveal system adapted from the CPAS Health website. */
.reveal-on-scroll {
  --reveal-delay: 0ms;
  --reveal-distance: 34px;
  --reveal-duration: 750ms;
  --reveal-easing: cubic-bezier(0.22, 1, 0.36, 1);
  --reveal-x: 0px;
  --reveal-y: var(--reveal-distance);
  --reveal-scale: 1;
}

body.animations-enabled .reveal-on-scroll {
  opacity: 0;
  visibility: visible;
  translate: var(--reveal-x) var(--reveal-y);
  scale: var(--reveal-scale);
  backface-visibility: hidden;
  will-change: opacity, translate, scale;
}

body.animations-enabled .reveal-on-scroll.reveal-from-left {
  --reveal-x: calc(-1 * var(--reveal-distance));
  --reveal-y: 0px;
}

body.animations-enabled .reveal-on-scroll.reveal-from-right {
  --reveal-x: var(--reveal-distance);
  --reveal-y: 0px;
}

body.animations-enabled .reveal-on-scroll.reveal-scale {
  --reveal-y: 18px;
  --reveal-scale: 0.96;
}

body.animations-enabled .reveal-on-scroll.reveal-scale-up {
  --reveal-y: 42px;
  --reveal-scale: 0.92;
  transform-origin: center bottom;
}

body.animations-enabled .reveal-on-scroll.is-visible {
  animation: cursor-reveal var(--reveal-duration) var(--reveal-easing)
    var(--reveal-delay) both;
}

@keyframes cursor-reveal {
  from {
    opacity: 0;
    translate: var(--reveal-x) var(--reveal-y);
    scale: var(--reveal-scale);
  }

  to {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
}

body.animations-enabled .reveal-on-scroll.reveal-complete {
  opacity: 1;
  translate: none;
  scale: none;
  will-change: auto;
  backface-visibility: visible;
}

@supports not (translate: 1px) {
  body.animations-enabled .reveal-on-scroll {
    transform: translate3d(var(--reveal-x), var(--reveal-y), 0)
      scale(var(--reveal-scale));
    will-change: opacity, transform;
  }

  body.animations-enabled .reveal-on-scroll.is-visible {
    animation-name: cursor-reveal-legacy;
  }

  body.animations-enabled .reveal-on-scroll.reveal-complete {
    transform: none;
  }

  @keyframes cursor-reveal-legacy {
    from {
      opacity: 0;
      transform: translate3d(var(--reveal-x), var(--reveal-y), 0)
        scale(var(--reveal-scale));
    }

    to {
      opacity: 1;
      transform: translate3d(0, 0, 0) scale(1);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  body.animations-enabled .reveal-on-scroll,
  body.animations-enabled .reveal-on-scroll.is-visible,
  body.animations-enabled .reveal-on-scroll.reveal-complete {
    opacity: 1;
    translate: none;
    scale: none;
    transform: none;
    animation: none;
    will-change: auto;
    backface-visibility: visible;
  }
}