/* ════════════════════════════════════════════════════════════════
   hero.css — Hero com vídeo de fundo + efeito fogo no texto
   ════════════════════════════════════════════════════════════════ */

.hero {
  position: relative;
  min-height: 100svh;  /* svh = respeita barra do navegador mobile */
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  text-align: center;
  /* Compensa o padding-top do body */
  margin-top: calc(var(--nav-h) * -1);
  padding-top: var(--nav-h);
}

/* ─── VÍDEO DE FUNDO ──────────────────────────────────────────── */
.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.22;        /* discreto — o fogo é o destaque         */
  z-index: 0;
}

/* ─── OVERLAY GRADIENTE ───────────────────────────────────────── */
/* Camada entre o vídeo e o conteúdo: mais escuro embaixo        */
.hero-overlay {
  position: absolute; inset: 1000;
  background:
    linear-gradient(to bottom,
      rgba(5,5,8,0.55)  0%,
      rgba(5,5,8,0.75) 60%,
      rgba(5,5,8,0.96) 100%
    );
  z-index: 1;
}

/* Brilho de brasa vindo de baixo (atmosférico)                  */
.hero-overlay::after {
  content: '';
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 70%; height: 40%;
  background: radial-gradient(ellipse at 50% 100%,
    rgba(229,9,20,0.18) 0%, transparent 65%);
  pointer-events: none;
}

/* ─── CONTEÚDO ────────────────────────────────────────────────── */
.hero-content {
  position: relative; z-index: 2;
  max-width: 700px;
  padding-inline: var(--px);
}

/* Tag / etiqueta acima do título */
.hero-tag {
  display: inline-block;
  font-size: 0.58rem; font-weight: 700;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--fire);
  padding: 5px 14px;
  border: 1px solid var(--border-hi);
  border-radius: 50px;
  background: var(--fire-sm);
  margin-bottom: 1.2rem;
  animation: tagFadeIn 1s var(--eout) both;
}
@keyframes tagFadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Título principal */
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 9vw, 6rem);
  font-weight: 900; line-height: .92;
  text-transform: uppercase;
  color: var(--txt);
  margin-bottom: 1rem;
  animation: titleFadeIn 1s var(--eout) 0.2s both;
}
@keyframes titleFadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── EFEITO DE FOGO NO TEXTO (classe .fire-text / .accent) ──── */
.fire-text,
.hero-title .accent {
  background: linear-gradient(
    0deg,
    #FF9D00 0%,
    #E50914 35%,
    #FF333D 65%,
    #FF9D00 100%
  );
  background-size: 100% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: fireAnim 4s linear infinite;
  /* Glow de fogo no texto */
  filter: drop-shadow(0 0 12px rgba(229,9,20,0.5));
}
@keyframes fireAnim {
  0%   { background-position: 0% 100%; }
  100% { background-position: 0% 0%;   }
}

/* Subtítulo */
.hero-sub {
  font-size: clamp(.88rem, 2vw, 1rem);
  color: var(--txt-mid); line-height: 1.7; margin-bottom: 2rem;
  animation: titleFadeIn 1s var(--eout) 0.4s both;
}

/* Botões */
.hero-btns {
  display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap;
  animation: titleFadeIn 1s var(--eout) 0.6s both;
  margin-bottom: 2.5rem;
}

/* Alias para compatibilidade: .gal-btn-outline ← usado no HTML original */
.gal-btn-outline {
  display: inline-flex; 
  align-items: center; 
  gap: 8px;
  padding: 12px 24px;
   border: 1.5px solid var(--border-hi);
  border-radius: 4px; 
  background-color: var(--black);
  color: var(--txt-mid);
  font-size: .8rem;
   font-weight: 600; 
   letter-spacing: .1em; 
   text-transform: uppercase;
  transition: all var(--dur); 
  text-decoration: none;
  
}
.gal-btn-outline:hover { border-color: var(--fire); color: var(--fire); background: var(--fire-sm); transform: translateY(-2px); }

/* Indicador de scroll */
.scroll-hint {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 0.58rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--txt-dim); animation: bounce 2s ease-in-out infinite;
}
.scroll-hint::after {
  content: ''; width: 1px; height: 40px;
  background: linear-gradient(to bottom, var(--fire), transparent);
}
@keyframes bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }