/* Container que faz o papel de moldura do vídeo */
.video-scroll-container {
  --container-height: 450px; /* Criamos uma variável para controlar a altura padrão (telas grandes) */
  
  width: 100%;
  max-width: 480px;         /* Limita a largura para ficar elegante no design */
  height: var(--container-height); /* Usa a variável aqui */
  overflow: hidden;         /* Esconde tudo o que passar dos limites de altura */
  position: relative;
  border-radius: 12px;      /* Bordas arredondadas estilo mockup de app */
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3); /* Sombra para dar profundidade */
  border: 4px solid #333;   /* Uma bordinha fina escura simular uma tela */
  margin: 0 auto;           /* Garante que fique centralizado */
  margin-top: 30px;
}

/* A imagem longa dentro do container */
.scroll-image {
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  animation: catalogoAutoScroll 40s linear infinite alternate;
  
  /* Esconde a imagem por padrão para não piscar a antiga */
  opacity: 0;
  transition: opacity 0.3s ease-in-out; /* Transição suave ao aparecer */

  /* --- BLOQUEIOS EM CELULAR --- */
  user-select: none;           /* Impede selecionar a imagem */
  -webkit-user-select: none;   /* Safari */
  -webkit-touch-callout: none; /* Desativa o menu de contexto no iOS */
  pointer-events: none;        /* Permite rolar a página tocando por cima da imagem */
}

/* Classe que o JavaScript vai adicionar para revelar a imagem sorteada */
.scroll-image.loaded {
  opacity: 1;
}

/* Animação que move a imagem baseando-se no tamanho atual do container */
@keyframes catalogoAutoScroll {
  0% {
    transform: translateY(0);
  }
  100% {
    /* O CSS calcula automaticamente o final exato usando a altura da variável */
    transform: translateY(calc(-100% + var(--container-height)));
  }
}

/* Garante que o wrapper se comporte bem com paddings */
.hero-img-wrapper {
  box-sizing: border-box;
  width: 100% !important;
}

/* ==============================================
   REGRAS DE RESPONSIVIDADE (MEDIA QUERIES)
   ============================================== */

/* 1. Telas até 430px (Celulares menores) */
@media (max-width: 430px) {
  .video-scroll-container {
    --container-height: 380px; /* Reduz a altura para 380px */
    width: calc(100% - 40px);  /* Força a moldura a encolher descontando os 20px de cada lado (40px total) */
    margin-top: 1px;
  }
  
  .hero-img-wrapper {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* 2. Telas de 431px até 700px (Celulares maiores / Tablets) */
@media (min-width: 431px) and (max-width: 700px) {
  .video-scroll-container {
    --container-height: 400px; /* Define a altura para 400px */
    width: calc(100% - 60px);  /* Força a moldura a encolher descontando os 30px de cada lado (60px total) */
    margin-top: 1px;
  }
  
  .hero-img-wrapper {
    padding-left: 30px !important;
    padding-right: 30px !important;
  }
}