/* Lenis (scroll suave)*/
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: clip;
  touch-action: none; /* travado: nem arrastar move a tela */
}

/* impede o "rubber band" do toque, que ao arrastar revelava o fundo atrás do vídeo */
html,
body {
  overscroll-behavior: none;
}

/* esconde a barra de scroll nativa (rolagem é via Lenis) — some o gap teal na lateral */
html,
body {
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* Edge legado */
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;              /* Chrome / Safari / Edge */
}

/* Estados iniciais das animações (só quando o JS está ativo) */
.js .header .container > *,
.js .intro h1,
.js .sobre {
  opacity: 0;
}

.js .sobre {
  visibility: hidden;
}

/* vídeo escondido até o JS iniciar a queda (evita flash; visibility não conflita
   com o transform do GSAP, ao contrário de translateY) */
.js .video-scroll {
  visibility: hidden;
}

/* Fontes */
@font-face {
  font-family: 'quinor';
  src: url(fonts/quinor.woff2);
}

@font-face {
  font-family: 'ropa';
  src: url(fonts/ropa.woff2);
}

/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Estilos globais */
body {
  font-family: 'ropa', sans-serif;
  overflow-x: hidden;
  background-color: #23B3AE;

  /* sem seleção de texto em todo o site (era o comportamento da session ipa, onde o
     SAPHIR cobria o conteúdo): evita seleção acidental ao arrastar/rolar, sobretudo no touch */
  -webkit-user-select: none;
  user-select: none;
}

/* Tipografia */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'quinor', sans-serif;
  font-weight: normal;
  line-height: 100%;
  text-transform: uppercase;
}

h2 {
  font-size: 64px;
}

h3 {
  font-size: 48px;
  font-family: 'ropa', sans-serif;
}

p {
  font-size: 20px;
  line-height: 120%;
  margin-bottom: 20px;
  margin-top: 20px;
}

/* Container */
.container {
  width: 100%;
  max-width: 1260px;
  margin: 0 auto;
}

/* Header */
.header {
  position: fixed;
  top: 12px;
  left: 0;
  width: 100%;
  z-index: 100;

  .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

/* Hero e introdução */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  text-align: center;
  position: relative; /* âncora dos indicadores de scroll (.saphir sobrepõe com absolute) */
}

.intro {
  min-height: 62vh; /* encurta o hero: menos verde vazio antes da garrafa (o produto é teal igual, sem emenda) */
  background-image: url(img/background.svg);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;

  h1 {
    font-size: 140px;
  }
}

/* Produto */
.produto {
  position: relative;
  overflow: hidden;
  height: 100vh;
}

.produto-garrafa {
  width: 180px;

  position: absolute;
  top: 50vh;
  left: 50%;

  transform: translate(-50%, -50%);
  z-index: 10;
}

.garrafa {
  display: block;
  width: 100%;
  transform: rotate(15deg);
}

/* Seção Saphir */
.saphir,
.sobre {
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 100vh;
}

.saphir {
  z-index: 2;

  h2 {
    font-size: 340px;
  }
}

/* Seção Sobre */
.sobre {
  background-color: #E9C23A;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  align-items: center;


  h2 {
    margin-bottom: 24px;
  }

  .container {
    display: flex;
    justify-content: space-between;
  }

  .descricao,
  .combinacao {
    max-width: 494px;
  }

  .combinacao {
    .detalhes {
      display: flex;
      column-gap: 48px;

      font-family: 'quinor', sans-serif;

      .info {
        display: block;
        font-size: 14px;
      }

      .valor {
        color: rgba(255, 255, 255, 0.60);
        font-size: 36px;
        text-transform: uppercase;
      }
    }
  }
}

/* Seção do vídeo */
.section-video {
  height: 100vh;
  height: 100dvh; /* mobile: acompanha a altura real (barra de endereço abrindo/fechando) */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #23B3AE; /* teal da marca: aparece atrás enquanto o vídeo cai */
  overflow: hidden; /* esconde o vídeo enquanto está acima da tela (antes de cair) */

  video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.7;
  }

  /* dissolve o rodapé do vídeo no teal da seção de baixo (sem corte seco) */
  &::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 15%;
    background: linear-gradient(to bottom, rgba(35, 179, 174, 0), #23B3AE);
    z-index: 1;
    pointer-events: none;
  }

  .content-video {
    position: absolute;
    width: 100%;
    z-index: 2;
  }

  .scroll-hint {
    position: absolute;
    right: 64px;
    bottom: 64px;
    z-index: 2;

    font-family: 'quinor', sans-serif;
    font-size: 24px;
    color: #000;
    text-transform: uppercase;
  }
}

.js .scroll-hint {
  opacity: 0;
}

/* Indicadores de scroll nas quinas das seções após o hero. A direção da seta segue o
   scroll (classe .cima alternada no JS). Injetados pelo JS; cada alvo tem position: relative */
.scroll-quina {
  position: absolute;
  bottom: 28px;
  z-index: 30;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  color: #000;
  pointer-events: none;
  animation: quina-bob 1.7s ease-in-out infinite;
}

.scroll-quina.esq { left: 28px; }
.scroll-quina.dir { right: 28px; }

.scroll-quina svg {
  display: block;
  width: 13px;
  height: 13px;
}

/* rolando p/ cima: seta aponta p/ cima e o bob inverte */
.scroll-quina.cima svg { transform: rotate(180deg); }
.scroll-quina.cima { animation-name: quina-bob-cima; }

@keyframes quina-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@keyframes quina-bob-cima { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

@media (prefers-reduced-motion: reduce) {
  .scroll-quina { animation: none; }
}

/* Seção História */
.historia {
  min-height: 100vh;
  background-color: #A1D2CE; /* cor final; o amarelo→teal é animado no scroll (script.js) */
  display: flex;
  align-items: center;
  padding: 120px 0;
  position: relative; /* âncora da garrafa (mesma ideia do .produto) */

  /* garrafa própria da seção, como a do SAPHIR: por ser filha da seção pinada, ela fica
     presa junto no pin — sem precisar compensar scroll, que era o que travava a descida */
  .historia-garrafa {
    width: 160px;
    position: absolute;
    top: 56%;
    left: 66%;
    transform: translate(-50%, -50%);
    z-index: 5;

    img {
      display: block;
      width: 100%;
    }
  }

  .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    column-gap: 72px;
  }

  .historia-texto {
    max-width: 620px;

    h2 {
      margin-bottom: 20px;
    }

    h3 {
      margin-bottom: 28px;
    }
  }

  .historia-marcos {
    display: flex;
    flex-direction: column;
    row-gap: 44px;

    font-family: 'quinor', sans-serif;

    .marco {
      display: block;
      font-size: 44px;
      line-height: 100%;
      text-transform: uppercase;
    }

    .legenda {
      display: block;
      max-width: 210px;
      margin-top: 8px;

      font-family: 'ropa', sans-serif;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.55);
    }
  }
}

/* Seção Premiação */
.premio {
  height: 100vh;
  background-color: #E9C23A; /* amarelo do projeto; o azul->amarelo é animado no scroll (script.js) */
  display: flex;
  align-items: center;
  position: relative; /* âncora do rodapé */

  /* rodapé: fica no pé da mesma tela do prêmio, centralizado */
  .rodape {
    position: absolute;
    left: 0;
    bottom: 40px;
    width: 100%;
    text-align: center;

    .aviso {
      margin: 0 0 6px;
      font-family: 'quinor', sans-serif;
      font-size: 20px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .logo-coca {
      display: block;
      width: 200px;
      height: 40px; /* recorta o vazio transparente do PNG (204x192) */
      object-fit: cover;
      object-position: center;
      margin: 0 auto;
    }
  }

  .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .premio-texto {
    max-width: 494px;

    h2 {
      margin-bottom: 24px;
      white-space: nowrap; /* "medalha de prata" numa linha só */
    }

    h3 {
      margin-bottom: 28px;
    }
  }

  .premio-produtos {
    display: flex;
    align-items: flex-end;
    column-gap: 36px;
    margin-top: 114px;
  }

  .premio-lata {
    display: block;
    width: 150px;
  }

  .garrafa-wrap {
    display: block; /* wrapper: recebe posição/escala/rotação da viagem */
  }

  .premio-garrafa {
    display: block;
    width: 150px;
  }
}

@media (max-width: 1024px) {
  .container {
    max-width: 900px;
    padding: 0 32px;
  }

  .header {
    top: 20px;

    .logo img {
      width: 150px;
    }

    .palhaco img {
      width: 72px;
    }
  }

  h2 {
    font-size: 72px;
  }

  h3 {
    font-size: 40px;
  }

  p {
    font-size: 18px;
  }

  .intro {
    h1 {
      font-size: 96px;
    }
  }

  .produto-garrafa {
    width: 130px;
  }

  .saphir {
    h2 {
      font-size: 220px;
    }
  }

  .sobre {
    .container {
      column-gap: 120px;
    }

    .descricao,
    .combinacao {
      max-width: 360px;
    }

    .combinacao {
      .detalhes {
        column-gap: 28px;

        .valor {
          font-size: 28px;
        }
      }
    }
  }

  .section-video {
    .content-video {
      h2 {
        font-size: 72px;
      }
    }
  }

  .historia {
    .container {
      column-gap: 40px;
    }

    .historia-texto {
      max-width: 460px;
    }

    .historia-marcos {
      row-gap: 32px;

      .marco {
        font-size: 34px;
      }

      .legenda {
        max-width: 170px;
      }
    }
  }

  .premio {
    .container {
      column-gap: 40px;
    }

    .premio-produtos {
      column-gap: 28px;
      margin-top: 80px;
    }

    .premio-lata,
    .premio-garrafa {
      width: 130px;
    }
  }
}

@media (max-width: 768px) {
  .container {
    max-width: 100%;
    padding: 0 24px;
  }

  .header {
    top: 16px;

    .logo img {
      width: 120px;
    }

    .palhaco img {
      width: 56px;
    }
  }

  h2 {
    font-size: 36px;
  }

  h3 {
    font-size: 30px;
  }

  p {
    font-size: 16px;
    margin-top: 12px;
    margin-bottom: 12px;
  }

  .intro {
    min-height: 80vh; /* encurta o hero (o produto é teal igual, então não aparece emenda) */

    h1 {
      font-size: 40px;
    }
  }

  /* mobile: pin + travessia vertical da garrafa (mesma ideia do desktop) */
  .produto-garrafa {
    width: 70px;
    top: 38vh; /* sobe junto com o SAPHIR p/ encurtar o vão depois do hero */
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
  }

  .saphir {
    padding-bottom: 24vh; /* centraliza o conteúdo em ~38vh em vez de 50vh */

    h2 {
      font-size: 104px; /* preenche a largura como no desktop */
    }
  }

  .sobre {
    align-items: center;

    /* h2/h3/p sem override: herdam o global mobile (36/30/16), igual ao prêmio */
    h2 {
      margin-bottom: 6px;
    }

    p {
      line-height: 115%;
      margin-top: 8px;
      margin-bottom: 8px;
    }

    .container {
      flex-direction: column;
      row-gap: 340px; /* espaço p/ a garrafa descer e caber entre os blocos */
      text-align: left;
    }

    .descricao,
    .combinacao {
      max-width: 100%;
    }

    .combinacao {
      .detalhes {
        flex-wrap: wrap;
        justify-content: center;
        column-gap: 24px;
        row-gap: 12px;

        .info {
          font-size: 12px;
        }

        .valor {
          font-size: 20px;
        }
      }
    }
  }

  .section-video {
    .content-video {
      top: auto;
      bottom: 40px; /* texto no canto inferior esquerdo (à esquerda pelo padding do container) */

      h2 {
        font-size: 46px;
      }
    }

    .scroll-hint {
      right: 24px;
      bottom: 40px;
      font-size: 14px;
    }
  }

  .historia {
    padding: 44px 0; /* enxuto: garante caber (com os marcos) em telas curtas */

    .container {
      position: relative; /* âncora da garrafa (mobile): o container termina nos marcos */
      flex-direction: column;
      align-items: flex-start;
      row-gap: 22px;
    }

    .historia-texto {
      max-width: 100%;

      /* h2/h3/p sem override: herdam o global mobile (36/30/16), igual ao prêmio */
      h2 {
        margin-bottom: 8px;
      }

      h3 {
        margin-bottom: 14px;
      }

      p {
        line-height: 122%;
        margin-top: 8px;
        margin-bottom: 8px;
      }
    }

    /* garrafa no canto inferior direito, ao lado dos marcos (como na referência).
       Ancorada no CONTAINER (não na seção): o container termina exatamente nos marcos,
       que estão sempre visíveis durante o pin — assim a base nunca é cortada, mesmo em
       telas curtas onde a seção fica mais alta que a viewport. Medida em vh p/ escalar */
    .historia-garrafa {
      width: auto;
      /* altura ~= a do bloco de marcos (que é fixa, pois as fontes são fixas): assim o topo
         da garrafa NÃO sobe até os parágrafos (que ocupam a largura toda) e não os cobre.
         Ancorada no container => base alinhada aos marcos, sempre visível durante o pin */
      height: 210px;
      top: auto;
      right: auto;
      bottom: 0;
      /* centro da garrafa na marca indicada: mais pro meio, ao lado do "BAVIERA" */
      left: 57%;
      transform: translateX(-50%);

      img {
        width: auto;
        height: 100%;
      }
    }

    .historia-marcos {
      flex-direction: row;
      flex-wrap: wrap;
      max-width: 45%; /* deixa a coluna da direita livre p/ a garrafa (agora maior) */
      column-gap: 26px;
      row-gap: 20px;

      .marco {
        font-size: 26px;
      }

      .legenda {
        max-width: 108px; /* não deixa a legenda encostar na garrafa */
        font-size: 12px;
        margin-top: 4px;
      }
    }
  }

  .premio {
    height: auto;
    min-height: 100vh;
    align-items: flex-start; /* alinha ao topo; centralizado, o título subia sob o header */
    padding: 108px 0 96px;   /* topo maior que a altura do header (~83px) */

    /* sobe os indicadores acima do rodapé (aviso + logo ficam no pé no mobile) */
    .scroll-quina {
      bottom: 92px;
    }

    .container {
      flex-direction: column;
      row-gap: 12px;
      align-items: center;
    }

    .premio-texto {
      max-width: 100%;

      h2 {
        white-space: normal; /* no mobile pode quebrar em 2 linhas p/ não estourar */
      }
    }

    .premio-produtos {
      justify-content: center;
      column-gap: 20px;
      margin-top: 4px;
    }

    .premio-lata {
      width: 86px;
    }

    /* mobile: aviso num canto, logo no outro */
    .rodape {
      bottom: 28px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 24px;
      text-align: left;

      .aviso {
        margin: 0;
        max-width: 46%;
        font-size: 13px;
        line-height: 1.2;
      }

      .logo-coca {
        width: 128px;
        height: 26px;
        margin: 0;
      }
    }

    /* maior que a da história (que fica em 0.92) para a viagem CRESCER, não encolher */
    .premio-garrafa {
      width: 100px;
    }
  }
}