/* Changes of context share a short crossfade; a selected photograph keeps its place. */
html[data-page-transition]{view-transition-name:portfolio-page}
html[data-page-transition] .site-header{view-transition-name:portfolio-navigation}
html[data-page-transition] .reader-footer{view-transition-name:portfolio-footer}
::view-transition-group(*),::view-transition-image-pair(*),::view-transition-old(*),::view-transition-new(*){pointer-events:none}
::view-transition-group(portfolio-page){animation-duration:240ms;animation-timing-function:var(--ease-out)}
::view-transition-old(portfolio-page){animation:folio-fade-out 160ms var(--ease-out) both}
::view-transition-new(portfolio-page){animation:folio-fade-in 240ms var(--ease-out) both}
::view-transition-group(selected-photograph){animation-duration:280ms;animation-timing-function:var(--ease-in-out)}
::view-transition-old(selected-photograph),::view-transition-new(selected-photograph){width:100%;height:100%;object-fit:fill;mix-blend-mode:normal}
::view-transition-old(portfolio-navigation),::view-transition-old(portfolio-footer){animation:none;opacity:0}
::view-transition-new(portfolio-navigation),::view-transition-new(portfolio-footer){animation:none}
@keyframes folio-fade-out{to{opacity:0}}
@keyframes folio-fade-in{from{opacity:0}}
/* Native dialogs retain focus management; WAAPI pairs their entry and exit. */
dialog[open]{animation:none}
.viewer::backdrop,.information::backdrop{background:transparent}
/* Two stable glyphs crossfade, avoiding a one-frame grid-to-close replacement. */
.overview-dots,.overview-close{position:absolute;pointer-events:none;transition:opacity 160ms var(--ease-out),transform 160ms var(--ease-out)}
.overview-dots{width:3px;height:3px;background:var(--ink);box-shadow:-5px -5px var(--ink),0 -5px var(--ink),5px -5px var(--ink),-5px 0 var(--ink),5px 0 var(--ink),-5px 5px var(--ink),0 5px var(--ink),5px 5px var(--ink);opacity:1;transform:scale(1)}
.overview-close{width:18px;height:18px;opacity:0;transform:rotate(-45deg) scale(.85)}
.overview-close::before,.overview-close::after,.close-glyph::before,.close-glyph::after{content:'';position:absolute;left:8px;top:0;width:1px;height:18px;background:currentColor;transform:rotate(45deg)}
.overview-close::after,.close-glyph::after{transform:rotate(-45deg)}
.overview-toggle.is-open .overview-dots{opacity:0;transform:scale(.85)}
.overview-toggle.is-open .overview-close{opacity:1;transform:rotate(0) scale(1)}
body[data-keyboard="true"] .overview-dots,body[data-keyboard="true"] .overview-close{transition:none}
@media(prefers-reduced-motion:reduce){
  .overview-dots,.overview-close{transition:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}
/* Scroll reveals start on the photograph itself and never repeat on the way back. */
.folio-panel>.single-photo,.folio-panel>.paired-images,.folio-panel>.filmstrip{transition:opacity 280ms var(--ease-out);transform:none}
.folio-panel.is-pending>.single-photo,.folio-panel.is-pending>.paired-images,.folio-panel.is-pending>.filmstrip{transform:none}
@media(prefers-reduced-motion:reduce){.folio-panel>.single-photo,.folio-panel>.paired-images,.folio-panel>.filmstrip{transition:none}}
/* Persistent photographs move from edge to centre using the reference's slower ease-out. */
:root{--photo-duration:500ms;--ease-photo:cubic-bezier(.215,.61,.355,1)}
.filmstrip{display:block;overflow:hidden;scroll-snap-type:none;clip-path:none;padding:0;touch-action:pan-y pinch-zoom}
.film-slide{display:contents}
.film-photo{position:absolute;left:0;top:50%;margin:0}
.sequence-neighbour,.viewer-neighbour{background:transparent}
#viewer-figure{position:static;display:block;pointer-events:none}
#viewer-figure>[data-viewer-photo]{position:absolute;left:0;top:50%;max-width:none;max-height:none}
#viewer-stage{overflow:hidden;touch-action:pan-y pinch-zoom}
@media(prefers-reduced-motion:reduce){[data-carousel-photo]{transition:none!important;will-change:auto}}

/* One closing glyph for the overview and both dialogs. */
#viewer-close,#info-close{position:relative;display:grid;place-items:center;align-self:center;width:var(--chrome-row);height:var(--chrome-row);flex:none;font-size:0}
#viewer-close .close-glyph,#info-close .close-glyph{position:relative;display:block;width:18px;height:18px;margin:0;pointer-events:none}
.viewer-meta{justify-content:flex-end}

/* Mouse drags belong to the carousel, rather than native image dragging or selection. */
.filmstrip,.viewer-stage{-webkit-user-select:none;user-select:none}