/* Shared by index.html and docs.html. */
/* Background: a dark noise field in which pieces of Mia (pictures, her name, her necklace) keep generating.
   pieces-N.webp (SHEETS in background.js, transparent around Mia): one column per piece (COLUMNS per sheet) x 6 rows, from pure noise (top) to finished (bottom), 200 px cells.
   noise.png tiles on the same 8 px grid, so a finished piece looks like the field itself turning into a picture. */
.field{position:fixed;inset:0;z-index:0;background:#000 url(/assets/noise.png) repeat 0 0/256px 256px;image-rendering:pixelated;pointer-events:none}
.pieces{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.piece{position:absolute;width:200px;height:200px;background-image:url(/assets/pieces-0.webp?v=3);background-size:800% 600%;background-repeat:no-repeat;background-position-y:0%;image-rendering:pixelated;opacity:0;animation-name:gen-frames,gen-fade;animation-timing-function:steps(1,end),linear;animation-iteration-count:infinite,infinite}
.piece.still{animation:none;opacity:.85;background-position-y:100%}
@keyframes gen-frames{0%{background-position-y:0%}0.6%{background-position-y:20%}1.2%{background-position-y:40%}1.8%{background-position-y:60%}2.4%{background-position-y:80%}3%{background-position-y:100%}45%{background-position-y:80%}45.6%{background-position-y:60%}46.2%{background-position-y:40%}46.8%{background-position-y:20%}47.4%{background-position-y:0%}100%{background-position-y:0%}}
.piece.clicked{animation-name:click-frames,click-fade;animation-duration:9s,9s;animation-iteration-count:1,1;animation-fill-mode:forwards,forwards}
.piece.clicked.still{animation:click-still 6s linear forwards;background-position-y:100%}
@keyframes click-frames{0%{background-position-y:40%}0.7%{background-position-y:60%}1.4%{background-position-y:80%}2.1%{background-position-y:100%}88%{background-position-y:80%}89.5%{background-position-y:60%}91%{background-position-y:40%}92.5%{background-position-y:20%}94%{background-position-y:0%}100%{background-position-y:0%}}
@keyframes click-fade{0%{opacity:.9}94%{opacity:.9}97%{opacity:0}100%{opacity:0}}
@keyframes click-still{0%{opacity:0}5%{opacity:.85}90%{opacity:.85}100%{opacity:0}}
@keyframes gen-fade{0%{opacity:0}0.5%{opacity:.85}47.4%{opacity:.85}49%{opacity:0}100%{opacity:0}}