/* The selected photograph leads; the rest of the page recedes quietly. */
html[data-drum-leaving] { cursor: progress; }
html[data-drum-leaving] .floating-label { opacity: 0!important; }
html[data-drum-transition] .site-header .identity { view-transition-name: drum-identity; }
html[data-drum-transition]::view-transition-group(drum-identity) {
  animation-duration: 620ms; animation-timing-function: cubic-bezier(.22,.8,.2,1);
}
html[data-drum-transition]::view-transition-old(drum-identity),
html[data-drum-transition]::view-transition-new(drum-identity) {
  animation-duration: 180ms; mix-blend-mode: normal;
}
html[data-drum-transition]::view-transition-group(project-image) {
  animation-duration: 620ms; animation-timing-function: cubic-bezier(.22,.8,.2,1);
  overflow: visible;
}
html[data-drum-transition]::view-transition-image-pair(project-image) { isolation: isolate; }
html[data-drum-transition]::view-transition-old(project-image),
html[data-drum-transition]::view-transition-new(project-image) {
  width: 100%; height: 100%; object-fit: contain; mix-blend-mode: normal;
}
html[data-drum-transition]::view-transition-old(project-image) { animation: drum-photo-out 620ms linear both; }
html[data-drum-transition]::view-transition-new(project-image) { animation: drum-photo-in 620ms linear both; }
html[data-drum-transition="open"]::view-transition-old(root) { animation: drum-world-away 360ms cubic-bezier(.4,0,1,1) both; }
html[data-drum-transition="open"]::view-transition-new(root) { animation: drum-gallery-arrive 620ms cubic-bezier(.22,.8,.2,1) both; }
html[data-drum-transition="close"]::view-transition-old(root) { animation: drum-gallery-away 260ms ease-in both; }
html[data-drum-transition="close"]::view-transition-new(root) { animation: drum-world-arrive 620ms cubic-bezier(.22,.8,.2,1) both; }
@keyframes drum-photo-out { 0%,60%{opacity:1} 100%{opacity:0} }
@keyframes drum-photo-in { 0%,35%{opacity:0} 100%{opacity:1} }
@keyframes drum-world-away { from{opacity:1;transform:perspective(1200px) translateZ(0)} to{opacity:0;transform:perspective(1200px) translate3d(0,-8px,-30px) rotateX(1deg)} }
@keyframes drum-gallery-arrive { 0%,15%{opacity:0;transform:translateY(12px)} 100%{opacity:1;transform:none} }
@keyframes drum-gallery-away { to{opacity:0;transform:translateY(6px)} }
@keyframes drum-world-arrive { 0%{opacity:0;transform:perspective(1200px) translateZ(-24px)} 100%{opacity:1;transform:none} }
@media(prefers-reduced-motion:reduce) {
  html[data-drum-transition]::view-transition-group(*),
  html[data-drum-transition]::view-transition-old(*),
  html[data-drum-transition]::view-transition-new(*) { animation: none!important; }
}