/* The photo keeps its dimensions. Only the two paper leaves move. */
.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}
.page-photo[data-photo-state]::after{right:0;transform-origin:right center}
.page-photo[data-photo-state="waiting"]>img,.page-photo[data-photo-state="waiting"]>.photo-open,.page-photo[data-photo-state="waiting"]>figcaption{visibility:hidden}
.page-photo[data-photo-state="opening"]::before{animation:photo-leaf-left 1250ms cubic-bezier(.65,0,.2,1) both}
.page-photo[data-photo-state="opening"]::after{animation:photo-leaf-right 1250ms cubic-bezier(.65,0,.2,1) both}
.page-photo[data-photo-state="opening"]>.photo-open,.page-photo[data-photo-state="opening"]>figcaption{animation:photo-caption-in 350ms ease-out 850ms both}
@keyframes photo-leaf-left{0%{transform:rotateY(0deg)}100%{transform:rotateY(-90deg)}}
@keyframes photo-leaf-right{0%{transform:rotateY(0deg)}100%{transform:rotateY(90deg)}}
@keyframes photo-caption-in{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.page-photo[data-photo-state]::before,.page-photo[data-photo-state]::after{display:none}.page-photo[data-photo-state="waiting"]>img,.page-photo[data-photo-state="waiting"]>.photo-open,.page-photo[data-photo-state="waiting"]>figcaption{visibility:visible}}