/* Three scenes, one photographic vocabulary. Everything is visible without JS. */
.composition{display:block}
.composition-stage{display:grid;grid-template-columns:1fr 1fr;gap:14%;align-items:center}
.scene-motion .hero-media{transform:scale(var(--hero-recede,1));transform-origin:center top}
.scene-motion .hero-caption{transform:translateY(var(--hero-rise,0px));opacity:var(--hero-presence,1)}
.scene-motion .selected .section-heading{transform:translateY(var(--selected-rise,0px));opacity:var(--selected-presence,1)}
.scene-motion :is(.selected-photo,.scale-photo,.composition-photo) .image-frame{overflow:hidden}
.scene-motion .selected-photo .image-frame{clip-path:inset(0 var(--selected-inset,0%) var(--selected-cut,0%) var(--selected-inset,0%))}
.scene-motion .selected-photo img{transform:scale(var(--selected-scale,1));transform-origin:center top}
.scene-motion .scale-copy{position:relative;z-index:2;transform:translateY(var(--scale-copy-y,0px))}
.scene-motion #scale-title{transform:translateX(var(--scale-title-x,0px))}
.scene-motion .scale-photo{transform:translateY(var(--scale-photo-y,0px))}
.scene-motion .scale-photo .image-frame{clip-path:inset(var(--scale-top,0%) 0 var(--scale-bottom,0%) 0)}
.scene-motion .scale-photo img{transform:scale(var(--scale-image,1));transform-origin:center}
.scene-motion .composition{min-height:calc(var(--scene-height,760px) + var(--scene-dwell,560px))}
.scene-motion .composition-stage{position:sticky;top:clamp(30px,6svh,64px)}
.scene-motion .composition-photo{max-width:min(500px,calc(78svh * 9 / 16))}
.scene-motion .composition-photo .image-frame{clip-path:inset(0 0 var(--form-cut,0%) 0)}
.scene-motion .composition-photo img{transform:scale(var(--form-image,1));transform-origin:center}
.scene-motion .image-frame:focus-within{clip-path:none}
.scene-motion #composition-title .editorial-line{transform-origin:left center;opacity:var(--word-presence,1);transform:translateX(var(--word-x,0px)) scale(var(--word-scale,1))}
.scene-motion .scene-active :is(.image-frame img,.hero-media){will-change:transform}
.m3-quiet-enter{animation:m3-calm-entry 800ms cubic-bezier(.22,.8,.32,1) both}
@keyframes m3-calm-entry{from{opacity:.8;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@media(hover:hover) and (pointer:fine) and (min-width:801px){
  [data-motion-page="work"] .documented-project figure:is(:hover,:focus-within) img{transform:scale(1.03)}
  [data-motion-page="work"] .documented-project figure:is(:hover,:focus-within) .image-label{transform:translateY(-5px)}
  [data-motion-page="work"] .documented-project figure:is(:hover,:focus-within) .text-link span{transform:translate(5px,-5px)}
}
@media(max-width:800px){
  .composition-stage{display:flex;flex-direction:column;align-items:flex-start;gap:32px}
  .scene-motion .composition{--scene-dwell:320px}
  .scene-motion .composition-stage{top:30px}
  .scene-motion .composition-photo{max-width:min(90%,calc(53svh * 9 / 16))}
}
@media(prefers-reduced-motion:reduce){
  .scene-motion :is(.hero-media,.hero-caption,.section-heading,.scale-copy,#scale-title,.scale-photo,#composition-title .editorial-line){transform:none!important;opacity:1!important}
  .scene-motion :is(.selected-photo,.scale-photo,.composition-photo) :is(.image-frame,img){clip-path:none!important;transform:none!important;will-change:auto!important}
  .scene-motion .composition{min-height:0!important}
  .scene-motion .composition-stage{position:static!important}
  .scene-motion .composition-photo{max-width:500px!important}
  .m3-quiet-enter{animation:none!important;opacity:1!important;transform:none!important}
  [data-motion-page="work"] .documented-project :is(img,.image-label,.text-link span){transform:none!important;transition:none!important}
}