*{box-sizing:border-box}body{margin:0}#canvas{position:relative;overflow:hidden;width:100%;min-height:80vh;background-color:#eee}#collection #canvas{display:flex;flex-direction:row;align-items:center}.draggable{display:flex;justify-content:center;align-items:center;pointer-events:none}#portrait .draggable{position:absolute;width:100%;height:100%}#collection .draggable{flex:var(--max-width);order:var(--order)}.container{_transform-origin:var(--transform-origin, center);display:block;animation:scatter .6s ease-out;animation-fill-mode:backwards;animation-delay:var(--animation-delay);pointer-events:all;transform:rotate(var(--rotation)) translate(var(--pan, 0),var(--pan, 0)) scale(1);transition:transform .5s ease,scale .25s ease}#portrait .container{width:var(--max-width)}#collection .container{width:100%;scale:2}.draggable img{width:100%;height:auto}.dragged .container{transform:rotate(var(--rotation))}.draggable .container:hover{cursor:grab}.is-pointer-down .container:hover{cursor:grabbing}#portrait .draggable:first-of-type .container{animation:none}.is-dragging .container{_box-shadow:3px 3px 30px rgba(0,0,0,.4)}@keyframes scatter{0%{transform:rotate(0) translate(0) scale(0);opacity:0}}.container a{position:absolute;background-color:#fff;top:0;right:0;opacity:0;width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;transition:opacity .3s ease-in}a svg{width:1.5rem;height:1.5rem;stroke-width:2;stroke:currentColor}.container:hover a{opacity:.4;transition-delay:.5s}.container a:hover,.container a:focus-visible{opacity:1;transition-delay:0s}nav ul{display:flex;list-style:none;gap:1rem}nav a{text-decoration:none;color:#000}[aria-current=true]{text-decoration:underline}.viewers{display:flex;overflow-x:auto;height:500px;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}.viewer{display:flex;align-items:center;flex-shrink:0;scroll-snap-align:center}.current{justify-content:center;_width:80vw;flex:6}.prev{justify-content:flex-start}.next{justify-content:flex-end}.prev,.next{_width:35vw;flex:2;pointer-events:none;transition:all 1s ease}.next a{pointer-events:auto}:root{--duration: .25s}.next:hover{flex:4}#viewer-a{background-color:tomato;view-transition-name:a}#viewer-b{background-color:#8fbc8f;view-transition-name:b}#viewer-c{background-color:#deb887;view-transition-name:c}#viewer-d{background-color:#fffacd;view-transition-name:d}::view-transition-group(root){_animation-duration:2s}::view-transition-new(a):only-child{animation:a linear reverse;animation-duration:var(--duration)}::view-transition-old(a):only-child{animation:a linear forwards;animation-duration:var(--duration)}::view-transition-new(d):only-child{animation:d linear reverse;animation-duration:var(--duration)}::view-transition-old(d):only-child{animation:d linear forwards;animation-duration:var(--duration)}@keyframes a{0%{transform:translate(0)}to{transform:translate(-500px)}}@keyframes b{0%{transform:translate(0)}to{transform:translate(-500px)}}@keyframes d{0%{transform:translate(0)}to{transform:translate(500px)}}.viewer.prev{_view-transition-name:prev}.viewer.next{_view-transition-name:next}.viewer.current{_view-transition-name:current-left}::view-transition-old(prev){animation:prev 3.3s linear forwards}::view-transition-new(prev){animation:prev 3.3s linear reverse}::view-transition-old(next){animation:next 3.3s linear forwards}::view-transition-new(next){animation:next 3.3s linear reverse}::view-transition-old(current-left){animation:next 3.3s linear forwards}::view-transition-new(current-left){animation:next 3.3s linear reverse}@keyframes prev{0%{transform:translate(0)}to{transform:translate(-500px)}}@keyframes next{0%{transform:translate(0)}to{transform:translate(-500px)}}@keyframes current-left{0%{transform:translate(0)}to{transform:translate(-500px)}}@keyframes current-right{0%{transform:translate(0)}to{transform:translate(-500px)}}.foo{width:200px;height:200px;background-color:#000}