/* Scroll sets the angle directly. The photo's geometry never changes. */
.page-photo[data-photo-state]{position:relative;isolation:isolate;overflow:hidden;perspective:1200px;background:var(--photo-paper,var(--paper))!important}
.page-photo[data-photo-state]::before,.page-photo[data-photo-state]::after{content:"";position:absolute;z-index:4;top:-1px;bottom:-1px;width:calc(50% + 1px);background:var(--photo-paper,var(--paper));pointer-events:none;backface-visibility:hidden}
.page-photo[data-photo-state]::before{left:0;transform-origin:left center;transform:rotateY(calc(-1 * var(--photo-angle,0deg)))}
.page-photo[data-photo-state]::after{right:0;transform-origin:right center;transform:rotateY(var(--photo-angle,0deg))}
.page-photo[data-photo-state="open"]::before,.page-photo[data-photo-state="open"]::after{visibility:hidden}
.page-photo[data-photo-state]>.photo-open,.page-photo[data-photo-state]>figcaption{opacity:var(--photo-progress,0)}
@media(prefers-reduced-motion:reduce){.page-photo[data-photo-state]::before,.page-photo[data-photo-state]::after{display:none}.page-photo[data-photo-state]>.photo-open,.page-photo[data-photo-state]>figcaption{opacity:1}}
/* Opening photos are immediately uncovered in the mobile layout. */
@media(max-width:780px){
  .hero-image.page-photo[data-photo-state]::before,
  .hero-image.page-photo[data-photo-state]::after,
  .service-hero>figure.page-photo[data-photo-state]::before,
  .service-hero>figure.page-photo[data-photo-state]::after{display:none}
  .hero-image.page-photo[data-photo-state]>.photo-open,
  .hero-image.page-photo[data-photo-state]>figcaption,
  .service-hero>figure.page-photo[data-photo-state]>.photo-open,
  .service-hero>figure.page-photo[data-photo-state]>figcaption{opacity:1}
}