@media (min-width: 1024px), (max-width: 767px) {
  html.project-page-reveal-pending,
  html.project-page-reveal-active {
    overflow: hidden;
    background: #fff;
  }

  body.project-is-opening {
    overflow: hidden;
    pointer-events: none;
  }

  body.project-is-opening > :not(.project-transition-viewport):not(.site-header):not(script) {
    opacity: .12;
    transition: opacity 450ms cubic-bezier(.76, 0, .24, 1);
  }

  .project-transition-viewport {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9999;
    overflow: hidden;
    pointer-events: none;
  }

  .project-slide-image {
    position: absolute;
    display: block;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    pointer-events: none;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;
  }

  html.project-page-reveal-pending body {
    opacity: 0;
  }

  html.project-page-reveal-active body {
    animation: tetonProjectPageReveal 460ms cubic-bezier(.76, 0, .24, 1) both;
    will-change: opacity;
  }

  @keyframes tetonProjectPageReveal {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  body.project-is-opening,
  html.project-page-reveal-pending body,
  html.project-page-reveal-active body {
    animation: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
}