/**
 * Focel — Hero
 * ---------------------------------------------------------------------------
 * Texto à esquerda e, ao lado, três peças 3D (consultoria, treinamentos,
 * softwares) que se encaixam em loop — js/hero-encaixe.js.
 * Prefixo das classes: fh-
 * ---------------------------------------------------------------------------
 */

.fh {
  --fh-signal: #C8553D;
  --fh-band:   #DDEEFF;
  --fh-mouse-x: 50%;
  --fh-mouse-y: 50%;
  position: relative;
  overflow: hidden;
  padding-top: clamp(48px, 6vw, 84px);
  padding-bottom: clamp(56px, 7vw, 96px);
  background: var(--lp-canvas);
  isolation: isolate;
}

/* Aurora / ambient glow no fundo */
.fh-aurora {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}
.fh-aurora-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.55;
  will-change: transform, opacity;
  animation: fh-float 12s ease-in-out infinite alternate;
}
.fh-aurora-blob--1 {
  top: -10%;
  right: 5%;
  width: clamp(340px, 45vw, 620px);
  height: clamp(340px, 45vw, 620px);
  background: radial-gradient(circle, rgba(0, 119, 204, 0.18) 0%, rgba(0, 95, 153, 0.05) 55%, transparent 70%);
  animation-duration: 14s;
}
.fh-aurora-blob--3 {
  top: 15%;
  left: 5%;
  width: clamp(240px, 30vw, 400px);
  height: clamp(240px, 30vw, 400px);
  background: radial-gradient(circle, rgba(0, 95, 153, 0.10) 0%, transparent 70%);
  animation-duration: 16s;
  animation-delay: -8s;
}

@keyframes fh-float {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-30px, 20px) scale(1.06); }
  100% { transform: translate(25px, -25px) scale(0.95); }
}

/* Spotlight interativo com o mouse */
.fh-spotlight {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    650px circle at var(--fh-mouse-x) var(--fh-mouse-y),
    rgba(0, 119, 204, 0.09) 0%,
    rgba(56, 189, 248, 0.04) 40%,
    transparent 80%
  );
  opacity: 0.85;
  transition: opacity 0.5s ease;
}

/* Papel milimetrado: grade fina + grade maior, esmaecendo para as bordas */
.fh-paper {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(0, 95, 153, 0.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 95, 153, 0.075) 1px, transparent 1px),
    linear-gradient(rgba(0, 95, 153, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 95, 153, 0.035) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(ellipse 75% 85% at 70% 45%, #000 25%, transparent 80%);
          mask-image: radial-gradient(ellipse 75% 85% at 70% 45%, #000 25%, transparent 80%);
}

.fh-grid {
  display: grid;
  gap: clamp(44px, 6vw, 64px);
  align-items: center;
}
.fh-grid > * { min-width: 0; }

@media (min-width: 1024px) {
  .fh-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; }

  /* No desktop o hero ocupa exatamente a tela visível (abaixo do header),
     com o conteúdo centralizado e tudo acima da dobra. */
  .fh {
    --fh-header: 73px;
    --fh-pad: clamp(24px, 4.5svh, 84px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100svh - var(--fh-header));
    padding-block: var(--fh-pad);
  }
  .fh > .lp-wrap { width: 100%; }
}

/* ---------- Texto ---------- */

.fh-pulse-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #0077CC;
  margin-right: 7px;
  vertical-align: 1px;
  position: relative;
}
.fh-pulse-dot::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: rgba(0, 119, 204, 0.4);
  animation: fh-dot-pulse 2s cubic-bezier(0.24, 0, 0.38, 1) infinite;
}
@keyframes fh-dot-pulse {
  0% { transform: scale(0.8); opacity: 0.9; }
  60% { transform: scale(2.4); opacity: 0; }
  100% { transform: scale(2.4); opacity: 0; }
}

.fh-title {
  margin-block: 22px;
  font-family: var(--lp-font-display);
  font-weight: 800;
  font-size: clamp(2.5rem, 1rem + 3.4vw, 4.25rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--lp-ink);
  text-wrap: balance;
}
.fh-title em {
  font-style: normal;
  color: #005F99;
  position: relative;
  display: inline-block;
}
.fh-title .fh-line { padding-bottom: 0.06em; }

.fh-lead { max-width: 33rem; }

.fh .lp-hero-proof { margin-top: 36px; }

/* Desktop: os dois botões sempre lado a lado */
@media (min-width: 1024px) {
  /* coluna de texto um pouco mais larga para caber os dois botões */
  .fh-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .fh .lp-hero-ctas { flex-wrap: nowrap; }
  .fh .lp-hero-ctas .btn { white-space: nowrap; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .fh .lp-hero-ctas .btn { padding-inline: 0.875rem; }
}

/* ---------- Peças de encaixe (3D) ---------- */

.fh-encaixe {
  --fh-shift: 0;               /* deslocamento desejado das peças, em fração da largura */
  position: relative;
  height: clamp(360px, 44vw, 600px);
}
/* No desktop, as peças vão para a direita. */
@media (min-width: 1024px) {
  .fh-encaixe {
    --fh-shift: 0.05;
    height: min(clamp(360px, 44vw, 600px), calc(100svh - var(--fh-header) - 2 * var(--fh-pad)));
  }
}

/* o canvas transborda a caixa: as peças soltas passam da borda sem serem cortadas */
.fh-encaixe canvas {
  position: absolute;
  z-index: 1;
  left: -30%;
  top: -30%;
  display: block;
  width: 160%;
  height: 160%;
  pointer-events: none;
}

/* etiquetas das peças: mesma caixa do canvas, posicionadas pelo JS */
.fh-encaixe-tags {
  position: absolute;
  z-index: 2;
  left: -30%;
  top: -30%;
  width: 160%;
  height: 160%;
  pointer-events: none;
}

.fh-tag {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0, 95, 153, 0.16);
  background: rgba(255, 255, 255, 0.90);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  box-shadow:
    0 10px 28px -4px rgba(12, 48, 97, 0.13),
    0 2px 6px rgba(0, 95, 153, 0.06),
    inset 0 1px 1px rgba(255, 255, 255, 0.95);
  font-family: var(--lp-font-display);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--lp-ink);
  white-space: nowrap;
  opacity: 0;
  will-change: transform, opacity;
  transition:
    background 0.28s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.28s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.28s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.fh-tag i {
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px rgba(10, 34, 71, 0.12);
  transition: transform 0.24s ease;
}

.fh-tag.is-active {
  border-color: rgba(255, 255, 255, 0.3);
  background: linear-gradient(135deg, #0C3061 0%, #005F99 100%);
  color: #ffffff;
  box-shadow:
    0 12px 32px -4px rgba(0, 95, 153, 0.38),
    0 0 0 2px rgba(0, 119, 204, 0.25),
    inset 0 1px 1px rgba(255, 255, 255, 0.3);
}
.fh-tag.is-active i {
  transform: scale(1.15);
  box-shadow: 0 0 0 2.5px rgba(255, 255, 255, 0.75);
}

.fh-tag--result {
  padding: 8px 16px 8px 12px;
  font-family: var(--lp-font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  background: linear-gradient(135deg, #0A2247 0%, #004D7D 100%);
  color: #ffffff;
  border: 1px solid rgba(61, 155, 255, 0.45);
  box-shadow:
    0 16px 36px -6px rgba(0, 95, 153, 0.42),
    0 0 20px rgba(61, 155, 255, 0.28),
    inset 0 1px 1px rgba(255, 255, 255, 0.35);
}
.fh-tag--result i {
  width: 8px;
  height: 8px;
  background: #38BDF8;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.35);
  animation: fh-result-pulse 1.8s infinite ease-in-out;
}
@keyframes fh-result-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.35); }
  50% { transform: scale(1.2); box-shadow: 0 0 0 6px rgba(56, 189, 248, 0); }
}

.fh-encaixe.is-hover { cursor: pointer; }

/* no celular, só a etiqueta final */
@media (max-width: 559px) {
  .fh-tag:not(.fh-tag--result) { display: none; }
}

/* Brilho radial dinâmico atrás das peças */
.fh-encaixe::before {
  content: "";
  position: absolute;
  inset: 15% 15% 26% 15%;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    rgba(0, 119, 204, 0.22) 0%,
    rgba(56, 189, 248, 0.12) 45%,
    transparent 80%
  );
  filter: blur(36px);
  pointer-events: none;
  translate: var(--fh-offset, 0px) var(--fh-offset-y, 0px);
  animation: fh-glow-breathe 6s ease-in-out infinite alternate;
}
@keyframes fh-glow-breathe {
  0% { transform: scale(0.92); opacity: 0.75; }
  100% { transform: scale(1.08); opacity: 1; }
}

/* ---------- Estados iniciais (somente com movimento habilitado) ---------- */

.lp-motion .fh [data-fh-in] { opacity: 0; transform: translateY(16px); }
.lp-motion .fh .fh-title    { visibility: hidden; }
.lp-motion .fh-paper        { opacity: 0; }

/* ==========================================================================
   Variante escura (teste) — fundo quase preto, letras maiores e azul vibrante.
   Só vale no tema escuro; no tema claro o hero fica claro como antes.
   ========================================================================== */
html[data-theme="dark"] .fh--dark {
  --fh-vivid: #38BDF8;
  background:
    radial-gradient(ellipse 80% 60% at 75% 30%, rgba(0, 119, 204, 0.22), transparent 70%),
    #050E1F;
  color: #fff;
}
html[data-theme="dark"] .fh--dark .fh-aurora-blob { opacity: 0.9; }
html[data-theme="dark"] .fh--dark .fh-aurora-blob--1 {
  background: radial-gradient(circle, rgba(0, 136, 255, 0.45) 0%, rgba(0, 95, 153, 0.12) 55%, transparent 70%);
}
html[data-theme="dark"] .fh--dark .fh-aurora-blob--3 {
  background: radial-gradient(circle, rgba(56, 189, 248, 0.22) 0%, transparent 70%);
}
html[data-theme="dark"] .fh--dark .fh-spotlight {
  background: radial-gradient(650px circle at var(--fh-mouse-x) var(--fh-mouse-y),
    rgba(56, 189, 248, 0.14) 0%, rgba(0, 119, 204, 0.06) 40%, transparent 80%);
}
html[data-theme="dark"] .fh--dark .fh-paper {
  background-image:
    linear-gradient(rgba(125, 200, 255, 0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125, 200, 255, 0.10) 1px, transparent 1px),
    linear-gradient(rgba(125, 200, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125, 200, 255, 0.04) 1px, transparent 1px);
}

html[data-theme="dark"] .fh--dark .fh-title {
  color: #fff;
}
html[data-theme="dark"] .fh--dark .fh-title em {
  color: var(--fh-vivid);
  text-shadow: 0 0 32px rgba(56, 189, 248, 0.45);
}
html[data-theme="dark"] .fh--dark .fh-lead {
  color: rgba(255, 255, 255, 0.84);
}

html[data-theme="dark"] .fh--dark .btn-primary {
  background: #0A84FF;
  box-shadow: 0 10px 30px -6px rgba(10, 132, 255, 0.6);
}
html[data-theme="dark"] .fh--dark .btn-primary:hover { background: #3D9BFF; }
html[data-theme="dark"] .fh--dark .btn-secondary {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: none;
}
html[data-theme="dark"] .fh--dark .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.6);
}

html[data-theme="dark"] .fh--dark .fh-encaixe::before {
  background: radial-gradient(closest-side,
    rgba(10, 132, 255, 0.45) 0%, rgba(56, 189, 248, 0.2) 45%, transparent 80%);
}