/* ==========================================================================
   3. HERO — slider em tela cheia
   Cada slide: foto + overlay azul + conteúdo alinhado à esquerda.
   Troca automática a cada --hero-interval; as barras inferiores mostram o
   progresso e permitem navegar manualmente.
   ========================================================================== */

.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 600px;
  max-height: 1000px;
  overflow: hidden;
  background: var(--navy-950);
  isolation: isolate;
}

/* ---------- Slides ---------- */

.hero-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s var(--ease), visibility 1s;
}

.hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}

.hero-slide__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero-slide__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.1);
  /* volta ao zoom inicial só depois que o slide terminou de sumir */
  transition: transform 0s 1s;
}

/* Zoom lento (efeito Ken Burns) enquanto o slide está ativo */
.hero-slide.is-active .hero-slide__media img {
  transform: scale(1);
  transition: transform calc(var(--hero-interval) + 2s) linear;
}

/* Overlay: escurece à esquerda (texto) e embaixo (barras) com o azul da marca */
.hero-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(1, 12, 38, 0.94) 0%, rgba(3, 29, 90, 0.72) 42%, rgba(3, 29, 90, 0.2) 75%, rgba(3, 29, 90, 0.05) 100%),
    linear-gradient(to top, rgba(1, 12, 38, 0.85) 0%, transparent 35%);
}

@media (max-width: 767px) {
  .hero-slide::before {
    background:
      linear-gradient(to top, rgba(1, 12, 38, 0.96) 10%, rgba(3, 29, 90, 0.7) 55%, rgba(1, 12, 38, 0.55) 100%);
  }

  /* Celular: o banner tem exatamente a proporção 9:16 das fotos em pé
     (antes ocupava a tela toda, mais comprida que 9:16, e cortava as laterais da foto) */
  .hero {
    height: calc(100vw * 16 / 9);
    min-height: 0;
    max-height: none;
  }

  /* Banner 1 (foto da fachada com o dono): aparece inteira, sem corte e sem o zoom lento
     (o zoom cortava as bordas); escurece só embaixo, onde ficam o título e os botões */
  /* (seletores mais fortes que as regras do zoom, que vêm depois no arquivo) */
  .hero .hero-slide.hero-slide--loja .hero-slide__media img,
  .hero .hero-slide.hero-slide--loja.is-active .hero-slide__media img,
  .hero.is-intro .hero-slide.hero-slide--loja.is-active .hero-slide__media img {
    object-position: 50% 50%;
    transform: none;
    transition: none;
    animation: none;
  }

  /* Sem o parágrafo, o título desce e não cobre o rosto (título e botões continuam) */
  .hero-slide--loja .hero-slide__text {
    display: none;
  }

  .hero-slide--loja::before {
    background:
      linear-gradient(to top, rgba(1, 12, 38, 0.97) 0%, rgba(1, 12, 38, 0.88) 28%, rgba(3, 29, 90, 0.4) 50%, rgba(3, 29, 90, 0) 66%),
      linear-gradient(to bottom, rgba(1, 12, 38, 0.45) 0%, transparent 16%);
  }
}

/* ---------- Conteúdo ---------- */

.hero-slide__content {
  padding-top: var(--header-h);
}

/* Computador: espaço embaixo para as barras do carrossel não ficarem sobre os botões
   (acontecia em telas mais baixas, como notebooks de 768 px de altura) */
@media (min-width: 768px) {
  .hero-slide__content {
    padding-bottom: 88px;
  }
}

/* Celular: texto na parte de baixo, acima das barras */
@media (max-width: 767px) {
  .hero-slide {
    align-items: flex-end;
  }

  .hero-slide__content {
    padding-bottom: 88px;
  }
}

.hero-slide__inner {
  max-width: 760px;
}

.hero-slide__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--white);
}

.hero-slide__eyebrow::before {
  content: "";
  width: 40px;
  height: 3px;
  background: var(--accent);
}

.hero-slide__title {
  margin-block: var(--space-5);
  font-size: var(--fs-hero);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  overflow-wrap: break-word;
}

.hero-slide__title span {
  display: block;
  color: var(--accent);
}

.hero-slide__text {
  max-width: 50ch;
  margin-bottom: var(--space-7);
  font-size: var(--fs-lg);
  color: rgba(255, 255, 255, 0.85);
}

.hero-slide__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.hero-slide__actions .btn {
  flex: 1 1 100%;
  border-radius: 2px;
}

@media (min-width: 560px) {
  .hero-slide__actions .btn {
    flex: 0 0 auto;
  }
}

/* Entrada escalonada do texto quando o slide fica ativo */
.hero-slide [data-anim] {
  opacity: 0;
  transform: translateY(28px);
}

.hero-slide.is-active [data-anim] {
  opacity: 1;
  transform: none;
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

.hero-slide.is-active [data-anim="1"] { transition-delay: 0.25s; }
.hero-slide.is-active [data-anim="2"] { transition-delay: 0.4s; }
.hero-slide.is-active [data-anim="3"] { transition-delay: 0.55s; }
.hero-slide.is-active [data-anim="4"] { transition-delay: 0.7s; }

/* Abertura da página: o 1º slide já aparece pronto (sem esperar animação).
   Isso deixa o conteúdo principal visível mais rápido. As animações voltam
   a partir da primeira troca de slide (hero.js remove .is-intro). */
.hero.is-intro .hero-slide,
.hero.is-intro .hero-slide [data-anim] {
  transition: none;
}

/* ...mas o 1º slide também anima ao abrir: o texto sobe e o fundo faz o zoom lento.
   Começa em 10% de opacidade (não 0) para o navegador já contar o texto como
   visível no primeiro quadro — assim a animação não atrasa o carregamento (LCP). */
.hero.is-intro .hero-slide.is-active [data-anim] {
  animation: hero-intro-in 0.8s var(--ease) backwards;
}
.hero.is-intro .hero-slide.is-active [data-anim="1"] { animation-delay: 0.1s; }
.hero.is-intro .hero-slide.is-active [data-anim="2"] { animation-delay: 0.25s; }
.hero.is-intro .hero-slide.is-active [data-anim="3"] { animation-delay: 0.4s; }
.hero.is-intro .hero-slide.is-active [data-anim="4"] { animation-delay: 0.55s; }

.hero.is-intro .hero-slide.is-active .hero-slide__media img {
  animation: hero-intro-zoom calc(var(--hero-interval, 8s) + 2s) linear backwards;
}

@keyframes hero-intro-in {
  from { opacity: 0.1; transform: translateY(28px); }
}

@keyframes hero-intro-zoom {
  from { transform: scale(1.1); }
}

/* ---------- Barras de navegação / progresso ---------- */

.hero__bars {
  position: absolute;
  left: 50%;
  bottom: var(--space-6);
  z-index: 2;
  display: flex;
  gap: var(--space-2);
  transform: translateX(-50%);
}

/* Área de toque de 40px de altura (a barra visível tem só 3px) */
.hero__bar {
  padding: 18px 0;
  cursor: pointer;
}

.hero__bar-track {
  display: block;
  position: relative;
  width: 36px;
  height: 3px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  transition: width var(--dur) var(--ease), background-color var(--dur);
}

.hero__bar:hover .hero__bar-track {
  background: rgba(255, 255, 255, 0.6);
}

.hero__bar-fill {
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
}

.hero__bar.is-active .hero__bar-track {
  width: 64px;
}

.hero__bar.is-active .hero__bar-fill {
  animation: hero-progress var(--hero-interval) linear forwards;
}

.hero.is-paused .hero__bar-fill {
  animation-play-state: paused;
}

@keyframes hero-progress {
  to { transform: scaleX(1); }
}

@media (min-width: 768px) {
  .hero__bars {
    bottom: var(--space-7);
  }

  .hero__bar-track {
    width: 48px;
  }

  .hero__bar.is-active .hero__bar-track {
    width: 80px;
  }
}

/* Movimento reduzido: sem zoom nem deslocamento, só troca de slide */
@media (prefers-reduced-motion: reduce) {
  .hero-slide__media img,
  .hero-slide.is-active .hero-slide__media img {
    transform: none;
    transition: none;
  }

  .hero-slide [data-anim] {
    transform: none;
  }

  .hero.is-intro .hero-slide.is-active [data-anim],
  .hero.is-intro .hero-slide.is-active .hero-slide__media img {
    animation: none;
  }
}