/* Home: estilos da página. Prefixo home-. Tokens e componentes vêm de site.css */

/* Hero ---------------------------------------------------------------- */
.home-hero { padding-block: var(--space-6) var(--space-7); }
.home-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-6) var(--space-8);
  align-items: center;
}
.home-hero__title { max-width: 12ch; }
.home-hero__text { margin-top: var(--space-5); max-width: 46ch; }
.home-hero__visual {
  position: relative; isolation: isolate; overflow: hidden;
  container-type: inline-size;
  margin: 0 0 0 auto; width: min(100%, 26rem);
  aspect-ratio: 4 / 5; max-height: calc(100dvh - var(--nav-h) - 6rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  --cx: 58%; --cy: 40%;
}
/* disco em degradê (único momento de degradê do hero), sangrando pelo canto inferior esquerdo */
.hv-disc {
  position: absolute; z-index: 0;
  width: 78cqw; aspect-ratio: 1; border-radius: 50%;
  left: -30cqw; bottom: -30cqw;
  background: var(--brand-gradient);
}
/* anéis concêntricos derivados do círculo da logo, centrados no ícone */
.hv-ring {
  position: absolute; z-index: 1; left: var(--cx); top: var(--cy);
  aspect-ratio: 1; border-radius: 50%;
  border: 1px solid var(--line);
  translate: -50% -50%;
}
.hv-ring--1 { width: 66cqw;  border-color: var(--navy-700); opacity: 0.55; }
.hv-ring--2 { width: 92cqw; }
.hv-ring--3 { width: 124cqw; }
.hv-ring--4 { width: 162cqw; }
/* eixos finos cruzando o centro */
.hv-axis { position: absolute; z-index: 1; background: var(--line); }
.hv-axis--x { left: 0; right: 0; top: var(--cy); height: 1px; }
.hv-axis--y { top: 0; bottom: 0; left: var(--cx); width: 1px; }
.hv-icon {
  position: absolute; z-index: 2; left: var(--cx); top: var(--cy);
  width: 40cqw; height: auto; aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 0 0 1.5cqw var(--surface), 0 14px 32px -12px rgb(11 27 63 / 0.35);
}
.hv-mono {
  position: absolute; z-index: 2; right: 6cqw; bottom: 5cqw;
  font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-500);
}
/* nós em órbita, um por anel, lembrando pontos de rede circulando a marca.
   Cada órbita tem o mesmo diâmetro do anel que ela segue. */
.hv-orbit {
  position: absolute; z-index: 2; left: var(--cx); top: var(--cy);
  width: 66cqw; aspect-ratio: 1; translate: -50% -50%;
  pointer-events: none;
}
.hv-orbit--2 { width: 92cqw; }
.hv-orbit--3 { width: 124cqw; }
.hv-orbit--4 { width: 162cqw; }
/* sem movimento só a primeira fica (estática); as outras só existem animadas */
.hv-orbit--2, .hv-orbit--3, .hv-orbit--4 { display: none; }
.hv-node {
  position: absolute; left: 50%; top: 0; width: 2.2cqw; aspect-ratio: 1;
  translate: -50% -50%; border-radius: 50%;
  background: var(--orange-600);
  box-shadow: 0 0 0 1cqw var(--surface);
}
.hv-node--navy { background: var(--navy-700); }
.hv-node--sm { width: 1.7cqw; box-shadow: 0 0 0 0.8cqw var(--surface); }

/* ondas que partem do ícone (sinal de rede); invisíveis até a animação rodar */
.hv-pulse {
  position: absolute; z-index: 1; left: var(--cx); top: var(--cy);
  width: 40cqw; aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%; border: 1.5px solid var(--navy-700);
  opacity: 0; pointer-events: none;
}

/* Abertura do globo (js/pages/home-globe.js). O canvas cobre o painel (sangra 3cqw para o parallax) e fica
   invisível até a abertura rodar. Sem JS ou em reduced-motion nada disto se aplica e o painel é o de sempre. */
.hv-globe {
  position: absolute; z-index: 3; left: -3cqw; top: -3cqw;
  width: calc(100% + 6cqw); height: calc(100% + 6cqw);
  opacity: 0; pointer-events: none;
}
/* com o canvas opaco por cima, a logo sai de cena; ao fim ela volta por baixo e o canvas some */
.hv-globe-on .hv-icon { opacity: 0; }
/* bolinhas e ondas esperam a abertura (hv-pre); ao liberar, entram e as animações CSS começam */
.hv-orbit { transition: opacity 700ms var(--ease); }
.hv-pre .hv-orbit { opacity: 0; animation-play-state: paused; }
.hv-pre .hv-pulse { animation-play-state: paused; }

/* Movimento: só transform/opacity. Tudo desligado em reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  .hv-ring, .hv-icon, .hv-disc { animation: hv-in 900ms var(--ease) both; }
  .hv-ring--2 { animation-delay: 80ms; } .hv-ring--3 { animation-delay: 160ms; } .hv-ring--4 { animation-delay: 240ms; }
  @keyframes hv-in { from { opacity: 0; transform: scale(0.94); } }

  /* camadas com profundidade diferente; --px/--py (-1..1) vêm do home-hero.js */
  .home-hero__visual { --px: 0; --py: 0; }
  .hv-disc  { transform: translate3d(calc(var(--px) * -2.4cqw), calc(var(--py) * -2.4cqw), 0); }
  .hv-ring--1 { transform: translate3d(calc(var(--px) * 1.2cqw), calc(var(--py) * 1.2cqw), 0); }
  .hv-ring--2 { transform: translate3d(calc(var(--px) * 2cqw),   calc(var(--py) * 2cqw), 0); }
  .hv-ring--3 { transform: translate3d(calc(var(--px) * 3cqw),   calc(var(--py) * 3cqw), 0); }
  .hv-ring--4 { transform: translate3d(calc(var(--px) * 4.2cqw), calc(var(--py) * 4.2cqw), 0); }
  .hv-icon, .hv-globe { transform: translate3d(calc(var(--px) * 1.6cqw), calc(var(--py) * 1.6cqw), 0); }
  /* cada órbita acompanha a profundidade do seu anel */
  .hv-orbit--1 { transform: translate3d(calc(var(--px) * 1.2cqw), calc(var(--py) * 1.2cqw), 0); }
  .hv-orbit--2 { transform: translate3d(calc(var(--px) * 2cqw),   calc(var(--py) * 2cqw), 0); }
  .hv-orbit--3 { transform: translate3d(calc(var(--px) * 3cqw),   calc(var(--py) * 3cqw), 0); }
  .hv-orbit--4 { transform: translate3d(calc(var(--px) * 4.2cqw), calc(var(--py) * 4.2cqw), 0); }

  /* a animação de entrada usa transform e o parallax também: a entrada só toca opacity */
  .hv-ring, .hv-disc { animation-name: hv-fade; }
  @keyframes hv-fade { from { opacity: 0; } }

  /* logo pulsando: o ícone "respira" (scale) e duas ondas se expandem a partir dele */
  .hv-icon { animation: hv-fade 900ms var(--ease) both, hv-breathe 3.6s ease-in-out 900ms infinite; }
  @keyframes hv-breathe { 0%, 100% { scale: 1; } 50% { scale: 1.05; } }
  .hv-pulse {
    transform: translate3d(calc(var(--px) * 1.6cqw), calc(var(--py) * 1.6cqw), 0);
    animation: hv-wave 3.6s cubic-bezier(0.2, 0.6, 0.3, 1) 900ms infinite;
  }
  .hv-pulse--2 { animation-delay: 2.7s; }
  @keyframes hv-wave { 0% { scale: 1; opacity: 0.5; } 100% { scale: 2.3; opacity: 0; } }

  /* sentidos alternados e velocidades diferentes (rotate é independente do transform do parallax) */
  .hv-orbit--2, .hv-orbit--3, .hv-orbit--4 { display: block; }
  .hv-orbit--1 { animation: hv-spin 28s linear infinite; }
  .hv-orbit--2 { --o: 110deg; animation: hv-spin 40s linear infinite reverse; }
  .hv-orbit--3 { --o: 220deg; animation: hv-spin 56s linear infinite; }
  .hv-orbit--4 { --o: 40deg;  animation: hv-spin 72s linear infinite reverse; }
  @keyframes hv-spin { from { rotate: var(--o, 0deg); } to { rotate: calc(var(--o, 0deg) + 360deg); } }
  .hv-disc::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    background: radial-gradient(circle at 70% 25%, rgb(255 255 255 / 0.18), transparent 55%);
    animation: hv-sheen 9s ease-in-out infinite alternate;
  }
  @keyframes hv-sheen { from { transform: translate3d(-6%, 4%, 0); opacity: 0.6; } to { transform: translate3d(6%, -4%, 0); opacity: 1; } }
}

/* Clientes ------------------------------------------------------------ */
.home-clients { padding-block: var(--space-7); border-block: 1px solid var(--line); }
.home-partners { border-top: 0; }
.home-clients__head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--space-2) var(--space-6); margin-bottom: var(--space-6);
}
.home-clients__head p { max-width: 52ch; }

/* Por que escolher ---------------------------------------------------- */
.home-why__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-6) var(--space-7);
  align-items: start;
}
.home-why__stat { padding-top: var(--space-4); border-top: 2px solid var(--navy-900); }
.home-why__stat .stat__value { font-size: clamp(2.75rem, 5vw, 4rem); color: var(--navy-700); }
.home-quote {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-5) var(--space-6);
  margin-top: var(--space-8); padding: var(--space-5) var(--space-6);
  background: var(--info-bg); border: 1px solid var(--line);
  border-left: 4px solid var(--orange-600); border-radius: var(--radius);
}
.home-quote__text { max-width: 60ch; }
.home-quote__text p { margin-top: var(--space-2); }

/* Especializações ----------------------------------------------------- */
.home-services__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: var(--space-6) var(--space-9);
  align-items: start;
}
.home-services__head { position: sticky; top: calc(var(--nav-h) + var(--space-6)); }
.home-services__head > * + * { margin-top: var(--space-4); }
.home-services__head .btn { margin-top: var(--space-5); }
.home-services__list { border-top: 1px solid var(--line); }
.home-services__list > li { border-bottom: 1px solid var(--line); }
.home-service {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) 24px; gap: var(--space-4);
  align-items: start; padding: var(--space-5) var(--space-3);
  color: inherit; text-decoration: none;
  transition: background-color var(--dur) ease;
}
.home-service:hover { background: var(--paper); }
.home-service__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: var(--radius);
  background: var(--paper); border: 1px solid var(--line);
  color: var(--navy-700); font-size: 1.5rem;
  transition: background-color var(--dur) ease, color var(--dur) ease, border-color var(--dur) ease;
}
.home-service:hover .home-service__icon { background: var(--navy-700); border-color: var(--navy-700); color: #fff; }
.home-service__body { display: flex; flex-direction: column; gap: var(--space-1); }
.home-service__title { font-size: 1.1875rem; }
.home-service__desc { color: var(--ink-700); }
.home-service__tech { margin-top: var(--space-2); font-size: 0.8125rem; color: var(--ink-500); line-height: 1.5; }
.home-service__arrow {
  margin-top: 0.75rem; font-size: 1.25rem; color: var(--navy-700);
  transition: transform var(--dur) var(--ease), color var(--dur) ease;
}
.home-service:hover .home-service__arrow { transform: translate(3px, -3px); color: var(--orange-600); }

/* Projetos: bento 1 + 2 ----------------------------------------------- */
.home-bento {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-rows: auto auto;
  gap: var(--space-5);
}
.home-bento__tile {
  padding: var(--space-6);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
}
.home-bento__tile h3 { margin-top: var(--space-4); }
.home-bento__tile p { margin-top: var(--space-2); max-width: 44ch; }
.home-bento__icon { font-size: 2rem; color: var(--navy-700); }
.home-bento__tile--main {
  grid-row: 1 / span 2;
  display: flex; flex-direction: column; justify-content: flex-start;
  min-height: 22rem;
}
/* tile principal: só tipografia, ícone e linhas finas em CSS */
.home-bento__tile--main {
  position: relative; overflow: hidden; isolation: isolate;
  background-color: var(--surface);
  background-image:
    repeating-linear-gradient(0deg, var(--line) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 28px);
  background-size: 100% 100%;
}
.home-bento__tile--main::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  /* véu branco que deixa as linhas aparecerem só no canto inferior direito */
  background: radial-gradient(120% 120% at 100% 100%, transparent 0%, var(--surface) 80%);
}
.home-bento__ghost {
  position: absolute; z-index: -1; right: -2rem; bottom: -2.5rem;
  font-size: clamp(11rem, 22vw, 17rem); line-height: 1;
  color: var(--navy-700); opacity: 0.1;
}
.home-bento__tile--navy { background: var(--navy-900); border-color: var(--navy-900); }
.home-bento__tile--navy h3 { color: #fff; }
.home-bento__tile--navy p { color: #C9D3E6; }
.home-bento__tile--navy .home-bento__icon { color: #fff; }
.home-bento__tile--tint { background: var(--info-bg); }
.home-projects__action { margin-top: var(--space-7); }

/* FAQ ----------------------------------------------------------------- */
.home-faq__list { max-width: 56rem; }
.home-faq .section__head { max-width: 56rem; }

/* Responsivo ---------------------------------------------------------- */
@media (max-width: 1023.98px) {
  .home-why__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .home-why__grid .prose { grid-column: 1 / -1; max-width: 65ch; }
  .home-services__grid { gap: var(--space-7); }
}
@media (max-width: 860px) {
  .home-hero { padding-block: var(--space-5) var(--space-7); }
  .home-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .home-hero__visual { margin-inline: 0; width: min(100%, 20rem); max-height: none; aspect-ratio: 1; }
  .home-services__grid { grid-template-columns: minmax(0, 1fr); }
  .home-services__head { position: static; }
  .home-bento { grid-template-columns: minmax(0, 1fr); }
  .home-bento__tile--main { grid-row: auto; }
}
@media (max-width: 560px) {
  .home-why__grid { grid-template-columns: minmax(0, 1fr); }
  .home-quote { padding: var(--space-5); }
  .home-quote .btn { width: 100%; }
  .home-bento__tile { padding: var(--space-5); }
  .home-service { grid-template-columns: 44px minmax(0, 1fr) 20px; gap: var(--space-3); padding-inline: 0; }
  .home-service__icon { width: 44px; height: 44px; }
}