/* ============================================================================
   HOME · Gabriel Amaral
   Estilos exclusivos da index. Depende de tokens, base e components.
   ========================================================================= */

/* --- NAVEGACAO DA HOME ---------------------------------------------------- */
.topo__nav{ display:flex; gap:var(--s-6); margin-left:auto; }
.topo__nav a{
  display:inline-flex; align-items:center; min-height:44px;
  font-size:var(--t-small); text-decoration:none; color:var(--on-anchor-muted);
  border-bottom:2px solid transparent;
  transition:color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease);
}
.topo__nav a:hover{ color:var(--on-anchor); border-bottom-color:var(--marca); }
.topo__nav a:active{ transform:translateY(1px); transition-duration:var(--d-press); }
.topo__nav a{ transition:color var(--d-fast) var(--ease-toque),
                         border-color var(--d-fast) var(--ease-toque),
                         transform var(--d-fast) var(--ease-toque); }
/* a pagina e curta e o hero ja leva aos cases */
@media (max-width:860px){ .topo__nav{ display:none; } }

/* --- HERO ------------------------------------------------------------------
   Duas camadas no mesmo palco: a abertura em vídeo e o texto. Elas ocupam a
   mesma caixa, empilhadas por grid-area, então a troca de uma pela outra não
   muda a altura da página e nada salta.

   O TEXTO É O ESTADO PADRÃO. A abertura só existe quando o JS decide que vale
   mostrá-la. Sem JS, com o vídeo bloqueado, em conexão lenta ou com menos
   movimento pedido, o visitante cai direto no texto e não espera nada.
   ------------------------------------------------------------------------ */
/* overflow-x:clip porque a camada da abertura termina em scale(1.015) e o
   estado final da animação permanece: em 320px isso virava 325px de largura
   e a página inteira ganhava rolagem lateral de 2px. clip, e não hidden,
   para não criar um contêiner de rolagem nem travar o sticky do topo. */
.hero{ padding-block:clamp(40px, 6vw, 80px) clamp(24px, 3vw, 44px); overflow-x:clip; }

.hero__palco{
  display:grid;
  min-height:clamp(300px, 34vw, 400px);
  place-items:center;
}
/* As duas camadas dividem a mesma célula: a troca de uma pela outra não muda
   a altura da seção e nada salta. */
.hero__abertura,
.hero__texto{ grid-area:1 / 1; width:100%; }

/* --- ABERTURA -------------------------------------------------------------
   Largura total da janela, não da coluna: o vídeo desktop é 2,34:1 e foi
   montado para ocupar as duas laterais, com a animação resolvendo no centro.
   Encaixotá-lo no container jogaria fora justamente as bordas que ele usa.

   A quebra para fora do container é feita com 100vw e translate, e não com
   margens negativas, porque assim ela não depende da largura do container nem
   some quando ele muda.
   ------------------------------------------------------------------------ */
.hero__abertura{
  display:none;                    /* só entra por decisão do JS */
  overflow:hidden;
}
.hero__video{
  display:block; width:100%; height:auto;
  background:var(--anchor);
  /* A codificação deixa uma linha de 1px mais escura na borda do quadro.
     Contra o #232323 da página ela aparece, e o ponto deste vídeo é
     justamente não ter emenda com o fundo. */
  clip-path:inset(1px);
}

/* Durante a abertura o texto fica só invisível, nunca removido do fluxo: é ele
   que define a altura do palco, e sem isso a página encolheria e voltaria a
   crescer quando o vídeo saísse. */
/* Precisa continuar renderizado DURANTE a saída também. Enquanto só
   .em-abertura reativava o display, remover essa classe devolvia o
   display:none da regra base no mesmo quadro, o vídeo sumia de uma vez e a
   animação de saída nunca chegava a aparecer: era corte seco, não dissolve. */
.hero.em-abertura .hero__abertura,
.hero.fim-abertura .hero__abertura{ display:block; }
.hero.em-abertura .hero__texto{ opacity:0; pointer-events:none; }

/* A SAÍDA. Um dissolve, não uma troca.
   Antes o vídeo encolhia para 0,96 em 620ms enquanto o texto entrava no mesmo
   instante: lia como "um sai, o outro entra". Agora são 1,1s de opacidade pura
   com um crescimento quase imperceptível, e o texto começa a chegar no meio
   dessa saída. O vídeo termina com a marca pequena e centralizada, exatamente
   onde o título aparece, então um dissolve ali faz a marca virar a frase.

   A escala vai para CIMA, não para baixo: encolher parece que a peça foi
   retirada, crescer de leve parece que ela se desfez no ar. */
.hero.fim-abertura .hero__abertura{
  animation:abertura-sai 1100ms var(--ease-entre) both;
  pointer-events:none;
}
@keyframes abertura-sai{
  from{ opacity:1; transform:scale(1); }
  to  { opacity:0; transform:scale(1.015); }
}
/* Com movimento reduzido o vídeo continua aparecendo, por decisão do dono do
   site, mas a troca dele pelo texto é instantânea: sem dissolve, sem escala.
   É o que ainda dá para preservar da preferência sem esconder a peça. */
@media (prefers-reduced-motion: reduce){
  .hero.fim-abertura .hero__abertura{ animation:none; opacity:0; }
  .hero.em-abertura .hero__texto{ transition:none; }
}

/* --- TEXTO DO HERO ---------------------------------------------------------
   Centralizado. Com o vídeo no meio do palco, alinhar o texto à esquerda
   deixaria as duas camadas brigando por eixos diferentes na mesma caixa.
   ------------------------------------------------------------------------ */
.hero__texto{ text-align:center; display:grid; justify-items:center; }

.hero__disc{ color:var(--marca); }
.hero__disc i{ font-style:normal; opacity:.45; padding-inline:2px; }

.hero__h1{
  font-size:clamp(2.25rem, 1.1rem + 3.2vw, 3.75rem);
  margin-block:var(--s-5) var(--s-5);
  max-width:19ch;
  text-wrap:balance;
}
/* A segunda frase completa a metáfora do H1, então não é texto de apoio: fica
   na cor cheia, não na cor esmaecida de lead. */
.hero__lead{ max-width:40ch; color:var(--on-anchor); }

.hero__acoes{ display:flex; flex-wrap:wrap; gap:var(--s-3); margin-top:var(--s-8); justify-content:center; }
.hero__btn2{ border-color:var(--on-anchor-muted); color:var(--on-anchor); }
.hero__btn2:hover{ border-color:var(--on-anchor); }
.hero__local{ color:var(--on-anchor-muted); margin-top:var(--s-8); }

/* --- FAIXA DE PROVA --------------------------------------------------------
   Saiu de dentro do hero quando o vídeo entrou. Continua logo abaixo, ainda no
   escuro, então a afirmação do hero e a evidência dela seguem no mesmo bloco
   visual, separadas só por um fio.
   ------------------------------------------------------------------------ */
.prova-faixa{ padding-block:0 clamp(48px, 7vw, 84px); }
.prova-faixa__t{ color:var(--on-anchor-muted); margin-bottom:var(--s-5);
                 padding-top:clamp(24px, 3vw, 36px); border-top:1px solid var(--on-anchor-rule); }

.prova{ margin:0; display:grid; gap:0 var(--s-8);
        grid-template-columns:repeat(auto-fit, minmax(min(210px,100%), 1fr)); }
.prova__item{ padding-block:var(--s-5) 0; }
.prova__v{
  font-size:clamp(1.75rem,1.4rem+1.2vw,2.25rem);
  font-weight:700; line-height:1; letter-spacing:var(--tr-tight);
  font-variant-numeric:tabular-nums; color:var(--marca);
}
.prova__l{ margin:var(--s-2) 0 0; font-size:var(--t-small); line-height:1.4;
           color:var(--on-anchor-muted); text-wrap:pretty; }

/* --- CASES ---------------------------------------------------------------- */
/* So o corpo cresce. Se a media tambem crescer, os dois dividem a sobra e
   sobra um vazio no meio do card. */
.project__body{ flex:1; display:flex; flex-direction:column; }

/* --- METODO ---------------------------------------------------------------
   Quatro fases lado a lado no desktop, duas no tablet, uma no celular.
   ------------------------------------------------------------------------ */
.fases{
  display:grid; gap:var(--s-5);
  grid-template-columns:repeat(auto-fit, minmax(min(250px,100%), 1fr));
}
.fase{ display:grid; gap:var(--s-5); align-content:start; }

/* Icone e rotulo lado a lado, descricao em LARGURA CHEIA embaixo. Com a
   descricao ao lado do icone ela caia numa coluna de ~110px e quebrava em
   sete linhas. E tambem a leitura do diagrama original: icone, nome, texto. */
.fase__top{ display:flex; gap:var(--s-3); align-items:center; }
.fase__desc{ font-size:var(--t-small); color:var(--ink-muted); line-height:1.45; }

/* --- SOBRE ---------------------------------------------------------------- */
.sobre{
  display:grid; gap:var(--s-10);
  grid-template-columns:1fr;
}
@media (min-width:900px){
  .sobre{ grid-template-columns:minmax(260px, 340px) 1fr; gap:var(--s-16); align-items:start; }
  .sobre__foto{ position:sticky; top:96px; }
}
.sobre__foto img{
  width:100%; border-radius:var(--r-lg);
  border:1px solid var(--on-anchor-rule);
}
.sobre__texto{ display:grid; gap:var(--s-5); max-width:var(--measure); }
.sobre__texto h2{ margin-top:var(--s-2); }
.sobre__texto p{ color:var(--on-anchor-muted); }
.sobre__texto .lead{ color:var(--on-anchor); }
.sobre__texto .label{ color:var(--marca); }

/* Estrada Real: bloco de carater. Superficie levemente destacada da ancora,
   com fio de 1px, em vez de uma regua amarela grossa na lateral. */
.er{
  margin-top:var(--s-6);
  padding:var(--s-5) var(--s-6);
  background:rgba(255,255,255,.04);
  border:1px solid var(--on-anchor-rule);
  border-radius:var(--r-md);
}
.er__t{ color:var(--marca); margin-bottom:var(--s-2); }

.ferrs{
  display:grid; gap:var(--s-5);
  grid-template-columns:repeat(auto-fit, minmax(min(220px,100%), 1fr));
  margin-top:var(--s-8);
  padding-top:var(--s-8);
  border-top:1px solid var(--on-anchor-rule);
}
.ferr__t{ color:var(--on-anchor); margin-bottom:var(--s-2); }
.ferrs .small{ color:var(--on-anchor-muted); }

/* --- ARQUETIPOS -----------------------------------------------------------
   Secao mais intima da pagina. As ilustracoes sao saturadas e vivas, muito
   mais quentes que o resto do sistema, e isso e proposital: e o unico lugar
   do portfolio onde a pessoa aparece antes do profissional. O texto em volta
   fica no papel neutro para a ilustracao carregar sozinha a mudanca de tom.
   ------------------------------------------------------------------------ */
.arq-grid{
  display:grid; gap:var(--s-8);
  grid-template-columns:repeat(auto-fit, minmax(min(280px,100%), 1fr));
}
.arq{ display:grid; gap:var(--s-4); align-content:start; }

.arq__img{ position:relative; }
.arq__img img{
  width:100%; border-radius:var(--r-lg);
  border:1px solid var(--rule-strong);
}
/* A porcentagem saiu daqui: a barra de composição logo acima já atribui cada
   percentual a um nome, e repetir era ruído. */
.arq__nome{ font-size:var(--t-h3); }
.arq__desc{ color:var(--ink-muted); font-size:var(--t-small); line-height:1.5; }
.arq .dot-list{ margin-top:var(--s-1); }
.arq:nth-child(1){ --cor:var(--design);  --cor-ink:var(--design-ink); }
.arq:nth-child(2){ --cor:var(--pesquisa);--cor-ink:var(--pesquisa-ink); }
.arq:nth-child(3){ --cor:var(--planejamento); --cor-ink:var(--planejamento-ink); }

/* --- LIVROS ---------------------------------------------------------------
   Na ancora escura, para as capas coloridas se destacarem como objeto.
   ------------------------------------------------------------------------ */
/* Colunas explicitas em vez de auto-fit: com auto-fit davam 5 colunas e o
   sexto livro caia sozinho numa segunda fila. Sao seis, e o titulo diz seis,
   entao no desktop eles formam uma fila so. */
.livro-grid{ display:grid; gap:var(--s-8) var(--s-5); grid-template-columns:repeat(2,1fr); }
@media (min-width:560px){ .livro-grid{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1000px){ .livro-grid{ grid-template-columns:repeat(6,1fr); gap:var(--s-6) var(--s-4); } }
.livro{ margin:0; display:grid; gap:var(--s-4); align-content:start; }
.livro img{
  width:100%; border-radius:var(--r-sm);
  box-shadow:0 2px 6px rgba(0,0,0,.4), 0 16px 32px rgba(0,0,0,.35);
}
.livro figcaption{ display:grid; gap:2px; }
.livro__t{ font-weight:700; line-height:1.25; font-size:var(--t-small); }
.livro__a{ font-size:var(--t-label); letter-spacing:.04em; text-transform:uppercase;
           color:var(--on-anchor-muted); }
.livro__d{ margin-top:var(--s-2); font-size:var(--t-small); line-height:1.45;
           color:var(--on-anchor-muted); }

/* --- PONTE ----------------------------------------------------------------
   O contato existia só no topo e no rodapé, a 6.600px de rolagem: quem se
   convencia nos cases tinha que atravessar método, sobre, arquétipos e livros
   para achar como falar. Esta faixa dá a saída no ponto em que a decisão
   costuma acontecer, e de quebra separa dois blocos claros que vinham colados.
   ------------------------------------------------------------------------ */
.ponte{ padding-block:clamp(48px, 7vw, 88px); }
.ponte__row{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--s-8);
}
.ponte__t{
  font-size:var(--t-h3); max-width:26ch; margin-bottom:var(--s-3);
  text-wrap:balance;
}
.ponte__acoes{ display:flex; flex-wrap:wrap; gap:var(--s-3); }
.ponte__btn2{ border-color:var(--on-anchor-muted); color:var(--on-anchor); }
.ponte__btn2:hover{ border-color:var(--on-anchor); }

/* --- ABERTURA DO RODAPÉ ---------------------------------------------------
   O rodapé é onde a conversão acontece e estava raso demais para o peso da
   página. Ganha uma abertura própria antes da lista de contatos.
   ------------------------------------------------------------------------ */
/* O max-width em ch tem que ficar no PRÓPRIO título: no contêiner ele calcula
   sobre o corpo de 17px e espremia o H2 em oito linhas de uma palavra. */
.rodape__abre{ padding-block:clamp(48px, 7vw, 88px) var(--s-10); }
.rodape__h2{ font-size:var(--t-h2); max-width:18ch; text-wrap:balance; }
.rodape__sub{ margin-top:var(--s-5); max-width:44ch; color:var(--on-anchor-muted); }

/* A garantia global de menos movimento vive no base.css, e o JS nem inicia a
   abertura quando ela está ligada. Mesmo assim a regra fica repetida aqui, no
   arquivo onde a animação mora: garantia que depende de outro arquivo é
   garantia que alguém quebra sem perceber. */
/* Com movimento reduzido o vídeo continua aparecendo, por decisão do dono do
   site, mas a troca dele pelo texto é instantânea: sem dissolve, sem escala.
   É o que ainda dá para preservar da preferência sem esconder a peça. */
@media (prefers-reduced-motion: reduce){
  .hero.fim-abertura .hero__abertura{ animation:none; opacity:0; }
  .hero.em-abertura .hero__texto{ transition:none; }
}

/* --- SETA DE ROLAGEM ------------------------------------------------------
   Indica que a página continua. É um link real para os cases, não um enfeite:
   quem clica chega no mesmo lugar que o botão principal, e quem navega por
   teclado alcança e ativa do mesmo jeito.
   ------------------------------------------------------------------------ */
.hero__desce{
  display:grid; place-items:center;
  width:44px; height:44px;                /* alvo de toque, WCAG 2.5.8 */
  margin-top:var(--s-6);
  color:var(--on-anchor-muted);
  text-decoration:none;
  transition:color var(--d-fast) var(--ease);
}
.hero__desce:hover{ color:var(--marca); }
.hero__desce:active{ transform:translateY(2px); transition-duration:var(--d-press); }
.hero__desce{ transition:color var(--d-fast) var(--ease-toque),
                         transform var(--d-fast) var(--ease-toque); }
.hero__desce svg{ width:15px; height:21px; display:block; }

/* O movimento é curto e com pausa longa: uma seta que balança sem parar vira
   ruído no canto do olho enquanto a pessoa lê o resto da tela. */
.hero__desce-seta{ display:block; animation:desce 2.6s var(--ease-toque) infinite; }
@keyframes desce{
  0%, 62%, 100% { transform:translateY(0); }
  74%           { transform:translateY(5px); }
  86%           { transform:translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .hero__desce-seta{ animation:none; }
}

/* --- COMPOSIÇÃO DOS ARQUÉTIPOS -------------------------------------------
   Barra empilhada: as três proporções somam um inteiro, e é isso que a barra
   mostra e três números soltos não mostram. Cada faixa carrega o próprio
   rótulo escrito, porque cor sozinha nunca informa.
   ------------------------------------------------------------------------ */
.composicao{
  display:flex; width:100%; margin-bottom:var(--s-12);
  border-radius:var(--r-md); overflow:hidden;
  border:1px solid var(--rule-strong);
}
.composicao__faixa{
  flex:0 0 var(--pct);
  display:flex; align-items:baseline; gap:var(--s-2);
  padding:var(--s-4) var(--s-5);
  background:var(--cor-pastel);
  color:var(--ink);
  min-width:0;
}
.composicao__faixa + .composicao__faixa{ border-left:1px solid var(--rule-strong); }
.composicao__faixa b{ font-size:var(--t-small); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.composicao__faixa i{ font-style:normal; font-weight:700; font-variant-numeric:tabular-nums;
                      font-size:var(--t-label); color:var(--cor-ink); margin-left:auto; }
@media (max-width:640px){
  /* Em tela estreita a faixa de 15% não cabe com texto dentro: vira coluna. */
  .composicao{ flex-direction:column; }
  .composicao__faixa{ flex:1 1 auto; }
  .composicao__faixa + .composicao__faixa{ border-left:0; border-top:1px solid var(--rule-strong); }
}

/* --- CITAÇÃO DA SEÇÃO PESSOAL --------------------------------------------- */
.arqs__cit{ margin:var(--s-6) 0 0; padding:0; max-width:34ch; }
.arqs__cit p{
  font-size:var(--t-h3); line-height:1.25; letter-spacing:var(--tr-tight);
  color:var(--ink); text-wrap:balance;
}
.arqs__cit footer{ margin-top:var(--s-3); font-size:var(--t-small); color:var(--ink-faint); }

/* --- SAIBA MAIS DAS FASES -------------------------------------------------
   O detalhe de cada etapa fica atrás de um resumo em vez de empilhado na tela:
   quem só quer o panorama lê quatro frases, quem quer o detalhe abre.
   <details> nativo, porque ele já vem com estado, teclado e leitor de tela.
   ------------------------------------------------------------------------ */
.fase__mais{ margin-top:var(--s-2); }
.fase__mais summary{
  display:inline-flex; align-items:center; gap:var(--s-2);
  min-height:44px;                          /* alvo de toque, WCAG 2.5.8 */
  font-size:var(--t-label); font-weight:700;
  letter-spacing:var(--tr-label); text-transform:uppercase;
  color:var(--cor-ink); cursor:pointer; list-style:none;
}
.fase__mais summary::-webkit-details-marker{ display:none; }
.fase__mais summary::after{
  content:"+"; font-size:1.1rem; line-height:1;
  transition:transform var(--d-normal) var(--ease);
}
.fase__mais[open] summary::after{ transform:rotate(45deg); }
.fase__mais summary:focus-visible{ outline:3px solid var(--ink); outline-offset:3px; border-radius:2px; }
/* O respiro fica no summary, não como padding da lista: com padding-top na
   <ul>, a linha de grade em 0fr não o colapsava e sobrava um resíduo de 8px
   com a seção fechada. */
.fase__mais summary{ margin-bottom:var(--s-2); }
@media (prefers-reduced-motion: reduce){
  .fase__mais summary::after{ transition:none; }
}

/* --- ABERTURA SUAVE DO "SAIBA MAIS" ---------------------------------------
   <details> nativo abre num salto: o conteúdo aparece inteiro de um quadro
   para o outro e o card muda de altura sem aviso.

   O truque é um invólucro em grid indo de 0fr a 1fr. Isso anima a altura sem
   medir nada em JS e sem animar height, que é a propriedade que trava o
   quadro. Tentei antes aplicar a grade na própria <ul> e não funciona: os
   <li> viram itens da grade e a lista se desmonta.

   O <details> continua nativo: estado, teclado e leitor de tela seguem sendo
   do navegador. Só o desenho da transição é meu.
   ------------------------------------------------------------------------ */
.fase__caixa{
  display:grid;
  grid-template-rows:0fr;
  opacity:0;
  transition:grid-template-rows var(--d-normal) var(--ease-entra),
             opacity var(--d-normal) var(--ease-entra);
}
.fase__caixa > *{ overflow:hidden; min-height:0; }
.fase__mais[open] .fase__caixa{ grid-template-rows:1fr; opacity:1; }

@media (prefers-reduced-motion: reduce){
  .fase__caixa{ transition:none; }
}

/* --- SITES QUE CRIEI ------------------------------------------------------
   Depois dos cases e antes do convite: primeiro a profundidade de três
   projetos, depois a abrangência de três setores, e só então a pergunta.

   O card inteiro é o link, e não só o nome, porque aqui o destino é sempre o
   mesmo: o site no ar. Não há um segundo alvo dentro do cartão para disputar
   o clique.
   ------------------------------------------------------------------------ */
.site-grid{
  display:grid; gap:var(--s-6);
  grid-template-columns:repeat(auto-fit, minmax(min(280px,100%), 1fr));
}
.site{ margin:0; }
.site__link{
  display:grid; gap:var(--s-2);
  text-decoration:none; color:inherit;
  transition:transform var(--d-normal) var(--ease-toque);
}
.site__link:hover{ transform:translateY(-4px); }
.site__link:active{ transform:translateY(-1px) scale(.995); transition-duration:var(--d-press); }

.site__media{
  display:block; overflow:hidden; margin-bottom:var(--s-3);
  border:1px solid var(--rule-strong);
  border-radius:var(--r-lg);
  background:var(--card);
  box-shadow:var(--shadow-sm);
  transition:box-shadow var(--d-normal) var(--ease-toque);
}
.site__link:hover .site__media{ box-shadow:var(--shadow-lg); }
.site__media img{ display:block; width:100%; height:auto;
                  transition:transform var(--d-slow) var(--ease-entra); }
.site__link:hover .site__media img{ transform:scale(1.03); }

.site__nome{ font-size:var(--t-h3); font-weight:700; letter-spacing:var(--tr-tight); }
.site__desc{ font-size:var(--t-small); color:var(--ink-muted); }

/* O endereço fica visível: é a prova de que o site existe fora deste
   portfólio, e é ele que carrega a seta de "abre em outra aba". */
.site__url{
  display:inline-flex; align-items:center; gap:var(--s-2);
  margin-top:var(--s-1);
  font-size:var(--t-label); font-weight:700;
  letter-spacing:var(--tr-label); text-transform:uppercase;
  color:var(--ink-faint);
  transition:color var(--d-fast) var(--ease-toque);
}
.site__url::after{
  content:"↗";
  transition:transform var(--d-normal) var(--ease-entra);
}
.site__link:hover .site__url,
.site__link:focus-visible .site__url{ color:var(--ink); }
.site__link:hover .site__url::after,
.site__link:focus-visible .site__url::after{ transform:translate(2px,-2px); }

.site__link:focus-visible{ outline:3px solid var(--ink); outline-offset:4px; border-radius:var(--r-lg); }

@media (prefers-reduced-motion: reduce){
  .site__media img, .site__url::after{ transition:none; }
}