/* =====================================================================
   HERO · vídeo em quadros + frases (Flávia Campos)
   ===================================================================== */
.seq { position: relative; height: 100vh; height: 100svh; min-height: 520px; overflow: hidden; background: #08110A; }
.seq__viewport { position: absolute; inset: 0; overflow: hidden; }
/* leve correção de cor: tons mais sóbrios, combinando com a paleta cinza/dourado */
.seq__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; filter: saturate(.82) contrast(1.06); }

/* degradê para dar leitura às frases (o vídeo tem vapor branco no meio) */
.seq__shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(8, 8, 9, 0.82) 0%, rgba(8, 8, 9, 0.46) 40%, transparent 66%),
    linear-gradient(0deg, rgba(8, 8, 9, 0.86) 0%, transparent 42%),
    linear-gradient(180deg, rgba(8, 8, 9, 0.6) 0%, transparent 20%);
}

/* abertura: marca GH / BARBEARIA */
.seq__intro { position: absolute; z-index: 3; left: 0; right: 0; bottom: clamp(96px, 14vh, 150px); text-align: center; padding: 0 20px; text-shadow: 0 8px 40px rgba(0, 0, 0, 0.75); }
.seq__intro h1 { margin: 0 0 18px; font-size: clamp(4.2rem, 13vw, 9rem); font-weight: 400; line-height: 1; }
.seq__intro h1 .wordmark { justify-content: center; }
.seq__slogan { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.15rem, 2.2vw, 1.6rem); color: #E3EFE6; margin-bottom: 14px; }
.seq__intro-cta { display: none; margin-top: 26px; }
/* cada item da abertura na sua linha, centralizado */
.seq__intro .kicker { display: flex; justify-content: center; }
.seq__intro .scroll-hint { display: flex; width: max-content; margin: 24px auto 0; }

/* frases */
.seq__lines { position: absolute; z-index: 3; left: clamp(20px, 6vw, 96px); bottom: clamp(110px, 17vh, 180px); width: min(580px, 86vw); pointer-events: none; }
.seq__line { position: absolute; left: 0; bottom: 0; width: 100%; opacity: 0; visibility: hidden; }
.seq__num { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.36em; color: var(--gold); margin-bottom: 16px; }
.seq__num::after { content: ""; width: 42px; height: 1px; background: currentColor; opacity: .7; }
.seq__title { font-family: var(--font-serif); font-weight: 700; font-size: clamp(2rem, 4.4vw, 3.8rem); line-height: 1.06; text-shadow: 0 6px 30px rgba(0, 0, 0, 0.85); }
.seq__text { margin-top: 14px; color: #EFF6F1; font-size: clamp(1rem, 1.5vw, 1.2rem); max-width: 440px; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.95); }

/* final */
.seq__final {
  position: absolute; z-index: 3; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 20px; opacity: 0; visibility: hidden;
  background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(0, 0, 0, 0.66), transparent 75%);
}
.seq__final h2 { font-size: clamp(2.4rem, 6.4vw, 5.2rem); font-weight: 700; font-style: italic; text-shadow: 0 8px 40px rgba(0, 0, 0, 0.85); }
.seq__final p { font-family: var(--font-display); color: #DCEBE0; letter-spacing: 0.36em; text-transform: uppercase; font-size: 0.82rem; margin: 16px 0 28px; }

/* barra de progresso dourada */
.seq__progress { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, 0.08); }
.seq__progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-3), var(--gold-2)); transform: scaleX(0); transform-origin: left; }

/* carregamento (discreto, no topo) */
.seq__loader {
  position: absolute; z-index: 4; left: 50%; top: calc(var(--header-h) + 14px); transform: translateX(-50%);
  padding: 6px 14px; border-radius: 999px; background: rgba(0, 0, 0, 0.55); border: 1px solid var(--line);
  font-family: var(--font-display); font-size: 0.68rem; letter-spacing: 0.26em; text-transform: uppercase; color: #D6E6DB;
  transition: opacity 0.5s ease, visibility 0.5s;
}
.seq__loader.is-hidden { opacity: 0; visibility: hidden; }

.seq-final .cta-fixed { opacity: 0; visibility: hidden; pointer-events: none; }

@media (max-width: 760px) {
  .seq__lines { left: 20px; right: 20px; width: auto; bottom: 108px; text-align: center; }
  .seq__num { justify-content: center; }
  .seq__num::after { display: none; }
  .seq__text { margin-left: auto; margin-right: auto; }
  .seq__shade {
    background:
      linear-gradient(0deg, rgba(8, 8, 9, 0.9) 0%, rgba(8, 8, 9, 0.36) 48%, transparent 68%),
      linear-gradient(180deg, rgba(8, 8, 9, 0.6) 0%, transparent 20%);
  }
}

/* movimento reduzido / sem GSAP: imagem parada com título e botão */
.seq--static .seq__lines, .seq--static .seq__progress, .seq--static .seq__final, .seq--static .scroll-hint { display: none; }
.seq--static .seq__intro-cta { display: inline-flex; }