/* base.css: a base comum das animações do Mais Cômodo.
   Linguagem: foto real recortada sobre painel chapado, rabiscos à mão, tipografia
   display grande em caixa alta. Geometria: cantos retos, borda de 1 px numa cor só,
   sem sombra, sem gradiente (decisões da Bruna em 15/10/2026, ver BRIEFING-ANIMACAO.md).
   Quem escreve uma animação usa estas classes e não redefine nenhuma delas. */

/* ---------- 1. Tokens da marca (MARCA.md, seção 5) ---------- */
:root {
  --araucaria: #1F4D3A;
  --araucaria-clara: #2A5C47;   /* só fundo, e só dentro de Araucária */
  --pinhao: #B4532A;            /* acento e botão com texto branco; nunca sobre Araucária */
  --pinhao-escuro: #9A4322;     /* o Pinhão quando é texto sobre fundo claro */
  --pinhao-sobre-verde: #F3C9B1;/* o acento quando o fundo é Araucária */
  --neblina: #F5F1E8;
  --grafite: #1D2321;
  --tela: #5E676B;              /* texto secundário, legenda, selo */
  --musgo: #DCE8DF;
  --pinhao-claro: #F6E3D6;

  --borda: 1px;
  --cor-borda: var(--araucaria);
  --gutter: 16px;

  --fonte-display: "Bricolage Grotesque", "Segoe UI", system-ui, Arial, sans-serif;
  --fonte-texto: "Atkinson Hyperlegible", "Segoe UI", system-ui, Arial, sans-serif;

  /* escala display: caixa alta, condensada, como no Pixy */
  --display-xl: clamp(2.75rem, 7.5vw, 6.5rem);
  --display-l: clamp(2rem, 5vw, 4.25rem);
  --display-m: clamp(1.5rem, 3.2vw, 2.5rem);
  --display-s: clamp(1.125rem, 2vw, 1.5rem);

  /* rolagem que cada cena prende: o base.js lê estes dois. Eram 100 e 70; a Bruna viu
     em 16/10/2026 que a cena "fica a tela inteira e a animação é bem longa", e parecia
     que a página tinha acabado. Metade da rolagem, e a ação termina nos primeiros 70 %
     dela (ACAO_ATE no base.js), para a cena já estar pronta quando a rolagem solta. */
  --cena-rolagem-desktop: 55;   /* em % da altura da janela */
  --cena-rolagem-celular: 45;
  /* a faixa de continuação no pé da cena presa ("Próximo: ...", N / total, seta):
     o palco e o texto ficam com o resto (~86 svh). svh só onde existe; o vh é o fallback,
     porque var() com unidade desconhecida não cai para a declaração anterior, invalida a regra. */
  --cena-faixa: 14vh;
  /* altura do cabeçalho fixo da página que hospeda a cena (0 quando não há um). A cena presa
     começa ABAIXO dele, não por trás: o base.js lê este valor para o início do pin e o CSS o
     desconta da altura da cena (16/10/2026, cabeçalho fixo do site). Sempre em px, com
     unidade: calc() recusa "0" sem unidade, e o base.js lê o número com parseFloat. */
  --cabecalho-altura: 0px;
}
@supports (height: 1svh) { :root { --cena-faixa: 14svh; } }

/* ---------- 2. Fontes locais (OFL). Nesta cópia publicada os @font-face apontam para o subset
     woff2 de ../fontes/: a base de trabalho (site/animacoes/base.css) aponta para ../../marca/fontes/*.ttf,
     que fica fora da pasta, e o montar_publicar.py faz a troca ao copiar. ---------- */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fontes/BricolageGrotesque-600-800.woff2") format("woff2");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../fontes/AtkinsonHyperlegible-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../fontes/AtkinsonHyperlegible-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

/* ---------- 3. Base ---------- */
*, *::before, *::after { box-sizing: border-box; border-radius: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--neblina);
  color: var(--grafite);
  font-family: var(--fonte-texto);
  font-size: 17px;
  line-height: 1.5;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--pinhao-escuro); outline-offset: 2px; }

/* Tipografia display: Bricolage pesada, condensada, caixa alta, entrelinha curta. */
.display {
  font-family: var(--fonte-display);
  font-weight: 800;
  font-stretch: 85%;
  font-variation-settings: "opsz" 96;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.display--xl { font-size: var(--display-xl); }
.display--l  { font-size: var(--display-l); }
.display--m  { font-size: var(--display-m); }
.display--s  { font-size: var(--display-s); }
.display .destaque { color: var(--pinhao-escuro); }       /* sobre claro */
.sobre-escuro .display .destaque { color: var(--pinhao-sobre-verde); } /* sobre Araucária */

.texto { font-size: 1.0625rem; line-height: 1.5; max-width: 38ch; }
.texto--grande { font-size: clamp(1.125rem, 1.6vw, 1.375rem); }
/* Rótulo miúdo (sob um preço, ou o aviso "página avulsa, não é o site"). Até 16/10/2026 tinha o
   nome do marcador de pendência; deixou de ser marcador quando a Bruna decidiu publicar sem nada
   por decidir, e o nome saiu para nenhum grep achar o termo no que se publica. */
.rotulo { color: var(--tela); font-size: 0.875rem; font-weight: 700; }

/* ---------- 4. Cena presa (pin) ---------- */
/* A cena é uma peça de mosaico: retângulo de cantos retos com borda de 1 px.
   O GSAP prende o elemento inteiro; a altura é a da janela.
   svh em vez de vh: no celular a barra do navegador some e aparece, e 100vh
   deixava o rodapé da cena fora da tela. */
.cena {
  position: relative;
  height: calc(100vh - var(--cabecalho-altura));
  height: calc(100svh - var(--cabecalho-altura));
  border: var(--borda) solid var(--cor-borda);
  border-top: 0;
  background: var(--neblina);
  color: var(--grafite);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-rows: minmax(0, 1fr);
}
.cena:first-of-type, .cena--com-topo { border-top: var(--borda) solid var(--cor-borda); }
.cena__texto {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  padding: clamp(1.25rem, 4vw, 4rem);
  border-right: var(--borda) solid var(--cor-borda);
  min-width: 0;
}
.cena__texto .texto { margin-top: 0.25rem; }
.cena__palco {
  position: relative;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  color: var(--araucaria);  /* o cenário desenhado e os rabiscos herdam: uma cor de traço só */
  isolation: isolate;  /* o multiply não vaza para fora do palco */
}
.cena--palco-esquerda { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.cena--palco-esquerda .cena__texto { order: 2; border-right: 0; border-left: var(--borda) solid var(--cor-borda); }
.cena--palco-esquerda .cena__palco { order: 1; }

/* Tudo que vai no palco é posicionado em % do palco: assim a cena escala
   junto da peça do mosaico. Use .ator para cada coisa que se move. */
.ator { position: absolute; will-change: transform; }

/* ---------- 4b. Faixa de continuação (cena presa) ---------- */
/* Presa e ocupando a janela inteira, a cena parecia o fim da página (Bruna, 16/10/2026:
   "parece que não tem continuação"). O base.js marca a cena presa com .cena--presa e
   injeta no pé dela a .cena__faixa: uma linha a mais na grade, com fio de 1 px em cima,
   dizendo o título da próxima cena, "N / total" e uma seta em traço. A faixa fica DENTRO
   da cena para ir junto no pin; o palco e o texto ficam com o resto da altura. Também
   aparece com movimento reduzido, porque lá a cena continua cheia e sem pista do que vem. */
.cena--presa { grid-template-rows: minmax(0, 1fr) auto; }
.cena__faixa {
  grid-column: 1 / -1;
  order: 9;                         /* depois do texto e do palco, que trocam de ordem entre si */
  height: var(--cena-faixa);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: stretch;
  border-top: var(--borda) solid var(--cor-borda);
  background: var(--neblina);
  color: var(--araucaria);
  font-family: var(--fonte-texto);
}
.cena__faixa-proximo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.3rem;
  min-width: 0;
  padding: 0 clamp(1.25rem, 4vw, 4rem);   /* alinha com o h2 da cena */
}
.cena__faixa-rotulo {
  font: 700 11px/1 var(--fonte-texto);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tela);
}
.cena__faixa-titulo {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;              /* título longo da próxima cena: duas linhas e corta */
  overflow: hidden;
  text-wrap: pretty;
}
.cena__faixa-contador,
.cena__faixa-seta {
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: var(--borda) solid var(--cor-borda);
}
.cena__faixa-contador {
  padding: 0 clamp(0.9rem, 2vw, 1.5rem);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cena__faixa-seta { width: min(var(--cena-faixa), 96px); }   /* célula quadrada, como uma peça do mosaico */
.cena__faixa-seta svg { width: 34%; height: auto; max-height: 60%; overflow: visible; }
@media (prefers-reduced-motion: no-preference) {
  .cena__faixa-seta svg { animation: cena-faixa-seta 1.6s ease-in-out infinite; }
  @keyframes cena-faixa-seta { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(3px); } }
}

/* ---------- 5. Painéis chapados ---------- */
.painel { background: var(--neblina); color: var(--araucaria); border: var(--borda) solid var(--cor-borda); }
.painel--araucaria { background: var(--araucaria); color: var(--neblina); }
.painel--pinhao    { background: var(--pinhao);    color: #fff; }  /* branco sobre Pinhão: 4,99; Neblina daria 4,42, só texto grande */
.painel--neblina   { background: var(--neblina);   color: var(--araucaria); }
.painel--musgo     { background: var(--musgo);     color: var(--araucaria); }
.painel--pinhao-claro { background: var(--pinhao-claro); color: var(--araucaria); }
.painel--cheio { position: absolute; inset: 0; border: 0; }  /* fundo de palco ou de peça */
/* .peca.sobre-escuro: a peça declara cor própria depois desta regra e ganhava;
   um título Grafite sobre Araucária ficou invisível na primeira prova. */
.sobre-escuro, .peca.sobre-escuro { color: var(--neblina); }
.sobre-escuro .rotulo { color: var(--neblina); }

/* ---------- 6. Recorte (a foto real) ---------- */
.recorte {
  display: block;
  position: absolute;
  height: auto;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
}
.recorte--sombra { filter: drop-shadow(0 10px 8px rgba(29, 35, 33, 0.22)); } /* opcional; o padrão é sem sombra */
.recorte--espelho { transform: scaleX(-1); }  /* a pessoa aponta para o lado errado: espelha a foto, não a cena */
/* Dentro de um .ator ou de uma .pilha, o recorte deixa de ser absoluto: o GSAP move
   o invólucro, e o espelho ou o empilhamento ficam no filho. */
.ator .recorte, .pilha .recorte { position: relative; left: auto; top: auto; right: auto; bottom: auto; width: 100%; }
.pilha { position: absolute; display: flex; flex-direction: column-reverse; align-items: center; will-change: transform; }
/* Foto de produto em fundo branco sem recortar: o branco some sobre o painel.
   Funciona em painel claro (Neblina, Musgo, Pinhão claro). Sobre Araucária a
   foto fica quase preta, e sobre Pinhão vira duotone terracota. */
.recorte--multiply, .multiply { mix-blend-mode: multiply; }
/* .multiply é para o GRUPO que se move (um .ator com a foto e o desenho dentro): um
   grupo com transform vira contexto próprio, e a foto lá dentro não enxerga o painel.
   O grupo inteiro multiplica, a foto não. */
.recorte--pb { filter: grayscale(1) contrast(1.05); }  /* tratamento único opcional; decidir com a Bruna antes de usar em tudo */

/* ---------- 7. Rabiscos (sprite rabiscos.svg) ---------- */
.rabisco {
  position: absolute;
  width: 12%;
  max-width: none;   /* o "img, svg { max-width: 100% }" prendia um rabisco em em dentro de um inline-block */
  height: auto;
  aspect-ratio: 1;
  color: inherit;           /* o traço é currentColor: herda do painel */
  pointer-events: none;
  overflow: visible;
}
.rabisco--pinhao { color: var(--pinhao); }
.rabisco--neblina { color: var(--neblina); }
.rabisco--araucaria { color: var(--araucaria); }
.rabisco--largo { aspect-ratio: 2 / 1; }

/* Padrão de tela galvanizada e estrutura (padroes.svg) */
.tela { fill: url(#tela-galvanizada); }
.tela--miuda { fill: url(#tela-galvanizada-miuda); }
.desenho { position: absolute; color: inherit; overflow: visible; }

/* ---------- 8. Legenda, botão, selo ---------- */
.legenda-ilustrativa {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 5;
  margin: 0;
  padding: 5px 8px;
  background: var(--neblina);
  color: var(--tela);
  border: var(--borda) solid var(--cor-borda);
  border-left: 0;
  border-bottom: 0;
  font: 700 11px/1 var(--fonte-texto);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.botao-whats {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.4rem;
  background: var(--pinhao-escuro);  /* branco sobre Pinhão escuro: 6,56 */
  color: #fff;
  border: var(--borda) solid var(--cor-borda);
  font: 700 1.0625rem/1.2 var(--fonte-texto);
  text-decoration: none;
  width: fit-content;
}
.botao-whats:hover { background: var(--pinhao); }
.botao-whats:focus-visible { outline-color: var(--araucaria); }
.botao-whats svg { width: 1.25em; height: 1.25em; fill: currentColor; }
.selo-prisma { display: inline-block; }
.selo-prisma img { height: 14px; width: auto; }

.rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding: clamp(1.25rem, 4vw, 3rem) var(--gutter);
  border: var(--borda) solid var(--cor-borda);
  border-top: 0;
}
.rodape__acao { display: flex; flex-direction: column; gap: 0.5rem; }

/* ---------- 9. Mosaico ---------- */
/* Grade de peças quadradas de tamanhos variados. O fundo da grade é a cor da
   borda, e o gap tem 1 px: as linhas entre as peças são a própria grade, como
   num mural. Cada peça fixa o próprio aspect-ratio, então as linhas ficam
   quadradas sem a grade conhecer a largura. */
.mosaico {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: var(--borda);
  background: var(--cor-borda);
  border: var(--borda) solid var(--cor-borda);
}
.peca {
  position: relative;
  overflow: hidden;
  min-width: 0;
  background: var(--neblina);
  color: var(--grafite);
  aspect-ratio: 1;
  isolation: isolate;
}
.peca--2x1 { grid-column: span 2; aspect-ratio: 2 / 1; }
.peca--1x2 { grid-row: span 2; aspect-ratio: 1 / 2; }
.peca--2x2 { grid-column: span 2; grid-row: span 2; aspect-ratio: 1; }
.peca--3x2 { grid-column: span 2; grid-row: span 2; aspect-ratio: 1; }   /* no celular vira 2x2 */
/* No celular a grade tem 2 colunas; estas sobrescrevem o tamanho só lá, para a
   soma das peças fechar linhas inteiras. */
.peca--cel-1x1 { grid-column: span 1; grid-row: span 1; aspect-ratio: 1; }
.peca--cel-2x1 { grid-column: span 2; grid-row: span 1; aspect-ratio: 2 / 1; }
.peca--cel-2x2 { grid-column: span 2; grid-row: span 2; aspect-ratio: 1; }
@media (min-width: 760px) {
  .mosaico { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mosaico--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .peca--3x2 { grid-column: span 3; aspect-ratio: 3 / 2; }
  .peca--cel-1x1, .peca--cel-2x1, .peca--cel-2x2 { grid-column: auto; grid-row: auto; aspect-ratio: 1; }
  .peca--2x1.peca--cel-1x1, .peca--2x1.peca--cel-2x2 { grid-column: span 2; aspect-ratio: 2 / 1; }
  .peca--1x2.peca--cel-2x1, .peca--1x2.peca--cel-1x1 { grid-row: span 2; aspect-ratio: 1 / 2; }
  .peca--2x2.peca--cel-2x1, .peca--2x2.peca--cel-1x1 { grid-column: span 2; grid-row: span 2; aspect-ratio: 1; }
  .peca--3x2.peca--cel-2x1, .peca--3x2.peca--cel-2x2 { grid-column: span 3; grid-row: span 2; aspect-ratio: 3 / 2; }
}
.peca__conteudo {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: clamp(0.75rem, 2.5vw, 1.5rem);
}
.peca__conteudo--topo { justify-content: flex-start; }
.peca__conteudo--centro { justify-content: center; }
.peca--cena .cena { height: 100%; border: 0; }   /* uma cena dentro de uma peça: a peça já tem a borda */

/* Número grande (preço, m²) */
.numero {
  font-family: var(--fonte-display);
  font-weight: 800;
  font-stretch: 85%;
  font-variation-settings: "opsz" 96;
  line-height: 0.85;
  letter-spacing: -0.03em;
  font-size: clamp(4rem, 18vw, 11rem);
}
.numero sup { font-size: 0.4em; vertical-align: 0.9em; letter-spacing: 0; }

/* ---------- 10. Breakpoints ---------- */
@media (max-width: 759px) {
  .cena {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }
  .cena__texto {
    border-right: 0;
    border-bottom: var(--borda) solid var(--cor-borda);
    padding: 1.25rem var(--gutter);
    gap: 0.5rem;
  }
  .cena--palco-esquerda { grid-template-columns: minmax(0, 1fr); }
  .cena--palco-esquerda .cena__texto { order: 1; border-left: 0; }
  .cena--palco-esquerda .cena__palco { order: 2; }
  .cena--presa { grid-template-rows: auto minmax(0, 1fr) auto; }
  .cena__faixa-proximo { padding: 0 var(--gutter); }
  .cena__faixa-seta { width: min(var(--cena-faixa), 64px); }
  .texto { font-size: 1rem; }
  .rabisco { width: 16%; }
}

/* ---------- 11. Movimento reduzido ---------- */
/* Sem animação: cada cena vira um quadro estático, completo, um embaixo do
   outro. O base.js deixa as timelines no estado final e não cria ScrollTrigger. */
@media (prefers-reduced-motion: reduce) {
  /* 70 svh mais a faixa de continuação: sem somar, a faixa tirava 118 px de um palco
     que no celular já cortava a janela e a pessoa (prova de 16/10). */
  .cena { height: auto; min-height: calc(70vh + var(--cena-faixa)); }
  .cena__palco { min-height: 60vw; }
  @media (min-width: 760px) { .cena__palco { min-height: 0; } .cena { height: calc(100svh - var(--cabecalho-altura)); } }
}

/* ---------- 12. Modo de conferência (?cena=N) ---------- */
html.modo-conferencia { scroll-behavior: auto; }
/* No modo estático o que vinha antes some, e a cena vira a primeira coisa da página:
   recebe a borda de cima que só a primeira cena tem. */
html.modo-conferencia .cena--conferida { border-top: var(--borda) solid var(--cor-borda); }