:root { color-scheme:dark; background:#000; }
* { box-sizing:border-box; }
html,body { width:100%; height:100%; margin:0; overflow:hidden; overscroll-behavior:none; background:#000; }
body { height:100vh; height:100dvh; }
#screen { position:fixed; inset:0; width:100%; height:100%; overflow:hidden; isolation:isolate; cursor:pointer; touch-action:manipulation; user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent; outline:none; }
.composition { position:absolute; inset:0; overflow:hidden; background:#000; pointer-events:none; }
.composition.ready { animation:reveal 160ms ease-out both; }
.backdrop { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; image-rendering:pixelated; opacity:.7; }
.sprite { position:relative; width:100%; height:100%; min-width:0; min-height:0; display:grid; place-items:center; }
.sprite img,.sprite picture { display:block; width:100%; height:100%; min-width:0; min-height:0; }
.sprite img { object-fit:contain; image-rendering:auto; }
.sprite img.pixel { image-rendering:pixelated; }
.solo>.sprite { position:absolute; inset:2%; width:96%; height:96%; }
.wall,.mosaic,.mirror { display:grid; grid-template-columns:repeat(var(--cols),minmax(0,1fr)); grid-template-rows:repeat(var(--rows),minmax(0,1fr)); gap:0; }
.wall .sprite { padding:1vmin; }
.mosaic .sprite { padding:0; }
.mirror .sprite:nth-child(even) { transform:scaleX(-1); }
.mirror .sprite:nth-child(n+3) { transform:scaleY(-1); }
.mirror .sprite:nth-child(2n+4) { transform:scale(-1); }
.orbit>.sprite { position:absolute; left:var(--x); top:var(--y); width:var(--w); height:var(--h); transform:translate(-50%,-50%); }
.orbit>.sprite:first-child { z-index:1; }
.triptych,.duet { display:grid; grid-template-columns:repeat(var(--pieces),minmax(0,1fr)); align-items:center; }
.triptych .sprite,.duet .sprite { height:90%; }
.duet .sprite:last-child { transform:scaleX(-1); }
.tiny>.sprite { position:absolute; width:20%; height:30%; left:40%; top:52%; }
.parade { display:grid; align-items:center; }
.parade-track { display:flex; width:200%; height:70%; animation:procession 24s linear infinite; will-change:transform; }
.parade-band { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); width:50%; flex:none; }
.parade-band .sprite:nth-child(even) { transform:scaleX(-1); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
body.still .composition,body.still .parade-track { animation:none; }
@keyframes reveal { from{opacity:.6} to{opacity:1} }
@keyframes procession { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media(max-aspect-ratio:3/4) {
  .wall,.mosaic,.mirror { grid-template-columns:repeat(var(--mobile-cols),minmax(0,1fr)); grid-template-rows:repeat(var(--mobile-rows),minmax(0,1fr)); }
  .triptych { grid-template-columns:minmax(0,1fr); grid-template-rows:repeat(3,minmax(0,1fr)); }
  .triptych .sprite { height:100%; }
  .duet { grid-template-columns:minmax(0,1fr); grid-template-rows:repeat(2,minmax(0,1fr)); }
  .duet .sprite { height:100%; }
  .parade-track { width:400%; height:60%; }
  .tiny>.sprite { width:34%; height:30%; left:33%; }
}
@media(prefers-reduced-motion:reduce) { .composition,.parade-track { animation:none!important; } }