/* ============================================================
   Header Background Images — #imgs
   Ken Burns crossfade slideshow
   Based on Shoka design
   ============================================================ */

#imgs {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 70vh;
  min-height: 25rem;
  z-index: -9;
  background-color: var(--header-bg);
}

#imgs img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
}

#imgs .item {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  opacity: 0;
  z-index: 0;
  animation: imageAnimation 36s linear infinite 0s;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

/* Staggered animation delays for 6 images */
#imgs .item:nth-child(2)  { animation-delay: 6s; }
#imgs .item:nth-child(3)  { animation-delay: 12s; }
#imgs .item:nth-child(4)  { animation-delay: 18s; }
#imgs .item:nth-child(5)  { animation-delay: 24s; }
#imgs .item:nth-child(6)  { animation-delay: 30s; }

/* Dark overlay */
#imgs::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: var(--zindex-0);
  transition: background-color var(--transition-duration) var(--transition-ease);
}

/* Ken Burns crossfade */
@keyframes imageAnimation {
  0% {
    opacity: 0;
    animation-timing-function: ease-in;
  }
  2% {
    opacity: 1;
  }
  8% {
    opacity: 1;
    transform: scale(1.05);
    animation-timing-function: ease-out;
  }
  17% {
    opacity: 1;
    transform: scale(1.1);
  }
  25% {
    opacity: 0;
    transform: scale(1.1);
  }
  100% {
    opacity: 0;
  }
}