/* Build 3 reveal motion system. */
.ms-reveal {
  opacity: 1;
  transform: none;
}

.js .ms-reveal {
  --ms-reveal-x: 0px;
  --ms-reveal-y: 24px;
  --ms-reveal-scale: 1;
  --ms-reveal-rotate: 0deg;
  opacity: 0;
  transform: translate3d(var(--ms-reveal-x), var(--ms-reveal-y), 0)
    scale(var(--ms-reveal-scale)) rotate(var(--ms-reveal-rotate));
  transition: opacity 0.7s cubic-bezier(.2,.75,.25,1), transform 0.7s cubic-bezier(.2,.75,.25,1);
  will-change: opacity, transform;
}

.js .ms-reveal--fade-left {
  --ms-reveal-x: -30px;
  --ms-reveal-y: 0px;
}

.js .ms-reveal--fade-right {
  --ms-reveal-x: 30px;
  --ms-reveal-y: 0px;
}

.js .ms-reveal--fade-scale {
  --ms-reveal-y: 12px;
  --ms-reveal-scale: 0.965;
}

.js .ms-reveal--rotate-left {
  --ms-reveal-x: -24px;
  --ms-reveal-y: 12px;
  --ms-reveal-rotate: -2.2deg;
}

.js .ms-reveal--rotate-right {
  --ms-reveal-x: 24px;
  --ms-reveal-y: 12px;
  --ms-reveal-rotate: 2.2deg;
}

.js .ms-reveal.ms-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
  will-change: auto;
}

@media (max-width: 680px) {
  .js .ms-reveal--fade-left,
  .js .ms-reveal--fade-right,
  .js .ms-reveal--rotate-left,
  .js .ms-reveal--rotate-right {
    --ms-reveal-x: 0px;
    --ms-reveal-y: 18px;
    --ms-reveal-rotate: 0deg;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .ms-reveal,
  .js .ms-reveal.ms-visible {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }

  .ms-header-inner,
  .ms-site-header,
  .ms-nav a::after,
  .ms-btn,
  .ms-header-cta {
    transition: none !important;
  }
}