/*
 * CPAS reveal system
 * ------------------
 * Uses CSS keyframes instead of a transition from a pre-painted hidden state.
 * This means elements already inside the viewport on page load still animate.
 *
 * `translate` and `scale` are used as individual transform properties so these
 * reveals do not overwrite `transform` values owned by page-specific scripts.
 */
.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;
  -webkit-backface-visibility: hidden;
  will-change: opacity, translate, scale;
}

/* Direction and scale variants. */
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.reveal-scale-left {
  --reveal-x: -24px;
  --reveal-y: 16px;
  --reveal-scale: 0.97;
  transform-origin: left center;
}

/* Retire the older `.display-view.animate-in` transform without editing modules.css. */
body.animations-enabled .stage .display-view.reveal-on-scroll {
  transform: translateY(0);
  transition: none;
}

/*
 * Keyframes are deliberately attached only when `.is-visible` is added.
 * Unlike a transition, this does not depend on the hidden state having already
 * been painted in a previous frame.
 */
body.animations-enabled .reveal-on-scroll.is-visible {
  animation-name: cpas-reveal;
  animation-duration: var(--reveal-duration);
  animation-timing-function: var(--reveal-easing);
  animation-delay: var(--reveal-delay);
  animation-fill-mode: both;
}

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

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

/* Final stable state after JavaScript receives `animationend`. */
body.animations-enabled .reveal-on-scroll.reveal-complete {
  opacity: 1;
  translate: none;
  scale: none;
  animation: none;
  will-change: auto;
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
}

/* Once a manually revealed card has settled, let its deep-link highlight own
 * the animation properties instead of the completed reveal animation. */
body.animations-enabled .reveal-on-scroll.reveal-complete.jump-highlight {
  animation: highlightPulse 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/*
 * Fallback for older browsers without individual transform properties.
 * This can share `transform` with legacy page CSS, so it is intentionally only
 * used where `translate`/`scale` are unavailable.
 */
@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: cpas-reveal-legacy;
  }

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

  @keyframes cpas-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,
  body.animations-enabled .reveal-on-scroll.reveal-complete.jump-highlight {
    opacity: 1;
    translate: none;
    scale: none;
    transform: none;
    animation: none;
    will-change: auto;
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
  }
}