:root {
  --mp-motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --mp-motion-ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --mp-motion-fast: 220ms;
  --mp-motion-medium: 520ms;
  --mp-motion-slow: 900ms;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: no-preference) {
  .home-header,
  .home-header::before,
  .home-header__menu-line,
  .home-header__nav,
  .home-header__nav a,
  .home-header__social-link,
  .site-nav a,
  .button,
  .placement-grid__item,
  .placement-grid__item::before,
  .placement-grid__poster,
  .placement-grid__surface::before,
  .placement-grid__surface video,
  .placement-grid__overlay,
  .about-video-card,
  .about-video-card video,
  .contact-socials__link,
  .project-detail::before,
  .project-detail__close,
  .project-detail__nav,
  .project-detail__up-next-inner,
  .project-detail__up-next-play,
  .project-detail__up-next-copy strong,
  .project-detail .site-legal-rail,
  .project-detail .site-legal-rail::before {
    transition-timing-function: var(--mp-motion-ease) !important;
  }

  .home-header__menu-line,
  .home-header__nav,
  .home-header__nav a,
  .home-header__social-link,
  .site-nav a,
  .button,
  .contact-socials__link,
  .project-detail__close,
  .project-detail__nav,
  .project-detail__up-next-inner,
  .project-detail__up-next-play,
  .project-detail__up-next-copy strong,
  .project-detail .site-legal-rail {
    transition-duration: var(--mp-motion-fast) !important;
  }

  .placement-grid__poster,
  .placement-grid__surface::before,
  .placement-grid__surface video,
  .placement-grid__overlay,
  .about-video-card,
  .about-video-card video,
  .project-detail::before {
    transition-duration: var(--mp-motion-medium) !important;
  }

  .hero-slide__media,
  .hero-slide__poster {
    transition-timing-function: var(--mp-motion-ease-soft) !important;
    transition-duration: var(--mp-motion-slow) !important;
  }

  body.project-detail .project-detail__close {
    animation: mp-detail-fade-in 620ms var(--mp-motion-ease) 120ms both;
  }

  body.project-detail .project-detail__player {
    transform-origin: 50% 50%;
    will-change: opacity, transform;
    animation: mp-detail-player-in 900ms var(--mp-motion-ease) 80ms both;
  }

  body.project-detail .project-detail__meta {
    will-change: opacity, transform;
    animation: mp-detail-rise-in 820ms var(--mp-motion-ease) 220ms both;
  }

  body.project-detail .project-detail__up-next {
    will-change: opacity, transform;
    animation: mp-detail-rise-in-soft 780ms var(--mp-motion-ease) 340ms both;
  }

  .mp-scroll-reveal {
    opacity: 0.001;
    transform: translate3d(0, 16px, 0);
    transition:
      opacity 860ms var(--mp-motion-ease),
      transform 860ms var(--mp-motion-ease);
    transition-delay: var(--mp-reveal-delay, 0ms);
    will-change: opacity, transform;
  }

  .mp-scroll-reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    will-change: auto;
  }

  @keyframes mp-detail-fade-in {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  @keyframes mp-detail-player-in {
    from {
      opacity: 0;
      transform: translate3d(0, 10px, 0) scale(0.992);
    }

    to {
      opacity: 1;
      transform: translate3d(0, 0, 0) scale(1);
    }
  }

  @keyframes mp-detail-rise-in {
    from {
      opacity: 0;
      transform: translate3d(0, 8px, 0);
    }

    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }

  @keyframes mp-detail-rise-in-soft {
    from {
      opacity: 0;
      transform: translate3d(0, 6px, 0);
    }

    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }

}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  body.project-detail .project-detail__close,
  body.project-detail .project-detail__player,
  body.project-detail .project-detail__meta,
  body.project-detail .project-detail__up-next,
  body.project-detail .site-legal-rail,
  .mp-scroll-reveal {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}