body,
html {
  margin: 0;
  padding: 0;
  background: rgb(0, 5, 69);
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.scroll-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 200%;
  transform: rotate(-5deg) scale(1.2);
  display: flex;
  flex-direction: column;
  gap: 20px;
  animation: scroll-posters 60s linear infinite;
}

.poster-row {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.poster {
  width: 180px;
  height: 270px;
  background-size: cover;
  background-position: center;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.7);
  flex-shrink: 0;
}

@keyframes scroll-posters {
  0% {
        transform: rotate(-5deg) translateY(-5%) scale(1.2);
      }
      25% {
        transform: rotate(-5deg) translateY(-70%) scale(1.2);
      }
      50% {
        transform: rotate(-5deg) translateY(0%) scale(1.2);
      }
      75% {
        transform: rotate(-5deg) translateY(-70%) scale(1.2);
      }
      100% {
        transform: rotate(-5deg) translateY(5%) scale(1.2);
      }
}