/* Sistema visual de base — portfólio Eric Vellar
   Toda decisão de tipografia, cor, grade e espaço mora aqui.
   As seções do site só consomem estas variáveis.

   Como funciona: cada valor ajustável tem duas versões,
   -site (tela de 768px para cima) e -cel (celular).
   O site lê sempre o nome curto (ex.: --t-voz), que aponta
   para a versão certa conforme a tela. O painel de ajustes
   (tecla E na página do sistema) mexe nas versões -site e -cel.
   Ajustes do Eric pelo painel aplicados em 2026-10-29 (card, micro, voz, sussurro, hero e home no celular). */

/* Fontes locais (arquivos e licenças em ../fontes) */
@font-face { font-family: "Ronzino"; src: url("../fontes/ronzino/Ronzino-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Ronzino"; src: url("../fontes/ronzino/Ronzino-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Aileron"; src: url("../fontes/aileron/Aileron-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Aileron"; src: url("../fontes/aileron/Aileron-SemiBold.otf") format("opentype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Teranoptia"; src: url("../fontes/teranoptia/Teranoptia-Furiae.woff2") format("woff2"); font-display: block; }

:root {
  /* Fonte ------------------------------------------------------------ */
  --fonte: "Ronzino", system-ui, sans-serif;    /* escolhida em 2026-10-29 (antes Instrument Sans); pode mudar */
  --fonte-grafismo: "Teranoptia";
  --peso-regular: 400;

  /* Estilos de texto: tamanho · entrelinha · letras (site / celular)
     Letras: padrão -0.025em no site e -0.02em no celular (decisão de 2026-10-30); a voz fica mais apertada. */
  --voz-tam-site: 44px;        --voz-tam-cel: 30px;          /* apresentação, abas, contato do rodapé */
  --voz-entre-site: 1.14;      --voz-entre-cel: 1.09;
  --voz-letras-site: -0.035em; --voz-letras-cel: -0.035em;
  --voz-peso-site: 500;        --voz-peso-cel: 500;

  --case-tam-site: 21px;       --case-tam-cel: 18px;         /* textos entre mídias e título do case */
  --case-entre-site: 1.4;      --case-entre-cel: 1.4;
  --case-letras-site: -0.025em; --case-letras-cel: -0.02em;

  --base-tam-site: 17px;       --base-tam-cel: 16px;         /* texto corrido, bio */
  --base-entre-site: 1.45;     --base-entre-cel: 1.45;
  --base-letras-site: -0.025em; --base-letras-cel: -0.02em;

  --sussurro-tam-site: 14px;   --sussurro-tam-cel: 14px;     /* hero, menu, header, cards */
  --sussurro-entre-site: 1.3;  --sussurro-entre-cel: 1.3;
  --sussurro-letras-site: -0.025em; --sussurro-letras-cel: -0.02em;

  --titulo-tam-site: 44px;     --titulo-tam-cel: 30px;       /* títulos de seção: Acervo, Trabalhos */
  --titulo-entre-site: 1.1;    --titulo-entre-cel: 1.1;
  --titulo-letras-site: -0.035em; --titulo-letras-cel: -0.035em;
  --titulo-peso-site: 500;     --titulo-peso-cel: 500;

  --header-tam-site: 14px;     --header-tam-cel: 13px;       /* menu, idioma e botão do header (antes usava o sussurro, 14px) */
  --header-entre-site: 1.22;   --header-entre-cel: 1.3;
  --header-letras-site: -0.025em; --header-letras-cel: -0.02em;

  --micro-tam-site: 12px;      --micro-tam-cel: 11px;        /* tags */
  --micro-entre-site: 1;       --micro-entre-cel: 1;
  --micro-letras-site: -0.025em; --micro-letras-cel: -0.02em;

  /* Espaços por lugar (site / celular) */
  --header-topo-site: 24px;          --header-topo-cel: 10px;          /* topo da tela até o header */
  --hero-altura-site: 90vh;          --hero-altura-cel: 100vh;
  --apresentacao-topo-site: 30px;   --apresentacao-topo-cel: 80px;    /* header até a apresentação */
  --apresentacao-abas-site: 30px;   --apresentacao-abas-cel: 156px;    /* apresentação até a faixa do acervo */
  --abas-cards-site: 24px;           --abas-cards-cel: 16px;           /* abas até os cards */

  --faixa-altura-site: 341px;        --faixa-altura-cel: 220px;        /* altura das peças na faixa do acervo */
  --faixa-titulo-site: 16px;         --faixa-titulo-cel: 12px;         /* rótulo até as peças */
  --faixa-entre-site: 10px;          --faixa-entre-cel: 10px;          /* entre uma peça e outra */
  --faixa-velocidade-site: 85px;     --faixa-velocidade-cel: 22px;     /* quanto anda por segundo */
  --acervo-colunas-site: 4;          --acervo-colunas-cel: 2;          /* colunas da galeria aberta */
  --acervo-entre-site: 10px;         --acervo-entre-cel: 8px;          /* espaço entre peças na galeria aberta */
  --galeria-colunas-site: 2;         --galeria-colunas-cel: 2;         /* colunas da Galeria (peças em proporção original; destaques ocupam 2) */
  --galeria-borda-site: 180px;       --galeria-borda-cel: 16px;        /* respiro nas laterais da Galeria */
  --galeria-entre-site: 72px;        --galeria-entre-cel: 16px;        /* espaço entre colunas da Galeria */
  --galeria-linhas-site: 143px;       --galeria-linhas-cel: 40px;       /* espaço entre uma peça (com legenda) e a de baixo */
  --galeria-escala-site: 1;          --galeria-escala-cel: 1;          /* largura da peça comum, em fração da coluna */
  --galeria-destaque-site: 0.9;      --galeria-destaque-cel: 1;        /* largura do destaque, em fração de 2 colunas */
  --galeria-fim-site: 200px;        --galeria-fim-cel: 96px;          /* respiro entre a última peça da Galeria e o que vem depois (a hero) */
  --galeria-altura-destaque-site: 88; --galeria-altura-destaque-cel: 70; /* altura máxima de um destaque, em % da altura da tela */
  --galeria-altura-site: 64;         --galeria-altura-cel: 56;         /* altura máxima de qualquer peça, em % da altura da tela */
  --faixa-trabalhos-site: 36px;     --faixa-trabalhos-cel: 80px;      /* faixa do acervo até a seleção de trabalhos */

  --card-imagem-titulo-site: 12px;   --card-imagem-titulo-cel: 12px;
  --card-titulo-desc-site: 4px;      --card-titulo-desc-cel: 4px;
  --card-desc-tags-site: 12px;       --card-desc-tags-cel: 14px;
  --card-entre-site: 56px;            --card-entre-cel: 40px;           /* entre um card e o próximo (linha de baixo) */
  --card-proporcao-site: 1.3333;      --card-proporcao-cel: 1.3333;     /* formato de todas as capas dos projetos (largura ÷ altura; 1.3333 = 4:3) */

  --case-titulo-site: 24px;          --case-titulo-cel: 16px;          /* acima e abaixo do título do case */
  --case-midias-site: 12px;          --case-midias-cel: 10px;          /* entre imagens do case */
  --case-respiro-site: 104px;        --case-respiro-cel: 72px;         /* antes e depois dos textos */

  --secao-entre-site: 168px;         --secao-entre-cel: 112px;
  --info-borda-site: 168px;          --info-borda-cel: 112px;          /* topo e base da Info */
  --info-blocos-site: 40px;          --info-blocos-cel: 32px;
  --rodape-topo-site: 104px;         --rodape-topo-cel: 72px;
  --rodape-links-site: 104px;        --rodape-links-cel: 64px;

  /* Grade e mídia (site / celular) */
  --margem-site: 24px;               --margem-cel: 16px;
  --gutter-site: 12px;               --gutter-cel: 10px;
  --raio-site: 8px;                  --raio-cel: 8px;
  --grafismo-tam-site: 22px;         --grafismo-tam-cel: 18px;
  --logo-tam-site: 44px;             --logo-tam-cel: 36px;          /* antes 56 / 44 */

  /* Cor (igual nas duas telas) */
  --cor-fundo: #e9e8e5;        /* cinza bem claro (antes branco #ffffff) */
  --cor-tinta: #111111;        /* preto (antes #1a1612) */
  --cor-apagada: #7b7873;      /* abas inativas, metadados */
  --cor-linha: #d3d0cb;        /* divisórias */
  --cor-placeholder: #dddbd6;  /* fundo de mídia enquanto carrega */
  --cor-marrom: #2b1b13;       /* fundo da página Info (antes #4a2f22, Eric pediu mais escuro) */
  --cor-marrom-tinta: #f1e8db; /* texto sobre o marrom */
  --cor-marrom-apagada: #a38b77;

  /* Acentos pontuais (tags etc.): pastéis das referências de 2026-10-31 */
  --acento-amarelo: #f2ef7c;
  --acento-azul: #cfe5f7;
  --acento-verde: #a6e3b6;
  --acento-lilas: #ddd1f6;
  --acento-tinta: #1a1612;       /* texto sobre os acentos (sempre escuro) */
  --acento-texto: #2e9a55;       /* texto em destaque (ref.: RCA): título do case */

  /* Hero "brasa" (2026-10-31): só a hero é marrom com texto vermelho, apertado, com leve blur e ruído */
  --brasa-fundo: #1a0d07;       /* antes #2a1810; o Eric pediu mais escuro */
  --brasa-tinta: #e8432c;
  --brasa-apagada: #a0563f;
  --brasa-brilho: 0.35;          /* força do blur/brilho nas letras (0 a 1) */

  /* Escala de espaço interna (paddings de botões, tags etc.) */
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 24px;
  --e-6: 40px;
  --e-7: 64px;
  --e-8: 104px;
  --e-9: 168px;

  --colunas: 12;
  --flutuante-borda: 16px;     /* distância do header flutuante até a borda da tela (teste da home) */
  --faixa-header: 128px;       /* faixa reservada à esquerda para o header lateral (teste da home), no site */
  --hero-cinza: #d6d4d0;       /* (antigo) fundo cinza da hero no meio */
  --hero-topo: #0c0c0c;        /* degradê da hero no meio: em cima, o preto da galeria */
  --hero-meio: #e8432c;        /*   no meio, o vermelho */
  --hero-base: #e9e8e5;        /*   embaixo, o claro dos projetos */
  --hero-rotulos: 15vh;        /* distância de "↑ Galeria" e "Projetos ↓" até as bordas da hero */
  --raio-pilula: 999px;

  /* Movimento */
  --curva: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-curta: 180ms;
  --dur-media: 420ms;
  /* movimento (site / celular): quanto dura o "aparecer" de cada coisa ao entrar na tela, de quanto
     ela sobe enquanto aparece, e o atraso entre uma coisa e a próxima que entram juntas */
  --mov-dur-site: 900ms;       --mov-dur-cel: 900ms;
  --mov-desloc-site: 28px;     --mov-desloc-cel: 20px;
  --mov-cascata-site: 80ms;    --mov-cascata-cel: 80ms;
  /* luz que segue o mouse na hero: tamanho (raio) e força (0 a 1); no celular não aparece */
  --hero-luz-tamanho-site: 170px;  --hero-luz-tamanho-cel: 170px;
  --hero-luz-forca-site: 0.9;      --hero-luz-forca-cel: 0.9;
  /* degradê da hero: metade da faixa de vermelho puro no meio, e quanto dura cada passagem (preto→vermelho, vermelho→claro) */
  --hero-vermelho-site: 4%;        --hero-vermelho-cel: 4%;
  --hero-passagem-site: 22%;       --hero-passagem-cel: 22%;
}

/* Nomes curtos que o site usa: versão site ------------------------------ */
:root {
  --t-voz: var(--voz-tam-site);       --entre-voz: var(--voz-entre-site);       --track-voz: var(--voz-letras-site);  --peso-voz: var(--voz-peso-site);
  --t-case: var(--case-tam-site);     --entre-case: var(--case-entre-site);     --track-case: var(--case-letras-site);
  --t-base: var(--base-tam-site);     --entre-base: var(--base-entre-site);     --track-base: var(--base-letras-site);
  --t-sussurro: var(--sussurro-tam-site); --entre-sussurro: var(--sussurro-entre-site); --track-sussurro: var(--sussurro-letras-site);
  --t-titulo: var(--titulo-tam-site); --entre-titulo: var(--titulo-entre-site); --track-titulo: var(--titulo-letras-site); --peso-titulo: var(--titulo-peso-site);
  --t-header: var(--header-tam-site); --entre-header: var(--header-entre-site); --track-header: var(--header-letras-site);
  --t-micro: var(--micro-tam-site);   --entre-micro: var(--micro-entre-site);   --track-micro: var(--micro-letras-site);

  --header-topo: var(--header-topo-site);
  --hero-altura: var(--hero-altura-site);
  --mov-dur: var(--mov-dur-site); --mov-desloc: var(--mov-desloc-site); --mov-cascata: var(--mov-cascata-site);
  --hero-luz-tamanho: var(--hero-luz-tamanho-site); --hero-luz-forca: var(--hero-luz-forca-site);
  --hero-vermelho: var(--hero-vermelho-site); --hero-passagem: var(--hero-passagem-site);
  --apresentacao-topo: var(--apresentacao-topo-site);
  --apresentacao-abas: var(--apresentacao-abas-site);
  --abas-cards: var(--abas-cards-site);
  --faixa-altura: var(--faixa-altura-site);
  --faixa-titulo: var(--faixa-titulo-site);
  --faixa-entre: var(--faixa-entre-site);
  --faixa-velocidade: var(--faixa-velocidade-site);
  --faixa-trabalhos: var(--faixa-trabalhos-site);
  --acervo-colunas: var(--acervo-colunas-site);
  --acervo-entre: var(--acervo-entre-site);
  --galeria-fim: var(--galeria-fim-site); --galeria-borda: var(--galeria-borda-site); --galeria-colunas: var(--galeria-colunas-site); --galeria-entre: var(--galeria-entre-site); --galeria-linhas: var(--galeria-linhas-site);
  --galeria-escala: var(--galeria-escala-site); --galeria-destaque: var(--galeria-destaque-site); --galeria-altura: var(--galeria-altura-site); --galeria-altura-destaque: var(--galeria-altura-destaque-site);
  --card-imagem-titulo: var(--card-imagem-titulo-site);
  --card-titulo-desc: var(--card-titulo-desc-site);
  --card-desc-tags: var(--card-desc-tags-site);
  --card-entre: var(--card-entre-site);
  --card-proporcao: var(--card-proporcao-site);
  --case-titulo: var(--case-titulo-site);
  --case-midias: var(--case-midias-site);
  --case-respiro: var(--case-respiro-site);
  --secao-entre: var(--secao-entre-site);
  --info-borda: var(--info-borda-site);
  --info-blocos: var(--info-blocos-site);
  --rodape-topo: var(--rodape-topo-site);
  --rodape-links: var(--rodape-links-site);

  --margem: var(--margem-site);
  --gutter: var(--gutter-site);
  --raio: var(--raio-site);
  --t-grafismo: var(--grafismo-tam-site);
  --logo-tam: var(--logo-tam-site);
}

/* Nomes curtos: versão celular ------------------------------------------ */
@media (max-width: 767px) {
  :root {
    --colunas: 4;

    --t-voz: var(--voz-tam-cel);       --entre-voz: var(--voz-entre-cel);       --track-voz: var(--voz-letras-cel);  --peso-voz: var(--voz-peso-cel);
    --t-case: var(--case-tam-cel);     --entre-case: var(--case-entre-cel);     --track-case: var(--case-letras-cel);
    --t-base: var(--base-tam-cel);     --entre-base: var(--base-entre-cel);     --track-base: var(--base-letras-cel);
    --t-sussurro: var(--sussurro-tam-cel); --entre-sussurro: var(--sussurro-entre-cel); --track-sussurro: var(--sussurro-letras-cel);
    --t-titulo: var(--titulo-tam-cel); --entre-titulo: var(--titulo-entre-cel); --track-titulo: var(--titulo-letras-cel); --peso-titulo: var(--titulo-peso-cel);
    --t-header: var(--header-tam-cel); --entre-header: var(--header-entre-cel); --track-header: var(--header-letras-cel);
    --t-micro: var(--micro-tam-cel);   --entre-micro: var(--micro-entre-cel);   --track-micro: var(--micro-letras-cel);

    --header-topo: var(--header-topo-cel);
    --hero-altura: var(--hero-altura-cel);
    --mov-dur: var(--mov-dur-cel); --mov-desloc: var(--mov-desloc-cel); --mov-cascata: var(--mov-cascata-cel);
    --hero-luz-tamanho: var(--hero-luz-tamanho-cel); --hero-luz-forca: var(--hero-luz-forca-cel);
    --hero-vermelho: var(--hero-vermelho-cel); --hero-passagem: var(--hero-passagem-cel);
    --apresentacao-topo: var(--apresentacao-topo-cel);
    --apresentacao-abas: var(--apresentacao-abas-cel);
    --abas-cards: var(--abas-cards-cel);
    --faixa-altura: var(--faixa-altura-cel);
    --faixa-titulo: var(--faixa-titulo-cel);
    --faixa-entre: var(--faixa-entre-cel);
    --faixa-velocidade: var(--faixa-velocidade-cel);
    --faixa-trabalhos: var(--faixa-trabalhos-cel);
    --acervo-colunas: var(--acervo-colunas-cel);
    --acervo-entre: var(--acervo-entre-cel);
    --galeria-fim: var(--galeria-fim-cel); --galeria-borda: var(--galeria-borda-cel); --galeria-colunas: var(--galeria-colunas-cel); --galeria-entre: var(--galeria-entre-cel); --galeria-linhas: var(--galeria-linhas-cel);
    --galeria-escala: var(--galeria-escala-cel); --galeria-destaque: var(--galeria-destaque-cel); --galeria-altura: var(--galeria-altura-cel); --galeria-altura-destaque: var(--galeria-altura-destaque-cel);
    --card-imagem-titulo: var(--card-imagem-titulo-cel);
    --card-titulo-desc: var(--card-titulo-desc-cel);
    --card-desc-tags: var(--card-desc-tags-cel);
    --card-entre: var(--card-entre-cel);
    --card-proporcao: var(--card-proporcao-cel);
    --case-titulo: var(--case-titulo-cel);
    --case-midias: var(--case-midias-cel);
    --case-respiro: var(--case-respiro-cel);
    --secao-entre: var(--secao-entre-cel);
    --info-borda: var(--info-borda-cel);
    --info-blocos: var(--info-blocos-cel);
    --rodape-topo: var(--rodape-topo-cel);
    --rodape-links: var(--rodape-links-cel);

    --margem: var(--margem-cel);
    --gutter: var(--gutter-cel);
    --raio: var(--raio-cel);
    --t-grafismo: var(--grafismo-tam-cel);
    --logo-tam: var(--logo-tam-cel);
  }
}

/* Tema marrom (página Sobre): a página inteira inverte para o marrom ------ */
[data-tema="marrom"] {
  --cor-fundo: var(--cor-marrom);
  --cor-tinta: var(--cor-marrom-tinta);
  --cor-apagada: var(--cor-marrom-apagada);
  --cor-linha: rgba(241, 232, 219, 0.18);
  --cor-placeholder: rgba(241, 232, 219, 0.08);
}

/* Header lateral (teste da home): o conteúdo começa depois da faixa reservada a ele */
[data-layout="lateral"] { --margem-esq: calc(var(--margem) + var(--faixa-header)); }
@media (max-width: 767px) { [data-layout="lateral"] { --margem-esq: var(--margem); } }

/* Ponto do meio do degradê da hero (registrado para poder ser animado) */
@property --hero-centro { syntax: '<percentage>'; inherits: false; initial-value: 50%; }

/* ── Movimento ──────────────────────────────────────────────────────────────
   (o script fica em layouts/Base.astro) Ao entrar na tela, títulos, peças, cards e textos
   aparecem subindo de leve, em cascata. Imagens surgem suavemente quando terminam de carregar.
   Quem pede menos movimento no sistema não vê nada disso. */
@media (prefers-reduced-motion: no-preference) {
  .js-mov [data-mov] {
    opacity: 0; translate: 0 var(--mov-desloc);
    transition: opacity var(--mov-dur) var(--curva), translate var(--mov-dur) var(--curva);
    transition-delay: calc(var(--mov-i, 0) * var(--mov-cascata));
  }
  .js-mov [data-mov].visto { opacity: 1; translate: 0 0; }
  /* títulos: a letra sobe por trás de uma janela */
  .js-mov .titulo-secao.mascarado[data-mov] { opacity: 1; translate: none; }
  .mascarado .mascara { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.12em; margin-bottom: -0.12em; }
  .mascarado .mascara > span { display: inline-block; translate: 0 108%; transition: translate 1100ms var(--curva); transition-delay: calc(var(--mov-i, 0) * var(--mov-cascata)); }
  .mascarado.visto .mascara > span { translate: 0 0; }
  .js-mov img.carregando { opacity: 0; }
  .js-mov img { transition: opacity 700ms var(--curva); }
  /* troca de página: as duas se fundem */
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 420ms; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
}

/* Encaixe ao rolar: desligado (2026-11-09). No Safari ele brigava com a rolagem do site:
   ao voltar de outra página a home caía no começo da galeria (topo), e o clique em "Início"
   parava no meio do caminho. Para religar, use scroll-snap-type no html e scroll-snap-align nas seções. */
html.rolando { scroll-behavior: auto; }

/* Tema preto: a parte de cima da home de teste (rodapé espelhado e galeria) */
[data-tema="preto"] {
  --cor-fundo: #0c0c0c;
  --cor-tinta: #e9e8e5;
  --cor-apagada: #77736d;
  --cor-linha: rgba(233, 232, 229, 0.14);
  --cor-placeholder: rgba(233, 232, 229, 0.06);
  background: var(--cor-fundo); color: var(--cor-tinta);
}

/* Tags com cor pontual: a tag de "onde" (Erro Studio, Mediacraft...) ganha um pastel */
.tag[data-cor] { background: var(--cor-acento) !important; border-color: transparent !important; color: var(--acento-tinta) !important; }
.tag[data-cor="amarelo"] { --cor-acento: var(--acento-amarelo); }
.tag[data-cor="azul"] { --cor-acento: var(--acento-azul); }
.tag[data-cor="verde"] { --cor-acento: var(--acento-verde); }
.tag[data-cor="lilas"] { --cor-acento: var(--acento-lilas); }


/* Página com header lateral: o conteúdo começa depois da coluna */