/* ============================================================================
   SITE 02 · «ORBIT» — BASE
   Autor: Agente de Design System · Segunda rodada (redesenho completo)
   ----------------------------------------------------------------------------
   Reset · tipografia · layout · utilitários · estados de movimento.
   Nenhum hex literal: tudo vem de tokens.css.

   SUMÁRIO
     01  Reset e alicerce
     02  Tipografia
     03  Links e foco
     04  Container e seção
     05  Grade e split          (min-width:0 obrigatório — ver §05)
     06  Utilitários de fluxo
     07  Texto utilitário: eyebrow, lead, mono, sr-only
     08  Skip link
     09  Tabela crua e table-scroll
     10  Mídia
     11  Estados de movimento (reveal / parallax / ticker)
     12  Utilitários curtos
     13  prefers-reduced-motion  (único lugar com !important)
   ========================================================================== */


/* ==========================================================================
   §01 · RESET E ALICERCE
   ====================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* a cápsula do header flutua: âncoras precisam de folga extra */
  scroll-padding-top: calc(var(--header-h) + var(--header-gap) + var(--s-6));
}

body {
  margin: 0;
  min-height: 100%;
  background-color: var(--bg);
  color: var(--fg);
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-book);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* nenhuma página deste site rola horizontalmente */
  overflow-x: hidden;
}

/* Trava de rolagem quando o drawer está aberto (ui.js põe .nav-open no <html>) */
html.nav-open,
html.nav-open body { overflow: hidden; }

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

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

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

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

hr {
  border: 0;
  border-top: var(--border) solid var(--line);
  margin: var(--s-8) 0;
}

::selection {
  background-color: var(--tint);
  color: var(--ink);
}


/* ==========================================================================
   §02 · TIPOGRAFIA
   ----------------------------------------------------------------------------
   Salto real entre display e corpo: 6rem contra 1.0625rem no topo da escala
   (≈ 5.6×). O contraste entre eles é o design — não afrouxe.
   Bricolage Grotesque é variável: `opsz` alto nos títulos dá o corte curvo
   que assina este site.
   ====================================================================== */

h1, h2, h3, h4, h5, h6,
.display, .h2, .h3, .h4 {
  font-family: var(--ff-display);
  font-weight: var(--fw-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-h2);
  color: var(--fg);
  text-wrap: balance;
}

h1, .display {
  font-size: var(--fs-display);
  font-weight: var(--fw-display-x);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  font-variation-settings: 'opsz' 96, 'wdth' 100;
}

h2, .h2 {
  font-size: var(--fs-h2);
  font-variation-settings: 'opsz' 72, 'wdth' 100;
}

h3, .h3 {
  font-size: var(--fs-h3);
  letter-spacing: var(--tr-h3);
  font-variation-settings: 'opsz' 36, 'wdth' 100;
}

h4, .h4 {
  font-size: var(--fs-h4);
  letter-spacing: var(--tr-h3);
  font-variation-settings: 'opsz' 24, 'wdth' 100;
}

h5, h6 {
  font-size: var(--fs-sm);
  letter-spacing: 0;
}

p { text-wrap: pretty; }

strong, b { font-weight: var(--fw-bold); }

small { font-size: var(--fs-xs); }

/* Números — SEMPRE mono e tabulares. Linguagem visual de mesa de operações. */
.num,
.mono,
[data-count-to],
[data-tick],
[data-tick-change],
time,
code, kbd, samp {
  font-family: var(--ff-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  letter-spacing: -.01em;
}


/* ==========================================================================
   §03 · LINKS E FOCO
   ====================================================================== */

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--dur) var(--ease-soft);
}

/* Link de texto corrido: sublinhado discreto que engrossa no hover.
   O hover SOBE o contraste (accent 6.50 : 1 → accent-strong 12.91 : 1). */
a:hover { color: var(--accent-strong); }

:where(p, li, dd, figcaption) > a:not([class]) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  text-decoration-color: var(--accent);
}

:where(p, li, dd, figcaption) > a:not([class]):hover {
  text-decoration-thickness: 2px;
  text-decoration-color: var(--accent-strong);
}

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

/* Nunca remover foco sem substituto. Aqui o substituto é o :focus-visible acima. */
:focus:not(:focus-visible) { outline: none; }


/* ==========================================================================
   §04 · CONTAINER E SEÇÃO
   ----------------------------------------------------------------------------
   Três larguras e três alturas de seção. Alternar é obrigatório: se todas as
   seções tiverem o mesmo padding, o site parece gerado.
   ====================================================================== */

.container {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--wide   { max-width: var(--wrap-wide); }
.container--narrow { max-width: var(--wrap-narrow); }
.container--flush  { padding-inline: 0; }

.measure { max-width: var(--wrap-text); }

.section {
  position: relative;
  padding-block: var(--sec);
}

.section--tight { padding-block: var(--sec-tight); }
.section--loose { padding-block: var(--sec-loose); }
.section--flush-top    { padding-block-start: 0; }
.section--flush-bottom { padding-block-end: 0; }

/* Cabeçalho de seção — numeração `◉ 01` vem do componente .orbit-index */
.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  max-width: 46rem;
  margin-block-end: var(--gap-lg);
}

.section-head--wide { max-width: none; }

.section-head--split {
  max-width: none;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gap);
}

.section-head--split > * { min-width: 0; }

.section-head__body { max-width: 42rem; min-width: 0; }


/* ==========================================================================
   §05 · GRADE E SPLIT
   ----------------------------------------------------------------------------
   `min-width: 0` em TODO filho de grid/flex.
   Sem isso, um filho com conteúdo largo (tabela com min-width, mono longo,
   ticker) recusa encolher e estoura a coluna no mobile — a página passa a
   rolar horizontalmente. Isto não é preciosismo: foi bug real na 1ª rodada.
   ====================================================================== */

.grid {
  display: grid;
  gap: var(--gap);
}

.grid > *,
.split > *,
.cluster > *,
.rail > * { min-width: 0; }

.grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }

@media (min-width: 640px) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Split assimétrico — a composição padrão deste site.
   Nunca 50/50 preguiçoso: 7/5 ou 5/7, com a coluna do mockup mais larga. */
.split {
  display: grid;
  gap: var(--gap-lg);
  align-items: center;
}

@media (min-width: 900px) {
  .split            { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .split--5-7       { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .split--6-6       { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split--4-8       { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .split--8-4       { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
  .split--top       { align-items: start; }
  /* inverte a ordem visual sem mexer na ordem do DOM (leitura/tabulação) */
  .split--swap > :first-child { order: 2; }
  .split--swap > :last-child  { order: 1; }
}

/* Fila fluida de itens — chips, botões, metadados */
.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-4);
}

.cluster--tight { gap: var(--s-2); }
.cluster--loose { gap: var(--s-4) var(--s-6); }
.cluster--between { justify-content: space-between; }

/* Trilho horizontal rolável — alternativa curva à tabela no mobile */
.rail {
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  padding-block-end: var(--s-3);
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.rail > * { scroll-snap-align: start; flex: 0 0 min(84vw, 22rem); }


/* ==========================================================================
   §06 · UTILITÁRIOS DE FLUXO
   ====================================================================== */

.flow > * + * { margin-block-start: var(--s-4); }
.flow--tight > * + * { margin-block-start: var(--s-3); }
.flow--loose > * + * { margin-block-start: var(--s-6); }

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.stack > * { min-width: 0; }
.stack--tight { gap: var(--s-2); }
.stack--loose { gap: var(--s-7); }


/* ==========================================================================
   §07 · TEXTO UTILITÁRIO
   ====================================================================== */

/* Rótulo de seção / olho — DM Mono, caixa alta, tracking largo */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--ff-mono);
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--fg-muted);
}

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

.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--fg-muted);
  max-width: 46rem;
}

.lead strong { color: var(--fg); font-weight: var(--fw-bold); }

.muted { color: var(--fg-muted); }
.faint { color: var(--fg-faint); }

.timestamp {
  font-family: var(--ff-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--fg-faint);
}

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


/* ==========================================================================
   §08 · SKIP LINK
   ====================================================================== */

.skip-link {
  position: fixed;
  top: var(--s-3);
  left: var(--s-3);
  z-index: var(--z-skip);
  transform: translateY(-160%);
  padding: var(--s-3) var(--s-6);
  border-radius: var(--radius-pill);
  background-color: var(--teal);
  color: var(--paper);
  font-weight: var(--fw-bold);
  box-shadow: var(--shadow-3);
  transition: transform var(--dur) var(--ease-soft);
}

.skip-link:focus {
  transform: translateY(0);
  color: var(--paper);
}

/* O `a:hover` genérico aplicaria `--accent-strong` (azul-profundo) sobre o fundo
   azul do próprio link — 1.98 : 1. Medido, reprovado, corrigido: o hover escurece
   o FUNDO e mantém o texto branco (12.91 : 1). É exatamente a armadilha descrita
   no ADENDO do ANTI-AI-SLOP. */
.skip-link:hover,
.skip-link:focus-visible {
  color: var(--paper);
  background-color: var(--teal-deep);
}


/* ==========================================================================
   §09 · TABELA CRUA E TABLE-SCROLL
   ----------------------------------------------------------------------------
   A tabela pode ter cantos retos internamente; quem arredonda é o container.
   Componente completo (.data-table) em components.css §12.
   ====================================================================== */

table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

caption { text-align: left; }

th { text-align: left; font-weight: var(--fw-bold); }

.table-scroll {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  border-radius: var(--radius-lg);
  border: var(--border) solid var(--line);
  background-color: var(--surface);
  -webkit-overflow-scrolling: touch;
}

.table-scroll:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}


/* ==========================================================================
   §10 · MÍDIA
   ====================================================================== */

figure { margin: 0; }

figcaption {
  margin-block-start: var(--s-3);
  font-size: var(--fs-xs);
  color: var(--fg-muted);
}

svg { fill: currentColor; }
svg[data-stroke] { fill: none; stroke: currentColor; }


/* ==========================================================================
   §11 · ESTADOS DE MOVIMENTO
   ----------------------------------------------------------------------------
   API declarativa do motion.js. O CSS abaixo define a APARÊNCIA; o JS só
   acrescenta .is-in. Sem JS (.no-js) tudo nasce visível.
   Reveal deste site: opacity + translateY(20px) + scale(.985), 620ms macio.
   ====================================================================== */

[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 20px, 0) scale(.985);
  transition:
    opacity var(--dur-reveal) var(--ease-soft),
    transform var(--dur-reveal) var(--ease-soft),
    clip-path var(--dur-reveal) var(--ease-soft);
}

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

[data-reveal='fade'] { transform: none; }

[data-reveal='up'] { transform: translate3d(0, 40px, 0); }

/* Máscara curva que abre de baixo para cima — coerente com o motivo */
[data-reveal='mask'] {
  clip-path: inset(0 0 100% 0 round var(--radius-lg));
  transform: none;
}

[data-reveal='mask'].is-in {
  clip-path: inset(0 0 0 0 round var(--radius-lg));
}

/* Abre do centro em arco — para fotografia e mockups */
[data-reveal='clip'] {
  clip-path: inset(6% 10% 6% 10% round var(--radius-lg));
  transform: none;
}

[data-reveal='clip'].is-in {
  clip-path: inset(0 0 0 0 round var(--radius-lg));
}

.no-js [data-reveal] {
  opacity: 1;
  transform: none;
  clip-path: none;
}

[data-parallax] { will-change: transform; }

/* Reserva de folga para camada decorativa que deriva no parallax.
   Regra do ADENDO: se o elemento anda mais que ~40px, o layout reserva o espaço. */
.parallax-room { padding-block: var(--s-8); }

/* Flash do ticker (motion.js aplica .is-flash-up / .is-flash-down) */
@keyframes orbit-flash-up {
  from { background-color: color-mix(in srgb, var(--sig-up) 22%, transparent); }
  to   { background-color: transparent; }
}

@keyframes orbit-flash-down {
  from { background-color: color-mix(in srgb, var(--sig-down) 22%, transparent); }
  to   { background-color: transparent; }
}

.is-flash-up   { animation: orbit-flash-up   700ms var(--ease-out) 1; border-radius: var(--radius-sm); }
.is-flash-down { animation: orbit-flash-down 700ms var(--ease-out) 1; border-radius: var(--radius-sm); }

.is-up   { color: var(--sig-up-text); }
.is-down { color: var(--sig-down-text); }


/* ==========================================================================
   §12 · UTILITÁRIOS CURTOS
   ====================================================================== */

.relative { position: relative; }
.isolate  { isolation: isolate; }
.overflow-clip { overflow: hidden; }

.text-center { text-align: center; }
.text-right  { text-align: right; }

.mt-2 { margin-block-start: var(--s-2); }
.mt-4 { margin-block-start: var(--s-4); }
.mt-6 { margin-block-start: var(--s-6); }
.mt-8 { margin-block-start: var(--s-8); }
.mb-4 { margin-block-end: var(--s-4); }
.mb-6 { margin-block-end: var(--s-6); }

.full-bleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  max-width: 100vw;
}

.hide-sm { display: none; }
@media (min-width: 640px) { .hide-sm { display: revert; } }

.hide-md { display: none; }
@media (min-width: 900px) { .hide-md { display: revert; } }

.only-mobile { display: revert; }
@media (min-width: 900px) { .only-mobile { display: none; } }


/* ==========================================================================
   §13 · PREFERS-REDUCED-MOTION
   ----------------------------------------------------------------------------
   Único bloco do site autorizado a usar !important. Desliga TUDO: parallax,
   reveal, contadores (o JS já mostra o valor final), marquee, cortina de
   página, giro da órbita, desenho do arco.
   ====================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }

  [data-parallax] { transform: none !important; }

  .page-curtain { display: none !important; }

  .orbit__dot,
  .orbit--spin .orbit__dot { animation: none !important; transform: none !important; }

  .logo__mark .mark__sat,
  .page-curtain__orbit .mark__sat { animation: none !important; transform: none !important; }

  .arc-divider__stroke { stroke-dashoffset: 0 !important; }
}