/* ==========================================================================
   Skills BV — topo, cabeçalho e hero (colagem em trilho + vídeo)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Barra de topo
   -------------------------------------------------------------------------- */

.barra-topo {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  background: var(--laranja);
  color: #1e1e1e;
  text-align: center;
}

.barra-topo__selo {
  flex-shrink: 0;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--branco);
  color: var(--preto-tipo);
  font-size: 13px;
  font-weight: 700;
  line-height: 15px;
  letter-spacing: 1.1px;
  white-space: nowrap;
}

.barra-topo__texto {
  /* Alinhado à esquerda para o preço encostar na pílula; a nota fica
     alinhada por baixo dele. */
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.1px;
  text-align: left;
}

.barra-topo__preco {
  font-weight: 700;
}

.barra-topo__preco s {
  text-decoration-thickness: from-font;
}

.barra-topo__nota {
  display: block;
  color: #2f2f2f;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Cabeçalho
   -------------------------------------------------------------------------- */

.cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px var(--gutter);
}

.logo {
  display: flex;
  gap: 8px;
  align-items: center;
  text-decoration: none;
}

.logo img,
.logo svg {
  width: 51.27px;
  height: 51.27px;
}

.logo__texto {
  font-size: 40px;
  font-weight: 700;
  line-height: 42.4px;
  letter-spacing: -1.77px;
  background: linear-gradient(90deg, #000 40.2%, #666 60.9%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --------------------------------------------------------------------------
   Hero — texto
   -------------------------------------------------------------------------- */

.hero-texto {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
  padding: 56px var(--gutter);
  text-align: center;
}

.hero-texto__topo {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  width: 100%;
}

.avatares {
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatares img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.avatares img + img {
  margin-left: -12px;
}

.hero-texto__h1 .laranja {
  display: block;
  color: var(--laranja);
}

.hero-texto__sub {
  max-width: 860px;
  color: var(--tinta-700);
  font-size: 22px;
  font-weight: 500;
  line-height: 33px;
  letter-spacing: -0.2px;
}

.hero-texto__sub b {
  color: var(--laranja);
  font-weight: 700;
}

.hero-acao {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

.hero-acao__nota {
  color: var(--tinta-600);
  font-size: 14px;
  line-height: 22px;
  letter-spacing: -0.1px;
}

/* --------------------------------------------------------------------------
   Hero — vídeo + dois trilhos retos correndo em sentidos opostos
   -------------------------------------------------------------------------- */

/* Quem recorta é cada .faixa, não o container. */
.hero-visual {
  display: flex;
  flex-direction: column;
  padding-block: 12px 8px;
}

/* A cena empilha o vídeo e, logo abaixo, o painel laranja.
   --video-altura vem da largura pela proporção do vídeo: é ela que permite
   subir o painel exatamente meia altura, fazendo a borda cair no meio. */
.hero-cena {
  /* O painel sangra de ponta a ponta; o vídeo fica centrado por cima dele. */
  --video-largura: min(900px, 100% - var(--gutter) * 2);
  --video-altura: calc(var(--video-largura) * 448 / 648);

  display: flex;
  flex-direction: column;
}

/* O painel recorta os trilhos: as peças aparecem e somem na borda dele,
   não na borda da janela. */
.hero-painel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  margin-top: calc(var(--video-altura) / -2);
  padding-top: calc(var(--video-altura) / 2 + 30px);
  /* Mesmo respiro do topo da seção seguinte (.secao), para a emenda entre o
     painel laranja e o creme ter um ritmo só. */
  padding-bottom: 120px;
  overflow: hidden;
  /* Laranja cheio à esquerda esfriando para o marrom escuro à direita —
     a brasa fica no canto de baixo, longe do vídeo. */
  background:
    /* escurece a base para a frase em branco ficar legível sobre o laranja */
    linear-gradient(180deg, rgb(20 9 2 / 0%) 62%, rgb(20 9 2 / 55%) 100%),
    radial-gradient(62% 130% at 0% 78%, #ff9327 0%, rgb(255 147 39 / 0%) 62%),
    linear-gradient(101deg, #ee7810 0%, #dd6b0d 20%, #a94f08 44%, #5b2806 70%, #241004 88%, #170902 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 14%);
}

/* --------------------------------------------------------------------------
   Vídeo âncora
   -------------------------------------------------------------------------- */

.hero-video {
  position: relative;
  z-index: 1;
  margin-bottom: 0;
  align-self: center;
  width: var(--video-largura);
  aspect-ratio: 648 / 448;
  overflow: visible;
  border-radius: 22px;
  filter: drop-shadow(0 26px 38px rgb(26 18 13 / 22%));
}

.hero-video video,
.hero-video img {
  width: 100%;
  height: 100%;
  border-radius: 22px;
  object-fit: cover;
  background: #e9e6e2;
}

.hero-video__som {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: rgb(20 18 15 / 45%);
  backdrop-filter: blur(6px);
  color: var(--branco);
  transform: translate(-50%, -50%);
  transition: opacity var(--dur-normal) var(--ease-saida),
    transform var(--dur-normal) var(--ease-saida);
}

.hero-video__som svg {
  width: 40px;
  height: 40px;
}

.hero-video__som:hover {
  transform: translate(-50%, -50%) scale(1.06);
}

/* Com som: o símbolo some e o vídeo reinicia com áudio */
.hero-video.com-som .hero-video__som {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.8);
}

/* --------------------------------------------------------------------------
   Trilhos de peças

   Uma faixa repete o mesmo conjunto até cobrir a tela e anda exatamente a
   largura de um conjunto (--passo, medido no JS) — a emenda nunca aparece.
   -------------------------------------------------------------------------- */

.faixa {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.faixa__fita {
  display: flex;
  gap: 16px;
  align-items: center;
  width: max-content;
  padding-block: 12px;
  will-change: transform;
}

/* O deslocamento é aplicado pelo JS (Web Animations API), em pixel medido.
   --dur fica aqui porque é onde a velocidade muda por breakpoint. */
.faixa__fita--direita {
  --dur: 56s;
}

.faixa__fita--esquerda {
  --dur: 64s;
}

@keyframes corre-direita {
  from {
    transform: translate3d(calc(var(--passo, 0px) * -1), 0, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes corre-esquerda {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(calc(var(--passo, 0px) * -1), 0, 0);
  }
}

/* Todas as peças têm a mesma altura e a largura sai da proporção do
   próprio arquivo — escala proporcional, sem distorcer nenhuma.
   200px é a altura real da arte de todas as peças (o PNG de origem tem
   256px, mas 28px de cada lado são só a margem transparente da sombra).
   Exibir acima disso amplia o bitmap e borra. */
.faixa {
  --altura-peca: 200px;
}

.peca {
  flex-shrink: 0;
  width: auto;
  height: var(--altura-peca);
  filter: drop-shadow(0 10px 20px rgb(20 12 4 / 26%));
}

/* Acento manuscrito, logo abaixo dos dois trilhos */
.hero-acento {
  margin-top: 34px;
  padding-inline: var(--gutter);
  color: var(--branco);
  font-family: var(--manuscrita);
  font-size: 42px;
  line-height: 1.25;
  text-align: center;
  transform: rotate(-1.2deg);
}

/* --------------------------------------------------------------------------
   Responsivo
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .logo img,
  .logo svg {
    width: 42px;
    height: 42px;
  }

  .logo__texto {
    font-size: 32px;
    line-height: 34px;
    letter-spacing: -1.4px;
  }

  .hero-painel {
    padding-bottom: 80px;
  }

  .hero-texto__sub {
    font-size: 18px;
    line-height: 28px;
  }
}

@media (max-width: 720px) {
  .barra-topo {
    flex-direction: column;
    gap: 8px;
    padding: 12px 20px;
  }

  .barra-topo__selo {
    padding: 4px 12px;
    font-size: 12px;
    letter-spacing: 0.6px;
  }

  .barra-topo__texto {
    font-size: 12px;
    line-height: 18px;
    text-align: center;
  }

  .cabecalho {
    padding: 12px var(--gutter);
  }

  .logo img,
  .logo svg {
    width: 34px;
    height: 34px;
  }

  .logo__texto {
    font-size: 24px;
    line-height: 26px;
    letter-spacing: -1px;
  }

  .btn--escuro {
    padding: 11px 16px;
    font-size: 14px;
  }

  .hero-texto {
    gap: 20px;
    padding: 40px var(--gutter) 28px;
  }

  .avatares img {
    width: 35.5px;
    height: 35.5px;
  }

  .avatares img + img {
    margin-left: -8.9px;
  }

  .hero-texto__sub {
    font-size: 16px;
    line-height: 24px;
  }

  .hero-acao__nota {
    font-size: 13px;
  }


  .hero-painel {
    gap: 10px;
    /* Mesmo respiro do desktop, proporcional: o vídeo não encosta na faixa. */
    padding-top: calc(var(--video-altura) / 2 + 22px);
    padding-bottom: 30px;
  }

  .faixa__fita {
    gap: 10px;
    padding-block: 8px;
  }

  .faixa {
    --altura-peca: 150px;
  }

  .hero-acento {
    margin-top: 24px;
    font-size: 26px;
  }

  .hero-video__som {
    width: 62px;
    height: 62px;
  }

  .hero-video__som svg {
    width: 28px;
    height: 28px;
  }
}