.content {
  position: relative; /* This is required for z-index to work */
  z-index: 2; /* Higher than the background's z-index */
  /* Other styles for your content */
}
.backgrounds {
    position: fixed; /* Or absolute, depending on your needs */
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: black;
    z-index: -1; /* Keep it behind the content */
}
.background {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: left;
  transform: scale(1.0); /* Start zoomed in */
  opacity: 0;
  animation: fadeIn 1s, zoomPan 10s 1s, fadeOut 1s 10s; /* Adjusted timing */
  animation-fill-mode: forwards;
  filter: blur(1px);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes zoomPan {
  0%, 6% { transform: scale(1.0); }
  6%, 70% { transform: scale(1.5) translateX(15%); } /* Zoom is maintained longer before starting to pan */
  70%, 100% { transform: scale(1.5) translateX(-15%); } /* Slower panning towards the end */
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}