/* ==========================================================================
   HERO — A PORTA QUE ABRE
   Scroll-driven via palco sticky (sem sequestrar o scroll do usuário).
   Escopo total sob o prefixo .hd-
   ========================================================================== */

.hd-hero {
  --hd-ease: cubic-bezier(.2,.7,.1,1);
  position: relative;
  height: 260vh;
  background: var(--black, #14181e);
}

.hd-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: #05070d;
}

/* ---------- Cena do escritório (atrás das portas) ---------- */
.hd-scene {
  position: absolute;
  inset: 0;
  background-image: url('../images/office-scene.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #05070d;
  transform: scale(calc(1 + var(--hd-p, 0) * 0.08));
  will-change: transform;
}

/* luz que cresce vindo do vão */
.hd-scene-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 45% 55% at 50% 52%, rgba(29,104,214,.34), transparent 70%);
  opacity: var(--hd-p, 0);
  pointer-events: none;
}

/* ---------- Folhas da porta ---------- */
.hd-door {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50.6%;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 30%),
    linear-gradient(100deg, #10161f 0%, #1a2431 45%, #0c1119 100%);
  will-change: transform;
  z-index: 2;
}
.hd-door--left {
  left: 0;
  transform: translateX(calc(var(--hd-p, 0) * -102%));
  box-shadow: inset -1px 0 0 rgba(29,104,214,.35);
}
.hd-door--right {
  right: 0;
  transform: translateX(calc(var(--hd-p, 0) * 102%));
  box-shadow: inset 1px 0 0 rgba(29,104,214,.35);
}

/* puxador vertical */
.hd-door::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 3px;
  height: 128px;
  margin-top: -64px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(244,244,244,.65), rgba(244,244,244,.2));
}
.hd-door--left::after { right: 54px; }
.hd-door--right::after { left: 54px; }

/* fresta de luz no encontro das portas */
.hd-seam {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, #1d68d6 18%, #cfe2ff 50%, #1d68d6 82%, transparent);
  box-shadow: 0 0 34px 8px rgba(29,104,214,.6);
  opacity: calc(1 - var(--hd-p, 0) * 3.2);
  z-index: 3;
  pointer-events: none;
}

/* véu que escurece a cena para o texto final ter contraste */
.hd-scrim {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(ellipse 72% 62% at 50% 50%, rgba(5,7,13,.88), rgba(5,7,13,.5) 62%, rgba(5,7,13,.78));
  opacity: var(--hd-payoff-op, 0);
}

/* ---------- Conteúdo ---------- */
.hd-inner {
  position: relative;
  z-index: 4;
  height: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hd-intro {
  max-width: 62ch;
  opacity: var(--hd-intro-op, 1);
  transform: translateY(calc(var(--hd-intro-ty, 0) * 1px));
  filter: blur(calc(var(--hd-intro-blur, 0) * 1px));
  will-change: transform, opacity, filter;
}

.hd-eyebrow {
  font-family: var(--font-display, sans-serif);
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--blue, #1d68d6);
  margin: 0 0 18px;
}

.hd-title {
  font-family: var(--font-display, sans-serif);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(40px, 8.5vw, 96px);
  line-height: .98;
  letter-spacing: .005em;
  color: var(--offwhite, #f4f4f4);
  margin: 0 0 28px;
  text-shadow: 0 6px 40px rgba(0,0,0,.6);
}
.hd-title span { display: block; }
.hd-title .hd-accent { color: var(--blue, #1d68d6); }

.hd-sub {
  max-width: 46ch;
  font-size: 17px;
  line-height: 1.6;
  color: var(--gray, #8e8e8e);
  margin: 0 0 34px;
}

.hd-actions { display: flex; flex-wrap: wrap; gap: 16px; }

/* payoff — entra quando a porta termina de abrir */
.hd-payoff {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  text-align: center;
  padding: 0 24px;
  opacity: var(--hd-payoff-op, 0);
  transform: translateY(calc(var(--hd-payoff-ty, 20) * 1px));
  filter: blur(calc(var(--hd-payoff-blur, 8) * 1px));
  pointer-events: none;
  will-change: transform, opacity, filter;
}
.hd-payoff.is-on { pointer-events: auto; }

.hd-payoff-title {
  font-family: var(--font-display, sans-serif);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(32px, 6.5vw, 76px);
  line-height: 1;
  color: var(--offwhite, #f4f4f4);
  margin: 0;
  text-shadow: 0 6px 40px rgba(0,0,0,.7);
}
.hd-payoff-title span { color: var(--blue, #1d68d6); }

/* ---------- Dica de scroll ---------- */
.hd-hint {
  position: absolute;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(244,244,244,.72);
  opacity: var(--hd-hint-op, 1);
  pointer-events: none;
}
.hd-hint svg { animation: hd-bounce 1.6s ease-in-out infinite; }
@keyframes hd-bounce {
  0%, 100% { transform: translateY(0); opacity: .5; }
  50% { transform: translateY(5px); opacity: 1; }
}

/* ---------- Barra de progresso ---------- */
.hd-progress {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: rgba(244,244,244,.12);
  z-index: 5;
}
.hd-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, rgba(29,104,214,.6), #cfe2ff);
  transform: scaleX(var(--hd-p, 0));
  transform-origin: left center;
}

/* ==========================================================================
   MOBILE
   ========================================================================== */
@media (max-width: 767px) {
  .hd-hero { height: 200vh; }
  /* a foto é 16:9 e a tela é bem mais alta: preenche pela altura,
     mantendo o corredor central (mesa e janela) no enquadramento */
  .hd-scene {
    background-size: auto 100%;
    background-position: center;
  }
  .hd-door::after { height: 84px; margin-top: -42px; }
  .hd-door--left::after { right: 20px; }
  .hd-door--right::after { left: 20px; }
  .hd-sub { display: none; }
  .hd-hint { bottom: 26px; }
}

/* ==========================================================================
   REDUCED MOTION — porta aberta, tudo estático
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .hd-hero { height: auto; }
  .hd-stage { position: static; height: auto; min-height: 100vh; padding: 140px 0 80px; }
  .hd-door, .hd-seam, .hd-hint, .hd-progress { display: none; }
  .hd-scene { transform: none; }
  .hd-scene-glow { opacity: .55; }
  .hd-intro { opacity: 1 !important; transform: none !important; filter: none !important; }
  .hd-payoff { display: none; }
}