/* Homepage -> selected film transition. The project remains a separate
   document inside the site's existing persistent project layer. */
.kq-persistent-project-layer.is-cinematic-test {
  opacity: 0;
  transform: translate3d(0, 10px, 0) scale(1.01);
  transform-origin: center;
  transition:
    opacity 400ms cubic-bezier(.22, 1, .36, 1),
    transform 480ms cubic-bezier(.22, 1, .36, 1);
}

.kq-persistent-project-layer.is-cinematic-test.is-ready {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.kq-project-transition-visual {
  position: fixed;
  z-index: 6500;
  overflow: visible;
  pointer-events: none;
  transform-origin: top left;
  will-change: transform, opacity;
}

.kq-project-transition-filmstrip {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  aspect-ratio: 897 / 700;
  background: transparent !important;
  filter: drop-shadow(12px 11px 16px rgba(0, 0, 0, .27));
  animation: none !important;
  transform: none !important;
  scale: 1 !important;
  translate: none !important;
  rotate: none !important;
}

.kq-project-transition-filmstrip::before {
  position: absolute;
  z-index: 0;
  top: 17.5%;
  right: 4.3%;
  bottom: 16.5%;
  left: 4.3%;
  background: #0b0b0a;
  content: "";
}

.kq-project-transition-filmstrip::after {
  position: absolute;
  z-index: 4;
  inset: 0;
  background: url("assets/film-strip-overlay.png") center / 100% 100% no-repeat;
  content: "";
}

.kq-project-transition-filmstrip > img {
  position: absolute !important;
  z-index: 1;
  top: 17.5% !important;
  right: 4.3% !important;
  bottom: 16.5% !important;
  left: 4.3% !important;
  width: 91.4% !important;
  height: 66% !important;
  object-fit: cover !important;
  clip-path: inset(1.5% 0);
  opacity: 1 !important;
  transform: scaleY(.985) !important;
  transition: none !important;
}

.kq-project-transition-filmstrip .project-number {
  position: absolute;
  z-index: 5;
  top: 20%;
  left: 7%;
}

.kq-project-transition-filmstrip .view-project {
  position: absolute;
  z-index: 5;
  right: 7%;
  bottom: 19%;
}

.project-media.is-transition-source-hidden {
  visibility: hidden !important;
}

@media (prefers-reduced-motion: reduce) {
  html:not(.kq-motion-preview) .kq-persistent-project-layer.is-cinematic-test,
  html:not(.kq-motion-preview) .kq-persistent-project-layer.is-cinematic-test.is-ready {
    transition: none;
    transform: none;
  }

  html:not(.kq-motion-preview) .kq-project-transition-visual { display: none; }
}