/* ==========================================================================
   hero.css — Seção Hero "Horizonte Sagis"
   Vídeo aéreo + overlay turquesa cinematográfico, beija-flor e ondas animadas.
   Importar APÓS header.css e ANTES de animations.css.
   ========================================================================== */

/* ==========================================================================
   1. Estrutura — tela cheia, conteúdo centralizado à esquerda
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;        /* fallback */
  min-height: 100svh;
  /* Folga superior para limpar o header fixo (~72px) e inferior para ondas + scroll */
  padding-top: clamp(6rem, 14vh, 10rem);
  padding-bottom: clamp(7.5rem, 18vh, 12rem);
  overflow: hidden;
  isolation: isolate;       /* cria contexto de empilhamento próprio */
  background-color: var(--azul-profundo); /* base enquanto a imagem carrega */
}


/* ==========================================================================
   2. Fundo — vídeo + imagem-pôster sempre presente
   ========================================================================== */

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* A imagem fica sempre por baixo do vídeo: pôster instantâneo + fallback mobile */
  background: url("/assets/img/hero-fallback.webp") center / cover no-repeat;
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Ken Burns lento — vida cinematográfica sutil */
  animation: heroZoom 28s ease-in-out infinite alternate;
  will-change: transform;
}

/* --- Overlay multicamada: faz qualquer footage "ler" como turquesa --------- */

.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    /* brilho de horizonte + halo do beija-flor (canto superior-direito, longe do texto) */
    radial-gradient(42% 40% at 80% 30%, rgba(91, 208, 230, .30), transparent 68%),
    /* vinheta superior-direita (legibilidade do header + profundidade) */
    radial-gradient(125% 105% at 78% 8%, transparent 44%, rgba(7, 33, 51, .40) 100%),
    /* scrim inferior-esquerdo: contraste do bloco de texto */
    linear-gradient(to top right, rgba(7, 33, 51, .82) 0%, rgba(7, 33, 51, .18) 50%, transparent 72%),
    /* gradiente-assinatura da marca — turquesa reforçado p/ qualquer footage "ler" turquesa */
    linear-gradient(118deg, rgba(12, 59, 90, .86) 0%, rgba(12, 59, 90, .46) 38%, rgba(22, 168, 201, .46) 100%);
}

/* Grão de filme — textura cinematográfica quase imperceptível */
.hero__overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .05;
  mix-blend-mode: overlay;
  pointer-events: none;
}


/* ==========================================================================
   3. Conteúdo — bloco de texto à esquerda
   ========================================================================== */

.hero__content {
  position: relative;
  z-index: 4;
}

.hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--fonte-titulo);
  font-size: clamp(.72rem, .4vw + .65rem, .82rem);
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #DFF6FB;                       /* branco com leve tom turquesa */
  margin-bottom: 1.5rem;
}

/* Traço decorativo antes do kicker */
.hero__kicker::before {
  content: "";
  width: clamp(1.5rem, 3vw, 2.75rem);
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--azul-ceu));
  border-radius: 2px;
}

.hero__titulo {
  color: var(--branco);
  font-weight: 700;
  /* Maior que o h1 padrão para impacto de hero */
  font-size: clamp(2.6rem, 5.2vw + 1rem, 4.85rem);
  line-height: 1.04;
  letter-spacing: -.025em;
  max-width: 16ch;
  text-shadow: 0 2px 30px rgba(7, 33, 51, .35);
  text-wrap: balance;
}

/* Palavra-acento em Caveat */
.hero__script {
  display: inline-block;
  color: var(--azul-ceu);
  font-size: 1.28em;
  font-weight: 600;
  letter-spacing: 0;
  line-height: .8;
  transform: rotate(-3.5deg);
  transform-origin: left center;
  padding-inline: .04em;
  text-shadow: 0 6px 26px rgba(91, 208, 230, .35);
}

.hero__subtitulo {
  margin-top: 1.6rem;
  max-width: 33rem;
  color: rgba(255, 255, 255, .9);
  font-size: clamp(1rem, .5vw + .95rem, 1.18rem);
  line-height: 1.65;
  text-shadow: 0 1px 16px rgba(7, 33, 51, .4);
}


/* ==========================================================================
   4. Tags — pílulas translúcidas
   ========================================================================== */

.hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: 1.9rem;
}

.hero__tags li {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1.05rem;
  font-family: var(--fonte-titulo);
  font-size: .85rem;
  font-weight: 600;
  color: var(--branco);
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Marcador de check turquesa */
.hero__tags li::before {
  content: "";
  width: 1.05rem;
  height: 1.05rem;
  flex-shrink: 0;
  background-color: var(--azul-ceu);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}


/* ==========================================================================
   5. CTAs
   ========================================================================== */

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.4rem;
}

.hero__ctas .btn {
  padding-block: 1rem;
}

/* Brilho extra no CTA primário sobre fundo escuro */
.hero__ctas .btn-coral {
  box-shadow: 0 10px 30px -8px rgba(255, 122, 89, .6);
}

.hero__cta-icone {
  width: 1.2em;
  height: 1.2em;
  flex-shrink: 0;
}


/* ==========================================================================
   6. Beija-flor — símbolo da marca (canto superior-direito)
   ========================================================================== */

.hero__beija-flor {
  position: absolute;
  z-index: 3;
  top: clamp(5.5rem, 13vh, 9rem);
  right: clamp(1.5rem, 7vw, 7rem);
  width: clamp(118px, 15vw, 210px);
  height: auto;
  filter: drop-shadow(0 10px 22px rgba(7, 33, 51, .4));
  animation: bfFlutuar 7s ease-in-out infinite;
  transform-origin: center;
}

.hero__beija-flor .bf-asa {
  transform-origin: 152px 92px;
  animation: bfBater 1.6s ease-in-out infinite;
}


/* ==========================================================================
   7. Ondas animadas (rodapé do hero) — espuma em parallax
   ========================================================================== */

.hero__ondas {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
  height: clamp(72px, 11vw, 140px);
  pointer-events: none;
}

.hero__ondas-svg {
  width: 100%;
  height: 100%;
}

.hero__ondas .onda {
  animation: ondaMover linear infinite;
}

.hero__ondas .onda--1 { fill: rgba(91, 208, 230, .30); animation-duration: 13s; }
.hero__ondas .onda--2 { fill: rgba(255, 255, 255, .25); animation-duration: 10s; }
.hero__ondas .onda--3 { fill: rgba(255, 255, 255, .40); animation-duration: 8s;  }
.hero__ondas .onda--4 { fill: rgba(247, 244, 238, .80); animation-duration: 18s; }


/* ==========================================================================
   8. Indicador de scroll
   ========================================================================== */

.hero__scroll {
  position: absolute;
  z-index: 5;
  bottom: clamp(1.6rem, 4vh, 2.6rem);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  color: rgba(255, 255, 255, .85);
}

.hero__scroll-mouse {
  display: flex;
  justify-content: center;
  width: 26px;
  height: 42px;
  padding-top: 8px;
  border: 2px solid rgba(255, 255, 255, .65);
  border-radius: 14px;
}

.hero__scroll-roda {
  width: 4px;
  height: 8px;
  border-radius: 2px;
  background: var(--branco);
  animation: scrollRoda 1.9s cubic-bezier(.4, 0, .2, 1) infinite;
}

.hero__scroll-texto {
  font-family: var(--fonte-titulo);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.hero__scroll:hover { color: var(--branco); }


/* ==========================================================================
   9. Animações
   ========================================================================== */

/* Ken Burns */
@keyframes heroZoom {
  from { transform: scale(1.08); }
  to   { transform: scale(1); }
}

/* Entrada escalonada do conteúdo */
@keyframes heroSurgir {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

.hero__kicker,
.hero__titulo,
.hero__subtitulo,
.hero__tags,
.hero__ctas {
  opacity: 0;
  animation: heroSurgir .9s cubic-bezier(.22, .61, .36, 1) both;
}

.hero__kicker    { animation-delay: .15s; }
.hero__titulo    { animation-delay: .30s; }
.hero__subtitulo { animation-delay: .52s; }
.hero__tags      { animation-delay: .68s; }
.hero__ctas      { animation-delay: .82s; }

/* Flutuação do beija-flor */
@keyframes bfFlutuar {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-16px) rotate(-3deg); }
}

/* Bater de asa */
@keyframes bfBater {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(-26deg); }
}

/* Ondas em parallax — translação horizontal contínua e sem emenda */
@keyframes ondaMover {
  0%   { transform: translate3d(-90px, 0, 0); }
  100% { transform: translate3d(85px, 0, 0); }
}

/* Rodinha do indicador de scroll */
@keyframes scrollRoda {
  0%        { opacity: 0; transform: translateY(-3px); }
  25%       { opacity: 1; }
  60%       { opacity: 1; }
  100%      { opacity: 0; transform: translateY(11px); }
}


/* ==========================================================================
   10. Movimento reduzido — conteúdo SEMPRE visível
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .hero__kicker,
  .hero__titulo,
  .hero__subtitulo,
  .hero__tags,
  .hero__ctas {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .hero__video,
  .hero__beija-flor,
  .hero__beija-flor .bf-asa,
  .hero__ondas .onda,
  .hero__scroll-roda {
    animation: none;
  }

  /* Estado de repouso garantido para a rodinha do scroll */
  .hero__scroll-roda { opacity: .9; }

  .hero__video { transform: scale(1.04); }
}


/* ==========================================================================
   11. Mobile — esconde o vídeo, reorganiza o bloco
   ========================================================================== */

@media (max-width: 860px) {
  /* Economiza dados: usa só a imagem de fundo do .hero__bg */
  .hero__video { display: none; }

  /* Sobre o pôster turquesa vivo, um scrim vertical garante contraste AA do texto */
  .hero__overlay {
    background:
      linear-gradient(180deg, rgba(7, 33, 51, .64) 0%, rgba(9, 42, 64, .5) 46%, rgba(22, 168, 201, .42) 100%);
  }

  /* Oculta o beija-flor para não competir com o texto em telas estreitas */
  .hero__beija-flor { display: none; }

  .hero {
    padding-top: clamp(6.5rem, 22vh, 9rem);
    padding-bottom: clamp(8rem, 22vh, 10rem);
  }

  .hero__titulo {
    font-size: clamp(2.35rem, 9vw, 3.4rem);
    max-width: 14ch;
  }

  .hero__subtitulo {
    font-size: 1.02rem;
    max-width: 38ch;
  }

  /* CTAs empilham em largura total */
  .hero__ctas {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 25rem;
  }

  .hero__ctas .btn {
    width: 100%;
  }
}