/* =====================================================================
   PORTFÓLIO RODRIGO LISCHT — ESTILO
   =====================================================================

   PAINEL DE CONTROLE DA IDENTIDADE
   Tudo que define a "cara" do site mora neste primeiro bloco. Trocar uma
   cor ou uma fonte aqui muda o site inteiro de uma vez, sem caçar pelo
   resto do arquivo.
   ===================================================================== */

:root {
  /* ---------- CORES ----------
     O fundo é um preto grafite, não o preto puro: preto absoluto com
     branco absoluto "vibra" nos olhos em textos pequenos e fica com cara
     de tela desligada. O branco é levemente quente, como papel. */
  --cor-fundo: #121212;
  --cor-fundo-imagem: #1c1c1c;      /* aparece enquanto uma foto carrega */
  --cor-texto: #f2f1ed;
  --cor-texto-suave: #a8a7a2;       /* rótulos; contraste ~8:1 com o fundo */
  --cor-linha: #6e6d69;             /* linhas finas separadoras */

  /* ---------- FONTES ----------
     Para trocar a fonte do nome, mude as DUAS linhas abaixo juntas.
     A "escala" é o número que faz o nome ocupar a largura inteira da
     tela; cada fonte tem uma largura diferente, então cada uma tem o seu.

       Opção A (Fraunces):  "Titulo Fraunces"  | escala 0.183 | escala-2-linhas 0.328
       Opção B (Kalnia):    "Titulo Kalnia"    | escala 0.138 | escala-2-linhas 0.257
  */
  --fonte-titulo: "Titulo Fraunces", "Times New Roman", serif;
  --titulo-escala: 0.183;
  --titulo-escala-2-linhas: 0.328;

  --fonte-texto: "Syne", "Helvetica Neue", Arial, sans-serif;

  /* ---------- MEDIDAS ----------
     Margem lateral que cresce com a tela: 16px no celular, até 48px em
     monitores grandes. Todo o site se alinha por ela. */
  --margem: clamp(16px, 3.2vw, 48px);
  --texto-pequeno: 0.8125rem;       /* 13px: etiquetas e rótulos */
  --texto-base: 0.9375rem;          /* 15px: ficha, rodapé */
}

/* ---------- ARQUIVOS DE FONTE ----------
   Atenção: o servidor manda os navegadores guardarem as fontes por um
   ano (regra no vercel.json), porque elas quase nunca mudam. Por isso,
   para trocar uma fonte, use um NOME DE ARQUIVO NOVO — nunca substitua
   um arquivo mantendo o mesmo nome, ou quem já visitou o site continua
   vendo a antiga.
   As fontes ficam dentro do próprio site em vez de vir do Google: é uma
   conexão a menos antes da página aparecer, e o site funciona até aberto
   sem internet. Só a fonte realmente usada é baixada pelo navegador.
   "swap" mostra o texto na hora com uma fonte do sistema e troca quando
   a fonte chega — nunca fica uma página sem texto esperando. */
@font-face {
  font-family: "Titulo Fraunces";
  src: url("../fontes/titulo-fraunces.woff2") format("woff2");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Titulo Kalnia";
  src: url("../fontes/titulo-kalnia.woff2") format("woff2");
  font-weight: 300;
  font-display: swap;
}
/* A Syne vem num arquivo único que contém todos os pesos (400 a 800).
   Usamos só 400 e 600 — poucos pesos, bem usados. */
@font-face {
  font-family: "Syne";
  src: url("../fontes/syne.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}


/* =====================================================================
   BASE
   ===================================================================== */

/* Regra de segurança desde o primeiro dia: qualquer elemento marcado
   como escondido fica escondido de verdade, mesmo que outra regra tente
   mostrá-lo. Sem isso, o atributo "hidden" perde para qualquer classe. */
[hidden] { display: none !important; }

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

html {
  /* Rolagem suave ao clicar em "Trabalhos". Quem pediu menos movimento
     ao sistema continua com o pulo direto (regra no fim do arquivo). */
  scroll-behavior: smooth;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--fonte-texto);
  font-size: var(--texto-base);
  line-height: 1.5;
  font-weight: 400;
  /* Números com largura igual e todos da mesma altura: alinham em colunas
     (ano, telefone, hora). A Syne vem com números "de texto", que sobem e
     descem, e ficam tortos numa ficha técnica. */
  font-variant-numeric: lining-nums tabular-nums;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

/* Sublinhado fino que aparece ao passar o mouse: discreto, mas deixa
   claro que é clicável. É uma linha que "cresce" da esquerda (transform),
   porque animar outra propriedade engasgaria a página. */
.link { position: relative; display: inline-block; }
.link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.05em;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}
.link:hover::after, .link:focus-visible::after { transform: scaleX(1); }

/* Quem navega pelo teclado precisa ver onde está. */
:focus-visible { outline: 1px solid var(--cor-texto); outline-offset: 4px; }

/* Rótulo pequeno em caixa alta, usado em etiquetas e fichas. */
.rotulo {
  font-size: var(--texto-pequeno);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}


/* =====================================================================
   CABEÇALHO (igual em todas as páginas)
   Não fica preso no topo: uma faixa fixa por cima das fotos brigaria
   com as imagens e custaria desempenho na rolagem. Os mesmos links
   estão no rodapé e no fim da home.
   ===================================================================== */

.cabecalho {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  gap: 1rem;
  padding: 20px var(--margem);
}
.cabecalho__nome { justify-self: start; font-weight: 600; }
.cabecalho__local { justify-self: center; margin: 0; color: var(--cor-texto-suave); }
.cabecalho__menu {
  justify-self: end;
  display: flex;
  gap: 1.75rem;
  margin: 0; padding: 0; list-style: none;
}


/* =====================================================================
   HOME — ABERTURA (nome + ficha)
   ===================================================================== */

.abertura { padding: clamp(24px, 6vh, 72px) var(--margem) 0; }

/* A caixa do nome se declara "medível": assim o tamanho da letra pode
   ser calculado a partir da largura dela (unidade cqi), e o nome ocupa
   a largura exata, sem depender de JavaScript. */
.abertura__caixa-nome { container-type: inline-size; }

.nome {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: 300;
  line-height: 0.95;
  /* Folga embaixo para a perna do "g" não encostar na linha fina. */
  padding-bottom: 0.1em;
  white-space: nowrap;
  letter-spacing: -0.005em;
  /* Plano B para navegadores antigos, que não entendem cqi: calcula
     pela largura da tela, com uma folga para a barra de rolagem. */
  font-size: calc(94vw * var(--titulo-escala));
  font-size: calc(100cqi * var(--titulo-escala));
}
.nome span { display: inline-block; }

/* No celular, o nome em uma linha só ficaria miúdo. Quebramos em duas
   linhas, e "Rodrigo" passa a ocupar a largura inteira. */
@media (max-width: 640px) {
  .nome span { display: block; }
  .nome {
    font-size: calc(90vw * var(--titulo-escala-2-linhas));
    font-size: calc(100cqi * var(--titulo-escala-2-linhas));
  }
}

/* A linha fina sob o nome, como no Flávio Cherem. */
.abertura__linha {
  border: 0;
  border-top: 1px solid var(--cor-linha);
  margin: clamp(20px, 3vw, 40px) 0 0;
}

/* Ficha em três colunas: rótulo à esquerda, informação no meio,
   complemento alinhado à direita. É daqui que vem o "técnico". */
.ficha {
  margin: 0;
  padding: 24px 0 0;
}
.ficha__linha {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0 1.5rem;
  padding: 0 0 clamp(28px, 4vw, 52px);
}
.ficha dt { color: var(--cor-texto-suave); }
.ficha dd { margin: 0; }
.ficha__direita { text-align: right; }
.ficha__lista { list-style: none; margin: 0; padding: 0; }
.ficha__suave { color: var(--cor-texto-suave); }

@media (max-width: 640px) {
  .ficha__linha { grid-template-columns: 1fr; gap: 2px; padding-bottom: 22px; }
  .ficha__direita { text-align: left; }
}


/* =====================================================================
   HOME — PROJETOS (um por tela)
   ===================================================================== */

.projetos {
  display: grid;
  gap: var(--margem);
  padding: clamp(16px, 4vw, 48px) var(--margem) 0;
  margin: 0;
  list-style: none;
}

.projeto {
  position: relative;
  display: grid;
  place-items: center;
  /* Quase a tela inteira: "svh" desconta as barras do navegador do
     celular, que em "vh" cortariam as etiquetas de baixo. A primeira
     linha é o plano B para navegadores antigos. */
  height: 88vh;
  height: 88svh;
  min-height: 420px;
  overflow: hidden;
  background: var(--cor-fundo-imagem);
  isolation: isolate;
}

.projeto__imagem {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  /* Só "transform" é animado: é o único tipo de movimento que o
     navegador faz sem recalcular a página, então não engasga. */
  transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.projeto:hover .projeto__imagem { transform: scale(1.03); }

/* Véu escuro sobre a foto. Mais forte embaixo, onde ficam as etiquetas
   pequenas: sem ele, uma foto clara deixaria o texto ilegível. */
.projeto::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgb(0 0 0 / 0.72) 0%, rgb(0 0 0 / 0) 30%),
    rgb(0 0 0 / 0.45);
}

.projeto__centro {
  text-align: center;
  padding: 0 var(--margem);
  /* Sombra difusa e fixa atrás do título: protege a leitura quando a foto
     do projeto for clara no meio. Não se move, então não pesa. */
  text-shadow: 0 0 28px rgb(0 0 0 / 0.35);
}

.projeto__titulo {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: 300;
  font-size: clamp(2.75rem, 8.5vw, 9rem);
  line-height: 1;
  text-wrap: balance;
}
.projeto__cliente {
  margin: 0.9em 0 0;
  font-size: var(--texto-pequeno);
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

/* Três etiquetas no rodapé da imagem: número, tipo de peça e ano. */
.projeto__etiquetas {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  padding: 20px clamp(16px, 2.4vw, 32px);
  margin: 0;
  list-style: none;
}
.projeto__etiquetas li:nth-child(2) { justify-self: center; }
.projeto__etiquetas li:nth-child(3) { justify-self: end; }

@media (max-width: 640px) {
  .projeto { height: 78vh; height: 78svh; }
  /* No celular não cabem três etiquetas numa linha: a do meio (tipo de
     peça, a mais longa) sai, e ficam número e ano nas pontas. */
  .projeto__etiquetas li:nth-child(2) { display: none; }
}


/* =====================================================================
   HOME — CHAMADA PARA O SOBRE
   ===================================================================== */

.chamada {
  padding: clamp(64px, 12vw, 160px) var(--margem);
}
.chamada a {
  font-family: var(--fonte-titulo);
  font-weight: 300;
  font-size: clamp(2.25rem, 6vw, 5.5rem);
  line-height: 1;
}


/* =====================================================================
   RODAPÉ (igual em todas as páginas)
   ===================================================================== */

.rodape {
  margin: 0 var(--margem);
  padding: 24px 0 40px;
  border-top: 1px solid var(--cor-linha);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.5rem;
}
.rodape ul { list-style: none; margin: 0; padding: 0; }
.rodape__direita { margin: 0; text-align: right; color: var(--cor-texto-suave); }

@media (max-width: 640px) {
  .rodape { grid-template-columns: 1fr; gap: 1.25rem; }
  .rodape__direita { text-align: left; }
}

/* Cabeçalho no celular: nome e menu na primeira linha, cidade e hora
   numa linha de baixo, para nada se espremer. */
@media (max-width: 640px) {
  .cabecalho { grid-template-columns: 1fr auto; row-gap: 4px; }
  .cabecalho__local { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
  .cabecalho__menu { gap: 1.25rem; }
}

/* Quem pediu ao sistema menos movimento não vê nem o zoom das fotos.
   O aviso de emergência fica de fora: o "movimento" dele é só aparecer
   depois de alguns segundos, e sem isso ele piscaria na tela. */
@media (prefers-reduced-motion: reduce) {
  *:not(.aviso) { transition: none !important; animation: none !important; }
}


/* =====================================================================
   ETAPA 2 — PEÇAS COMPARTILHADAS
   ===================================================================== */

/* Página em que a pessoa está: o link do menu fica sublinhado, para ela
   saber onde está sem precisar de outro enfeite. */
.cabecalho__menu [aria-current="page"]::after { transform: scaleX(1); }

/* Bloco padrão de conteúdo: mesma margem lateral do resto do site e um
   respiro generoso em cima, como a troca de seção numa revista. */
.secao { padding: clamp(56px, 9vw, 128px) var(--margem) 0; }

/* Título de seção pequeno, em caixa alta, com a linha fina em cima. É o
   mesmo "vocabulário" da ficha da home. */
.secao__rotulo {
  margin: 0 0 clamp(16px, 2vw, 28px);
  padding-top: 14px;
  border-top: 1px solid var(--cor-linha);
  color: var(--cor-texto-suave);
  font-weight: 400;
}

/* Linhas de tabela: usadas em experiência, formação, reconhecimento.
   Três colunas iguais às da ficha da home; a última alinha à direita. */
.linhas { list-style: none; margin: 0; padding: 0; }
.linhas li {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0 1.5rem;
  padding: 14px 0;
  border-bottom: 1px solid rgb(255 255 255 / 0.08);
}
.linhas li > :first-child { color: var(--cor-texto-suave); }
.linhas li > :last-child { text-align: right; }
@media (max-width: 640px) {
  .linhas li { grid-template-columns: 1fr; gap: 2px; }
  .linhas li > :last-child { text-align: left; }
}


/* =====================================================================
   PÁGINA DE PROJETO
   ===================================================================== */

/* A capa é o mesmo cartão da home, do mesmo tamanho e no mesmo lugar:
   quem clica tem a sensação de "entrar" na imagem, não de trocar de
   página. Aqui ela não é link, então não reage ao mouse. */
.capa { padding: clamp(16px, 4vw, 48px) var(--margem) 0; }
.projeto--capa { cursor: default; }
.projeto--capa:hover .projeto__imagem { transform: none; }

/* Ficha técnica: rótulo pequeno em cima, informação embaixo, tudo em
   colunas. Seis colunas no computador (uma por campo); em telas médias
   viram duas fileiras de três, e no celular, três fileiras de dois. */
.ficha-tecnica {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px 1.5rem;
  margin: 0;
}
.ficha-tecnica dt { color: var(--cor-texto-suave); margin-bottom: 6px; }
.ficha-tecnica dd { margin: 0; }
.ficha-tecnica ul { list-style: none; margin: 0; padding: 0; }
@media (max-width: 1100px) { .ficha-tecnica { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .ficha-tecnica { grid-template-columns: repeat(2, 1fr); } }

/* Desafio, Ideia e Resultado lado a lado. O texto tem largura limitada:
   linhas longas demais cansam a leitura. */
.caso {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px clamp(24px, 3vw, 56px);
}
.caso h2 { margin: 0 0 12px; color: var(--cor-texto-suave); font-weight: 400; }
.caso p {
  margin: 0;
  max-width: 34em;
  font-size: 1.0625rem;
  line-height: 1.6;
}
@media (max-width: 900px) { .caso { grid-template-columns: 1fr; } }

/* Mídias do projeto. Duas colunas: uma peça pode ocupar a largura toda
   ou metade. Cada peça escolhe a própria proporção. */
.midias {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 1.6vw, 24px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.midia { margin: 0; background: var(--cor-fundo-imagem); overflow: hidden; }
.midia--inteira { grid-column: 1 / -1; }
.midia img { width: 100%; height: 100%; object-fit: cover; }

/* Proporções disponíveis. "Original" não impõe nada: a imagem aparece
   inteira, do jeito que foi enviada, sem corte. */
.proporcao-16x9 { aspect-ratio: 16 / 9; }
.proporcao-4x5  { aspect-ratio: 4 / 5; }
.proporcao-1x1  { aspect-ratio: 1 / 1; }
.proporcao-original img { height: auto; object-fit: initial; }

@media (max-width: 640px) {
  .midias { grid-template-columns: 1fr; }
}

/* Vídeo: uma capa com o botão de play desenhado em CSS. Clicar troca a
   capa pelo player do YouTube ou Vimeo, que só carrega nessa hora — o
   player é pesado e não deve atrasar a página. */
.midia--video { position: relative; }
.midia__abrir {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.midia__player { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.midia--video img { position: absolute; inset: 0; opacity: 0.55; }
.midia__play {
  position: relative;
  width: clamp(64px, 7vw, 96px);
  aspect-ratio: 1;
  border: 1px solid var(--cor-texto);
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.midia__play::before {
  content: "";
  width: 28%;
  aspect-ratio: 1;
  margin-left: 8%;
  background: var(--cor-texto);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.midia__legenda {
  position: absolute;
  left: 0; bottom: 0;
  padding: 16px clamp(16px, 2vw, 24px);
}

/* Créditos em pares, como a escalação num jornal: a função de um lado,
   o nome do outro, com uma linha fina separando cada par. */
.creditos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(24px, 4vw, 72px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.creditos li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 12px 0;
  border-bottom: 1px solid rgb(255 255 255 / 0.08);
}
.creditos li span:first-child { color: var(--cor-texto-suave); }
.creditos li span:last-child { text-align: right; }
@media (max-width: 640px) { .creditos { grid-template-columns: 1fr; } }

/* Próximo projeto: o mesmo cartão da home, mais baixo, para convidar a
   continuar sem parecer que a página recomeçou. */
.proximo { padding: clamp(72px, 12vw, 160px) var(--margem) var(--margem); }
.projeto--proximo { height: 62vh; height: 62svh; min-height: 360px; }


/* =====================================================================
   PÁGINA SOBRE
   ===================================================================== */

/* Retrato à esquerda, história à direita. No computador, o retrato
   acompanha a leitura enquanto o texto rola ("sticky": ele só fica
   parado dentro da própria seção, não cobre o resto da página). */
.sobre {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(24px, 5vw, 96px);
  align-items: start;
  padding: clamp(24px, 5vw, 64px) var(--margem) 0;
}
.sobre__retrato {
  position: sticky;
  top: 24px;
  margin: 0;
  aspect-ratio: 4 / 5;
  background: var(--cor-fundo-imagem);
  overflow: hidden;
}
/* O retrato é sempre preto e branco, mesmo que a foto enviada seja
   colorida: assim a identidade não depende de lembrar de editar a foto. */
.sobre__retrato img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }

.sobre__titulo {
  margin: 0 0 0.7em;
  font-family: var(--fonte-titulo);
  font-weight: 300;
  font-size: clamp(2.5rem, 5.2vw, 5rem);
  line-height: 1.02;
  text-wrap: balance;
}
.sobre__texto p {
  margin: 0 0 1.15em;
  max-width: 36em;
  font-size: 1.0625rem;
  line-height: 1.65;
}
.sobre__texto strong { font-weight: 600; }

@media (max-width: 800px) {
  .sobre { grid-template-columns: 1fr; }
  .sobre__retrato { position: static; max-width: 420px; }
}

/* Contato em destaque: o e-mail em letra de título, grande o bastante
   para ser o fim da página. Quebra onde precisar no celular. */
.contato__email {
  display: inline-block;
  font-family: var(--fonte-titulo);
  font-weight: 300;
  font-size: clamp(1.75rem, 6.4vw, 6.5rem);
  line-height: 1.05;
  overflow-wrap: anywhere;
}
.contato__links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 2rem;
  margin: clamp(20px, 3vw, 36px) 0 0;
  padding: 0;
  list-style: none;
}
.pagina-sobre .rodape { margin-top: clamp(72px, 12vw, 160px); }


/* =====================================================================
   ETAPA 3 — AVISO DE EMERGÊNCIA E PÁGINA NÃO ENCONTRADA
   ===================================================================== */

/* As páginas são montadas pelo script a partir da lista de conteúdo.
   Se o script falhar, este aviso (que já vem escrito no HTML) aparece
   sozinho depois de 4 segundos — quem controla isso é o CSS, então
   funciona mesmo sem script nenhum. Quando o script funciona, ele apaga
   o aviso antes disso, e ninguém chega a vê-lo. */
.aviso {
  list-style: none;
  padding: clamp(40px, 8vw, 96px) 0;
  color: var(--cor-texto-suave);
  opacity: 0;
  animation: aviso-aparece 0s linear 4s forwards;
}
.aviso a { color: var(--cor-texto); }
@keyframes aviso-aparece { to { opacity: 1; } }
main > .aviso { padding-left: var(--margem); padding-right: var(--margem); }

.nao-encontrado { padding-bottom: clamp(56px, 9vw, 128px); }


/* =====================================================================
   ETAPA 5 — MOVIMENTO
   Tudo aqui anima só "transform" e "opacity".
   ===================================================================== */

/* Texto só para leitores de tela: some da tela, mas continua lido. */
.so-leitor {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Plaquinhas do relógio: todas da mesma largura, como num painel de
   aeroporto. A "perspectiva" dá profundidade ao giro. */
.placa {
  display: inline-block;
  width: 0.66em;
  text-align: center;
  perspective: 120px;
}
.placa--estreita { width: 0.34em; }
.placa__letra { display: inline-block; transform-origin: 50% 50%; }

/* Nome gigante, plano B: sem o script de movimento (ou com JavaScript
   desligado), as duas palavras só sobem de leve ao abrir a página. É
   animação só de CSS e termina sempre visível. Com o script, quem
   anima o nome são as plaquinhas (regras logo abaixo). */
@keyframes sobe { from { opacity: 0; transform: translateY(0.12em); } to { opacity: 1; transform: none; } }
.nome span { animation: sobe 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.nome span + span { animation-delay: 0.12s; }

/* Entradas ao rolar. Os estados escondidos só valem quando o script de
   movimento ligou a classe "anima" na página. */
.anima .revelar {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s ease, transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.anima .revelar.visivel { opacity: 1; transform: none; }

/* Nos cartões de projeto, em vez de subir, a foto "assenta": começa um
   pouco ampliada e volta ao tamanho normal, como um corte de cena. */
.anima .projeto.revelar { transform: none; }
.anima .projeto.revelar .projeto__imagem { transform: scale(1.07); transition: transform 1.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.anima .projeto.revelar.visivel .projeto__imagem { transform: none; }
.anima .projeto.revelar.visivel:hover .projeto__imagem { transform: scale(1.03); }
.anima .projeto--capa.revelar.visivel:hover .projeto__imagem { transform: none; }

/* SAÍDA DE EMERGÊNCIA: se o script ligou "anima" mas travou antes de
   confirmar que está funcionando ("anima-ok"), o próprio CSS mostra
   tudo depois de 3 segundos. Ninguém fica olhando para uma tela vazia. */
@keyframes emergencia { to { opacity: 1; transform: none; } }
.anima:not(.anima-ok) .revelar { animation: emergencia 0s linear 3s forwards; }

/* MODO LEVE: tudo parado e visível, sem zoom nas fotos. Liga sozinho em
   aparelhos fracos ou quando a tela começa a engasgar. */
.modo-leve .revelar,
.modo-leve .revelar .projeto__imagem {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
.modo-leve .projeto:hover .projeto__imagem { transform: none; }
.modo-leve .nome span { animation: none; }

/* Texto selecionado com as cores invertidas, na identidade do site. */
::selection { background: var(--cor-texto); color: var(--cor-fundo); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* NOME GRANDE COM PLAQUINHAS
   "nome-vai-virar" é ligada por um script mínimo no topo da home, antes
   de a página aparecer: o nome já nasce escondido, então não pisca.
   Saída de emergência: se ninguém tirar essa classe, o CSS mostra o
   nome sozinho em 1,5 segundo. */
.nome-vai-virar .nome { opacity: 0; animation: emergencia 0s linear 1.5s forwards; }
.nome-vai-virar .nome span,
.nome--virando span,
.nome--virou span { animation: none; }
.placa-nome { position: relative; display: inline-block; perspective: 800px; }
.placa-nome__medida { visibility: hidden; }
.placa-nome__letra {
  position: absolute;
  left: 0; right: 0; top: 0;
  text-align: center;
  transform-origin: 50% 55%;
}
/* No celular as palavras do nome viram blocos (uma por linha); as
   plaquinhas dentro delas precisam continuar lado a lado. */
.nome .placa-nome { display: inline-block !important; }
.nome .placa-nome__medida { display: inline !important; }
.nome .placa-nome__letra { display: block !important; }