/* --------------------------------------------------------------------------
   4. Seção Inicial (Início / Hero)
   -------------------------------------------------------------------------- */
.hero-section {
  position: relative;
  min-height: calc(100vh - var(--header-height));
  display: flex;
  align-items: center;
  padding: clamp(2rem, 5vh, 4rem) 0;

  /* Isola os pseudo-elementos do fluxo de empilhamento do conteúdo */
  isolation: isolate;
  /* Contém o ::before expandido para o efeito de parallax */
  overflow: hidden;
  --hero-scroll-progress: 0;
}

/* Fotografia de fundo — nítida, sem filtros, sem deformação */
/* Usa recorte 16:9 (4000x2250) centrado nos rostos da equipe (26%-64% da foto original) */
/* inset: -10% no topo garante que o parallax de até 8% não revele borda vazia */
.hero-section::before {
  content: '';
  position: absolute;
  inset: -10% 0 0 0;
  z-index: -2;
  background-image: url('../../fotos/fotos-time/time-campeao-hero.jpg');
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
  transform: translateY(calc(var(--hero-scroll-progress) * -8%));
  will-change: transform;
}

/*
  Gradiente direcional: escuro apenas no lado esquerdo para criar
  contraste de leitura, abrindo gradualmente para transparência
  no lado direito — a equipe fica plenamente visível.
*/
.hero-section::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 55% 45% at 84% 12%, rgba(0, 200, 196, 0.24) 0%, transparent 62%),
    radial-gradient(ellipse 70% 55% at 16% 108%, rgba(0, 70, 94, 0.55) 0%, transparent 70%),
    linear-gradient(
      to right,
      rgba(0, 20, 28, 0.80) 0%,
      rgba(0, 20, 28, 0.55) 38%,
      rgba(0, 20, 28, 0.18) 65%,
      rgba(0, 20, 28, 0.00) 100%
    );
}

.hero-container {
  max-width: var(--max-width-content);
  width: 100%;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 4vw, 3.5rem);
  display: flex;
  align-items: center;
}

/* Coluna de texto — lado esquerdo, largura controlada */
.hero-content-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  z-index: 2;
  max-width: 580px;
  width: 100%;
}

/* Título editorial principal */
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.2rem + 2.2vw, 3.4rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: #ffffff;
  margin-bottom: clamp(1rem, 2vh, 1.5rem);
  text-wrap: balance;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
}

/* Texto de apoio */
.hero-subtext {
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.92rem + 0.3vw, 1.18rem);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: rgba(247, 239, 226, 0.90);
  max-width: 48ch;
  text-wrap: pretty;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

/* --------------------------------------------------------------------------
   6. Responsividade e Adaptações de Tela
   -------------------------------------------------------------------------- */

/* Telas Grandes (Desktops amplos) */
@media (min-width: 1440px) {
  .hero-container {
    padding: 0 3rem;
    gap: 4.5rem;
  }

}

/* Otimização para Laptops e Telas de Altura Moderada (ex: 1366x768, 1440x900) */
@media (max-height: 820px) and (min-width: 992px) {
  .hero-section {
    padding: 1.5rem 0;
  }

  .hero-title {
    font-size: clamp(1.75rem, 1.1rem + 1.6vw, 2.6rem);
    margin-bottom: 0.85rem;
  }

  .hero-subtext {
    font-size: 0.97rem;
    line-height: 1.55;
  }
}

/* Hero em Tablets */
@media (max-width: 991px) {
  /* Hero em Tablets — texto centralizado, overlay mais uniforme */
  .hero-section {
    padding: 3rem 0 4rem;
    min-height: calc(100vh - 64px);
  }

  /* Em telas menores, a fotografia preenche bem sem o gradiente direcional.
     Aplicamos um overlay escuro uniforme mais leve para boa leitura. */
  .hero-section::after {
    background: rgba(0, 15, 22, 0.55);
  }

  .hero-container {
    padding: 0 1.75rem;
    justify-content: center;
  }

  .hero-content-col {
    align-items: center;
    text-align: center;
    max-width: 560px;
  }

  .hero-title {
    font-size: clamp(1.8rem, 4.5vw, 2.8rem);
  }

  .hero-subtext {
    max-width: 44ch;
  }
}

/* Hero em Celulares */
@media (max-width: 639px) {
  .hero-container {
    padding: 0 1.25rem;
  }

  .hero-title {
    font-size: clamp(1.6rem, 7vw, 2.1rem);
  }

  .hero-subtext {
    font-size: 0.97rem;
    line-height: 1.55;
  }

}

/* ==========================================================================
   7. Transição de Scroll: Ondas SVG (Hero → Sobre nós)
   ========================================================================== */

/*
  O elemento .hero-wave-transition fica ancorado na borda inferior da seção
  Início. As ondas SVG "vazam" para a próxima seção, criando continuidade visual.
*/
.hero-wave-transition {
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  z-index: 2;
  line-height: 0;
  overflow: hidden;
}

.wave-svg {
  display: block;
  width: 100%;
  height: clamp(80px, 10vw, 150px);
}

/*
  A onda é a "quebra de superfície": a água iluminada sobe sobre a foto
  e entrega o topo do Sobre nós já no tom pelágico. A camada de trás é
  um pouco mais clara para criar profundidade; a da frente casa com a
  cor de chegada da próxima seção.
*/
.wave-back {
  fill: var(--depth-0);
  opacity: 0.55;
  animation: wave-drift 14s linear infinite;
  transform-origin: center bottom;
}

.wave-front {
  fill: var(--depth-1);
  opacity: 0.95;
  animation: wave-drift 9s linear infinite reverse;
  transform-origin: center bottom;
}

.wave-crest {
  opacity: 0.75;
  animation: wave-drift 9s linear infinite reverse;
  transform-origin: center bottom;
}

@keyframes wave-drift {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(-3%); }
  100% { transform: translateX(0); }
}