/* =========================================================
   MID Software: base do site (tokens, régua, vidro líquido)
   Cada seção tem o próprio CSS em src/secoes/<nome>.css
   ========================================================= */

:root {
  /* Cores */
  /* Paleta do landonorris.com: lima + oliva + creme. Sem degradês. */
  --acento: #d2ff00;
  --oliva: #282c20;
  --oliva-2: #3b3c38;
  --preto: #111112;
  --preto-2: #18181a;
  --grafite: #1f1f21;
  --creme: #f4f4ed;
  --creme-2: #ebeee0;
  --branco: #ffffff;
  /* nomes antigos apontam para a paleta nova (as seções ainda usam) */
  --laranja: var(--acento);
  --laranja-2: var(--acento);
  --laranja-escuro: #b2c73a;
  --ambar: var(--acento);
  --lilas: transparent;
  --texto-escuro: #111112;
  --texto-escuro-2: rgba(17, 17, 18, 0.6);

  /* TEMA ATUAL (muda sozinho na rolagem: body[data-tema] = creme | oliva | lima)
     Seções NÃO pintam o próprio fundo: declaram data-tema e o body troca a cor com transição. */
  --fundo: var(--creme);
  --tinta: var(--oliva);
  --tinta-2: rgba(40, 44, 32, 0.64);
  --tinta-3: rgba(40, 44, 32, 0.4);
  --linha: rgba(40, 44, 32, 0.14);
  --superficie: rgba(40, 44, 32, 0.05);
  --texto: var(--tinta);
  --texto-2: var(--tinta-2);
  --texto-3: var(--tinta-3);

  /* Régua única presa à tela: todo tamanho grande é múltiplo de --u */
  --u: min(100vw / 108, 100vh / 62);
  --gutter: clamp(1rem, 4vw, 3.5rem);
  --max: 90rem;

  /* Tipografia */
  --fonte: 'Inter Tight', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fonte-serif: 'Instrument Serif', Georgia, serif;
  --fonte-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Raios e curvas */
  --raio-s: 0.875rem;
  --raio-m: 1.375rem;
  --raio-l: 2rem;
  --raio-xl: 2.75rem;
  --curva: cubic-bezier(0.22, 1, 0.36, 1);
  --curva-mola: cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (max-width: 900px) {
  :root { --u: min(100vw / 60, 100vh / 70); }
}
@media (max-width: 520px) {
  :root { --u: calc(100vw / 40); }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; font-size: 16px; }
/* Computador: o site inteiro é proporcional à largura da janela (como o landonorris.com).
   Todas as medidas estão em rem; numa tela de 1440px 1rem = 16px, e com Ctrl + roda do mouse
   (ou monitor maior/menor) tudo cresce e encolhe junto, sem sobrar espaço dos lados. */
@media (min-width: 901px) {
  html { font-size: max(12px, calc(100vw * 16 / 1440)); }
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body[data-tema='oliva'] {
  --fundo: var(--oliva);
  --tinta: var(--creme);
  --tinta-2: rgba(244, 244, 237, 0.66);
  --tinta-3: rgba(244, 244, 237, 0.4);
  --linha: rgba(244, 244, 237, 0.14);
  --superficie: rgba(244, 244, 237, 0.06);
}
body[data-tema='preto'] {
  --fundo: var(--preto);
  --tinta: var(--creme);
  --tinta-2: rgba(244, 244, 237, 0.66);
  --tinta-3: rgba(244, 244, 237, 0.4);
  --linha: rgba(244, 244, 237, 0.12);
  --superficie: rgba(244, 244, 237, 0.05);
}
body[data-tema='lima'] {
  --fundo: var(--acento);
  --tinta: var(--preto);
  --tinta-2: rgba(17, 17, 18, 0.66);
  --tinta-3: rgba(17, 17, 18, 0.42);
  --linha: rgba(17, 17, 18, 0.16);
  --superficie: rgba(17, 17, 18, 0.06);
}
body, body[data-tema] {
  /* apelidos recalculados no body, senão ficam presos ao tema creme do :root */
  --texto: var(--tinta);
  --texto-2: var(--tinta-2);
  --texto-3: var(--tinta-3);
}
body {
  background: var(--fundo);
  color: var(--tinta);
  transition: background-color 0.9s var(--curva), color 0.9s var(--curva);
  font-family: var(--fonte);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; background: none; border: 0; outline: 0; }
button { cursor: pointer; }
::selection { background: var(--laranja); color: var(--preto); }

/* ---------- Utilitários de layout ---------- */
.container { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.secao { position: relative; padding-block: clamp(4rem, calc(var(--u) * 8), 8rem); }
/* legado: o fundo agora vem do body[data-tema] */
.tema-creme { background: transparent; color: inherit; }

/* ---------- Tipografia ---------- */
.titulo-xl {
  font-size: clamp(2.25rem, calc(var(--u) * 6), 6rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-weight: 600;
}
.titulo-l {
  font-size: clamp(1.875rem, calc(var(--u) * 4.2), 4.25rem);
  line-height: 1;
  letter-spacing: -0.035em;
  font-weight: 600;
}
.titulo-m {
  font-size: clamp(1.375rem, calc(var(--u) * 2.4), 2.375rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 600;
}
.serif { font-family: var(--fonte-serif); font-weight: 400; font-style: italic; letter-spacing: -0.02em; }
/* destaque = marca-texto lima (lima como texto some no creme) */
.destaque { background: var(--acento); color: var(--preto); padding: 0 0.12em; border-radius: 0.12em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.texto-l { font-size: clamp(1rem, calc(var(--u) * 1.2), 1.1875rem); line-height: 1.45; color: var(--tinta-2); }
.rotulo {
  display: inline-flex; align-items: center; gap: 0.625rem;
  font-family: var(--fonte-mono);
  font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--tinta-2);
}
.rotulo::before {
  content: ''; width: 0.5rem; height: 0.5rem; border-radius: 50%;
  background: var(--acento);
  box-shadow: 0 0 0 1px var(--linha);
}

/* =========================================================
   VIDRO LÍQUIDO
   .vidro           painel de vidro escuro (padrão)
   .vidro-claro     vidro claro, para cima de fundo creme
   No Chrome/Edge a classe html.liquido liga a distorção de lente
   (filtro SVG #vidro-lente no index.html). Nos outros, fica blur + brilho.
   ========================================================= */
.vidro {
  --vidro-fundo: var(--superficie);
  --vidro-borda: var(--linha);
  position: relative;
  isolation: isolate;
  background: var(--vidro-fundo);
  -webkit-backdrop-filter: blur(1.125rem) saturate(180%);
  backdrop-filter: blur(1.125rem) saturate(180%);
  border-radius: var(--raio-l);
  box-shadow: inset 0 0 0 1px var(--vidro-borda);
}
/* sem degradê: vidro liso, só blur + borda fina */
.vidro::before, .vidro::after { content: none; }
.vidro-claro {
  --vidro-fundo: rgba(255, 255, 255, 0.55);
  --vidro-borda: rgba(17, 17, 18, 0.1);
  color: var(--texto-escuro);
}

/* ---------- Botões ---------- */
.botao {
  --b-fundo: var(--laranja);
  --b-cor: #111112;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.75rem;
  height: 3.125rem; padding: 0 1.5rem;
  border-radius: 62.4375rem;
  background: var(--b-fundo);
  color: var(--b-cor);
  font-weight: 600; font-size: 0.9375rem; letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  transition: transform 0.5s var(--curva), box-shadow 0.5s var(--curva);
  box-shadow: none;
}
.botao:hover { transform: translateY(-2px); }
.botao .seta { width: 1.125rem; height: 1.125rem; transition: transform 0.5s var(--curva); }
.botao:hover .seta { transform: translateX(0.25rem); }
.botao-vidro {
  --b-fundo: rgba(255, 255, 255, 0.08);
  --b-cor: var(--texto);
  -webkit-backdrop-filter: blur(0.875rem) saturate(170%);
  backdrop-filter: blur(0.875rem) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), inset 0 0 0 1px rgba(255,255,255,0.14);
}
.botao-vidro:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), inset 0 0 0 1px rgba(255,255,255,0.28); }
.tema-creme .botao-vidro { --b-fundo: rgba(18,18,20,0.06); --b-cor: var(--texto-escuro); box-shadow: inset 0 0 0 1px rgba(18,18,20,0.16); }

/* ---------- Marca MID (máscara, recolore com background) ---------- */
.marca-mid {
  display: inline-block;
  aspect-ratio: 525 / 360;
  background: var(--laranja);
  -webkit-mask: url('/img/mid-marca.svg') center / contain no-repeat;
  mask: url('/img/mid-marca.svg') center / contain no-repeat;
}

/* ---------- Revelação padrão (o main.js anima [data-revelar]) ---------- */
html.js [data-revelar] { opacity: 0; }

/* ---------- Revelação em blocos (main.js: [data-bloco]) ---------- */
/* a linha (e o bloco lima) tem só a largura da frase */
.bloco-linha { position: relative; width: fit-content; max-width: 100%; }
.bloco-tampa {
  position: absolute; left: -0.06em; right: -0.06em; top: 0.06em; bottom: 0.02em;
  background: var(--acento);
  pointer-events: none;
}
html.js:not(.pronto) [data-bloco] { visibility: hidden; }

/* ---------- Linhas vivas (curvas de nível animadas, src/linhas-vivas.js) ---------- */
/* UMA camada fixa atrás do site inteiro (canvas no index.html). O desenho anda com a rolagem,
   então as linhas atravessam as seções sem corte e sem degradê; a cor segue o tema do body. */
.linhas-vivas {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh; height: 100lvh;
  pointer-events: none;
  z-index: -1;
}

/* ---------- Grão de filme por cima de tudo (bem sutil) ---------- */
.grao {
  position: fixed; inset: -50%;
  pointer-events: none; z-index: 999;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  html.js [data-revelar] { opacity: 1; }
}