/* =========================================================================
   JARDIM ENCANTADO PRESERVADOS — css/hero.css (dono: A4)
   Seção de abertura. Prefixo .hero- (não redefinir globais .secao/.glass/.btn).
   O vídeo de fundo é o protagonista — aqui é tipografia cinematográfica,
   vidro sutil só onde precisa de legibilidade e um indicador de rolagem.
   ========================================================================= */

/* Altura ~110vh (dvh para mobile). Conteúdo alinhado à esquerda, base p/ rodapé. */
.secao--hero {
  min-height: 110vh;
  min-height: 110dvh;
  justify-content: center;
  align-items: flex-start;
  overflow: hidden;
}

/* -------------------------------------------------------------------------
   Bloco de conteúdo
   ------------------------------------------------------------------------- */
.hero-conteudo {
  position: relative;
  width: 100%;
  max-width: 62rem;
  display: flex;
  flex-direction: column;
  gap: clamp(1.1rem, 2.6vh, 2rem);
}

.hero-rotulo {
  color: var(--je-accent);
  /* leve realce para o rótulo */
  letter-spacing: .3em;
  /* agora fica LOGO ABAIXO do título: encosta um pouco para ler como
     um selo agrupado ao nome (contrapõe o gap do flex do .hero-conteudo) */
  margin-top: clamp(-1.2rem, -1.4vh, -.6rem);
}

/* -------------------------------------------------------------------------
   Título cinematográfico
   ------------------------------------------------------------------------- */
.hero-titulo {
  /* sangra levemente à esquerda para dar escala editorial */
  margin-left: -.04em;
  font-size: clamp(3.2rem, 11vw, 10rem);
  line-height: .9;
}
.hero-titulo__linha {
  display: block;
}
.hero-titulo__linha--sec {
  /* "Preservados" um pouco menor e mais leve, deslocado para respirar */
  font-size: .82em;
  color: var(--je-white);
  padding-left: .06em;
}
.hero-titulo__italico {
  font-style: italic;
  font-weight: 320;
  color: var(--je-accent);
  /* brilho verde muito sutil no acento */
  text-shadow: 0 0 42px rgba(98, 217, 155, .28);
}

/* -------------------------------------------------------------------------
   Subtítulo + parágrafo
   ------------------------------------------------------------------------- */
.hero-sub {
  display: flex;
  flex-direction: column;
  gap: .1em;
  font-family: var(--je-font-display);
  font-size: clamp(1.15rem, 2.3vw, 1.7rem);
  line-height: 1.25;
  max-width: 34ch;
}
.hero-sub__forte { color: var(--je-white); }
.hero-sub__leve  { color: var(--je-white-60); font-style: italic; }

.hero-texto {
  font-size: clamp(1rem, 1.15vw, 1.08rem);
  line-height: 1.65;
  color: var(--je-white-60);
  max-width: 44ch;
}

/* -------------------------------------------------------------------------
   CTAs
   ------------------------------------------------------------------------- */
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  margin-top: clamp(.4rem, 1.4vh, 1rem);
}
.hero-cta { touch-action: manipulation; }

/* -------------------------------------------------------------------------
   Indicador de rolagem (linha animada + rótulo)
   ------------------------------------------------------------------------- */
.hero-rolagem {
  position: absolute;
  left: var(--je-pad-secao);
  bottom: clamp(1.5rem, 4vh, 2.75rem);
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  color: var(--je-white-60);
  transition: color .4s var(--je-ease);
}
.hero-rolagem:hover,
.hero-rolagem:focus-visible { color: var(--je-accent); }
.hero-rolagem:focus-visible {
  outline: 2px solid var(--je-accent);
  outline-offset: 6px;
  border-radius: 4px;
}
.hero-rolagem__texto {
  color: inherit;
  letter-spacing: .24em;
}
/* Trilho vertical com ponto descendo (só transform/opacity animados) */
.hero-rolagem__trilho {
  position: relative;
  display: block;
  width: 1px;
  height: 42px;
  background: linear-gradient(180deg,
    var(--je-glass-border) 0%,
    rgba(244, 247, 244, .02) 100%);
  overflow: hidden;
}
.hero-rolagem__ponto {
  position: absolute;
  top: 0;
  left: 50%;
  width: 3px;
  height: 10px;
  margin-left: -1.5px;
  border-radius: 999px;
  background: var(--je-accent);
  box-shadow: 0 0 12px var(--je-glow);
  animation: hero-rolagem-desce 2.2s var(--je-ease-inout) infinite;
}
@keyframes hero-rolagem-desce {
  0%   { transform: translateY(-12px); opacity: 0; }
  35%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { transform: translateY(42px); opacity: 0; }
}

/* -------------------------------------------------------------------------
   Estado de intro (reveals do A3 usam data-reveal; aqui só um fallback leve
   caso o sistema de reveals não rode — nada fica invisível "preso").
   ------------------------------------------------------------------------- */
/* (Sem regras que escondam o conteúdo por padrão: acessível sem JS.) */

/* -------------------------------------------------------------------------
   Responsivo
   ------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .secao--hero { justify-content: flex-end; padding-bottom: clamp(5rem, 16vh, 8rem); }
  .hero-conteudo { gap: 1rem; }
  .hero-titulo { font-size: clamp(2.9rem, 15vw, 5rem); }
  .hero-rolagem { left: 1.25rem; bottom: 1.5rem; }
  /* Em telas muito estreitas, o rótulo da rolagem pode sumir p/ não competir */
}
@media (max-width: 400px) {
  .hero-rolagem__texto { display: none; }
  .hero-ctas .hero-cta { width: 100%; }
}

/* Movimento reduzido: para o ponto da rolagem (base.css já zera animações,
   reforçamos deixando o ponto estático e visível). */
@media (prefers-reduced-motion: reduce) {
  .hero-rolagem__ponto {
    animation: none;
    top: 6px;
    opacity: .9;
  }
}