html, body {
  overscroll-behavior-y: none;
}

/*
 * QPA motion system.
 *
 * qpa-motion-init.js runs in the document head before body parsing. Without
 * that opt-in class all content stays visible, so blocked JavaScript can never
 * leave the page blank.
 */
@keyframes qpa-hero-enter {
  from {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

html.qpa-motion-enabled body .qpa-hero .qpa-kicker,
html.qpa-motion-enabled body .qpa-hero .qpa-hero-status,
html.qpa-motion-enabled body .qpa-hero h1,
html.qpa-motion-enabled body .qpa-hero .qpa-hero-sub,
html.qpa-motion-enabled body .qpa-hero .qpa-hero-actions,
html.qpa-motion-enabled body .qpa-hero .qpa-vacancy-meta,
html.qpa-motion-enabled body .qpa-hero .qpa-hero-copy,
html.qpa-motion-enabled body .qpa-hero .qpa-hero-rail {
  animation-name: qpa-hero-enter;
  animation-duration: 900ms;
  animation-timing-function: cubic-bezier(.16, 1, .3, 1);
  animation-fill-mode: both;
}

html.qpa-motion-enabled body .qpa-hero .qpa-kicker {
  animation-delay: 100ms;
}

html.qpa-motion-enabled body .qpa-hero .qpa-hero-status {
  animation-delay: 155ms;
}

html.qpa-motion-enabled body .qpa-hero h1 {
  animation-delay: 205ms;
}

html.qpa-motion-enabled body .qpa-hero .qpa-hero-sub {
  animation-delay: 310ms;
}

html.qpa-motion-enabled body .qpa-hero .qpa-vacancy-meta {
  animation-delay: 255ms;
}

html.qpa-motion-enabled body .qpa-hero .qpa-hero-actions {
  animation-delay: 415ms;
}

html.qpa-motion-enabled body .qpa-hero .qpa-hero-copy {
  animation-delay: 520ms;
}

html.qpa-motion-enabled body .qpa-hero .qpa-hero-rail {
  animation-delay: 625ms;
}

html.qpa-motion-enabled .qpa-reveal {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition:
    opacity 850ms cubic-bezier(.16, 1, .3, 1),
    transform 850ms cubic-bezier(.16, 1, .3, 1);
  transition-delay: var(--qpa-reveal-delay, 0ms);
}

html.qpa-motion-enabled .qpa-reveal.qpa-in-view {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
  html.qpa-motion-enabled body .qpa-hero .qpa-kicker,
  html.qpa-motion-enabled body .qpa-hero .qpa-hero-status,
  html.qpa-motion-enabled body .qpa-hero h1,
  html.qpa-motion-enabled body .qpa-hero .qpa-hero-sub,
  html.qpa-motion-enabled body .qpa-hero .qpa-vacancy-meta,
  html.qpa-motion-enabled body .qpa-hero .qpa-hero-actions,
  html.qpa-motion-enabled body .qpa-hero .qpa-hero-copy,
  html.qpa-motion-enabled body .qpa-hero .qpa-hero-rail {
    opacity: 1;
    transform: none;
    animation: none;
  }

  html.qpa-motion-enabled .qpa-reveal,
  html.qpa-motion-enabled .qpa-reveal.qpa-in-view {
    opacity: 1;
    transform: none;
    transition: none;
  }
}