/*
  site.css
  Layout e componentes. O espacamento vertical entre secoes e definido
  uma unica vez, em .section-block (ver tokens.css: --section-space).
  Nao adicione outra regra de margem/padding vertical concorrente nos
  elementos de secao: se precisar de ajuste, mude a variavel.
*/

/* com viewport-fit=cover o papel chega ate a borda da tela, inclusive
   embaixo do notch. o conteudo e que precisa recuar: no retrato os
   env() sao zero e o padding e o de sempre, no paisagem eles crescem */
.wrap {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: max(var(--content-pad), env(safe-area-inset-left, 0px))
                  max(var(--content-pad), env(safe-area-inset-right, 0px));
}

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

.hero {
  padding-block: clamp(1.5rem, 4vw, 2.5rem) var(--section-space);
  border-bottom: 1px solid var(--rule);
}

.hero-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: clamp(2.5rem, 8vw, 5rem);
  color: var(--ink-soft);
}

.hero-meta .hero-name {
  color: var(--ink);
}

.hero-inner {
  display: grid;
  /* o texto precisa de mais coluna que o leque: o leque tem tamanho
     natural de 420 e nao cresce alem disso, o h1 cresce em linhas */
  grid-template-columns: 3fr 2fr;
  gap: clamp(2rem, 6vw, 4rem);
  align-items: center;
}

.hero-copy h1 {
  font-family: var(--font-display);
  font-weight: 800;
  /* na largura 120, com entrelinha 0.95, as cinco linhas viravam um
     bloco so, uma encostando na outra. largura normal, entrelinha
     aberta e quebra balanceada deixam cada linha legivel */
  font-variation-settings: 'wdth' 100;
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  max-width: 20ch;
  text-wrap: balance;
}

/* as duas frases em blocos separados: a primeira e o que eu faco, a
   segunda o complemento, em tinta mais clara */
.hero-h1-a,
.hero-h1-b {
  display: block;
  text-wrap: balance;
}

.hero-h1-b {
  margin-top: 0.3em;
  color: var(--ink-soft);
}

.hero-copy p {
  margin-top: 1.5rem;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(1rem, 1.05vw, 1.125rem);
  line-height: 1.6;
  max-width: 38ch;
  color: var(--ink-soft);
}

.hero-fan {
  width: 100%;
}

.hero-fan svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.hero-fan-branch {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  transition: stroke-width var(--dur-hover) var(--ease-out);
}

.hero-fan-arrow {
  fill: currentColor;
}

.hero-fan-dot {
  fill: currentColor;
}

.hero-fan-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  fill: currentColor;
  transition: transform var(--dur-hover) var(--ease-out);
}

/* hover so em ponteiro fino: no toque o :hover fica grudado depois do tap.
   o rotulo anda 3px pra frente, na mesma direcao da seta, em vez de
   apagar: dar retorno positivo a quem passou o mouse, nao negativo */
@media (hover: hover) and (pointer: fine) {
  .hero-fan-group:hover .hero-fan-branch { stroke-width: 2.5; }
  .hero-fan-group:hover .hero-fan-label { transform: translateX(3px); }
}

.hero-fan-group:focus-within .hero-fan-branch { stroke-width: 2.5; }
.hero-fan-group:focus-within .hero-fan-label { transform: translateX(3px); }

.hero-fan-sub {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  fill: var(--ink-soft);
}

@media (max-width: 860px) {
  .hero-inner {
    grid-template-columns: 1fr;
  }

  .hero-fan {
    margin-top: 1rem;
    /* em coluna unica o leque virava tao largo quanto a tela, e como a
       altura acompanha a largura, num tablet ele passava de 580px. no
       tamanho natural do desenho (420) ele nunca passa de 350 */
    max-width: 420px;
  }
}

/* ---------- secoes, ritmo vertical unico ---------- */

.section-block {
  padding-block: var(--section-space);
}

.section-block + .section-block {
  border-top: 1px solid var(--rule);
}

/* ---------- lista de projetos ---------- */

.project-row {
  display: grid;
  grid-template-columns: 45% 55%;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  padding-block: var(--row-space);
  scroll-margin-top: 1.5rem;
}

.project-row + .project-row {
  border-top: 1px solid var(--rule);
}

.project-row:last-child {
  border-bottom: 1px solid var(--rule);
}

@media (max-width: 860px) {
  .project-row {
    grid-template-columns: 1fr;
  }

  /* o diagrama foi desenhado pra ser lido a ~640 de largura. espremido
     em 335px de telefone, o subtitulo de cada caixa cai pra 4,6px e vira
     sujeira. entao ele rola na horizontal em vez de encolher: melhor
     arrastar um desenho legivel do que olhar um ilegivel inteiro */
  /* ---------- galeria de telas ---------- */

/* tira horizontal de capturas, com rolagem nativa e encaixe por item. no
   celular o polegar arrasta; no desktop a barra fina e o proprio recorte
   do ultimo item dizem que tem mais */
.galeria {
  display: flex;
  /* cada chapa tem a propria altura: sem isso o flex estica a de desktop
     ate a altura da de celular e a legenda cai longe da imagem */
  align-items: flex-start;
  gap: 0.75rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding-bottom: 0.5rem;
  scrollbar-width: thin;
}

.galeria-item {
  flex: none;
  width: 280px;
  scroll-snap-align: start;
  display: grid;
  gap: 0.4rem;
  text-align: left;
  /* entram em cascata quando o card abre, 60ms entre uma e outra, depois
     que o detalhe ja comecou a aparecer */
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 240ms var(--ease-out),
    transform 240ms var(--ease-out);
  transition-delay: calc(140ms + var(--i, 0) * 60ms);
}

.galeria-item[data-tipo="celular"] {
  width: 128px;
}

.card-collapse.is-open .galeria-item {
  opacity: 1;
  transform: translateY(0);
}

/* fechar nao espera ninguem */
.card-collapse:not(.is-open) .galeria-item {
  transition-duration: 100ms;
  transition-delay: 0ms;
}

.galeria-item img {
  display: block;
  width: 100%;
  object-fit: cover;
  object-position: top;
  border: 1px solid var(--rule);
  background: var(--paper-deep);
  transition:
    border-color var(--dur-hover) var(--ease-out),
    transform var(--dur-hover) var(--ease-out);
}

.galeria-item[data-tipo="desktop"] img { aspect-ratio: 16 / 10; }
.galeria-item[data-tipo="celular"] img { aspect-ratio: 585 / 1266; }

.galeria-legenda {
  color: var(--ink-soft);
  font-size: 0.6875rem;
}

@media (hover: hover) and (pointer: fine) {
  .galeria-item:hover img {
    border-color: var(--pen, var(--ink));
    transform: translateY(-2px);
  }
}

.galeria-item:active img {
  transform: translateY(0);
}

/* ---------- lightbox ---------- */

.lightbox {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: min(1200px, 92vw);
  max-height: 92vh;
  color: var(--ink);
}

.lightbox::backdrop {
  background: rgba(231, 233, 225, 0.94);
}

.lightbox-corpo {
  display: grid;
  gap: 0.6rem;
}

.lightbox img {
  display: block;
  max-width: min(1200px, 92vw);
  max-height: 80vh;
  width: auto;
  height: auto;
  margin-inline: auto;
  border: 1px solid var(--pen, var(--rule));
  background: var(--paper-deep);
}

.lightbox-rodape {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  color: var(--ink-soft);
}

.lightbox-legenda {
  margin: 0;
}

.lightbox-fechar {
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-block: 0.6rem 0.15em;
}

.project-diagram {
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }

  .project-diagram svg {
    min-width: 620px;
  }
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.5em;
  color: var(--ink-soft);
  margin-bottom: 0.75rem;
}

.eyebrow-dot {
  width: 0.6em;
  height: 0.6em;
  background: var(--pen, var(--ink));
  flex: none;
}

.project-name {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-variation-settings: 'wdth' 120;
  font-size: clamp(1.8rem, 4vw, 3rem);
  line-height: 1.05;
}

.badge {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--pen, var(--ink));
  border: 1px solid var(--pen, var(--rule));
  padding: 0.25em 0.6em;
}

.project-summary {
  margin-top: 1rem;
  font-size: clamp(1rem, 1.05vw, 1.125rem);
  line-height: 1.6;
  max-width: 46ch;
  color: var(--ink);
}

.project-toggle {
  /* o alvo precisa dos 44px que o dedo pede, mas o sublinhado tem que
     continuar colado no texto. entao o botao cresce pra cima por padding
     (22px) e a margem devolve a mesma medida, deixando o espaco acima
     igual ao de antes e o tracado no mesmo pixel */
  margin-top: 0.125rem;
  padding-block-start: 1.375rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-block-end: 0.15em;
  position: relative;
  z-index: 1;
  transition: transform var(--dur-press) var(--ease-out);
}

/* retorno de pressao: o sublinhado desce 1px junto com o texto */
.project-toggle:active {
  transform: translateY(1px);
}

.toggle-icon {
  display: inline-block;
  transition: transform var(--dur-press) var(--ease-out);
}

.project-toggle[aria-expanded="true"] .toggle-icon {
  transform: rotate(180deg);
}

/* truque do grid-template-rows para altura automatica animada */
.card-collapse {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-collapse) var(--ease-out);
}

.card-collapse.is-open {
  grid-template-rows: 1fr;
}

.card-collapse-inner {
  overflow: hidden;
  min-height: 0;
}

.project-detail {
  padding-top: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 46ch;
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 120ms var(--ease-out),
    transform 120ms var(--ease-out);
}

/* o conteudo entra com a caixa ja quase aberta, e sai depressa: abrir e
   deliberado, fechar e so tirar da frente */
.card-collapse.is-open .project-detail {
  opacity: 1;
  transform: translateY(0);
  transition-duration: 200ms;
  transition-delay: 100ms;
}

.detail-block h4 {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  margin-bottom: 0.4rem;
}

.detail-block p {
  font-size: 1rem;
  line-height: 1.6;
}

.stack-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.stack-list li {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  border: 1px solid var(--rule);
  padding: 0.3em 0.6em;
}

.numeros-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--pen, var(--ink));
}

.project-diagram {
  width: 100%;
}

.project-diagram svg {
  width: 100%;
  height: auto;
}

/* ---------- schematic: nos e arestas ---------- */

.schematic-node .node-plate {
  fill: var(--paper);
  stroke: none;
}

.schematic-node .node-shape,
.schematic-node .node-shape-extra {
  stroke-width: 1.5;
  fill: none;
  transition: stroke-width var(--dur-hover) var(--ease-out);
}

.schematic-node .node-label {
  font-family: var(--font-mono);
  font-size: 11px;
  fill: var(--ink);
}

.schematic-node .node-sub {
  font-family: var(--font-mono);
  font-size: 9px;
  fill: var(--ink-soft);
  transition: fill var(--dur-hover) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .schematic-node:hover .node-shape,
  .schematic-node:hover .node-shape-extra { stroke-width: 2.5; }
  .schematic-node:hover .node-sub { fill: var(--ink); }
}

.schematic-edge {
  fill: none;
  stroke-width: 1.5;
}

.schematic-arrow {
  stroke: none;
}

.schematic-edge-label {
  font-family: var(--font-mono);
  font-size: 9px;
  fill: var(--ink-soft);
}

.schematic-edge-label-bg {
  fill: var(--paper);
}

.schematic-flow-dot {
  fill: currentColor;
}

/* ---------- revelar no scroll ---------- */

/* o estado escondido e posto pelo js (revealOnScroll, em motion.js), nunca
   direto no html: sem js, nada disso existe e o conteudo aparece normal */
.reveal {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- titulo e texto de secao ---------- */

/* a unica regra de titulo de secao que existia saiu junto com a secao
   "como eu trabalho". esta e a mesma medida, agora reaproveitavel */
.section-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-variation-settings: 'wdth' 120;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  margin-bottom: 1rem;
}

.section-text {
  font-size: clamp(1rem, 1.05vw, 1.125rem);
  line-height: 1.6;
  max-width: 52ch;
  color: var(--ink-soft);
  margin-bottom: clamp(2rem, 5vw, 3rem);
}

/* o fecho vem depois do ultimo card, entao a margem dele e pra cima */
.section-text-fecho {
  margin-top: clamp(2rem, 5vw, 3rem);
  margin-bottom: 0;
}

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

.site-footer {
  padding-block: clamp(1.5rem, 4vw, 2.5rem);
  padding-bottom: calc(clamp(1.5rem, 4vw, 2.5rem) + env(safe-area-inset-bottom, 0px));
  color: var(--ink-soft);
  border-top: 1px solid var(--rule);
}

/* menos movimento, nao zero: o fade fica, o deslocamento sai */
@media (prefers-reduced-motion: reduce) {
  .card-collapse,
  .toggle-icon,
  .project-toggle,
  .hero-fan-label {
    transition: none;
  }

  .reveal {
    transform: none;
    transition: opacity 200ms var(--ease-out);
  }

  .reveal.is-visible {
    transform: none;
  }

  .project-detail,
  .card-collapse.is-open .project-detail {
    transform: none;
  }

  .galeria-item,
  .card-collapse.is-open .galeria-item {
    transform: none;
    transition-duration: 200ms;
  }
}