/* ===========================================================================
   dobra.css — a primeira dobra da home do Anderson Vieira.
   Fiel a direcao/base-desktop.jpg (1586×992) e direcao/base-mobile.png (941×1672).
   Toda posição aqui é medida, não estimada: as % vêm de direcao/spec.md e do
   registro das camadas (herói escala 0,710 · x=703 · y=67 · NCC 0,973).
   Movimento: direcao/coreografia.md (Fundação F1-F8) + a assinatura escolhida
   pelo Anthony vendo as 12 provas: "Um ou Dois" (provas/entrada/n1-um-ou-dois).
   =========================================================================== */

/* ===========================================================================
   1. O PALCO — as duas camadas
   =========================================================================== */
.palco{
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.palco__fundo{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  z-index: 0;
}

/* O fundo veio 16:9 e o quadro aprovado é 16:10. Testado contra a imagem:
   esticar para o quadro erra 4,34/canal; cover erra 5,85; largura+topo erra 5,19.
   Perto da proporção da arte vale esticar — em bokeh o alongamento não se vê e
   as luzes do balcão caem no lugar certo. Fora dessa faixa, cover. */
@media (min-aspect-ratio: 1.45) and (max-aspect-ratio: 1.8){
  .palco__fundo{ object-fit: fill; }
}

.palco__heroi{
  position: absolute;
  left: var(--heroi-esq);
  top: var(--heroi-topo);
  width: var(--heroi-larg);
  height: auto;
  z-index: 2;
  /* o recorte não tem sombra de contato na imagem: a cena não projeta sombra.
     Nada de box-shadow aqui — inventar sombra é inventar uma segunda física. */
}

/* ===========================================================================
   1b. A LENTE - o estado `1` e o estado `2` ("Um ou Dois")
   O `2` e UMA mudanca de materia em duas propriedades, num involucro que contem
   SO as duas camadas de fundo.png. O heroi e IRMAO desse involucro: nenhuma
   dioptria encosta no recorte, e nada se mexe no eixo X.
   =========================================================================== */
.palco__lente{
  position: absolute;
  inset: 0;
  z-index: 0;
  filter: brightness(1);
  transition: filter var(--lente-dur) var(--ease-luz);
}
.palco__fundo--suave{
  z-index: 1;
  opacity: 0;
  filter: blur(var(--lente-blur));
  transition: opacity var(--lente-dur) var(--ease-luz);
}

html[data-lente="1"]{ --lente-dur: var(--t-medio); }   /* a ida pra lente de trânsito (`1`): 260ms; a volta pro repouso (`2`): 520 */
html[data-lente="2"] .palco__lente{ filter: brightness(var(--lente-luz)); }
html[data-lente="2"] .palco__fundo--suave{ opacity: 1; }

/* aparelho fraco (deviceMemory < 4): so o brilho, sem filtro nenhum */
html[data-lente-leve="1"] .palco__fundo--suave{ display: none; }

/* as duracoes que a passagem impoe vencem as de cima, por ordem de fonte */
html[data-passagem="sai"]{ --lente-dur: 170ms; }
html[data-passagem="chega"]{ --lente-dur: 360ms; }

/* --- os dois algarismos, sobre a regua do rodape --- */
.lente{
  position: absolute;
  left: var(--margem);
  bottom: calc(var(--rodape-linha) + 8px);
  z-index: 6;
  display: flex;
  align-items: center;
  height: 28px;
  font-family: var(--fonte-sans);
  font-size: 14px;     /* piso da casa, e o corpo que a ideia pede */
  font-weight: 300;
  line-height: 1.3;
}
.lente__alg{
  position: relative;
  display: inline-grid;
  place-items: center;
  min-width: 44px;     /* alvo de toque; a tinta continua de 14px */
  height: 28px;
  padding: 0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.3;
  color: var(--cinza-selo);
  transition: color var(--t-rapido) var(--ease-ui);
}
.lente__alg::before{      /* o alvo de 44x44, invisivel, sem mover a tinta */
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}
.lente__alg[aria-pressed="true"]{ color: var(--branco); }
.lente__alg:hover{ color: var(--branco-quente); }
.lente__alg:active{ opacity: .8; }
.lente__alg:focus-visible{ outline-offset: 6px; }

/* o sublinhado a 0,98 - a lente que esta no aro */
.lente__traco{
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 16px;
  margin-left: -8px;
  height: 1px;
  background: var(--branco);
  opacity: var(--traco-link);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t-medio) var(--ease-ui);
}
html[data-lente="1"] [data-lente-btn="1"] .lente__traco,
html[data-lente="2"] [data-lente-btn="2"] .lente__traco{ transform: scaleX(1); }

/* o risco ambar de 1px entre os dois algarismos */
.lente__risco{
  flex: 0 0 1px;
  width: 1px;
  height: 12px;
  background: var(--ambar);   /* chapado, sem brilho, sem sombra */
}
.lente__rotulo{
  margin-left: 12px;
  color: var(--cinza-selo);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: .02em;
  white-space: nowrap;
}

/* ===========================================================================
   2. CABEÇALHO
   =========================================================================== */
.cabecalho{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  height: var(--cab-altura);
  padding-left: var(--margem-cabecalho);
  padding-right: var(--margem-direita);
  transition: height var(--t-medio) var(--ease-ui), background-color var(--t-medio) var(--ease-ui);
}

.cabecalho__linha{
  display: flex;
  align-items: center;
  gap: 52px;      /* o vão medido entre lockup, régua e nav */
  height: 100%;
  padding-top: var(--e2);
}

/* --- lockup: wordmark + selo. Na imagem os dois têm a MESMA largura --- */
.marca{
  display: block;
  flex: 0 0 auto;
}
.marca__nome{
  display: block;
  font-size: var(--tam-wordmark);
  font-weight: 300;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--branco);
  transition: color var(--t-rapido) var(--ease-ui);
}
.marca__selo{
  display: block;
  margin-top: 4px;
  font-size: var(--tam-selo);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: var(--tracking-selo);
  line-height: 1.2;
  color: var(--cinza-selo);
  white-space: nowrap;
}
.marca:hover .marca__nome{ color: var(--branco-quente); }
.marca:active{ opacity: .85; }

/* --- régua do header: 1px na opacidade 0,28, a mais apagada da peça --- */
.cabecalho__regua{
  flex: 1 1 auto;
  height: 1px;
  margin-top: 8px;   /* na imagem a régua não está no centro da linha: cai 4px */
  background: var(--branco);
  opacity: var(--regua-cabecalho);
  transform-origin: left center;
  transition: opacity var(--t-medio) var(--ease-ui);
}

/* --- nav --- */
.nav{
  display: flex;
  align-items: center;
  gap: var(--e7);   /* 56px: o vão medido entre os três rótulos na imagem */
  flex: 0 0 auto;
}
.nav__item{
  position: relative;
  font-size: var(--tam-nav);
  font-weight: 400;
  line-height: 1.2;
  color: var(--branco);
  padding-block: var(--e2);
  transition: color var(--t-medio) var(--ease-ui);
}
.nav__item > span{ position: relative; display: block; }
.nav__item > span::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 1px;
  background: currentColor;
  opacity: var(--traco-nav);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 200ms var(--ease-ui);
}
.nav__item:hover{ color: var(--branco-quente); }
.nav__item:hover > span::after,
.nav__item[aria-current="page"] > span::after{ transform: scaleX(1); }
.nav__item:active{ opacity: .8; }

/* --- hambúrguer: tinta de 25×22 no desktop, alvo de 44×44 por pseudo-elemento.
       A tinta NÃO se move para o alvo crescer. --- */
.menu-botao{
  position: relative;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 25px;
  height: 19px;
  margin-left: 16px;   /* 52 do gap + 16 = o vão de 68px entre nav e tinta na imagem */
  padding: 0;
}
.menu-botao::before{            /* o alvo de toque, invisível */
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}
.menu-botao__tinta{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}
.menu-botao__tinta i{
  display: block;
  height: 2px;
  width: 100%;
  background: var(--branco);
  transform-origin: center;
  transition: transform 280ms var(--ease-ui), opacity 170ms var(--ease-ui),
              background-color var(--t-rapido) var(--ease-ui);
}
/* hover: os traços clareiam da DIREITA pra ESQUERDA — é de lá que vem a luz */
.menu-botao:hover i{ background: var(--branco-quente); }
.menu-botao:hover i:nth-child(3){ transition-delay: 0ms; }
.menu-botao:hover i:nth-child(2){ transition-delay: 40ms; }
.menu-botao:hover i:nth-child(1){ transition-delay: 80ms; }
.menu-botao:active .menu-botao__tinta{ transform: scale(.94); }
.menu-botao:focus-visible{ outline-offset: 12px; }

.menu-botao[aria-expanded="true"] i:nth-child(1){ transform: translateY(10px) rotate(45deg); }
.menu-botao[aria-expanded="true"] i:nth-child(2){ opacity: 0; }
.menu-botao[aria-expanded="true"] i:nth-child(3){ transform: translateY(-10px) rotate(-45deg); }

/* --- F7: a régua compensa a luz que sai de quadro (scroll > 96px).
       Passando a dobra o cabeçalho CONTINUA curto e ganha fundo: "fundo" é
       "curto" mais a chapa (coreografia.md, linha do header). --- */
html[data-cabecalho="curto"] .cabecalho,
html[data-cabecalho="fundo"] .cabecalho{ height: var(--cab-altura-curta); }
html[data-cabecalho="curto"] .cabecalho__regua{ opacity: var(--regua-cabecalho-curta); }
/* só o selo do CABEÇALHO some no scroll: o do rodapé fica (patch F2, 18/09) */
html[data-cabecalho="curto"] .cabecalho .marca__selo,
html[data-cabecalho="fundo"] .cabecalho .marca__selo{
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-medio) var(--ease-ui), visibility 0s linear var(--t-medio);
}
html[data-cabecalho="fundo"] .cabecalho{ background: var(--chao); }
html[data-cabecalho="fundo"] .cabecalho__regua{ opacity: var(--regua-cabecalho-fundo); }

/* ===========================================================================
   3. A DOBRA
   =========================================================================== */
.dobra{
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: 1fr auto;
  padding-top: var(--cab-altura);   /* o cabeçalho é fixo: a dobra reserva a altura dele */
  padding-inline: var(--margem);
  background: var(--chao);
  overflow: hidden;
}

.dobra__corpo{
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 12px;   /* viés medido: o bloco cai pouco abaixo do centro da sobra */
  min-width: 0;
}

/* --- headline: 3 linhas, a do meio em serifa itálica --- */
.titulo{
  font-size: var(--h1);
  line-height: 1;
  font-weight: 300;
  color: var(--branco);
}
.titulo__linha{
  display: block;
  width: fit-content;
  max-width: 100%;
  clip-path: inset(-.22em -.1em -.24em -.1em);
}
.titulo__linha > span{ display: block; }

.titulo__l1{ font-family: var(--fonte-sans); font-weight: 300; font-size: 1em; letter-spacing: -.04em; }
/* Entrelinha da arte, medida em BASELINE (fontes.md): L1→L2 = 100px @1586 (6,31vw)
   e L2→L3 = 88px @1586 (5,55vw). Com line-height 1 a caixa vira o corpo e os vãos
   saíam 95 e 76; as margens abaixo devolvem os dois vãos.
   O termo "-.8383em" na L3 é a compensação do próprio corpo dela: como a guarda 1
   reduz a L3 conforme o viewport, sem isso a baseline dela andaria junto. */
.titulo__l2{ font-family: var(--fonte-serif); font-weight: 600; font-size: var(--h1-l2); letter-spacing: -.01em;
             margin-top: calc(var(--h1) * .0473); }
.titulo__l2 em{ font-style: italic; }
/* GUARDA 1: a L3 nunca passa do limite calculado contra a silhueta do herói.
   19.25 = largura de "é você que complica." em em, medida na Gantari 300
   com letter-spacing -.02em. */
.titulo__l3{
  margin-top: calc(var(--h1) * .7117 - .8383em);
  font-family: var(--fonte-sans);
  font-weight: 300;
  font-size: min(var(--h1-l3), calc(var(--l3-limite) / 9.124));
  letter-spacing: -.02em;
  white-space: nowrap;   /* a punch line nunca quebra em duas linhas (copy.md) */
}

/* --- a dupla de botões --- */
.acoes{
  display: flex;
  align-items: baseline;   /* a arte alinha o rótulo do botão e o link na MESMA baseline */
  gap: var(--e6);
  margin-top: 44px;   /* vão medido entre a base da L3 e o topo da pílula */
}

/* CTA primário: pílula âmbar chapada, raio total, sem sombra, sem borda */
.btn{
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding: clamp(14px, 1.67vw, 26px) clamp(24px, 3.06vw, 48px);
  border-radius: 999px;
  background: var(--ambar);
  color: var(--tinta-no-ambar);
  font-size: var(--tam-botao);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1;
  transition: background-color var(--t-rapido) var(--ease-ui), transform var(--t-ativo) var(--ease-ui);
}
.btn .seta{ width: .73em; height: .73em; transition: transform var(--t-rapido) var(--ease-ui); }
/* F3: a luz sobe na pílula. NUNCA levanta: sem sombra na cena, objeto que sobe mente. */
.btn:hover{ background: var(--ambar-luz); }
.btn:hover .seta{ transform: translate(1.4px, -1.4px); }
.btn:active{ background: var(--ambar-fundo); transform: scale(.985); }
.btn:focus-visible{ outline-color: var(--branco); }

.btn[data-carregando="1"]{ background: rgba(218,157,74,.72); pointer-events: none; }
.btn[data-carregando="1"] .seta{ display: none; }
.btn[data-carregando="1"]::after{
  content: "";
  width: .66em;
  height: .66em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: gira 900ms linear infinite;
}

/* CTA secundário: link sublinhado, sem preenchimento */
.btn-fantasma{
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: .45em;
  padding-bottom: .615em;   /* a arte põe o sublinhado 18px @1586 abaixo da baseline */
  font-size: var(--tam-botao);
  font-weight: 400;
  line-height: 1;
  color: var(--branco);
  transition: color var(--t-rapido) var(--ease-ui);
}
.btn-fantasma .seta{ width: .68em; height: .68em; transition: transform var(--t-rapido) var(--ease-ui); }
/* o sublinhado cobre texto e seta: 1px de folga à esquerda, 5 à direita */
.btn-fantasma__traco{
  position: absolute;
  left: -1px;
  right: -5px;
  bottom: 0;
  height: 1.5px;
  background: var(--branco);
  opacity: var(--traco-link);
  transform-origin: right center;
  transition: transform 120ms var(--ease-ui);
}
/* F4: o sublinhado se refaz — some pela direita, volta pela esquerda */
.btn-fantasma:hover .btn-fantasma__traco{
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 120ms var(--ease-ui);
  animation: refaz 260ms var(--ease-ui) forwards;
}
.btn-fantasma:hover .seta{ transform: translate(1.4px, -1.4px); }
.btn-fantasma:active{ opacity: .8; }
.btn-fantasma:focus-visible{ outline-offset: 6px; }

.seta{ fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* --- rodapé da dobra --- */
.dobra__rodape{
  position: relative;
  z-index: 1;                 /* no desktop a régua passa ATRÁS do herói */
  padding-bottom: var(--e5);
  pointer-events: none;
}
.rodape__regua{
  display: block;
  width: min(39.6vw, 100%);   /* 39,6% da LARGURA DA TELA, como na imagem */
  height: 1px;
  background: var(--branco);
  opacity: var(--regua-rodape);
  transform-origin: left center;
}
.rodape__faixa{
  width: fit-content;
  margin-top: 12px;
  font-size: var(--tam-faixa);
  font-weight: 300;
  letter-spacing: var(--tracking-faixa);
  line-height: 1.2;
  color: var(--cinza-rodape);
  white-space: nowrap;
}

/* ===========================================================================
   4. PAINEL DO MENU (F8)
   =========================================================================== */
.painel{
  position: fixed;
  inset: 0;
  z-index: 40;
}
.painel[hidden]{ display: none; }
.painel__fundo{
  position: absolute;
  inset: 0;
  background: var(--chao);
  opacity: .96;   /* o halo âmbar real vaza por baixo: o menu não vira outro site */
}
.painel__caixa{
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--e10) var(--margem);
}
.painel__fechar{
  position: absolute;
  top: var(--e3);
  right: var(--margem);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
}
.painel__fechar svg{ width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.painel__fechar:hover svg{ stroke: var(--branco-quente); }

.painel__nav{ display: flex; flex-direction: column; gap: var(--e3); }
.painel__nav a{
  font-size: var(--tam-menu);
  font-weight: 300;
  letter-spacing: -.02em;
  line-height: 1.2;
  color: var(--branco);
  width: fit-content;
  min-height: 44px;
  display: flex;
  align-items: center;
  transition: color var(--t-rapido) var(--ease-ui);
}
.painel__nav a > span{ display: block; }
.painel__nav a{ clip-path: inset(-.22em -.1em -.24em -.1em); }
.painel__nav a:hover{ color: var(--branco-quente); }
.painel__nav a:active{ opacity: .8; }

/* ===========================================================================
   6. MOBILE — a imagem base-mobile.png, medida
   =========================================================================== */
/* O empilhado (a imagem mobile) vale por LARGURA e por PROPORÇÃO: num quadro
   que não é panorâmico o herói não cabe ao lado da headline, e a composição da
   arte desktop deixa de existir. Abaixo de 1,25 de proporção, empilha. */
@media (max-width: 767px), (max-aspect-ratio: 1.25){
  :root{
    --cab-altura: 80px;
    --margem: 13.07vw;          /* margem do CONTEÚDO na imagem mobile */
    --margem-cabecalho: 9.03vw; /* o header tem margem própria, mais aberta */
    --margem-direita: 9.03vw;
    --lente-blur: 3px;    /* o `2` no celular: 3px */
    --lente-luz: .90;     /* e -10% de luz */
    --rodape-linha: calc(12px + 9px + var(--tam-faixa) * 1.2);
    --heroi-esq: 15.3vw;
    /* o herói não sangra no mobile: ele para dentro da dobra. O teto de altura
       também garante que ele nunca suba em cima dos botões em tela baixa. */
    --heroi-larg: min(79.38vw, 620px, calc((97.96dvh - max(291px, 219px + 18.25vw)) * .8));
    --sobe: 8px;
  }

  /* o lockup vira duas linhas com o hambúrguer ao lado, e a régua atravessa
     a largura inteira embaixo — é o que a imagem mobile mostra */
  .cabecalho__linha{ flex-wrap: wrap; align-content: flex-start; padding-top: var(--e1); gap: 0 var(--e2); }
  .marca__selo{ line-height: 1; }
  .cabecalho__regua{
    order: 3;
    flex: 1 0 100%;
    margin-top: 0;
  }
  /* a nav visível do topo não cabe no celular com o piso de 14px + alvo de 44px:
     ela vive dentro do hambúrguer, com os mesmos rótulos (copy.md, §Mobile). */
  .nav{ display: none; }
  .marca{ margin-right: auto; }
  .menu-botao{
    order: 2;
    width: 15px;
    height: 11px;
    margin-left: 0;
    align-self: flex-start;
    margin-top: 18px;   /* a tinta cai na altura da arte (3,77% da dobra), não no centro do lockup */
  }
  .menu-botao__tinta i{ height: 1px; }
  .menu-botao[aria-expanded="true"] i:nth-child(1){ transform: translateY(5px) rotate(45deg); }
  .menu-botao[aria-expanded="true"] i:nth-child(3){ transform: translateY(-5px) rotate(-45deg); }

  .dobra__corpo{
    justify-content: flex-start;
    padding-top: var(--e1);
    max-width: 640px;        /* a coluna da arte mobile, centrada em tela larga */
    margin-inline: auto;
    width: 100%;
  }
  .dobra__rodape{ max-width: 640px; margin-inline: auto; width: 100%; }
  /* abaixo de 1024 o herói sai da linha da headline: a guarda 1 se desliga e a
     L3 volta ao corpo cheio (coreografia.md, risco A). */
  .titulo__l3{ font-size: var(--h1-l3); }

  .acoes{
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    align-self: center;
  }
  .btn{ justify-content: center; min-height: 44px; }   /* alvo de toque (rodada 3); a tinta não muda */
  /* alvo de 44px no lockup do cabeçalho (43px de tinta) por pseudo-elemento
     invisível, como o hambúrguer: nada se move (rodada 3) */
  .cabecalho .marca{ position: relative; }
  .cabecalho .marca::before{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
  }

  /* no mobile a régua do rodapé passa POR CIMA do herói (diverge do desktop;
     é o que a imagem mostra, e está certo assim) */
  .dobra__rodape{ z-index: 3; padding-bottom: 12px; }
  .rodape__regua{ width: 100%; }
  .rodape__faixa{ margin-top: 8px; letter-spacing: .02em; }

  .palco__heroi{
    top: auto;
    bottom: 2.04%;   /* na imagem ele não sangra no mobile: para 14px antes do fim */
    /* a mesma relação da arte (ele fica 6,3% da própria largura à direita do
       centro), mas amarrada ao centro — assim não escorrega pra esquerda quando
       a tela empilhada é larga */
    left: calc(50% - var(--heroi-larg) / 2 + var(--heroi-larg) * .0631);
  }

  .painel__nav a{ font-size: clamp(1.5rem, 1rem + 4vw, 2rem); }
}

/* Não existe faixa intermediária solta: ou o herói está ao lado da headline
   (e a guarda 1 vale, em qualquer largura), ou a peça está empilhada. */

/* ===========================================================================
   7. ENTRADA — a assinatura escolhida: "UM OU DOIS"
   t0     o frame 1 nasce no `2`: fundo com +5px e −6% de luz, herói a 0,86.
          A dobra já está inteira no lugar e clicável.
   260    a lente resolve sozinha pro `1` (640ms, --ease-luz) e o herói sobe de
          0,86 a 1 de brilho — zero blur nele, zero movimento em X.
   300+   a cascata da Fundação.
   820    os algarismos entram · 900 o sublinhado do `1` se desenha (260ms).
   1160   fim. O repouso é, no pixel, a imagem aprovada.
   Nada nasce invisível: a animação só roda com html[data-entrada="rodando"],
   e o estado final é o estado do CSS. JS quebrado = dobra inteira no lugar.
   =========================================================================== */
:root{
  --d-marca: 300ms;
  --d-l1: 360ms; --d-l2: 420ms; --d-l3: 480ms;
  --d-pilula: 560ms; --d-link: 610ms;
  --d-nav1: 650ms; --d-nav2: 690ms; --d-nav3: 730ms;
  --d-ham: 760ms; --d-regua-cab: 760ms; --d-regua-rod: 760ms;
  --d-faixa: 820ms;
  --dur-linha: 470ms;   /* 480 + 470 = 950 */
  --dur-regua: 260ms;   /* 760 + 260 = 1020 */

  --d-lente: 260ms; --dur-lente: 640ms;   /* 260 → 900 */
  --d-digitos: 820ms;
  --d-traco: 900ms;                        /* 900 + 260 = 1160 */
}

@keyframes entra{
  from{ opacity: 0; transform: translateY(var(--sobe)); }
  to  { opacity: 1; transform: translateY(0); }
}
@keyframes entra-miudo{
  from{ opacity: 0; transform: translateY(var(--sobe-miudo)); }
  to  { opacity: 1; transform: translateY(0); }
}
@keyframes mascara{
  from{ clip-path: inset(104% -.1em -.24em -.1em); }
  to  { clip-path: inset(-.22em -.1em -.24em -.1em); }
}
@keyframes regua{
  from{ transform: scaleX(0); }
  to  { transform: scaleX(1); }
}
@keyframes gira{ to{ transform: rotate(360deg); } }
@keyframes refaz{
  0%  { transform: scaleX(0); transform-origin: right center; }
  49% { transform: scaleX(0); transform-origin: right center; }
  50% { transform: scaleX(0); transform-origin: left center; }
  100%{ transform: scaleX(1); transform-origin: left center; }
}

html[data-entrada="rodando"] .marca{
  animation: entra var(--t-medio) var(--ease-luz) var(--d-marca) backwards;
}
html[data-entrada="rodando"] .titulo__linha{
  animation: mascara var(--dur-linha) var(--ease-luz) backwards;
}
html[data-entrada="rodando"] .titulo__linha > span{
  animation: entra var(--dur-linha) var(--ease-luz) backwards;
}
html[data-entrada="rodando"] .titulo__l1,
html[data-entrada="rodando"] .titulo__l1 > span{ animation-delay: var(--d-l1); }
html[data-entrada="rodando"] .titulo__l2,
html[data-entrada="rodando"] .titulo__l2 > span{ animation-delay: var(--d-l2); }
html[data-entrada="rodando"] .titulo__l3,
html[data-entrada="rodando"] .titulo__l3 > span{ animation-delay: var(--d-l3); }

html[data-entrada="rodando"] .btn{
  animation: entra var(--t-medio) var(--ease-luz) var(--d-pilula) backwards;
}
html[data-entrada="rodando"] .btn-fantasma{
  animation: entra var(--t-medio) var(--ease-luz) var(--d-link) backwards;
}
html[data-entrada="rodando"] .nav__item:nth-child(1){ animation: entra-miudo var(--t-medio) var(--ease-luz) var(--d-nav1) backwards; }
html[data-entrada="rodando"] .nav__item:nth-child(2){ animation: entra-miudo var(--t-medio) var(--ease-luz) var(--d-nav2) backwards; }
html[data-entrada="rodando"] .nav__item:nth-child(3){ animation: entra-miudo var(--t-medio) var(--ease-luz) var(--d-nav3) backwards; }
html[data-entrada="rodando"] .menu-botao{ animation: entra-miudo var(--t-medio) var(--ease-luz) var(--d-ham) backwards; }
html[data-entrada="rodando"] .cabecalho__regua{ animation: regua var(--dur-regua) var(--ease-luz) var(--d-regua-cab) backwards; }
html[data-entrada="rodando"] .rodape__regua{ animation: regua var(--dur-regua) var(--ease-luz) var(--d-regua-rod) backwards; }
html[data-entrada="rodando"] .rodape__faixa{ animation: entra-miudo var(--t-medio) var(--ease-luz) var(--d-faixa) backwards; }

/* --- a lente na entrada: o fundo resolve do `2` pro `1`, e só o fundo --- */
@keyframes n1-luz{
  from{ filter: brightness(var(--lente-luz)); }
  to  { filter: brightness(1); }
}
@keyframes n1-suave{
  from{ opacity: 1; }
  to  { opacity: 0; }
}
/* o recorte só ganha LUZ: nada de blur nele, nada de movimento em X */
@keyframes n1-heroi{
  from{ filter: brightness(.86); }
  to  { filter: brightness(1); }
}
@keyframes n1-traco{
  from{ transform: scaleX(0); }
  to  { transform: scaleX(1); }
}

/* REPOUSO = `2` desde 18/09/2026 (decisão do Anthony vendo o preview): a
   entrada não "resolve o grau" mais — o fundo nasce e fica na 2. As animações
   n1-luz/n1-suave ficam definidas mas não se aplicam. */
html[data-entrada="rodando"] .palco__heroi{
  animation: n1-heroi var(--dur-lente) var(--ease-luz) var(--d-lente) backwards;
}
html[data-entrada="rodando"] .lente{
  animation: entra-miudo var(--t-medio) var(--ease-luz) var(--d-digitos) backwards;
}
html[data-entrada="rodando"] [data-lente-btn="2"] .lente__traco{
  animation: n1-traco var(--t-medio) var(--ease-luz) var(--d-traco) backwards;
}

/* Mexeu na lente no meio da entrada? A entrada larga o fundo na hora e quem
   manda passa a ser o clique — ninguém fica preso vendo a abertura. */
html[data-mexeu="1"] .palco__lente,
html[data-mexeu="1"] .palco__fundo--suave,
html[data-mexeu="1"] .palco__heroi,
html[data-mexeu="1"] [data-lente-btn="2"] .lente__traco{ animation: none; }

/* --- celular: a entrada curta da assinatura, um ato só, teto de 700ms --- */
@media (max-width: 767px), (max-aspect-ratio: 1.25){
  :root{
    --d-marca: 160ms;
    --d-l1: 200ms; --d-l2: 240ms; --d-l3: 280ms;
    --d-pilula: 320ms; --d-link: 350ms;
    --d-nav1: 350ms; --d-nav2: 350ms; --d-nav3: 350ms;
    --d-ham: 380ms; --d-regua-cab: 380ms; --d-regua-rod: 380ms;
    --d-faixa: 400ms;
    --dur-linha: 300ms;
    --dur-regua: 220ms;

    --d-lente: 120ms; --dur-lente: 440ms;   /* 120 → 560 */
    --d-digitos: 400ms;
    --d-traco: 440ms;                        /* 440 + 260 = 700 */
  }
}

/* ===========================================================================
   7b. A PASSAGEM - 600ms entre paginas, sem um frame preto
   0-200    a pagina que sai cai pro `2` e o texto sai em cadencia invertida
            (L3, L2, L1 . 40ms de intervalo . 8px pra baixo sob mascara)
   200      a navegacao acontece (nada segura mais que 220ms)
   200-240  o risco ambar anda entre os algarismos
   240-600  a pagina que chega nasce no `2` e resolve pro `1` em 360ms
   =========================================================================== */
@keyframes bloco-sai-mascara{
  from{ clip-path: inset(-.22em -.12em -.26em -.12em); }
  to  { clip-path: inset(104% -.12em -.26em -.12em); }
}
@keyframes bloco-sai-desce{
  from{ transform: translateY(0); }
  to  { transform: translateY(8px); }
}
@keyframes bloco-entra-mascara{
  from{ clip-path: inset(104% -.12em -.26em -.12em); }
  to  { clip-path: inset(-.22em -.12em -.26em -.12em); }
}
@keyframes bloco-entra-sobe{
  from{ opacity: 0; transform: translateY(8px); }
  to  { opacity: 1; transform: translateY(0); }
}

html[data-passagem="sai"] [data-sai]{
  animation: bloco-sai-mascara 110ms var(--ease-ui) both;
}
html[data-passagem="sai"] [data-sai] > *{
  animation: bloco-sai-desce 110ms var(--ease-ui) both;
}
html[data-passagem="sai"] [data-sai="2"],
html[data-passagem="sai"] [data-sai="2"] > *{ animation-delay: 30ms; }
html[data-passagem="sai"] [data-sai="3"],
html[data-passagem="sai"] [data-sai="3"] > *{ animation-delay: 60ms; }

html[data-passagem="chega"] [data-entra]{
  animation: bloco-entra-mascara var(--t-medio) var(--ease-luz) 40ms backwards;
}
html[data-passagem="chega"] [data-entra] > *{
  animation: bloco-entra-sobe var(--t-medio) var(--ease-luz) 40ms backwards;
}
html[data-passagem="chega"] [data-entra="2"],
html[data-passagem="chega"] [data-entra="2"] > *{ animation-delay: 100ms; }
html[data-passagem="chega"] [data-entra="3"],
html[data-passagem="chega"] [data-entra="3"] > *{ animation-delay: 160ms; }
html[data-passagem="chega"] [data-entra="4"],
html[data-passagem="chega"] [data-entra="4"] > *{ animation-delay: 200ms; }

/* o risco ambar anda entre os algarismos (200-240) */
@keyframes risco-frente{
  from{ transform: translateX(-16px); opacity: .55; }
  50% { opacity: 1; }
  to  { transform: translateX(16px); opacity: .55; }
}
@keyframes risco-tras{
  from{ transform: translateX(16px); opacity: .55; }
  50% { opacity: 1; }
  to  { transform: translateX(-16px); opacity: .55; }
}
html[data-passagem="chega"][data-rumo="frente"] .lente__risco{ animation: risco-frente 40ms var(--ease-ui); }
html[data-passagem="chega"][data-rumo="tras"]   .lente__risco{ animation: risco-tras 40ms var(--ease-ui); }

/* o heroi sai de cena como a cena manda: perdendo o feixe, nunca por fade
   (recorte que some vira fantasma) e nunca andando no eixo X */
@keyframes heroi-apaga{
  from{ filter: brightness(1); }
  to  { filter: brightness(.2); }
}
html[data-passagem="sai"] .palco__heroi{
  animation: heroi-apaga 170ms var(--ease-filamento) forwards;
}

/* onde a transicao de documento existir, ela roda por cima do mesmo fundo, e
   no relogio da assinatura: 200ms pra sair, 360ms pra chegar. Como as duas
   fotos tem o MESMO fundo, o cruzamento nao produz um frame preto. */
@view-transition{ navigation: auto; }
::view-transition-old(root){ animation-duration: 200ms; animation-timing-function: var(--ease-ui); }
::view-transition-new(root){ animation-duration: 360ms; animation-timing-function: var(--ease-luz); }

/* ===========================================================================
   8. REDUCED MOTION — vai direto ao estado final, sem exceção
   =========================================================================== */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .btn[data-carregando="1"]::after{ animation: none; }
  .palco__lente,
  .palco__fundo--suave,
  .lente__traco{ transition: none; }
  .nav__item > span::after{ transform: scaleX(1); opacity: 0; }
  .nav__item:hover > span::after{ opacity: var(--traco-nav); }
}