/* ============================================================
   MASTER DAY · console de seis canais
   base.css — tokens, reset, tipografia, matéria (grain + malha)
   DESIGN DNA v1 · Imersão Funnel Labs I.A
   ============================================================ */

:root{
  /* --- cor: escuro com temperatura, acento raro (DNA §3) --- */
  --poco:#040404;          /* poço: insets, tarjas, lastro do logo */
  --base:#0B0907;          /* carvão quente: dominante 68-74% */
  --raise:#141210;         /* superfície elevada: onde o conteúdo se apoia */
  --linha:#241E19;         /* fio de estrutura */
  --ember-1:#100D0A; --ember-2:#1A1009; --ember-3:#2A1608; --ember-4:#412109;
  --orange:#FF6B00;        /* acento: fio, mira, sufixo, estado ativo */
  --orange-dim:#C24F00;    /* hover/pressed e fio secundário */
  --paper:#F7F4EF;         /* branco de fotocópia: título e numeral */
  --paper-dim:#B9B2A8;     /* corpo de texto */
  --label:#8B8378;         /* etiqueta, caption, crédito */
  --steel:#56707E;         /* dissonante: malha e tick, opacidade máx .35 */

  /* --- espaço: escala de instrumento --- */
  --passo-1:4px;  --passo-2:8px;  --passo-3:12px; --passo-4:20px;
  --passo-5:32px; --passo-6:52px; --passo-7:84px; --passo-8:136px;

  /* --- movimento: um easing de assinatura para a peça inteira --- */
  --easing:cubic-bezier(.16,1,.3,1);
  --easing-micro:cubic-bezier(.2,.6,.2,1);
  --easing-saida:cubic-bezier(.4,0,1,1);
  --t-micro:160ms; --t-reveal:420ms; --t-fio:520ms; --t-numero:480ms; --t-varredura:340ms;

  /* --- estrutura --- */
  --rail:148px;
  --rail-esq:clamp(14px,3.2vw,40px);
  --rail-total:calc(var(--rail-esq) + var(--rail) + 44px);
  --container:1240px;
  --margem-viva:clamp(20px,6vw,88px);
  --topo-h:60px;

  /* --- tipografia --- */
  --fonte-display:"Archivo","Archivo Narrow","Helvetica Neue",sans-serif;
  --fonte-texto:"Source Serif 4","Iowan Old Style",Georgia,serif;
  --fonte-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;

  /* --- matéria: sombra sempre marrom, nunca preta --- */
  --sombra-alta:0 30px 70px -34px rgba(65,33,9,.95);
  --sombra-ficha:0 18px 40px -26px rgba(65,33,9,.95);
}

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--base);
  color:var(--paper-dim);
  font-family:var(--fonte-texto);
  font-size:1.0625rem;
  line-height:1.62;
  font-optical-sizing:auto;
  /* clip (e não hidden) impede a barra horizontal SEM transformar o body em
     contêiner de rolagem — é o que mantém position:sticky funcionando */
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }
ul{ margin:0; padding:0; list-style:none; }
p{ margin:0 0 var(--passo-4); text-wrap:pretty; }
p:last-child{ margin-bottom:0; }
strong{ color:var(--paper); font-weight:600; }

::selection{ background:var(--orange); color:var(--poco); }

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

/* ---------- tipografia de display ---------- */
h1,h2,h3{
  font-family:var(--fonte-display);
  color:var(--paper);
  text-wrap:balance;
  margin:0;
}
h1{
  font-variation-settings:"wdth" 68,"wght" 800;
  font-size:clamp(2rem,4.2vw,4.05rem);
  line-height:1.06;
  letter-spacing:-.035em;
}
h2{
  font-variation-settings:"wdth" 76,"wght" 700;
  font-size:clamp(1.35rem,2.3vw,1.95rem);
  line-height:1.14;
  letter-spacing:-.02em;
}
h3{
  font-variation-settings:"wdth" 80,"wght" 600;
  font-size:clamp(1.05rem,1.5vw,1.3rem);
  line-height:1.2;
  letter-spacing:-.01em;
}

/* ---------- leitura de instrumento ---------- */
.label{
  font-family:var(--fonte-mono);
  font-size:.75rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--label);
  margin:0 0 var(--passo-4);
  line-height:1.5;
  text-wrap:balance;
}
.label--fogo{ color:var(--orange); }
.dado{
  font-family:var(--fonte-mono);
  font-size:.875rem;
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
  color:var(--paper-dim);
}
.olho{
  font-family:var(--fonte-texto);
  font-style:italic;
  font-size:clamp(1.15rem,1.7vw,1.375rem);
  line-height:1.5;
  color:var(--paper);
  max-width:34ch;
  text-wrap:balance;
}
.corpo-texto{ max-width:68ch; }

/* ---------- matéria: grain fixo sobre tudo ---------- */
body::after{
  content:""; position:fixed; inset:0; z-index:60; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- matéria: malha técnica morrendo nas beiradas ---------- */
.malha{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    repeating-linear-gradient(90deg, rgba(86,112,126,.07) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(0deg,  rgba(86,112,126,.045) 0 1px, transparent 1px 96px);
  -webkit-mask-image:radial-gradient(120% 80% at 18% 0%, #000 0%, transparent 72%);
          mask-image:radial-gradient(120% 80% at 18% 0%, #000 0%, transparent 72%);
  transform:translate3d(0,0,0);
}

/* ---------- gesto 1 · colchete de mira ---------- */
.mira{ position:relative; }
.mira::before,.mira::after{
  content:""; position:absolute; width:20px; height:20px;
  border:2px solid var(--orange); pointer-events:none;
}
.mira::before{ top:0; left:0; border-right:0; border-bottom:0; }
.mira::after{ bottom:0; right:0; border-left:0; border-top:0; }

/* ---------- faixas ---------- */
.faixa{
  position:relative; z-index:1;
  padding-block:var(--passo-7);
  padding-left:var(--margem-viva);
  padding-right:var(--margem-viva);
}
.faixa__interno{ max-width:var(--container); }
.faixa--acesa{
  background:radial-gradient(90% 120% at 12% -10%, rgba(255,107,0,.085) 0%, transparent 58%), var(--base);
  box-shadow:var(--sombra-alta), inset 0 1px 0 rgba(255,107,0,.10);
}
.faixa--poco{ background:var(--poco); }
.faixa--raise{ background:var(--raise); }
.faixa--fio-topo{ border-top:1px solid var(--linha); }

/* ---------- rodapé ---------- */
.rodape{
  position:relative; z-index:1;
  padding:var(--passo-6) var(--margem-viva) calc(var(--passo-7) + 40px);
  border-top:1px solid var(--linha);
  background:var(--poco);
}
.rodape__fio{
  width:64px; height:2px; background:var(--orange); margin-bottom:var(--passo-4);
}
.rodape__autoria{
  font-family:var(--fonte-mono); font-size:.8125rem; line-height:1.7;
  color:var(--label); max-width:62ch; margin:0 0 var(--passo-2);
  letter-spacing:.01em;
}
.rodape__autoria strong{ color:var(--paper-dim); font-weight:500; }
.rodape__autorizacao{
  font-family:var(--fonte-mono); font-size:.6875rem; line-height:1.75;
  letter-spacing:.07em; text-transform:uppercase; color:#6E6760;
  max-width:74ch; margin:0;
}

/* ---------- reveals ---------- */
@keyframes tracar{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }
@keyframes revelar{
  from{ clip-path:inset(100% 0 0 0); transform:translateY(6px) }
  to  { clip-path:inset(0 0 0 0);   transform:none }
}
@keyframes subir{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }

.js .revela{ opacity:0; }
.revela.is-visivel{ animation:subir var(--t-reveal) var(--easing) both; }
.revela.is-visivel[data-atraso="1"]{ animation-delay:60ms; }
.revela.is-visivel[data-atraso="2"]{ animation-delay:120ms; }
.revela.is-visivel[data-atraso="3"]{ animation-delay:180ms; }
.revela.is-visivel[data-atraso="4"]{ animation-delay:240ms; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:200ms !important; animation-delay:0ms !important;
    transition-duration:200ms !important;
  }
  .revela.is-visivel{ animation:none; opacity:1; }
}