/* Halftone figures: dot banner above post titles, dithered section markers,
   and figures that start dithered in signal green and dissolve into the original.
   Assets are pre-generated by scripts/dither-assets.py. */

/* Halftone banner above the title on posts without a hero image (decorative, no DOM node). */
article .article-header::before {
  content: "";
  display: block;
  aspect-ratio: 1024 / 360;
  margin: 0 0 32px;
  border: 1px solid var(--border-color, #202020);
  background: #000 url("/dither/banner.png") 60% 45% / cover no-repeat;
}
.hero-banner ~ .grid-content article .article-header::before { display: none; }

/* Dithered section marker above every h2 in a post body. */
article section.body > h2::before {
  content: "";
  display: block;
  height: 6px;
  margin: 0 0 24px;
  background: url("/dither/rule.png") left center / auto 6px repeat-x;
  image-rendering: pixelated;
}

/* Figures (wrapper added by dither.js; without JS the plain image shows). */
.dither-fig {
  position: relative;
  display: block;
  width: 100%;
  margin: 32px 0;
  border: 1px solid var(--border-color, #202020);
  background: #000;
  overflow: hidden;
}
article section.body .dither-fig img { margin: 0; border: 0; display: block; width: 100%; height: 100%; }
.dither-fig .dither-layer {
  position: absolute;
  inset: 0;
  object-fit: fill;
  image-rendering: pixelated;
  pointer-events: none;
  -webkit-mask-repeat: repeat; mask-repeat: repeat;
  -webkit-mask-size: 8px 8px; mask-size: 8px 8px;
}
.dither-fig.is-revealing .dither-layer {
  animation: dither-dissolve 900ms forwards;
}
.dither-fig.is-revealed .dither-layer { display: none; }
.dither-fig .dither-tag {
  position: absolute; right: 8px; top: 8px; z-index: 1;
  font: 500 11px/1 "Geist Mono", monospace; text-transform: uppercase;
  color: var(--signal, #78e772); background: #000; padding: 3px 5px;
  pointer-events: none;
}
.dither-fig.is-revealed .dither-tag { display: none; }

@media (prefers-reduced-motion: reduce) {
  .dither-fig .dither-layer, .dither-fig .dither-tag { display: none; }
}

/* Ordered (Bayer 4x4) dissolve: 17 alpha masks, one more threshold level cleared per step. */
@keyframes dither-dissolve {
  0.00% { animation-timing-function: step-end; -webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAQAAABuBnYAAAAAE0lEQVR42mNk+M+AApgYGAZCAACKQgEPbEr6ZAAAAABJRU5ErkJggg=="); mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAQAAABuBnYAAAAAE0lEQVR42mNk+M+AApgYGAZCAACKQgEPbEr6ZAAAAABJRU5ErkJggg=="); }
  6.25% { animation-timing-function: step-end; -webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAQAAABuBnYAAAAAHUlEQVR42mNkYGBgYPjPAAdMDGiAEVkWqwpqCAAA6XwCDQIzT08AAAAASUVORK5CYII="); mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAQAAABuBnYAAAAAHUlEQVR42mNkYGBgYPjPAAdMDGiAEVkWqwpqCAAA6XwCDQIzT08AAAAASUVORK5CYII="); }
  12.50% { animation-timing-function: step-end; -webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAQAAABuBnYAAAAAIUlEQVR42mNkYGBgYPjPAAdMDGiAEVkWqwomJLWMZJoBAAm7Aw3lFMntAAAAAElFTkSuQmCC"); mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAQAAABuBnYAAAAAIUlEQVR42mNkYGBgYPjPAAdMDGiAEVkWqwomJLWMZJoBAAm7Aw3lFMntAAAAAElFTkSuQmCC"); }
  18.75% { animation-timing-function: step-end; -webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAQAAABuBnYAAAAAKElEQVR42mNkYGBgYPjPwMDACKGZGNAAI8N/VAEMFUxIahmxqiBsBgCDvwQNzWP7aQAAAABJRU5ErkJggg=="); mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAQAAABuBnYAAAAAKElEQVR42mNkYGBgYPjPwMDACKGZGNAAI8N/VAEMFUxIahmxqiBsBgCDvwQNzWP7aQAAAABJRU5ErkJggg=="); }
  25.00% { animation-timing-function: step-end; -webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAQAAABuBnYAAAAAIklEQVR42mNkYGBgYPjPwMDACKGZGNAAI8N/VAEsKig3AwD2zwYJ8onl7gAAAABJRU5ErkJggg=="); mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAQAAABuBnYAAAAAIklEQVR42mNkYGBgYPjPwMDACKGZGNAAI8N/VAEsKig3AwD2zwYJ8onl7gAAAABJRU5ErkJggg=="); }
  31.25% { animation-timing-function: step-end; -webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAQAAABuBnYAAAAAJklEQVR42mNkYGBgYPjPwMDACKGZGNAAI7IsAwNWFcSZgQQwVAAAUuIHCZ3HSQcAAAAASUVORK5CYII="); mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAQAAABuBnYAAAAAJklEQVR42mNkYGBgYPjPwMDACKGZGNAAI7IsAwNWFcSZgQQwVAAAUuIHCZ3HSQcAAAAASUVORK5CYII="); }
  37.50% { animation-timing-function: step-end; -webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAQAAABuBnYAAAAAJklEQVR42mNkYGBgYPjPwMDACKGZGNAAI7IsAwNWFcSZgaQeQwUAUvYHCuUN0moAAAAASUVORK5CYII="); mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAQAAABuBnYAAAAAJklEQVR42mNkYGBgYPjPwMDACKGZGNAAI7IsAwNWFcSZgaQeQwUAUvYHCuUN0moAAAAASUVORK5CYII="); }
  43.75% { animation-timing-function: step-end; -webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAQAAABuBnYAAAAAKklEQVR42mNkYGBgYPjPwMDACKGZGDDAf4b/yDSGCkaCZjBCTYCrx1ABAA2DCQYglfUKAAAAAElFTkSuQmCC"); mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAQAAABuBnYAAAAAKklEQVR42mNkYGBgYPjPwMDACKGZGDDAf4b/yDSGCkaCZjBCTYCrx1ABAA2DCQYglfUKAAAAAElFTkSuQmCC"); }
  50.00% { animation-timing-function: step-end; -webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAQAAABuBnYAAAAAI0lEQVR42mNkYGBgYPjPwMDACKGZGDDAf4b/yDSGCkYqmAEAWQEMAXVixCAAAAAASUVORK5CYII="); mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAQAAABuBnYAAAAAI0lEQVR42mNkYGBgYPjPwMDACKGZGDDAf4b/yDSGCkYqmAEAWQEMAXVixCAAAAAASUVORK5CYII="); }
  56.25% { animation-timing-function: step-end; -webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAQAAABuBnYAAAAAIUlEQVR42mNkQAb/GRiYGDDAf4b/yDSGCkaYXgZGss0AANb2CwHm/LrvAAAAAElFTkSuQmCC"); mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAQAAABuBnYAAAAAIUlEQVR42mNkQAb/GRiYGDDAf4b/yDSGCkaYXgZGss0AANb2CwHm/LrvAAAAAElFTkSuQmCC"); }
  62.50% { animation-timing-function: step-end; -webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAQAAABuBnYAAAAAH0lEQVR42mNkQAb/GRiYGDDAf4b/yDQWFciqGMgyAwDccgr/aq+LXAAAAABJRU5ErkJggg=="); mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAQAAABuBnYAAAAAH0lEQVR42mNkQAb/GRiYGDDAf4b/yDQWFciqGMgyAwDccgr/aq+LXAAAAABJRU5ErkJggg=="); }
  68.75% { animation-timing-function: step-end; -webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAQAAABuBnYAAAAAGElEQVR42mNgIAz+M/xHppnwq8KugpAZAGF2Cf31n+K8AAAAAElFTkSuQmCC"); mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAQAAABuBnYAAAAAGElEQVR42mNgIAz+M/xHppnwq8KugpAZAGF2Cf31n+K8AAAAAElFTkSuQmCC"); }
  75.00% { animation-timing-function: step-end; -webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAQAAABuBnYAAAAAF0lEQVR42mNgIAz+M/xHppkYyACEzAAA53sH/XSi/0wAAAAASUVORK5CYII="); mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAQAAABuBnYAAAAAF0lEQVR42mNgIAz+M/xHppkYyACEzAAA53sH/XSi/0wAAAAASUVORK5CYII="); }
  81.25% { animation-timing-function: step-end; -webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAQAAABuBnYAAAAAG0lEQVR42mNgIB78Z/jPwMDAwMRABoDqxWkGACJBBf9Pg9/NAAAAAElFTkSuQmCC"); mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAQAAABuBnYAAAAAG0lEQVR42mNgIB78Z/jPwMDAwMRABoDqxWkGACJBBf9Pg9/NAAAAAElFTkSuQmCC"); }
  87.50% { animation-timing-function: step-end; -webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAQAAABuBnYAAAAAHElEQVR42mNgIB78Z/jPwMDAwMRABoDqhQEMMwD0YAQBk2SD/AAAAABJRU5ErkJggg=="); mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAQAAABuBnYAAAAAHElEQVR42mNgIB78Z/jPwMDAwMRABoDqhQEMMwD0YAQBk2SD/AAAAABJRU5ErkJggg=="); }
  93.75% { animation-timing-function: step-end; -webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAQAAABuBnYAAAAAFElEQVR42mNgoA/4z/AfmcuELg8APmwCAZpcFOsAAAAASUVORK5CYII="); mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAQAAABuBnYAAAAAFElEQVR42mNgoA/4z/AfmcuELg8APmwCAZpcFOsAAAAASUVORK5CYII="); }
  100.00% { animation-timing-function: step-end; -webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAQAAABuBnYAAAAADElEQVR42mNgGBwAAACIAAF0uDlnAAAAAElFTkSuQmCC"); mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAQAAABuBnYAAAAADElEQVR42mNgGBwAAACIAAF0uDlnAAAAAElFTkSuQmCC"); }
}