/* ULS Motion: scroll reveal and text animations (see js/motion.js) */

:root {
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-duration: 1500ms;
  --motion-distance: 40px;
}

/* Failsafe: if the script never runs, hidden content still appears. */
html:not(.motion-ready) .appear-animation,
html:not(.motion-ready) [data-reveal] {
  animation: motion-failsafe 0.4s ease 2.5s forwards;
}

@keyframes motion-failsafe {
  to {
    opacity: 1;
    visibility: visible;
  }
}

.motion {
  opacity: 0;
  transition:
    opacity calc(var(--motion-duration) * 0.8) var(--motion-ease),
    transform var(--motion-duration) var(--motion-ease);
  transition-delay: var(--motion-delay, 0ms);
}

.motion--up { transform: translate3d(0, var(--motion-distance), 0); }
.motion--down { transform: translate3d(0, calc(var(--motion-distance) * -1), 0); }
.motion--left { transform: translate3d(calc(var(--motion-distance) * -1), 0, 0); }
.motion--right { transform: translate3d(var(--motion-distance), 0, 0); }
.motion--zoom { transform: scale(0.94); }

.motion.is-visible {
  opacity: 1;
  transform: none;
}

/* Word by word mask reveal for headings */
.motion--words {
  opacity: 1;
  transform: none;
}

.motion-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  /* Room for descenders so letters like g and y are not clipped */
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}

.motion-word__inner {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 110%, 0) rotate(3deg);
  transform-origin: 0 100%;
  transition:
    opacity 1100ms var(--motion-ease),
    transform var(--motion-duration) var(--motion-ease);
  transition-delay: calc(var(--motion-delay, 0ms) + var(--motion-i, 0) * 95ms);
}

.motion--words.is-visible .motion-word__inner {
  opacity: 1;
  transform: none;
}

/* Used to rewind a carousel slide without a visible transition */
.motion--instant,
.motion--instant .motion-word__inner {
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .motion,
  .motion-word__inner {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Hide text until js/motion.js prepares it, so it never flashes before animating. */
html.motion-pending .main :is(h1, h2, h3, h4, h5, h6, p, li, blockquote, .btn) {
  opacity: 0;
  animation: motion-failsafe 0.4s ease 2.5s forwards;
}