/* Entrance motion. Hidden states exist only after scripts/motion.js
   adds .js-motion and .is-motion-wait. Without JavaScript, content stays visible. */

.js-motion .is-motion-wait {
  opacity: 0;
}

.motion-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}

.motion-word {
  display: inline-block;
}

.site-header__link {
  transition: color 180ms ease, opacity 180ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .home-page .project__stage {
    transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .home-page .project:hover .project__stage,
  .home-page .project:focus-visible .project__stage {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(43, 46, 54, 0.08);
  }

  .home-page .project:hover .project__screen,
  .home-page .project:focus-visible .project__screen,
  .home-page .project:hover .project__phones,
  .home-page .project:focus-visible .project__phones {
    transform: none;
  }

  .home-page .project__screen img,
  .home-page .project__phones img {
    transform-origin: center center;
    transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1), filter 260ms ease;
  }

  .home-page .project:hover .project__screen img,
  .home-page .project:focus-visible .project__screen img,
  .home-page .project:hover .project__phones img,
  .home-page .project:focus-visible .project__phones img {
    transform: scale(1.02);
  }

  .home-page .project:hover .project__cue,
  .home-page .project:focus-visible .project__cue {
    opacity: 1;
    transform: translateX(5px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .js-motion .is-motion-wait,
  .motion-word {
    opacity: 1;
    transform: none;
  }

  .motion-mask {
    overflow: visible;
  }

  .home-page .project__stage,
  .home-page .project__screen,
  .home-page .project__phones,
  .home-page .project__screen img,
  .home-page .project__phones img,
  .home-page .project__cue {
    transition: none;
  }

  .home-page .project:hover .project__stage,
  .home-page .project:focus-visible .project__stage,
  .home-page .project:hover .project__screen img,
  .home-page .project:focus-visible .project__screen img,
  .home-page .project:hover .project__phones img,
  .home-page .project:focus-visible .project__phones img,
  .home-page .project:hover .project__cue,
  .home-page .project:focus-visible .project__cue {
    transform: none;
  }

  /* motion.css loads before the case-study sheets, so this has to win
     over both the shared 1.08 dot and Brilliant Cities' 1.1 dot. */
  .case-final .bf-rail__item.is-active .bf-rail__dot,
  .brilliant-final .bf-rail__item.is-active .bf-rail__dot,
  .bf-rail__item.is-active .bf-rail__dot {
    transform: none !important;
    transition: none;
  }
}

/* Shared 16:9 flythrough. The video is the frame. */
.case-study-video {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 32px 0 0;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: transparent;
  border: 0;
  border-radius: 18px;
  outline: 1px solid #e1f1fd;
  box-shadow: none;
}