/* The photograph has its own layer above the existing incoming-page bands. */
::view-transition-group(pep-project-image) {
  z-index:2;
  animation-duration:1.12s;
  animation-timing-function:cubic-bezier(.22,.8,.2,1);
  overflow:hidden;
}
::view-transition-image-pair(pep-project-image) { isolation:isolate; }
::view-transition-old(pep-project-image),
::view-transition-new(pep-project-image) {
  width:100%; height:100%; object-fit:cover; object-position:50% 20%;
  mix-blend-mode:normal;
}
::view-transition-old(pep-project-image) { animation:pep-shared-photo-out 1.12s linear both; }
::view-transition-new(pep-project-image) { animation:pep-shared-photo-in 1.12s linear both; }
@keyframes pep-shared-photo-out { 0%,30% {opacity:1;} 78%,100% {opacity:0;} }
@keyframes pep-shared-photo-in { 0%,22% {opacity:0;} 72%,100% {opacity:1;} }
.project-image-flight {
  position:fixed; z-index:2147483647; overflow:hidden; pointer-events:none;
  background:#ed0018; contain:paint; will-change:left,top,width,height;
}
.project-image-flight img {display:block;width:100%;height:100%;object-fit:cover;object-position:50% 20%;}
html.is-project-image-flying .case-hero .case-image {visibility:hidden;}
/* The live middle frame remains animated, while its parent owns navigation. */
.portfolio-filmstrip__image--website .portfolio-filmstrip__preview {pointer-events:none;}
.portfolio-filmstrip__image--website iframe {pointer-events:none;}
@media(prefers-reduced-motion:reduce) {
  ::view-transition-group(pep-project-image),
  ::view-transition-old(pep-project-image),
  ::view-transition-new(pep-project-image) {animation:none;}
}