/* Container que faz o papel de moldura do vídeo */
.video-scroll-container {
  --container-height: 450px;
  
  width: 100%;
  max-width: 480px;
  height: var(--container-height);
  overflow: hidden; /* Mantém escondido no modo automático */
  position: relative;
  border-radius: 12px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
  border: 4px solid #333;
  margin: 30px auto 0 auto;
  
  /* Permite toque suave no mobile */
  -webkit-overflow-scrolling: touch;
}

/* Quando o usuário toca ou clica para interagir */
.video-scroll-container.user-touching {
  overflow-y: auto !important;
  scroll-behavior: auto; /* Mantém resposta instantânea ao arrasto */
}

/* Esconde a barra de rolagem visual mantendo o design limpo */
.video-scroll-container::-webkit-scrollbar {
  display: none;
}

/* A imagem longa dentro do container */
.scroll-image {
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  animation: catalogoAutoScroll 40s linear infinite alternate;
  
  opacity: 0;
  transition: opacity 0.3s ease-in-out;

  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* Estilo enquanto o mouse está clicando/arrastando */
.video-scroll-container.is-dragging,
.video-scroll-container.is-dragging .scroll-image {
  cursor: grabbing !important;
}

/* Desativa a animação CSS durante a interatividade do usuário */
.scroll-image.paused {
  animation: none !important;
}

.scroll-image.loaded {
  opacity: 1;
}

@keyframes catalogoAutoScroll {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(calc(-100% + var(--container-height)));
  }
}

.hero-img-wrapper {
  box-sizing: border-box;
  width: 100% !important;
}

/* Media Queries */
@media (max-width: 430px) {
  .video-scroll-container {
    --container-height: 380px;
    width: calc(100% - 40px);
    margin-top: 1px;
  }
  
  .hero-img-wrapper {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

@media (min-width: 431px) and (max-width: 700px) {
  .video-scroll-container {
    --container-height: 400px;
    width: calc(100% - 60px);
    margin-top: 1px;
  }
  
  .hero-img-wrapper {
    padding-left: 30px !important;
    padding-right: 30px !important;
  }
}