/* ==========================================================================
   FLUX — base.css
   Tokens de marca, reset, tipografia e grid.
   Todas as cores vêm do Manual de Identidade Visual FLUX v1.1 / 2026.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* --- Paleta oficial (hex literais do manual, seção 10 / PALETA DE CORES) --- */
  --roxo: #7B00FF;          /* Roxo Elétrico — energia, CTA, interação            */
  --preto: #08080B;         /* Preto Profundo — base do site (dark por padrão)    */
  --offwhite: #F4F2F7;      /* Off-White — texto sobre escuro / fundos claros     */
  --lavanda: #E9DDFB;       /* Lavanda Apoio — fundos suaves, cards, badges       */

  /* Derivadas (apenas variações de opacidade/luminância das 4 oficiais) */
  --preto-2: #0C0C11;       /* superfície elevada sobre o preto  */
  --preto-3: #131319;       /* superfície de card                */
  --roxo-dim: rgba(123, 0, 255, 0.14);
  --roxo-line: rgba(123, 0, 255, 0.38);
  --linha: rgba(244, 242, 247, 0.12);
  --linha-forte: rgba(244, 242, 247, 0.22);
  --texto: var(--offwhite);
  --texto-2: rgba(244, 242, 247, 0.62);
  --texto-3: rgba(244, 242, 247, 0.38);

  /* Cor da agulha do X no logotipo. Herdada pelo <use> do sprite SVG —
     por isso precisa ser uma custom property, e não uma classe. */
  --logo-needle: var(--roxo);

  /* Tokens de tema por seção (sobrescritos em .theme-light / .theme-roxo) */
  --bg: var(--preto);
  --fg: var(--offwhite);
  --fg-2: var(--texto-2);
  --fg-3: var(--texto-3);
  --rule: var(--linha);
  --card-bg: rgba(244, 242, 247, 0.03);
  --card-line: rgba(244, 242, 247, 0.10);
  --accent: var(--roxo);

  /* --- Tipografia (seção 11 / TIPOGRAFIA: Lato Heavy + Lato Regular) --- */
  --font: "Lato", "Helvetica Neue", Arial, sans-serif;
  --fw-heavy: 900;          /* Lato Heavy — títulos      */
  --fw-bold: 700;
  --fw-reg: 400;            /* Lato Regular — corpo/UI   */

  --fs-display: clamp(3.1rem, 11.2vw, 10.5rem);
  --fs-h2: clamp(2rem, 5.2vw, 4.4rem);
  --fs-h3: clamp(1.35rem, 2.6vw, 2.05rem);
  --fs-h4: clamp(1.05rem, 1.5vw, 1.3rem);
  --fs-lead: clamp(1.02rem, 1.55vw, 1.32rem);
  --fs-body: clamp(0.95rem, 1.1vw, 1.05rem);
  --fs-sm: 0.875rem;
  --fs-xs: 0.75rem;
  --fs-eyebrow: 0.6875rem;
  --ls-eyebrow: 0.24em;

  /* --- Espaço e grid --- */
  --wrap: 1360px;
  --gutter: clamp(20px, 5vw, 72px);
  --sec-y: clamp(84px, 11vw, 168px);
  --radius: 14px;
  --radius-sm: 8px;
  --radius-lg: 22px;

  /* --- Motion: "caos controlado" — rápido e intencional, sem easing flutuante
         (seção 13 / IDENTIDADE EM MOVIMENTO) --- */
  --t-fast: 140ms;
  --t: 260ms;
  --t-slow: 640ms;   /* entrada de bloco — deliberadamente visível */
  --e-snap: cubic-bezier(0.22, 0.9, 0.25, 1);
  --e-cut: cubic-bezier(0.65, 0, 0.35, 1);

  --header-h: 74px;
}

/* Seções claras — invertem o tema mantendo o roxo como energia */
.theme-light {
  --bg: var(--offwhite);
  --fg: var(--preto);
  --fg-2: rgba(8, 8, 11, 0.66);
  --fg-3: rgba(8, 8, 11, 0.42);
  --rule: rgba(8, 8, 11, 0.12);
  --card-bg: rgba(255, 255, 255, 0.72);
  --card-line: rgba(123, 0, 255, 0.16);
}

.theme-lavanda {
  --bg: var(--lavanda);
  --fg: var(--preto);
  --fg-2: rgba(8, 8, 11, 0.68);
  --fg-3: rgba(8, 8, 11, 0.44);
  --rule: rgba(8, 8, 11, 0.14);
  --card-bg: rgba(255, 255, 255, 0.6);
  --card-line: rgba(123, 0, 255, 0.2);
}

/* Seção roxa cheia — uso pontual e intencional (manual, slides 04 / 08 / 18) */
.theme-roxo {
  --bg: var(--roxo);
  --fg: var(--offwhite);
  --fg-2: rgba(244, 242, 247, 0.82);
  --fg-3: rgba(8, 8, 11, 0.55);
  --rule: rgba(244, 242, 247, 0.26);
  --card-bg: rgba(8, 8, 11, 0.16);
  --card-line: rgba(244, 242, 247, 0.28);
  --accent: var(--preto);
  /* Versão "Fundo Roxo" do manual: a agulha do X vira preta */
  --logo-needle: var(--preto);
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  background: var(--preto);
  color: var(--texto);
  font-family: var(--font);
  font-weight: var(--fw-reg);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

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

img,
video { height: auto; }

button,
input,
select,
textarea { font: inherit; color: inherit; }

button { background: none; border: 0; cursor: pointer; }

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; padding: 0; }

:focus-visible {
  outline: 2px solid var(--roxo);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--roxo); color: var(--offwhite); }

/* --------------------------------------------------------------------------
   3. TIPOGRAFIA
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5 {
  font-weight: var(--fw-heavy);
  line-height: 0.96;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.display {
  font-size: var(--fs-display);
  line-height: 0.88;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}

.h2 {
  font-size: var(--fs-h2);
  line-height: 0.94;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.h3 { font-size: var(--fs-h3); }
.h4 { font-size: var(--fs-h4); }

/* Padrão de headline do manual: 1ª linha na cor base, 2ª linha em roxo */
.hl-accent { color: var(--accent); }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--fg-2);
  max-width: 62ch;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
}

.eyebrow__num { color: var(--accent); }

.eyebrow::after {
  content: "";
  width: clamp(28px, 5vw, 64px);
  height: 1px;
  background: var(--accent);
  opacity: 0.7;
}

.mono {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.text-2 { color: var(--fg-2); }
.text-3 { color: var(--fg-3); }

/* --------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  background: var(--bg);
  color: var(--fg);
  padding-block: var(--sec-y);
  overflow: clip;
}

.section--tight { padding-block: clamp(56px, 7vw, 96px); }

.section__head {
  display: grid;
  gap: clamp(20px, 3vw, 34px);
  margin-bottom: clamp(40px, 6vw, 76px);
}

@media (min-width: 900px) {
  .section__head--split {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: end;
    gap: clamp(32px, 5vw, 80px);
  }
}

.stack { display: grid; gap: clamp(14px, 2vw, 22px); }

.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 999;
  padding: 10px 16px;
  background: var(--roxo);
  color: var(--offwhite);
  font-weight: var(--fw-bold);
  border-radius: var(--radius-sm);
  transform: translateY(-160%);
  transition: transform var(--t) var(--e-snap);
}

.skip-link:focus-visible { transform: translateY(0); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   5. ELEMENTOS GRÁFICOS DE APOIO (manual, seção 12 / SISTEMA GRÁFICO)
   Diagonais de canto, marcadores "+", linhas de fluxo.
   -------------------------------------------------------------------------- */

/* Diagonais/triângulos roxo e preto nos cantos das seções */
.section::before,
.section::after {
  content: "";
  position: absolute;
  pointer-events: none;
  background: var(--accent);
  opacity: 0.075;
}

.section::before {
  top: 0; left: 0;
  width: clamp(150px, 22vw, 420px);
  aspect-ratio: 2.6 / 1;
  clip-path: polygon(0 0, 100% 0, 62% 100%, 0 100%);
}

.section::after {
  bottom: 0; right: 0;
  width: clamp(160px, 24vw, 460px);
  aspect-ratio: 2.6 / 1;
  clip-path: polygon(38% 0, 100% 0, 100% 100%, 0 100%);
  opacity: 0.1;
}

.section--no-corners::before,
.section--no-corners::after { display: none; }

/* Marcadores "+" de canto — micro-elemento de grid */
.cross {
  position: absolute;
  width: 15px; height: 15px;
  color: var(--accent);
  opacity: 0.55;
  pointer-events: none;
}

.cross::before,
.cross::after {
  content: "";
  position: absolute;
  background: currentColor;
}

.cross::before { inset: 50% 0 auto 0; height: 1px; transform: translateY(-50%); }
.cross::after { inset: 0 50% 0 auto; width: 1px; transform: translateX(50%); }

.cross--tl { top: clamp(18px, 3vw, 40px); left: clamp(18px, 3vw, 40px); }
.cross--br { bottom: clamp(18px, 3vw, 40px); right: clamp(18px, 3vw, 40px); }

/* Linha de fluxo (SVG animado) */
.flow {
  width: 100%;
  max-width: 520px;
  height: auto;
  color: var(--accent);
  opacity: 0.75;
}

.flow path { stroke-dasharray: 460; stroke-dashoffset: 460; }

.is-in .flow path {
  animation: flow-draw 1s var(--e-snap) forwards;
}

.flow path:nth-child(2) { animation-delay: 70ms; }
.flow path:nth-child(3) { animation-delay: 140ms; }
.flow path:nth-child(4) { animation-delay: 210ms; }
.flow path:nth-child(5) { animation-delay: 280ms; }
.flow path:nth-child(6) { animation-delay: 350ms; }

@keyframes flow-draw { to { stroke-dashoffset: 0; } }

/* --------------------------------------------------------------------------
   6. REVEAL / MOTION
   Cortes secos e máscaras de reveal — energia alta, ruído baixo.
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--t-slow) var(--e-snap),
    transform var(--t-slow) var(--e-snap);
  transition-delay: var(--reveal-delay, 0ms);
}

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

/* Elemento que só hospeda máscaras de reveal: o movimento fica por conta
   das máscaras internas, sem fade/translate próprio. */
[data-reveal].reveal-mask { opacity: 1; transform: none; transition: none; }

/* Máscara de reveal para títulos (tipografia cinética).
   O padding alarga a caixa de recorte para caber acentos e descendentes das
   fontes em caixa alta; as margens negativas devolvem o espaço ao layout. */
.mask {
  display: block;
  overflow: hidden;
  padding-block: 0.16em 0.1em;
  margin-block: -0.16em -0.1em;
}

.mask > span {
  display: block;
  transform: translateY(105%);
  transition: transform 820ms var(--e-snap);
  transition-delay: var(--reveal-delay, 0ms);
}

.is-in .mask > span,
.mask.is-in > span { transform: none; }

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

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

  [data-reveal] { opacity: 1; transform: none; }
  .mask > span { transform: none; }
  .flow path { stroke-dashoffset: 0; }
}