/* =========================================================
   INTRO: logo grande no meio da tela, por cima da foto.
   Ao rolar, ela encolhe e vai até o lugar dela na navbar.
   Pra remover: apague o <div class="intro"> dentro do hero,
   este arquivo, o intro.js e a pasta vendor/.
   ========================================================= */
.intro{
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 100vh;
  height: 100svh;
  z-index: 5;
  pointer-events: none;
}

/* logo grande (posição e tamanho vêm do intro.js) */
.intro-logo{
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(84vw, 680px);
  height: auto;
  max-width: none;
  transform: translate(-50%, -50%);
  transform-origin: 0 0;
  will-change: transform;
  filter: drop-shadow(0 12px 40px rgba(0,0,0,.55));
  transition: opacity .25s ease;
}
/* quando chega na navbar, a logo de lá assume e esta some */
.intro.logo-entregue .intro-logo{ opacity: 0; }

/* "Role para baixo" */
.intro-hint{
  position: absolute;
  left: 0; right: 0; bottom: 8%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 0 24px;
  text-align: center;
}
.intro-seta{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: 'Oswald', sans-serif;
  font-size: .8rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gray-light);
  animation: intro-bob 2s ease-in-out infinite;
}
.intro-seta::after{
  content: "";
  width: 1px;
  height: 34px;
  background: linear-gradient(var(--orange), transparent);
}
@keyframes intro-bob{ 50%{ transform: translateY(6px); } }

@media (max-height: 520px){
  .intro-hint{ bottom: 5%; }
  .intro-seta::after{ height: 20px; }
}

/* véu escuro do hero controlado pela animação */
.hero::before{ opacity: var(--veu, 1); }

/* cabeçalho invisível enquanto a logo grande está na tela (some/aparece no lugar,
   sem deslizar, pra logo grande "virar" a da navbar) */
#siteHeader{ transition: background .3s, border-color .3s, padding .3s, opacity .25s ease; }
#siteHeader.escondido{ opacity: 0; pointer-events: none; }

/* se as bibliotecas não carregarem: site normal, sem intro */
.intro-off .intro{ display: none; }

/* estado inicial antes do JS: menu e texto do topo escondidos, só a logo aparece */
.intro-on #siteHeader{ opacity: 0; }
.intro-on .hero-content{ opacity: 0; }
.intro-on .hero::before{ opacity: .55; }
.intro-on .hero-bg{ filter: grayscale(.1) brightness(.5) contrast(1.05); transform: scale(1.2); }