/* Site de Raphael Freire da Silva.
   Escrito a mao. Sem framework, sem CDN, sem requisicao para fora do dominio:
   ate as fontes sao servidas daqui.

   A identidade sai do retrato pixelado em assets/img/retrato.png. As cores
   foram medidas no proprio arquivo, nao escolhidas a olho:
     preto quente  = a camiseta        terracota = a pele e a lanterna
     sage          = a folhagem        azul frio = a mochila e o ceu
   Dai vem a regra do resto: nada tem canto arredondado, tudo se alinha a uma
   grade de 4px, e as molduras sao desenhadas com degrau em vez de raio. */

/* ------------------------------------------------------------------ fontes */

@font-face {
  font-family: "Pixelify Sans";
  src: url("../fonts/pixelifysans-400.woff2") format("woff2");
  font-weight: 400 700;              /* arquivo variavel: um so para os pesos */
  font-display: swap;
}
@font-face {
  font-family: "Silkscreen";
  src: url("../fonts/silkscreen-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Silkscreen";
  src: url("../fonts/silkscreen-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

/* ----------------------------------------------------------------- paleta */

:root {
  --fundo:        #14140f;
  --fundo-alto:   #1c1c17;
  --superficie:   #23231c;
  --borda:        #3b3a2e;
  --borda-viva:   #55523f;
  --texto:        #e2e6d8;
  --texto-fraco:  #9ba08b;
  --terracota:    #d98b5f;
  --terracota-esc:#7a4a2e;
  --sage:         #8fa87c;
  --ceu:          #89b2cf;

  --u: 4px;                          /* a grade: todo degrau e multiplo disto */
  --largura: 70rem;

  --display: "Pixelify Sans", ui-monospace, Menlo, monospace;
  --pixel:   "Silkscreen", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter,
          Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--terracota); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }

:focus-visible {
  outline: var(--u) solid var(--terracota);
  outline-offset: var(--u);
}

h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 700; line-height: 1.12; }

/* A moldura de pixel: quatro sombras deslocadas desenham uma borda de 4px
   com o canto recortado. E o mesmo truque de caixa de dialogo de jogo antigo,
   e sai nitido em qualquer zoom porque nao tem raio nem antialias. */
.moldura {
  box-shadow:
    0 calc(-1 * var(--u)) var(--cor-moldura, var(--borda)),
    0 var(--u)            var(--cor-moldura, var(--borda)),
    calc(-1 * var(--u)) 0 var(--cor-moldura, var(--borda)),
    var(--u) 0            var(--cor-moldura, var(--borda));
}

/* ------------------------------------------------------------------- topo */

.topo {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding: 14px clamp(1rem, 4vw, 2.5rem);
  background: var(--fundo);
  border-bottom: var(--u) solid var(--borda);
}



.marca {
  color: var(--texto);
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
}
.marca:hover { text-decoration: none; color: var(--terracota); }

.navegacao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(12px, 2.5vw, 24px);
  font-family: var(--pixel);
  font-size: 12px;
}
.navegacao a { color: var(--texto-fraco); }
.navegacao a:hover { color: var(--texto); text-decoration: none; }

.topo > .idioma, .navegacao .idioma {
  font-family: var(--pixel);
  font-size: 12px;
  --cor-moldura: var(--terracota-esc);
  color: var(--terracota);
  background: var(--fundo-alto);
  padding: 6px 10px;
  margin: 0 var(--u);
  box-shadow:
    0 -4px var(--cor-moldura), 0 4px var(--cor-moldura),
    -4px 0 var(--cor-moldura), 4px 0 var(--cor-moldura);
}
.topo > .idioma:hover, .navegacao .idioma:hover {
  --cor-moldura: var(--terracota);
  color: var(--fundo);
  background: var(--terracota);
  text-decoration: none;
}

/* O menu precisa de ~500px e a marca de ~200px: junto com o respiro, o topo so
   cabe numa linha acima de ~790px. Abaixo disso ele quebrava sozinho e crescia
   de 64px para 109, 143 e 173 -- com os links em duas fileiras desalinhadas a
   375px. Aqui a quebra passa a ser dita, e nao sofrida: a marca e o idioma
   dividem a primeira linha, as secoes ficam numa fita unica que rola de lado.
   Altura estavel em qualquer largura, em vez de tres alturas diferentes. */
@media (max-width: 50rem) {
  /* grudado, um topo de duas linhas comeria um terco da tela do celular */
  .topo { position: static; row-gap: .55rem; }
  .topo > .idioma { order: 2; }
  .navegacao {
    order: 3;
    flex: 1 0 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    gap: 18px;
    /* a fita continua depois da borda: o desbotado no fim diz isso sem texto */
    mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  }
  .navegacao::-webkit-scrollbar { display: none; }
  .navegacao a { flex: 0 0 auto; padding: 4px 0; }
}

/* A 320px a marca (203px) mais o chip de idioma nao cabem na mesma linha e o
   topo volta a tres fileiras. Dois pontos de fonte a menos resolvem -- e a
   marca continua legivel, que e o que ela precisa ser. */
@media (max-width: 22rem) {
  .marca { font-size: 16px; }
  .topo { padding-left: .8rem; padding-right: .8rem; }
}

/* o dedo precisa de alvo, e 12px de texto nao e alvo */
@media (pointer: coarse) {
  .navegacao a { min-height: 44px; display: inline-flex; align-items: center; }
  .topo > .idioma { min-height: 40px; display: inline-flex; align-items: center; }
}

/* ------------------------------------------------------------------- hero */

.hero {
  max-width: var(--largura);
  margin: 0 auto;
  padding: clamp(3rem, 9vw, 6rem) clamp(1rem, 4vw, 2.5rem) clamp(2.5rem, 6vw, 4.5rem);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (max-width: 54rem) {
  .hero { grid-template-columns: 1fr; justify-items: start; }
}

.retrato-caixa {
  --cor-moldura: var(--borda);
  position: relative;
  padding: var(--u);
  margin: var(--u);
  background: var(--borda);
  align-self: start;
  /* mesmo canto recortado dos cartoes, para o retrato pertencer ao conjunto
     em vez de parecer uma foto colada por cima */
  box-shadow:
    0 -4px var(--cor-moldura), 0 4px var(--cor-moldura),
    -4px 0 var(--cor-moldura), 4px 0 var(--cor-moldura);
}
/* o brilho quente atras do retrato e a lanterna da imagem original */
.retrato-caixa::before {
  content: "";
  position: absolute;
  inset: -40px;
  background: radial-gradient(circle at 40% 35%, rgba(217, 139, 95, 0.20), transparent 68%);
  z-index: -1;
}
.retrato {
  display: block;
  width: 256px;
  height: 256px;
  max-width: 100%;
  /* sem isto o navegador suaviza a ampliacao e o pixel-art vira borrao */
  image-rendering: pixelated;
}
@media (max-width: 30rem) {
  .retrato { width: 192px; height: 192px; }
}

.hero-papel {
  margin: 0 0 14px;
  font-family: var(--pixel);
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0.06em;
  color: var(--terracota);
}

.hero-nome {
  font-size: clamp(36px, 6.5vw, 60px);
  margin-bottom: 20px;
}

.hero-frase {
  max-width: 46ch;
  margin: 0 0 20px;
  font-size: 17px;
  color: var(--texto-fraco);
}

.hero-lugar {
  margin: 0;
  font-family: var(--pixel);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--sage);
}

/* ----------------------------------------------------------------- secoes */

.secao {
  max-width: var(--largura);
  margin: 0 auto;
  padding: clamp(3rem, 8vw, 5rem) clamp(1rem, 4vw, 2.5rem);
  border-top: var(--u) solid var(--borda);
}

.secao > h2 {
  font-size: clamp(24px, 4vw, 34px);
  margin-bottom: 10px;
}

.secao .intro {
  max-width: 56ch;
  margin: 0 0 2rem;
  color: var(--texto-fraco);
}

/* --------------------------------------------------- o que eu faco */

.grade-areas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 2rem;
  margin-top: 2.5rem;
}

.area {
  --cor-moldura: var(--borda);
  background: var(--fundo-alto);
  padding: 1.5rem 1.4rem;
  box-shadow:
    0 -4px var(--cor-moldura), 0 4px var(--cor-moldura),
    -4px 0 var(--cor-moldura), 4px 0 var(--cor-moldura);
}
.area h3 { font-size: 17px; line-height: 1.3; margin: 16px 0 8px; }
.area p { margin: 0; color: var(--texto-fraco); font-size: 15px; }

/* 48px = 3px por quadradinho da grade de 16. Tamanho que nao seja multiplo
   inteiro de 16 faz o navegador inventar meio pixel e o desenho perde o fio. */
.icone { width: 48px; height: 48px; display: block; color: var(--terracota); }

/* --------------------------------------------- titulo de grupo -----

   A secao de projetos ficou longa demais para uma lista so. Os quatro blocos
   dao ponto de parada: jogos, motores e IDE, sites e sistemas, o resto. */
.grupo {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 3.5rem 0 1.6rem;
  padding-top: 1.6rem;
  border-top: var(--u) solid var(--borda);
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(19px, 3vw, 26px);
  color: var(--texto);
  scroll-margin-top: 90px;      /* o topo grudado nao cobre o titulo ao pular */
}
.grupo:first-of-type { margin-top: 1.5rem; border-top: none; padding-top: 0; }
.grupo .quantos {
  font-family: var(--pixel);
  font-size: 11px;
  font-weight: 400;
  color: var(--fundo);
  background: var(--sage);
  padding: 4px 8px;
}
.projeto h4 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.12;
  margin: 0 0 10px;
}

/* --------------------------------------------------------- filtros */

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 2.5rem;
}

.filtro {
  --cor-moldura: var(--borda);
  font: inherit;
  font-family: var(--pixel);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--texto-fraco);
  background: var(--fundo-alto);
  border: none;
  padding: 8px 12px;
  margin: 0 var(--u);
  cursor: pointer;
  box-shadow:
    0 -4px var(--cor-moldura), 0 4px var(--cor-moldura),
    -4px 0 var(--cor-moldura), 4px 0 var(--cor-moldura);
}
.filtro:hover { --cor-moldura: var(--borda-viva); color: var(--texto); }
.filtro.ativo {
  --cor-moldura: var(--terracota);
  color: var(--fundo);
  background: var(--terracota);
}

/* -------------------------------------------------------- projetos */

.grade-projetos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: 2rem;
}
/* colunas fixas no desktop: com auto-fill, o cartao em destaque sobrava uma
   coluna vazia do lado sempre que a conta de colunas nao fechava */
@media (min-width: 64rem) {
  .grade-projetos { grid-template-columns: repeat(3, 1fr); }
}

.projeto {
  --cor-moldura: var(--borda);
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  margin: 0 var(--u);
  box-shadow:
    0 -4px var(--cor-moldura), 0 4px var(--cor-moldura),
    -4px 0 var(--cor-moldura), 4px 0 var(--cor-moldura);
  transition: box-shadow 0.12s steps(2);
}
.projeto:hover { --cor-moldura: var(--terracota-esc); }
.projeto[hidden] { display: none; }

/* O destaque ocupa a linha inteira, e o desenho muda conforme tenha imagem:

   SEM capa  -> deitado, o icone grande de um lado e o texto do outro. Texto
                correndo em 1000px de largura nao se le.
   COM capa  -> a imagem vai em faixa larga no alto e o texto embaixo. Uma
                captura de tela de sistema espremida numa coluna de 38% fica
                ilegivel: era o que acontecia com a tela do SIGAB. */
.projeto.destaque { grid-column: 1 / -1; }

@media (min-width: 52rem) {
  .projeto.destaque.sem-capa { flex-direction: row; }
  .projeto.destaque.sem-capa .capa {
    flex: 0 0 38%;
    aspect-ratio: auto;
    border-right: var(--u) solid var(--borda);
    border-bottom: none;
  }
  .projeto.destaque .corpo { padding: 2rem 2rem 2.2rem; }
  .projeto.destaque.sem-capa .corpo { flex: 1; }
  .projeto.destaque h4 { font-size: 26px; }
  .projeto.destaque .resumo { font-size: 17px; }

  /* com imagem, o texto para de correr a largura toda da tela */
  .projeto.destaque.com-capa .resumo,
  .projeto.destaque.com-capa .detalhe { max-width: 68ch; }
}

.capa { aspect-ratio: 16 / 9; background: var(--fundo-alto); overflow: hidden; }
/* contain, nao cover: com cover o navegador corta tudo que nao for 16/9, e
   capa de cartao, de logo ou de tela vertical perdia justamente a parte que
   interessa. Aqui a imagem aparece inteira; o que sobra do quadro fica na cor
   do proprio cartao, entao nao se ve tarja. */
.capa img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
/* so a arte de jogo. Numa captura de tela, ampliar ou reduzir com pixelated
   transforma o texto em ruido -- o navegador passa a amostrar ponto a ponto
   em vez de calcular a media dos pixels vizinhos. */
.capa img.pixelada { image-rendering: pixelated; }

/* capa-justa: a caixa ja tem a proporcao da imagem, entao cover nao corta nada
   e ainda encosta nas quatro bordas -- sem a fresta de 1px que o contain deixa
   quando a conta de arredondamento nao fecha. */
.capa-justa img { object-fit: cover; }

/* ---------- capa que a pessoa rola ----------

   Para site, a capa e a pagina INTEIRA numa imagem alta, e quem rola e a
   PESSOA: roda do mouse com o cursor em cima, ou setas depois de dar foco.
   Nao ha animacao automatica -- ela decide o ritmo e onde parar.

   overscroll-behavior: contain e o que impede a pagina do portfolio de sair
   junto quando a rolagem interna chega ao fim. Sem isso, rolar aqui levaria o
   visitante para longe sem querer.

   O tabindex no HTML deixa a area focavel, e area rolavel focavel e o que faz
   as setas funcionarem -- e o que a torna utilizavel sem mouse nenhum. */
.capa-rolavel {
  position: relative;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--borda-viva) transparent;
  cursor: ns-resize;
}
.capa-rolavel img {
  width: 100%;
  height: auto;                 /* altura natural: e o que sobra para rolar */
  object-fit: unset;
  display: block;
}
.capa-rolavel::-webkit-scrollbar { width: 8px; }
.capa-rolavel::-webkit-scrollbar-track { background: transparent; }
.capa-rolavel::-webkit-scrollbar-thumb { background: var(--borda-viva); }
.capa-rolavel:focus-visible { outline: var(--u) solid var(--terracota); outline-offset: -4px; }

.dica-rolagem {
  position: sticky;
  top: calc(100% - 34px);       /* cola na base da janela em vez de rolar junto */
  float: right;
  margin: 0 10px 10px 0;
  padding: 5px 9px;
  font-family: var(--pixel);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--texto);
  background: rgba(20, 20, 15, 0.86);
  opacity: 0.9;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.capa-rolavel:hover .dica-rolagem { opacity: 0; }
/* Sem capa, o lugar nao fica vazio: xadrez de 16px e o icone da categoria
   bem grande. Le como espaco reservado de proposito, nao como imagem que
   falhou ao carregar. */
.capa-vazia {
  aspect-ratio: 16 / 6;
  border-bottom: var(--u) solid var(--borda);
  display: grid;
  place-items: center;
  background-color: #191914;
  background-image:
    linear-gradient(45deg, #22221b 25%, transparent 25%, transparent 75%, #22221b 75%),
    linear-gradient(45deg, #22221b 25%, transparent 25%, transparent 75%, #22221b 75%);
  background-size: 32px 32px;
  background-position: 0 0, 16px 16px;
}
.capa-vazia .icone {
  width: 64px;
  height: 64px;
  color: var(--borda-viva);
}
.projeto.destaque .capa-vazia .icone { width: 96px; height: 96px; }

.corpo { padding: 1.5rem 1.5rem 1.7rem; }

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin: 0 0 12px;
  font-family: var(--pixel);
  font-size: 12px;
  letter-spacing: 0.06em;
}
.meta .estado { color: var(--terracota); }
.meta .ano { color: var(--texto-fraco); }

.projeto .resumo { margin: 0; color: var(--texto); font-size: 15px; }
.projeto .detalhe { margin: 12px 0 0; color: var(--texto-fraco); font-size: 14px; }

.tec {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 1.3rem 0 0;
  padding: 0;
}
.tec li {
  font-family: var(--pixel);
  font-size: 11px;
  color: var(--sage);
  background: var(--fundo-alto);
  padding: 5px 8px;
  border-left: var(--u) solid var(--sage);
}

.links { margin: 1.2rem 0 0; display: flex; flex-wrap: wrap; gap: 1.2rem; }
.link-projeto { font-family: var(--pixel); font-size: 11px; }

/* ------------------------------------------------- como eu trabalho */

.grade-metodo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 2.2rem;
  margin-top: 2.5rem;
}
.passo h3 {
  font-size: 17px;
  margin-bottom: 10px;
  padding-left: 16px;
  border-left: var(--u) solid var(--terracota);
}
.passo p { margin: 0; color: var(--texto-fraco); font-size: 15px; padding-left: 16px; }

/* ---------------------------------------------------------- contato */

.contato p { max-width: 50ch; color: var(--texto-fraco); }

.botao {
  --cor-moldura: var(--terracota);
  display: inline-block;
  margin: 1.6rem var(--u) 0;
  padding: 14px 24px;
  background: var(--terracota);
  color: #1a0f07;
  font-family: var(--pixel);
  font-size: 12px;
  letter-spacing: 0.04em;
  box-shadow:
    0 -4px var(--cor-moldura), 0 4px var(--cor-moldura),
    -4px 0 var(--cor-moldura), 4px 0 var(--cor-moldura);
}
.botao:hover {
  --cor-moldura: #f0a97c;
  background: #f0a97c;
  text-decoration: none;
}

.externos {
  margin-top: 1.6rem;
  display: flex;
  gap: 1.5rem;
  font-family: var(--pixel);
  font-size: 11px;
}
.externos a { color: var(--ceu); }

/* ----------------------------------------------------------- rodape */

.rodape {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 2.2rem clamp(1rem, 4vw, 2.5rem) 3.5rem;
  border-top: var(--u) solid var(--borda);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  font-family: var(--pixel);
  font-size: 12px;
  line-height: 2;
  color: var(--texto-fraco);
}
.rodape p { margin: 0; display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; }

@media print {
  .topo, .filtros, .rodape a { display: none; }
  body { background: #fff; color: #000; }
  .projeto, .area { box-shadow: none; border: 1px solid #999; }
}