#background-image,
.background-image {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important;
  background-size: cover !important;
}

#background-image::after {
  content: "";
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%; z-index: 1;
  
  background-image: 
    /* THE SHINE */
    linear-gradient(115deg, 
      transparent 0%, 
      transparent 35%, 
      rgba(255, 255, 255, 0.14) 50%, 
      transparent 65%, 
      transparent 100%
    ),
    /* THE BARS (17.5% Drop) */
    linear-gradient(to bottom,
      #1b2229 0%, #141a1f 17.5%,         
      #0099cc 17.5%, #0077aa 18.5%,      
      transparent 18.5%, transparent 88%, 
      #0077aa 88%, #0099cc 89%,          
      #141a1f 89%, #1b2229 100%          
    );

  background-size: 200% 100%, 100% 100%;
  background-repeat: no-repeat;
  
  /* Total 14s loop: 4s active + 10s pause */
  animation: shineSweep 14s infinite linear;
  pointer-events: none;
}

@keyframes shineSweep {
  /* Shine moves from 0% to 28% of the total 14s (which is 4 seconds) */
  0% { background-position: 150% 0, 0 0; }
  28% { background-position: -50% 0, 0 0; }
  /* Shine stays off-screen for the remaining 72% (10 seconds) */
  100% { background-position: -50% 0, 0 0; }
}