/* ==========================================================================
   iago.co · base
   Tokens de marca (roxo + tons do gradiente da logo, sem laranja), reset,
   nav pill flutuante, botões, sistema de reveal e palavras do headline,
   rodapé institucional.
   ========================================================================== */

:root {
  /* superfícies escuras com fundo roxo-quase-preto */
  --bg: #0a0714;
  --bg-2: #100b1f;
  --surface: #171029;
  --surface-2: #1e1535;
  --line: rgba(244, 241, 255, .09);
  --line-strong: rgba(244, 241, 255, .16);

  /* tinta */
  --ink: #f4f1ff;
  --muted: #a89ec6;
  --dim: rgba(244, 241, 255, .38);

  /* cenas claras (lavanda) */
  --light-bg: #f5f3fb;
  --light-bg-2: #ece7f9;
  --light-card: #ffffff;
  --light-ink: #191036;
  --light-muted: #5d5478;
  --light-line: rgba(25, 16, 54, .1);

  /* marca: roxo + tons do gradiente da logo (sem laranja) */
  --purple: #7c3aed;
  --purple-soft: #a78bfa;
  --blue: #1746ff;
  --teal: #10bcb4;
  --magenta: #ff00e1;
  --yellow: #ffec6d;

  /* uma única cor da paleta (roxo) pros elementos, sem gradiente arco-íris:
     --grad-brand = violeta claro pra texto recortado;
     --grad-cta   = roxo sólido pra preenchimentos */
  --grad-brand: #a78bfa;
  --grad-cta: #7c3aed;

  --glow-purple: rgba(124, 58, 237, .45);
  --glow-magenta: rgba(255, 0, 225, .32);

  /* tipo */
  --font-display: "Sora", "Inter", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;

  /* medida */
  --wrap: 1180px;
  --nav-h: 64px;
  --radius: 22px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 24px);
  /* snap proximity: só puxa o descanso quando o scroll já está bem perto do
     início de um palco, então nunca briga com o pin nem com o meio do room */
  scroll-snap-type: y proximity;
  /* rede de segurança universal: hidden existe em todo engine; clip é
     upgrade onde existir (iOS < 16 ignora clip e voltava a panar) */
  overflow-x: hidden;
}

@supports (overflow: clip) {
  html { overflow-x: clip; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* sem overflow-x aqui: com html já guardado, o hidden no body deixaria de
     propagar pro viewport e viraria ancestral de clip, matando o sticky das
     stages; a guarda horizontal vive só no html */
}

/* antes da intro acabar, nada rola */
body.is-intro { overflow: hidden; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.08;
  letter-spacing: -.02em;
  margin: 0;
  font-weight: 700;
}

p { margin: 0; }

a { color: inherit; }

img { max-width: 100%; display: block; }

button { font: inherit; color: inherit; }

::selection {
  background: var(--purple);
  color: #fff;
}

.wrap {
  width: min(var(--wrap), 92vw);
  margin-inline: auto;
}

/* --- ícones lucide -------------------------------------------------------- */

.lucide,
[data-lucide] {
  width: 20px;
  height: 20px;
  stroke-width: 2;
}

/* --- nav pill flutuante --------------------------------------------------- */

.nav {
  position: fixed;
  top: 22px;
  /* centrado sem translate/left:50%: margem auto funciona em qualquer
     engine e nunca deixa o pill vazar pra direita em tela estreita */
  left: 12px;
  right: 12px;
  margin-inline: auto;
  width: fit-content;
  max-width: calc(100vw - 24px);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  /* sem backdrop-filter: blur em barra fixa sobre painéis empilhados
     força re-blur do viewport inteiro a cada frame de scroll */
  background: rgba(13, 9, 24, .92);
  opacity: 0;
  transform: translateY(-24px);
  transition:
    opacity .6s var(--e-soft),
    transform .6s var(--e-soft),
    background .4s linear,
    color .4s linear,
    border-color .4s linear;
}

body.is-ready .nav {
  opacity: 1;
  transform: translateY(0);
}

.nav__mark {
  display: grid;
  place-items: center;
  width: 78px;
  height: 31px;
  margin-right: 12px;
}

.nav__links {
  display: flex;
  gap: 6px;
}

.nav__links a {
  padding: 9px 15px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color .25s, background .25s;
}

.nav__links a:hover {
  color: var(--ink);
  background: rgba(244, 241, 255, .07);
}

.nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 0;
  background: var(--grad-cta);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 6px 22px -8px var(--glow-purple);
  transition: filter .25s, transform .25s, box-shadow .25s;
}

.nav__cta:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
}

.nav__cta .lucide {
  width: 15px;
  height: 15px;
  stroke-width: 2.2;
}

/* nav sobre cena clara */
.nav.is-light {
  background: rgba(255, 255, 255, .95);
  border-color: var(--light-line);
  color: var(--light-ink);
}

.nav.is-light .nav__links a { color: var(--light-muted); }
.nav.is-light .nav__links a:hover {
  color: var(--light-ink);
  background: rgba(25, 16, 54, .06);
}
/* a logo usa --ink pros traços: no nav claro vira tinta escura pra ler
   (precisa mirar no .iago, que redeclara --ink nele mesmo) */
.nav.is-light .nav__mark .iago { --ink: var(--light-ink); }

@media (max-width: 860px) {
  .nav__links { display: none; }
  /* respiro entre a marca e o CTA quando só sobram os dois no pill */
  .nav { gap: 18px; padding: 10px 16px 10px 14px; }
  .nav__mark { width: 62px; }
}

/* --- botões --------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 15px 26px;
  border-radius: 999px;
  border: 0;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform .3s var(--e-pop), filter .3s, box-shadow .3s, background .3s, color .3s;
}

.btn--primary {
  background: var(--grad-cta);
  color: #fff;
  box-shadow: 0 14px 40px -14px var(--glow-purple);
}

.btn--primary:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-strong);
}

.btn--ghost:hover {
  background: rgba(244, 241, 255, .07);
  transform: translateY(-2px);
}

.btn--dark {
  background: var(--light-ink);
  color: #fff;
}

/* --- brilho dos CTAs: varrida de sheen + luz que segue o cursor ----------- */

/* isolation cria stacking context pra os pseudo-elementos com z-index -1
   ficarem acima do fundo do botão e abaixo do texto; overflow hidden recorta
   o sheen na pílula */
.btn--primary,
.btn--ghost,
.nav__cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* spotlight segue o cursor: --mx/--my vêm do mousemove no main.js */
.btn--primary::before,
.btn--ghost::before,
.nav__cta::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(110px circle at var(--mx, 50%) var(--my, 50%),
      rgba(255, 255, 255, .3), transparent 65%);
  opacity: 0;
  transition: opacity .3s;
}

.btn--ghost::before {
  background: radial-gradient(110px circle at var(--mx, 50%) var(--my, 50%),
      rgba(167, 139, 250, .32), transparent 65%);
}

.btn--primary:hover::before,
.btn--ghost:hover::before,
.nav__cta:hover::before { opacity: 1; }

/* sheen diagonal: atravessa o botão só na entrada do hover (a transição
   mora no :hover, então ao sair ele reseta instantâneo, sem replay) */
.btn--primary::after,
.btn--ghost::after,
.nav__cta::after {
  content: "";
  position: absolute;
  top: -30%;
  bottom: -30%;
  left: 0;
  width: 40%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent);
  transform: translateX(-150%) skewX(-18deg);
}

.btn--ghost::after {
  background: linear-gradient(90deg, transparent, rgba(167, 139, 250, .38), transparent);
}

.btn--primary:hover::after,
.btn--ghost:hover::after,
.nav__cta:hover::after {
  transform: translateX(420%) skewX(-18deg);
  transition: transform .7s var(--e-soft);
}

/* glow reforçado no hover, por cima do lift que já existe */
.btn--primary:hover { box-shadow: 0 18px 50px -12px var(--glow-purple); }
.nav__cta:hover { box-shadow: 0 10px 30px -10px var(--glow-purple); }

/* --- badge / kicker ------------------------------------------------------- */

/* kicker editorial em vez da pílula com borda: caixa alta, tracking largo,
   sem fundo nem border, com um filete curto fechando a linha */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--purple-soft);
}

.badge .lucide { width: 14px; height: 14px; stroke-width: 2.4; }

.badge::after {
  content: "";
  width: 26px;
  height: 1px;
  margin-left: 4px;
  background: currentColor;
  opacity: .45;
}

/* cenas claras */
.scene--light .badge {
  color: var(--purple);
}

/* --- shell das cenas ------------------------------------------------------ */

.scene {
  position: relative;
  padding: 130px 0 110px;
  overflow: hidden;
  overflow: clip;
  background: var(--bg);
}

.scene--light {
  background: var(--light-bg);
  color: var(--light-ink);
}

.scene--light .scene__sub { color: var(--light-muted); }

/* telas empilhadas (estilo scroll-magic): cada .stage gruda no topo e a
   próxima tela rola por cima; .room é a folga de rolagem em que a tela
   fica estática enquanto o conteúdo se forma */
.stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  overflow: clip;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.room {
  height: var(--room, 90vh);
  /* ponto de snap do modelo pinado: o room é caixa estática no fluxo (o
     stage sticky vira alvo móvel e degenera o snap). O fim do room é
     exatamente o scroll onde o próximo palco cobre tudo: align start com
     margem negativa do próprio room + scroll-padding-top do html. */
  scroll-snap-align: start;
  scroll-margin-top: calc(-1 * (var(--room, 90vh) + var(--nav-h) + 24px));
}

/* o painel seguinte sobe e cobre o anterior: a sombra + hairline na borda
   superior deixam a sobreposição legível (sem sensação de faixa vazia
   deslizante). Quando o painel prende no topo, a sombra fica pra fora da
   tela e some sozinha */
@media (min-width: 861px) {
  .stage ~ .stage {
    border-top: 1px solid var(--line);
    box-shadow: 0 -40px 90px -30px rgba(0, 0, 0, .65);
  }
}

/* palco fora da tela ou coberto por outro painel (classe aplicada pelo
   js/main.js): pausa tudo que anima lá dentro. São dezenas de elementos
   animados por tela e nenhum deles precisa rodar enquanto ninguém vê */
.stage.is-offscreen,
.stage.is-offscreen * {
  animation-play-state: paused !important;
}

/* barra fina de progresso de rolagem: deixa claro que a página responde ao
   scroll mesmo durante as telas pinned */
.scroll-progress {
  position: fixed;
  top: 0; right: 0; left: 0;
  height: 3px;
  z-index: 70;
  pointer-events: none;
  background: var(--grad-cta);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* deriva sutil do conteúdo durante o hold: mesmo com a tela pinned, o
   conteúdo sobe devagar enquanto o room rola, então sempre há movimento */
.stage .wrap { transform: translateY(calc(var(--p, 0) * -3vh)); }

.scene__head {
  max-width: 820px;
  margin: 0 auto 64px;
  text-align: center;
}

.scene__title {
  font-size: clamp(34px, 5vw, 58px);
  margin: 22px 0 18px;
}

.scene__sub {
  color: var(--muted);
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.65;
}

.grad-text {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --- palavras do headline (reveal no scroll) ------------------------------ */

.w {
  display: inline-block;
  opacity: .16;
  transform: translateY(.28em);
  transition: opacity .5s var(--e-soft), transform .5s var(--e-soft);
  transition-delay: calc(var(--i) * 28ms);
}

.w.on {
  opacity: 1;
  transform: translateY(0);
}

/* palavra destacada mantém gradiente mesmo "apagada" */
.w.grad-text { opacity: .35; }
.w.grad-text.on { opacity: 1; }

/* reveal genérico por interseção */
[data-reveal] {
  opacity: 0;
  transform: translateY(34px);
  transition:
    opacity .8s var(--e-soft),
    transform .8s var(--e-soft);
  transition-delay: var(--d, 0ms);
}

[data-reveal].in {
  opacity: 1;
  transform: none;
}

/* --- intro ---------------------------------------------------------------- */

.intro {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background:
    radial-gradient(60% 50% at 50% 46%, rgba(124, 58, 237, .16), transparent 70%),
    var(--bg);
  transition: transform 1s var(--e-io), opacity .8s linear .15s;
}

.intro.is-done {
  transform: translateY(-101%);
  opacity: .4;
  pointer-events: none;
}

.intro__logo {
  width: min(430px, 74vw);
}

.intro__hint {
  position: absolute;
  bottom: 34px;
  left: 50%;
  transform: translate(-50%, 0);
  color: var(--dim);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  animation: hint-pulse 2.2s var(--e-io) infinite;
}

@keyframes hint-pulse {
  0%, 100% { opacity: .35 }
  50% { opacity: .8 }
}

/* --- rodapé --------------------------------------------------------------- */

.footer {
  position: relative;
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  padding: 80px 0 40px;
}

.footer__alert {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 22px 26px;
  border-radius: var(--radius);
  border: 1px solid rgba(124, 58, 237, .35);
  background:
    linear-gradient(120deg, rgba(124, 58, 237, .12), rgba(124, 58, 237, .05)),
    var(--surface);
  margin-bottom: 60px;
}

.footer__alert .lucide {
  flex: none;
  width: 26px;
  height: 26px;
  color: #a78bfa;
  margin-top: 2px;
}

.footer__alert strong { color: var(--ink); }

.footer__alert p {
  color: var(--muted);
  font-size: 14.5px;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 40px;
  margin-bottom: 56px;
}

.footer__brand p {
  color: var(--muted);
  font-size: 14px;
  max-width: 300px;
  margin-top: 16px;
}

/* logo completa (idle): proporção 313x125, então a altura vem do width */
.footer__logo { width: 108px; }

.footer h4 {
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 18px;
  font-weight: 600;
}

.footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 11px;
}

.footer ul a {
  color: var(--muted);
  text-decoration: none;
  font-size: 14.5px;
  transition: color .25s;
}

.footer ul a:hover { color: var(--ink); }

.footer__base {
  border-top: 1px solid var(--line);
  padding-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  color: var(--dim);
  font-size: 12.5px;
}

.footer__social {
  display: flex;
  gap: 10px;
}

.footer__social a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid var(--line);
  color: var(--muted);
  transition: color .25s, border-color .25s, transform .25s;
}

.footer__social a:hover {
  color: var(--ink);
  border-color: var(--line-strong);
  transform: translateY(-2px);
}

@media (max-width: 860px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px) {
  .footer__grid { grid-template-columns: 1fr; }
}

/* --- movimento reduzido --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .w,
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}