/* The banner is a 24-cel painted strip. The original fetched image remains the room until every deferred cel has decoded successfully. */
.hero-art[data-hero-animation] {
  isolation: isolate;
  filter: hue-rotate(var(--trip-hue)) saturate(var(--trip-saturation));
  transition: filter .2s;
}
.hero-art[data-hero-animation] > .hero-frame {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 1;
  object-fit: cover;
  filter: none;
  pointer-events: none;
  animation: none;
}
.hero-art[data-hero-animation] > .hero-frame:not(.hero-frame-1) {
  position: absolute;
  inset: 0;
  height: 100%;
  opacity: 0;
}
.hero-art[data-hero-animation] > .hero-frame-1 {
  position: relative;
  z-index: 0;
}
.hero-art[data-hero-animation] > .hero-frame:not(.hero-frame-1) {
  z-index: 1;
}
.hero-art[data-hero-animation] > .art-sticker {
  z-index: 3;
}
.hero-art[data-hero-animation].hero-animation-ready > .hero-frame {
  animation-duration: 5.32s;
  animation-timing-function: steps(1, end);
  animation-iteration-count: infinite;
  animation-play-state: paused;
}
.hero-art[data-hero-animation].hero-animation-visible > .hero-frame {
  animation-play-state: running;
}
.hero-art[data-hero-animation].hero-animation-ready > .hero-frame-1 { animation-name: hero-cel-1; }
.hero-art[data-hero-animation].hero-animation-ready > .hero-frame-2 { animation-name: hero-cel-2; }
.hero-art[data-hero-animation].hero-animation-ready > .hero-frame-3 { animation-name: hero-cel-3; }
.hero-art[data-hero-animation].hero-animation-ready > .hero-frame-4 { animation-name: hero-cel-4; }
.hero-art[data-hero-animation].hero-animation-ready > .hero-frame-5 { animation-name: hero-cel-5; }
.hero-art[data-hero-animation].hero-animation-ready > .hero-frame-6 { animation-name: hero-cel-6; }
.hero-art[data-hero-animation].hero-animation-ready > .hero-frame-7 { animation-name: hero-cel-7; }
.hero-art[data-hero-animation].hero-animation-ready > .hero-frame-8 { animation-name: hero-cel-8; }
.hero-art[data-hero-animation].hero-animation-ready > .hero-frame-9 { animation-name: hero-cel-9; }
.hero-art[data-hero-animation].hero-animation-ready > .hero-frame-10 { animation-name: hero-cel-10; }
.hero-art[data-hero-animation].hero-animation-ready > .hero-frame-11 { animation-name: hero-cel-11; }
.hero-art[data-hero-animation].hero-animation-ready > .hero-frame-12 { animation-name: hero-cel-12; }
.hero-art[data-hero-animation].hero-animation-ready > .hero-frame-13 { animation-name: hero-cel-13; }
.hero-art[data-hero-animation].hero-animation-ready > .hero-frame-14 { animation-name: hero-cel-14; }
.hero-art[data-hero-animation].hero-animation-ready > .hero-frame-15 { animation-name: hero-cel-15; }
.hero-art[data-hero-animation].hero-animation-ready > .hero-frame-16 { animation-name: hero-cel-16; }
.hero-art[data-hero-animation].hero-animation-ready > .hero-frame-17 { animation-name: hero-cel-17; }
.hero-art[data-hero-animation].hero-animation-ready > .hero-frame-18 { animation-name: hero-cel-18; }
.hero-art[data-hero-animation].hero-animation-ready > .hero-frame-19 { animation-name: hero-cel-19; }
.hero-art[data-hero-animation].hero-animation-ready > .hero-frame-20 { animation-name: hero-cel-20; }
.hero-art[data-hero-animation].hero-animation-ready > .hero-frame-21 { animation-name: hero-cel-21; }
.hero-art[data-hero-animation].hero-animation-ready > .hero-frame-22 { animation-name: hero-cel-22; }
.hero-art[data-hero-animation].hero-animation-ready > .hero-frame-23 { animation-name: hero-cel-23; }
.hero-art[data-hero-animation].hero-animation-ready > .hero-frame-24 { animation-name: hero-cel-24; }
@keyframes hero-cel-1 { 0% { opacity: 1; } 6.015038% { opacity: 0; } 100% { opacity: 0; } }
@keyframes hero-cel-2 { 0% { opacity: 0; } 6.015038% { opacity: 1; } 10.150376% { opacity: 0; } 100% { opacity: 0; } }
@keyframes hero-cel-3 { 0% { opacity: 0; } 10.150376% { opacity: 1; } 14.285714% { opacity: 0; } 100% { opacity: 0; } }
@keyframes hero-cel-4 { 0% { opacity: 0; } 14.285714% { opacity: 1; } 18.421053% { opacity: 0; } 100% { opacity: 0; } }
@keyframes hero-cel-5 { 0% { opacity: 0; } 18.421053% { opacity: 1; } 22.556391% { opacity: 0; } 100% { opacity: 0; } }
@keyframes hero-cel-6 { 0% { opacity: 0; } 22.556391% { opacity: 1; } 26.691729% { opacity: 0; } 100% { opacity: 0; } }
@keyframes hero-cel-7 { 0% { opacity: 0; } 26.691729% { opacity: 1; } 32.706767% { opacity: 0; } 100% { opacity: 0; } }
@keyframes hero-cel-8 { 0% { opacity: 0; } 32.706767% { opacity: 1; } 34.586466% { opacity: 0; } 100% { opacity: 0; } }
@keyframes hero-cel-9 { 0% { opacity: 0; } 34.586466% { opacity: 1; } 38.721805% { opacity: 0; } 100% { opacity: 0; } }
@keyframes hero-cel-10 { 0% { opacity: 0; } 38.721805% { opacity: 1; } 42.857143% { opacity: 0; } 100% { opacity: 0; } }
@keyframes hero-cel-11 { 0% { opacity: 0; } 42.857143% { opacity: 1; } 46.992481% { opacity: 0; } 100% { opacity: 0; } }
@keyframes hero-cel-12 { 0% { opacity: 0; } 46.992481% { opacity: 1; } 51.12782% { opacity: 0; } 100% { opacity: 0; } }
@keyframes hero-cel-13 { 0% { opacity: 0; } 51.12782% { opacity: 1; } 53.007519% { opacity: 0; } 100% { opacity: 0; } }
@keyframes hero-cel-14 { 0% { opacity: 0; } 53.007519% { opacity: 1; } 54.887218% { opacity: 0; } 100% { opacity: 0; } }
@keyframes hero-cel-15 { 0% { opacity: 0; } 54.887218% { opacity: 1; } 59.022556% { opacity: 0; } 100% { opacity: 0; } }
@keyframes hero-cel-16 { 0% { opacity: 0; } 59.022556% { opacity: 1; } 63.157895% { opacity: 0; } 100% { opacity: 0; } }
@keyframes hero-cel-17 { 0% { opacity: 0; } 63.157895% { opacity: 1; } 67.293233% { opacity: 0; } 100% { opacity: 0; } }
@keyframes hero-cel-18 { 0% { opacity: 0; } 67.293233% { opacity: 1; } 71.428571% { opacity: 0; } 100% { opacity: 0; } }
@keyframes hero-cel-19 { 0% { opacity: 0; } 71.428571% { opacity: 1; } 77.443609% { opacity: 0; } 100% { opacity: 0; } }
@keyframes hero-cel-20 { 0% { opacity: 0; } 77.443609% { opacity: 1; } 81.578947% { opacity: 0; } 100% { opacity: 0; } }
@keyframes hero-cel-21 { 0% { opacity: 0; } 81.578947% { opacity: 1; } 85.714286% { opacity: 0; } 100% { opacity: 0; } }
@keyframes hero-cel-22 { 0% { opacity: 0; } 85.714286% { opacity: 1; } 89.849624% { opacity: 0; } 100% { opacity: 0; } }
@keyframes hero-cel-23 { 0% { opacity: 0; } 89.849624% { opacity: 1; } 93.984962% { opacity: 0; } 100% { opacity: 0; } }
@keyframes hero-cel-24 { 0% { opacity: 0; } 93.984962% { opacity: 1; } 100% { opacity: 0; } 100% { opacity: 0; } }

/* Keep the trip's late colour wash on the whole printed banner, so every cel
   and its tiny windows share one cheap MLG hallucination. */
body.tripping .hero-art[data-hero-animation] {
  filter: hue-rotate(var(--trip-color-hue)) saturate(var(--trip-color-saturation)) contrast(var(--trip-color-contrast));
}
body[data-trip='7'] .hero-art[data-hero-animation],
body[data-trip='8'] .hero-art[data-hero-animation],
body[data-trip='9'] .hero-art[data-hero-animation],
body[data-trip='10'] .hero-art[data-hero-animation] {
  animation: trip-color-cycle var(--trip-color-speed) ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .hero-art[data-hero-animation] > .hero-frame { animation: none !important; }
}