main ul:first-of-type li:nth-child(1), main ul:last-of-type li:nth-child(1) { animation-delay: 00s; }
main ul:first-of-type li:nth-child(2), main ul:last-of-type li:nth-child(2) { animation-delay: 10s; }
main ul:first-of-type li:nth-child(3), main ul:last-of-type li:nth-child(3) { animation-delay: 20s; }
main ul:first-of-type li:nth-child(4), main ul:last-of-type li:nth-child(4) { animation-delay: 30s; }
main ul:first-of-type li:nth-child(5), main ul:last-of-type li:nth-child(5) { animation-delay: 40s; }

main ul {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

main ul li {
  list-style: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

main ul:first-of-type {
  z-index: 1;
}

main ul:first-of-type li {
  background-size: cover;
  background-position: center center;
  animation: slideshow 50s linear infinite;
}

:root { --bg-layer:
  linear-gradient( 90deg, rgba(0,0,0,.50) 0%, rgba(0,0,0,0) 100%),
  linear-gradient(135deg, rgba(0,0,0,.50) 0%, rgba(0,0,0,0) 100%);
}

main ul:first-of-type li:nth-child(1) { background-image: var(--bg-layer), url("./photos/01.jpg"); }
main ul:first-of-type li:nth-child(2) { background-image: var(--bg-layer), url("./photos/02.jpg"); }
main ul:first-of-type li:nth-child(3) { background-image: var(--bg-layer), url("./photos/03.jpg"); }
main ul:first-of-type li:nth-child(4) { background-image: var(--bg-layer), url("./photos/04.jpg"); }
main ul:first-of-type li:nth-child(5) { background-image: var(--bg-layer), url("./photos/05.jpg"); }

@keyframes slideshow {
     0% { opacity: 0; transform: scale(1.25); }
   2.5% { opacity: 1; transform: scale(1.25); }
    20% { opacity: 1; transform: scale(1.00); }
  22.5% { opacity: 0; transform: scale(1.50); }
}

main ul:last-of-type {
  z-index: 2;
}

main ul:last-of-type li {
  opacity: 0;
  left: -100%; /* fix: abbr */
  animation: caption 50s ease-out infinite;
}

main ul:last-of-type li span {
  color: #83bf21;
  animation: flash 100ms ease-out infinite;
}

main ul:last-of-type li span svg {
  height: .75em;
}

@keyframes caption {
     0% { opacity: 0; left: 0%; }
   2.5% { opacity: 1; left: 0%; }
    20% { opacity: 1; left: 0%; }
  22.5% { opacity: 0; left: 0%; }
  23.0% { left: -100%; } /* fix: abbr */
}

@keyframes flash {
  50% { opacity: .5; }
}

main > div {
  position: absolute;
  background: #83bf21;
  height: .25rem;
  bottom: 0;
  left: 0;
  z-index: 3;
  opacity: .65;
  animation: timeline 10s linear infinite;
}

@keyframes timeline {
  0%   { width:   0%; }
  100% { width: 100%; }
}