/* ═══════════════════════════════════════════════════════════
   CASE — a casca das paginas de /projetos/<slug>.

   Depende de tokens.css e base.css, e carrega DEPOIS dos dois.
   Nenhum valor literal de cor, tamanho, espaco ou raio aqui:
   tudo por var(), como no base.css.

   O sistema recriado que a pagina exibe tem arquivo proprio
   (nucleo.css) e tokens proprios. Este arquivo cuida so da
   pagina que conta a historia.
   ═══════════════════════════════════════════════════════════ */

/* ── Abertura ──────────────────────────────────────────────── */

/* A abertura do case usa O MESMO desenho do cartao daquele case na home. E a
   continuidade entre clicar e chegar: quem clicou no cartao do Vizzo reconhece
   a pagina antes de ler o titulo.

   `isolation: isolate` de novo, pela mesma razao de sempre neste projeto: sem
   ele o `z-index: -1` da imagem a manda para tras do fundo da pagina e ela
   SOME. Mesma armadilha do painel de vidro do hero e do cartao de projeto. */
.case-hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(28px, 5vw, 56px) var(--page-rhythm);
}

/* Quatro diferencas em relacao ao cartao da home, e cada uma tem motivo:

   1. `left: calc(-1 * var(--case-recuo))`. De 1200px em diante o `main` ganha
      `padding-left: 250px` para abrir a coluna da trilha vertical. Um fundo que
      respeita esse recuo termina numa BORDA RETA VERTICAL no meio da tela, que
      foi exatamente o que a primeira tentativa produziu. A variavel e declarada
      no mesmo lugar que cria o recuo, entao as duas nunca saem de sincronia.
   2. `top: calc(-1 * var(--header-total))`. O desenho sobe ATRAS do cabecalho,
      que aqui e so pilulas de vidro flutuando. Comecar em `top: 0` daria uma
      borda reta horizontal logo abaixo do menu, o mesmo defeito deitado.
   3. `height` fixa em vez de `100%`. O desenho tem de morrer ANTES da ficha
      tecnica. Cobrindo a abertura inteira ele passa por baixo de "Papel", "O
      que eu fiz" e da nota de rodape, e o texto secundario cai sobre o feixe.
   4. `opacity`. A caixa aqui e muito mais larga que alta, entao o `cover` corta
      justamente a lavagem de canto e o veu de rodape do SVG, que sao o que
      garante a leitura no cartao. Sem essas duas camadas, quem protege o texto
      e a opacidade. */
.case-fundo {
  position: absolute;
  z-index: -1;
  top: calc(-1 * var(--header-total, 0px));
  left: calc(-1 * var(--case-recuo, 0px));
  /* A largura e DECLARADA, e as duas tentativas anteriores erraram por motivos
     diferentes, os dois valendo a nota:

     - `left` + `right: 0` nao define a caixa de um `<img>`. Elemento substituido
       com `width: auto` usa a proporcao INTRINSECA, entao a largura virou
       680 x 1,25 = 850px e o `right` foi descartado por excesso de restricao.
     - Sem declaracao nenhuma de largura, o atributo `width="1000"` do markup
       vence como dica de apresentacao, e a caixa fica com 1000px.

     Nos dois casos o desenho termina numa borda reta vertical no meio da tela.
     Aqui a largura e a da secao mais o recuo da trilha, que e a largura da
     janela. O atributo continua no HTML porque e ele que reserva a proporcao
     antes de a imagem chegar. */
  width: calc(100% + var(--case-recuo, 0px));
  /* `max-width: none` e obrigatorio aqui, e foi o terceiro tropeco da mesma
     largura. O reset do base.css tem `img, svg, video { max-width: 100% }`, e
     100% do bloco que contem e a secao SEM o recuo: a largura calculada acima
     era descartada e voltava para 1190px, dando de novo a borda reta vertical.
     Este e o unico `<img>` do site que precisa passar da propria coluna. */
  max-width: none;
  height: clamp(420px, 52vw, 680px);
  object-fit: cover;
  object-position: right top;
  opacity: .5;
  /* DUAS mascaras que se cruzam. A de cima faz o desenho morrer antes da ficha
     tecnica. A da esquerda o tira de baixo do TEXTO: titulo e lead vivem na
     coluna da esquerda, e o desenho passando por baixo das letras suja a
     leitura mesmo quando o contraste passa na medicao. O desenho fica onde a
     pagina esta vazia, que e a direita. */
  -webkit-mask-image: linear-gradient(to bottom, #000 38%, transparent 92%),
                      linear-gradient(to right, transparent 6%, #000 52%);
  mask-image: linear-gradient(to bottom, #000 38%, transparent 92%),
              linear-gradient(to right, transparent 6%, #000 52%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  pointer-events: none;
}

/* Onde nao ha `mask-image` o desenho terminaria num corte reto atravessando a
   pagina, que e pior do que nao ter desenho. Ali ele simplesmente nao entra. */
@supports not ((mask-image: linear-gradient(#000, transparent)) or (-webkit-mask-image: linear-gradient(#000, transparent))) {
  .case-fundo { display: none; }
}

.case-migalha {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  color: var(--c-ink-2);
}
.case-migalha a { color: var(--c-ink-2); }
.case-migalha a:hover { color: var(--c-ink); }
.case-migalha span[aria-hidden] { color: var(--c-rule-strong); }

.case-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--c-ink-2);
  margin-bottom: var(--space-4);
}
.case-eyebrow b { color: var(--c-accent-ink); font-weight: 500; }

.case-title {
  font-size: var(--size-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--track-display);
  font-weight: 600;
  max-width: 16ch;
}

.case-lead {
  margin-top: var(--space-5);
  max-width: 58ch;
}

/* ── Ficha tecnica ─────────────────────────────────────────── */

.case-ficha {
  margin: var(--space-7) 0 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--c-rule);
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
}

.case-ficha dt {
  color: var(--c-ink-2);
  margin-bottom: var(--space-2);
}

.case-ficha dd {
  margin: 0;
  font-size: var(--size-sm);
  line-height: 1.5;
}

/* ── Aviso de confidencialidade ────────────────────────────
   Fica na abertura, e nao no rodape: quem le precisa saber o
   que esta vendo antes de ver. */
.case-aviso {
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--c-rule);
  border-left: 3px solid var(--c-accent);
  border-radius: var(--radius-input);
  background: var(--c-surface-2);
  font-size: var(--size-sm);
  line-height: var(--leading-body);
  color: var(--c-ink-2);
  max-width: 74ch;
}
.case-aviso b { color: var(--c-ink); font-weight: 500; }


/* ── Nota das telas: uma LINHA, e nao um cartao ─────────────

   A abertura do case do Vizzo tinha aqui um .case-aviso — bloco
   com filete de acento e fundo proprio — dizendo de quem era o
   produto. O cartao dava a essa informacao o peso de argumento,
   quando ela e so procedencia. O que o leitor precisa saber antes
   do primeiro print e outra coisa, e cabe numa linha: os dados sao
   ficticios e o condominio de origem nao e nomeado.

   Regra que fica: o aviso continua vindo ANTES do primeiro
   artefato. O que mudou foi o peso dele, nao o lugar. */
.case-nota-telas {
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid var(--c-rule);
  max-width: 74ch;
  /* Sem a classe .mono: ela poe versalete, e tres linhas de prosa em caixa
     alta pedem esforco para ler exatamente onde o leitor ainda nao investiu
     nenhum. O tom de metadado vem do tamanho e da cor, nao da caixa. */
  font-size: var(--size-sm);
  line-height: 1.6;
  /* --c-ink-3 e limitrofe e REPROVOU aqui: medido em 4,09:1 contra o pior
     pixel de fundo da linha (rgb(238,238,238) — a textura de grain escurece
     o branco). --c-ink-2 no mesmo fundo da 6,14:1. */
  color: var(--c-ink-2);
}


/* ── Catalogo de modulos ────────────────────────────────────

   Mesma grade dos .case-passos: cartao de 230px que se
   reacomoda sozinho. Nao vira lista de precos — nao ha valor, nem
   selo, nem botao. E a forma do produto, contada como as outras
   decisoes da pagina. */
.case-modulos {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
  /* 300px, e nao 240: com 240 cabem quatro colunas na largura do texto e os
     cinco modulos saem como 4 + 1, com um cartao orfao na segunda linha.
     Com 300 sao tres colunas e a quebra vira 3 + 2, que le como escolha. */
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

.case-modulo {
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-card);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.case-modulo p { margin: 0; font-size: var(--size-sm); line-height: 1.55; color: var(--c-ink-2); }

.case-modulo-nome {
  font-size: var(--size-mono) !important;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--c-accent-ink) !important;
}

/* ── Corpo ─────────────────────────────────────────────────── */

.case-prose { max-width: 68ch; }
.case-prose p { margin: 0; }
.case-prose p + p { margin-top: var(--space-4); }
.case-prose b { font-weight: 600; }

.case-lista {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
  max-width: 68ch;
}

.case-lista li {
  position: relative;
  padding-left: var(--space-5);
  line-height: var(--leading-body);
}
.case-lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .68em;
  width: 10px;
  height: 2px;
  background: var(--c-accent-ink);
}

/* ── Destaque: a frase que o case quer que fique ───────────── */

.case-destaque {
  margin: var(--space-7) 0 0;
  padding-left: clamp(var(--space-4), 3vw, var(--space-6));
  border-left: 2px solid var(--c-accent);
  max-width: 60ch;
}

.case-destaque p {
  margin: 0;
  font-size: var(--size-3);
  line-height: var(--leading-heading);
  letter-spacing: var(--track-3);
  font-weight: 400;
}
.case-destaque .serif { font-family: var(--type-serif); font-style: italic; }

.case-destaque-nota {
  margin-top: var(--space-4) !important;
  font-size: var(--size-body) !important;
  letter-spacing: var(--track-body) !important;
  line-height: var(--leading-body) !important;
  color: var(--c-ink-2);
}

/* ── Passos: o metodo, uma conversa por etapa ──────────────── */

.case-passos {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  counter-reset: passo;
}

.case-passo {
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-card);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.case-passo-num {
  font-family: var(--type-mono);
  font-size: var(--size-mono);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--c-accent-ink);
}

.case-passo h3 {
  font-size: var(--size-body);
  font-weight: 600;
  letter-spacing: var(--track-body);
}

.case-passo p {
  margin: 0;
  font-size: var(--size-sm);
  line-height: 1.55;
  color: var(--c-ink-2);
}

/* ── Decisao ───────────────────────────────────────────────── */

.case-decisoes {
  display: grid;
  gap: var(--page-rhythm);
  margin-top: var(--space-7);
}

/* Item de grade com tabela larga dentro. Sem `min-width: 0` o
   `min-width` da tabela estica a coluna e a pagina inteira passa a
   rolar na horizontal em tela estreita: o `overflow-x` do wrapper
   so age depois que o item de grade para de crescer. */
.case-dec { min-width: 0; }

.case-dec-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.case-dec-num {
  font-family: var(--type-mono);
  font-size: var(--size-mono);
  color: var(--c-accent-ink);
  padding-top: 2px;
}

.case-dec-title {
  font-size: var(--size-3);
  font-weight: 500;
  letter-spacing: var(--track-3);
  max-width: 24ch;
}

/* Etiqueta que amarra a decisao a uma descoberta. Sem ela a
   secao vira lista de preferencias. */
.case-ancora {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-pill);
  background: var(--c-accent-soft);
  font-family: var(--type-mono);
  font-size: var(--size-mono);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--c-ink-2);
}

/* ── Mapa: secao do sistema x conversa que a originou ──────── */

.case-mapa-wrap {
  margin-top: var(--space-6);
  overflow-x: auto;
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-card);
}

.case-mapa {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: var(--size-sm);
}

.case-mapa th,
.case-mapa td {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--c-rule-soft);
  line-height: 1.5;
  vertical-align: top;
}

.case-mapa thead th {
  font-family: var(--type-mono);
  font-size: var(--size-mono);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--c-ink-2);
  background: var(--c-surface-2);
  font-weight: 400;
}

.case-mapa tbody tr:last-child td { border-bottom: 0; }
.case-mapa td:first-child { font-weight: 500; width: 38%; }
.case-mapa td:last-child { color: var(--c-ink-2); }

/* ── Artefato: a moldura do que foi recriado ───────────────── */

.case-artefato {
  margin: var(--space-7) 0 0;
}

/* Ate o case do Vizzo ganhar a secao de modulos, TODA figura era a ultima
   coisa de uma secao, entao a margem so de cima bastava. Com texto depois
   dela, a legenda encostava no paragrafo seguinte e os dois liam como um
   bloco so. O respiro fica no seletor de irmao para nao afrouxar a figura
   que continua fechando secao. */
/* O :not e por causa do primeiro case, que usa .case-prose.case-artefato
   como bloco unico: la a regra nao deve valer. */
.case-artefato:not(.case-prose) + .case-prose,
.case-artefato:not(.case-prose) + .case-modulos,
.case-artefato:not(.case-prose) + .case-destaque { margin-top: var(--space-7); }

.case-artefato-nome {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-4);
  color: var(--c-ink-2);
}
.case-artefato-nome b { color: var(--c-ink); font-weight: 500; }

.case-artefato figcaption {
  margin-top: var(--space-3);
  font-size: var(--size-sm);
  line-height: 1.5;
  color: var(--c-ink-2);
  max-width: 68ch;
}

/* ── Tela: captura do produto real, sem recriacao ───────────

   O case do design system mostra um sistema RECRIADO, porque o
   projeto original esta sob acordo. O do Vizzo mostra o produto
   rodando: ele e autoral, e nao ha o que esconder. Por isso a
   moldura e sobria — quanto menos enfeite, mais a captura parece
   o que e, um print, e nao uma peca de marketing.

   `loading="lazy"` e `width`/`height` no HTML: sem as duas medidas
   a pagina pula quando a imagem chega, e a revelacao do motion.css
   passa a animar um bloco que muda de altura no meio. */

.case-tela {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-card);
  background: var(--c-surface-2);
}

/* Captura de celular: ela tem 640px de largura por quase 1400 de
   altura, entao esticar ate a coluna inteira deixaria uma tela de
   telefone do tamanho de um monitor. O teto e o que mantem a
   proporcao critivel. */
.case-tela-movel {
  max-width: 320px;
  border-radius: var(--radius-input);
}

/* Duas telas lado a lado quando elas provam a MESMA afirmacao vista
   de dois lugares (o morador e o balcao).

   As colunas sao DESIGUAIS de proposito: `repeat(auto-fit, 1fr)`
   daria metade da largura para cada uma, e a captura de desktop —
   que tem barra lateral, tabela e cabecalho — ficaria ilegivel no
   mesmo tamanho de um celular. A coluna estreita e do tamanho da
   tela de telefone; o resto e da tela larga. */
.case-telas {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}

.case-telas figcaption {
  margin-top: var(--space-3);
  font-size: var(--size-sm);
  line-height: 1.5;
  color: var(--c-ink-2);
}

.case-tela-par {
  margin: 0;
  min-width: 0;
}

/* Duas capturas da MESMA natureza (duas barras laterais, duas telas
   de celular) pedem colunas IGUAIS — o oposto do .case-telas, que
   e desigual porque la uma das duas e um desktop. Aqui a comparacao
   so funciona se as duas tiverem a mesma largura: o que se compara e
   o conteudo, e largura diferente ja e uma resposta dada de graca. */
.case-telas-par {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  align-items: start;
}

.case-telas-par figure { margin: 0; min-width: 0; }

.case-telas-par figcaption {
  margin-top: var(--space-3);
  font-size: var(--size-sm);
  line-height: 1.5;
  color: var(--c-ink-2);
}

/* As barras laterais sao estreitas e altas (480x1459). Sem teto elas
   viram duas colunas de 600px de altura cada em tela grande, e a
   comparacao deixa de caber num olhar so. */
.case-telas-par .case-tela { max-width: 300px; }

@media (max-width: 860px) {
  .case-telas { grid-template-columns: minmax(0, 1fr); }
}

/* ── Resultado ─────────────────────────────────────────────── */

.case-resultado {
  border-top: 1px solid var(--c-rule);
  border-bottom: 1px solid var(--c-rule);
  padding-block: var(--page-rhythm);
}

.case-resultado-frase {
  font-size: var(--size-1);
  line-height: var(--leading-heading);
  letter-spacing: var(--track-1);
  font-weight: 500;
  max-width: 20ch;
}
.case-resultado-frase .serif { font-family: var(--type-serif); font-style: italic; }

.case-resultado-nota {
  margin-top: var(--space-5);
  max-width: 56ch;
  color: var(--c-ink-2);
}

/* ── Fecho ─────────────────────────────────────────────────── */

.case-fim {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  align-items: start;
}

.case-fim-bloco h2 {
  font-size: var(--size-3);
  font-weight: 500;
  letter-spacing: var(--track-3);
  margin-bottom: var(--space-4);
  max-width: 22ch;
}

.case-fim-bloco p {
  margin: 0;
  max-width: 52ch;
  color: var(--c-ink-2);
}

.case-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

@media (max-width: 720px) {
  .case-mapa-wrap { border-radius: var(--radius-input); }
  .case-dec-head { flex-direction: column; gap: var(--space-1); }
}

/* ── Indice das secoes ──────────────────────────────────────

   Duas formas, mesma marcacao:

   - ate 1199px, barra horizontal grudada abaixo do cabecalho;
   - de 1200px em diante, trilha VERTICAL fixa na margem esquerda,
     com a linha se preenchendo conforme a pagina rola.

   Os itens sao ancoras de verdade: o indice LEVA ate a secao, e
   nunca esconde nenhuma. Case e narrativa continua, entao aba que
   troca conteudo estaria errada aqui, alem de tirar o texto do
   alcance da busca e do Ctrl+F.

   `--ativo` e o estado do item corrente, e vale 0 ou 1. Ele e a
   UNICA coisa que a animacao escreve: cor, fundo e ponto saem
   dele por `color-mix`, e por isso as duas formas podem mostrar o
   mesmo estado de jeitos diferentes sem brigar com a animacao.
   (Declaracao normal nao vence animacao; so `!important` vence, e
   uma folha cheia de `!important` seria o preco de animar cor
   direto.) */

@property --ativo {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

/* `--passou` e o irmao travado do `--ativo`: ele vira 1 quando a
   secao passa pelo alto da tela e NAO volta atras, porque o quadro
   de 100% da animacao tambem e 1 e `both` mantem a ponta final
   depois que a faixa acaba. E isso que deixa a trilha marcada como
   percorrida em vez de acender um ponto por vez. */
@property --passou {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

.case-indice-faixa {
  position: sticky;
  top: calc(var(--header-total) - var(--space-2));
  z-index: 40;
  padding-block: var(--space-2);
}

.case-indice {
  display: flex;
  gap: var(--space-1);
  width: fit-content;
  max-width: 100%;
  padding: var(--space-1);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--c-surface) 62%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  box-shadow: var(--shadow-float);
  /* Em tela estreita a barra rola na horizontal em vez de quebrar
     em duas linhas: duas linhas de pilula empurram o conteudo para
     baixo em toda a pagina, e a barra e permanente. */
  overflow-x: auto;
  scrollbar-width: none;
}
.case-indice::-webkit-scrollbar { display: none; }

.case-indice a {
  flex: 0 0 auto;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  text-decoration: none;
  white-space: nowrap;
  color: color-mix(in srgb, var(--c-surface) calc(var(--ativo) * 100%), var(--c-ink-2));
  /* Tres estados numa declaracao: corrente e pilula de tinta,
     percorrido e veu de lime, e o que ainda vem e transparente. */
  background: color-mix(in srgb, var(--c-ink) calc(var(--ativo) * 100%),
    color-mix(in srgb, var(--c-accent) calc(var(--passou) * 26%), transparent));
}
.case-indice a:hover { color: var(--c-ink); background: var(--c-surface-2); }
.case-indice a:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 2px; }

/* O numero da secao so aparece na trilha vertical: na barra
   horizontal ele empurraria as dez pilulas para fora da tela sem
   dizer nada que o rotulo ja nao diga. */
.case-indice a b { display: none; }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .case-indice { background: color-mix(in srgb, var(--c-surface) 94%, transparent); }
}

/* O salto por ancora precisa parar ABAIXO das barras grudadas,
   senao o titulo da secao chega escondido atras delas. */
.sec[id],
.case-resultado[id] { scroll-margin-top: calc(var(--header-total) + 60px); }


/* ── Trilha vertical, de 1200px em diante ────────────────────

   A coluna nao existe no layout: ela e aberta por um recuo em
   `main`, e a trilha e `fixed` dentro dele. Fazer a mesma coisa
   com grade obrigaria a reagrupar todas as secoes num container
   novo, e cada secao tem o proprio `.wrap`.

   O trilho e a linha de progresso sao pseudo-elementos do <nav>,
   entao nao ha marcacao decorativa no HTML. */

@media (min-width: 1200px) {

  /* O recuo vira variavel porque o fundo da abertura (`.case-fundo`) precisa
     desfaze-lo para sangrar ate a borda da tela. Declarar o numero duas vezes
     e garantir que um dia eles divirjam. */
  main {
    --case-recuo: 250px;
    padding-left: var(--case-recuo);
  }

  .case-indice-faixa {
    position: fixed;
    top: calc(var(--header-total) + var(--space-5));
    left: clamp(24px, 3.4vw, 60px);
    width: 190px;
    padding: 0;
  }
  /* O `.wrap` interno vira invisivel aqui: quem posiciona e a
     faixa. */
  .case-indice-faixa > .wrap { padding-inline: 0; }

  .case-indice {
    position: relative;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    padding: 0 0 0 var(--space-5);
    border-radius: 0;
    background: none;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    overflow: visible;
  }

  /* Trilho: a linha apagada que atravessa a coluna de ponta a
     ponta. Os 9px do inset alinham com o centro do primeiro e do
     ultimo ponto. */
  .case-indice::before,
  .case-indice::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 10px;
    bottom: 10px;
    /* 2px e nao 1px: o lime tem 1,2:1 contra o papel, entao a linha
       precisa de corpo para existir. Fina, ela some. */
    width: 2px;
  }
  .case-indice::before { background: var(--c-rule); }

  /* Progresso: a mesma linha, em lime, crescendo de cima para baixo
     conforme a pagina rola. `scale` e nao `height` porque escala
     roda no compositor e altura refaz layout a cada quadro. */
  .case-indice::after {
    background: var(--c-accent);
    transform-origin: top;
    scale: 1 0;
  }

  .case-indice a {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    border-radius: 0;
    white-space: normal;
    background: none;
    color: color-mix(in srgb, var(--c-ink) calc(var(--ativo) * 100%), var(--c-ink-2));
  }
  .case-indice a:hover { background: none; color: var(--c-ink); }

  .case-indice a b {
    display: block;
    flex: 0 0 auto;
    font-weight: 400;
    color: color-mix(in srgb, var(--c-ink) calc(var(--ativo) * 100%), var(--c-ink-2));
  }

  /* Ponto da trilha. Ele fica FORA do fluxo do item para o texto
     poder quebrar em duas linhas sem deslocar o ponto. */
  .case-indice a::before {
    content: "";
    position: absolute;
    left: calc(var(--space-5) * -1);
    top: .68em;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    /* Percorrido: preenchido de lime, com contorno de tinta, que e
       o mesmo par do botao primario do site (lime com tinta por
       cima). Lime sozinho sobre papel branco nao se ve.
       Corrente: o mesmo ponto, mais um halo de lime suave.
       O que ainda vem: circulo vazio, so contorno. */
    border: 1px solid color-mix(in srgb, var(--c-ink) calc(var(--passou) * 100%), var(--c-rule-strong));
    background: color-mix(in srgb, var(--c-accent) calc(var(--passou) * 100%), var(--c-surface));
    box-shadow: 0 0 0 calc(var(--ativo) * 4px) var(--c-accent-soft);
    /* O ponto corrente cresce em vez de mudar de cor: percorrido e
       corrente ja dividem o mesmo lime, entao o que separa os dois
       tem de ser tamanho, e nao tom. */
    scale: calc(1 + var(--ativo) * .4);
  }
}


/* ── Item corrente e progresso, sem uma linha de JavaScript ──

   `view-timeline-name` batiza a linha do tempo de cada secao,
   `timeline-scope` no <main> torna esses nomes visiveis para o
   indice (que nao e filho das secoes), e cada item anima na linha
   da sua propria secao.

   A faixa e `exit-crossing`: ela comeca quando o topo da secao
   cruza o topo da tela e termina quando o rodape dela cruza o
   mesmo ponto. Ou seja, o item aceso e o da secao que esta
   ENCOSTADA no alto da janela, e as faixas de secoes vizinhas se
   encaixam sem sobra e sem buraco.

   `cover` nao serve porque tres secoes podem estar em vista ao
   mesmo tempo, e `contain` e o contrario do que parece: numa secao
   mais alta que a tela, ele TERMINA quando o topo dela chega ao
   topo da janela, que e justamente onde o item deveria acender.

   O `view-timeline-inset` desce a borda de cima da janela em
   `--header-total + 80px`, porque o alto da tela esta coberto pelo
   cabecalho e pelo proprio indice. Ele e 20px maior que o
   `scroll-margin-top` de proposito: assim, ao clicar num item, a
   secao para JA dentro da faixa e o item acende no mesmo instante,
   em vez de parar em cima da fronteira.

   Os quadros em 0,01% e 99,99% existem para o estado ser um
   INTERRUPTOR e nao um esmaecimento: `linear` entre dois quadros
   colados vira salto. E os quadros das pontas sao o estado apagado
   porque `both` mantem a ponta mais proxima fora da faixa: com o
   aceso nas pontas, todo item ficaria aceso para sempre.

   Sem suporte, nada disto se aplica: o indice continua sendo uma
   lista de ancoras que funciona, e a linha de progresso fica
   parada no zero, sem aparecer. */

@supports (animation-timeline: view()) and (timeline-scope: --escopo) {

  main {
    timeline-scope:
      --s-contexto, --s-descoberta, --s-metodo, --s-prioridade, --s-modulos, --s-decisoes,
      --s-resistencia, --s-execucao, --s-governanca, --s-resultado, --s-diferente;
  }

  .sec[id],
  .case-resultado[id] { view-timeline-inset: calc(var(--header-total) + 80px) 0; }

  #contexto    { view-timeline-name: --s-contexto; }
  #descoberta  { view-timeline-name: --s-descoberta; }
  #metodo      { view-timeline-name: --s-metodo; }
  #prioridade  { view-timeline-name: --s-prioridade; }
  #modulos     { view-timeline-name: --s-modulos; }
  #decisoes    { view-timeline-name: --s-decisoes; }
  #resistencia { view-timeline-name: --s-resistencia; }
  #execucao    { view-timeline-name: --s-execucao; }
  #governanca  { view-timeline-name: --s-governanca; }
  #resultado   { view-timeline-name: --s-resultado; }
  #diferente   { view-timeline-name: --s-diferente; }

  @keyframes case-indice-ativo {
    0%, 100%     { --ativo: 0; }
    .01%, 99.99% { --ativo: 1; }
  }

  /* A diferenca entre as duas esta no quadro de 100%: aqui ele
     continua 1, e por isso o estado NAO volta quando a secao sai
     por cima. Percorrido e para sempre; corrente e so enquanto
     dura. */
  @keyframes case-indice-percorrido {
    0%         { --passou: 0; }
    .01%, 100% { --passou: 1; }
  }

  /* Duas animacoes, uma linha do tempo so: as propriedades de
     animacao sao listas, e a lista mais curta se repete ate cobrir
     todas. Por isso `animation-range` e `animation-timeline` com um
     valor so valem para as duas. */
  .case-indice a {
    animation: case-indice-ativo linear both, case-indice-percorrido linear both;
    animation-range: exit-crossing 0% exit-crossing 100%;
  }

  .case-indice a[href="#contexto"]    { animation-timeline: --s-contexto; }
  .case-indice a[href="#descoberta"]  { animation-timeline: --s-descoberta; }
  .case-indice a[href="#metodo"]      { animation-timeline: --s-metodo; }
  .case-indice a[href="#prioridade"]  { animation-timeline: --s-prioridade; }
  .case-indice a[href="#modulos"]     { animation-timeline: --s-modulos; }
  .case-indice a[href="#decisoes"]    { animation-timeline: --s-decisoes; }
  .case-indice a[href="#resistencia"] { animation-timeline: --s-resistencia; }
  .case-indice a[href="#execucao"]    { animation-timeline: --s-execucao; }
  .case-indice a[href="#governanca"]  { animation-timeline: --s-governanca; }
  .case-indice a[href="#resultado"]   { animation-timeline: --s-resultado; }
  .case-indice a[href="#diferente"]   { animation-timeline: --s-diferente; }

  /* A linha de progresso mede a ROLAGEM DA PAGINA, e nao uma secao:
     ela e o quanto do case ja passou, nao onde uma secao esta. */
  @keyframes case-trilha-progresso {
    from { scale: 1 0; }
    to   { scale: 1 1; }
  }

  @media (min-width: 1200px) {
    .case-indice::after {
      animation: case-trilha-progresso linear both;
      animation-timeline: scroll(root block);
    }
  }
}