/* ==========================================================
   yusoares · portfólio
   Abertura escura (Fabricio) · grade de projetos (Kimi Lewis)
   cards arredondados com hover (Femke) · revelação na rolagem (Van Schneider)
   ========================================================== */

:root {
  --escuro: #0b0b0b;
  --escuro-texto: #f1eee8;
  --escuro-suave: rgba(241, 238, 232, 0.62);
  --escuro-linha: rgba(241, 238, 232, 0.14);

  --claro: #f4f2ee;
  --tinta: #141414;
  --tinta-suave: #6d6962;
  --linha: rgba(20, 20, 20, 0.12);

  --destaque: #c4561a;        /* laranja da Recreio */
  --destaque-2: #c6f04e;      /* verde da Muda */
  --etiqueta-fundo: #fde7d8;
  --etiqueta-texto: #8a3b12;

  --display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --serif: "EB Garamond", Georgia, serif;
  --sans: "Inter", system-ui, sans-serif;

  --raio: 24px;
  --raio-p: 14px;
  --margem: clamp(16px, 5vw, 80px);
  --suave: cubic-bezier(0.2, 0.7, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--escuro);
  color: var(--escuro-texto);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.travado { overflow: hidden; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }

.moldura { width: 100%; max-width: 1440px; margin: 0 auto; padding-inline: var(--margem); }

/* links sublinhados pontilhados, como no Fabricio */
.topo-links a, .hero-bio a {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: opacity .2s;
}
.topo-links a:hover { opacity: .6; }

/* ---------------- ABERTURA ---------------- */
.abertura { display: flex; }
.abertura > .moldura { display: flex; flex-direction: column; padding-top: clamp(24px, 6vh, 72px); }

.topo {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding-bottom: 22px; border-bottom: 1px solid var(--escuro-linha);
}
/* logotipo: Fraunces pesada, cantos suaves e "wonk" ligado, com ponto laranja */
.marca {
  display: inline-flex; align-items: baseline;
  font-family: "Fraunces", var(--serif); font-weight: 800; font-size: 30px; line-height: 1;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
  letter-spacing: -0.045em; font-kerning: normal; text-decoration: none;
}
.marca-ponto {
  display: inline-block; width: .2em; height: .2em; margin-left: .07em; border-radius: 50%;
  background: var(--destaque); transform: translateY(-.02em);
  transition: transform .4s var(--suave);
}
a.marca:hover .marca-ponto { transform: translateY(-.35em); }
.painel-barra .marca { font-size: 24px; }
.topo-links { display: flex; gap: clamp(16px, 3vw, 36px); font-size: 18px; }

.hero {
  flex: 1;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end;
  gap: clamp(32px, 6vw, 120px);
  padding-block: clamp(40px, 6vw, 88px) clamp(40px, 5vw, 72px);
  border-bottom: 1px solid var(--escuro-linha);
}
.titulo-display {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(46px, 5.6vw, 88px); line-height: 0.92; letter-spacing: 0.002em;
  margin: 0; max-width: 21ch;
}
.hero-bio { margin: clamp(28px, 4vh, 44px) 0 0; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; color: var(--escuro-texto); }

/* foto com cartões empilhados atrás (Femke) */
.hero-foto { position: relative; margin: 0; width: clamp(220px, 25vw, 380px); }
.foto-mascara { position: relative; z-index: 2; overflow: hidden; border-radius: var(--raio); }
.hero-foto img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.pilha {
  position: absolute; inset: 0; border-radius: var(--raio); z-index: 1;
  transition: transform .7s var(--suave);
}
.pilha-1 { background: var(--destaque); transform: rotate(-5deg) translate(-10px, 6px); }
.pilha-2 { background: #2c4f7f; transform: rotate(4deg) translate(12px, 4px); }
.hero-foto:hover .pilha-1 { transform: rotate(-9deg) translate(-26px, 10px); }
.hero-foto:hover .pilha-2 { transform: rotate(8deg) translate(28px, 6px); }

.etiqueta {
  position: absolute; z-index: 3; top: 9%; right: -10%;
  font-family: var(--sans); font-weight: 600; font-size: clamp(13px, 1.1vw, 16px);
  padding: .5em 1.05em; border-radius: 999px;
  background: var(--etiqueta-fundo); color: var(--etiqueta-texto); border: 2px solid var(--etiqueta-texto);
  transform: rotate(-6deg); box-shadow: 0 6px 18px rgba(0,0,0,.25);
  transition: transform .5s var(--suave);
}
.hero-foto:hover .etiqueta { transform: rotate(-2deg) translateY(-4px); }

/* ---------------- PROJETOS ---------------- */
.projetos { background: var(--claro); color: var(--tinta); padding-block: clamp(40px, 5vw, 72px) clamp(56px, 6vw, 96px); }
.projetos-titulo {
  display: flex; align-items: center; gap: 8px; margin: 0 0 clamp(28px, 4vw, 48px);
  font-family: var(--sans); font-weight: 500; font-size: 20px; letter-spacing: -0.01em;
}

/* duas colunas independentes: os cards se encaixam como quebra-cabeça */
.grade {
  display: grid; grid-template-columns: 1fr 1fr; align-items: start;
  column-gap: clamp(16px, 2.6vw, 36px);
}
.coluna { display: flex; flex-direction: column; gap: clamp(28px, 3.4vw, 48px); }
.coluna-2 { padding-top: clamp(72px, 10vw, 150px); }

.card { display: block; text-decoration: none; color: inherit; cursor: pointer; --giro: -0.8deg; }
.coluna-2 .card { --giro: 0.8deg; }
.card-imagem {
  position: relative; overflow: hidden; border-radius: var(--raio);
  aspect-ratio: var(--proporcao, 4 / 5); background: #e4e0d8;
  transition: transform .6s var(--suave), box-shadow .6s var(--suave);
}
.card-imagem img {
  width: 100%; height: 100%; object-fit: cover; object-position: var(--posicao, 50% 50%);
  transition: transform 1s var(--suave);
}
.card:hover .card-imagem, .card:focus-visible .card-imagem {
  transform: translateY(-8px) rotate(var(--giro));
  box-shadow: 0 28px 50px -18px rgba(20, 20, 20, .35);
}
.card:hover .card-imagem img { transform: scale(1.05); }
.card:focus-visible { outline: none; }
.card:focus-visible .card-imagem { outline: 2px solid var(--tinta); outline-offset: 4px; }
.card-titulo { margin: 14px 0 2px; font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 2vw, 28px); line-height: 1.2; }
.card-categoria { margin: 0; font-family: var(--sans); font-size: 13px; color: var(--tinta-suave); }

/* etiqueta que segue o cursor */
.cursor-etiqueta {
  position: fixed; left: 0; top: 0; z-index: 50; pointer-events: none;
  font-family: var(--sans); font-weight: 600; font-size: 14px;
  padding: .6em 1.1em; border-radius: 999px;
  background: var(--etiqueta-fundo); color: var(--etiqueta-texto); border: 2px solid var(--etiqueta-texto);
  opacity: 0; transform: translate(-50%, -50%) scale(.6) rotate(-6deg);
  transition: opacity .25s, transform .35s var(--suave);
  will-change: left, top;
}
.cursor-etiqueta.visivel { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-6deg); }
@media (hover: none), (pointer: coarse) { .cursor-etiqueta { display: none; } }

/* ---------------- CONTATO ---------------- */
.contato { padding-block: clamp(56px, 6vw, 96px) 40px; }
.contato-chamada { margin: 0 0 18px; font-size: 21px; color: var(--escuro-suave); }
.contato-titulo { max-width: 14ch; }
.contato-botoes { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(32px, 4vw, 48px); }
.botao {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-weight: 500; font-size: 16px; text-decoration: none;
  padding: 15px 26px; border-radius: 999px;
  background: var(--escuro-texto); color: var(--escuro); border: 1px solid var(--escuro-texto);
  transition: transform .3s var(--suave), background .3s, color .3s;
}
.botao:hover { transform: translateY(-3px); }
.botao-contorno { background: transparent; color: var(--escuro-texto); border-color: var(--escuro-linha); }
.botao-contorno:hover { border-color: var(--escuro-texto); }
.rodape {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: clamp(80px, 10vw, 140px); padding-top: 22px; border-top: 1px solid var(--escuro-linha);
  font-size: 16px; color: var(--escuro-suave);
}
.rodape a { text-decoration: none; }
.rodape a:hover { color: var(--escuro-texto); }

/* ---------------- PAINEL DO PROJETO ---------------- */
.painel {
  position: fixed; inset: 0; z-index: 100; overflow-y: auto; overscroll-behavior: contain;
  background: var(--claro); color: var(--tinta);
  transform: translateY(100%); transition: transform .75s var(--suave);
  scroll-behavior: auto;
}
.painel.aberto { transform: none; }
.painel-barra {
  position: sticky; top: 0; z-index: 5;
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px var(--margem);
  background: rgba(244, 242, 238, .82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linha);
}
.fechar {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-family: var(--sans); font-weight: 500; font-size: 14px;
  padding: 9px 16px; border-radius: 999px; border: 1px solid var(--linha); background: #fff;
  transition: background .2s, color .2s;
}
.fechar:hover { background: var(--tinta); color: var(--claro); }
.fechar:focus { outline: none; }
.fechar:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }

.proj { padding-bottom: clamp(60px, 8vw, 120px); }
.proj-cabecalho { padding-block: clamp(48px, 8vw, 110px) clamp(32px, 4vw, 56px); }
.proj-categoria { margin: 0 0 14px; font-family: var(--sans); font-size: 14px; color: var(--tinta-suave); }
.proj-titulo {
  margin: 0; font-family: var(--serif); font-weight: 400;
  font-size: clamp(42px, 7vw, 108px); line-height: 1; letter-spacing: -0.02em; max-width: 16ch;
}
.proj-intro {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(28px, 6vw, 120px); margin-top: clamp(32px, 5vw, 64px);
  padding-top: 28px; border-top: 1px solid var(--linha);
}
.proj-resumo { margin: 0; font-size: clamp(21px, 2vw, 28px); line-height: 1.35; max-width: 30ch; }
.ficha { margin: 0; display: grid; gap: 18px; font-family: var(--sans); font-size: 14px; line-height: 1.5; }
.ficha dt { color: var(--tinta-suave); margin-bottom: 2px; }
.ficha dd { margin: 0; }

.blocos { display: flex; flex-direction: column; gap: clamp(14px, 1.6vw, 24px); }
.revela { overflow: hidden; border-radius: var(--raio-p); background: #e4e0d8; }
.revela img, .revela video { width: 100%; }
.proj-capa { border-radius: var(--raio); }
.linha-imagens { display: grid; gap: clamp(14px, 1.6vw, 24px); }
.linha-imagens.dupla { grid-template-columns: 1fr 1fr; }
.linha-imagens.trio { grid-template-columns: repeat(3, 1fr); }

.bloco-texto {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(20px, 6vw, 120px);
  padding-block: clamp(48px, 7vw, 110px);
}
.bloco-texto h3 { margin: 0; font-family: var(--sans); font-weight: 500; font-size: 15px; }
.bloco-texto p { margin: 0 0 1em; font-size: clamp(19px, 1.5vw, 22px); line-height: 1.55; max-width: 58ch; }
.bloco-texto p:last-child { margin-bottom: 0; }

.citacao {
  margin: 0; padding-block: clamp(56px, 9vw, 140px);
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(30px, 4.4vw, 64px); line-height: 1.12; letter-spacing: -0.015em;
  max-width: 22ch; margin-inline: auto; text-align: center;
}

/* posts com moldura de rede social */
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 32px); padding-block: clamp(24px, 3vw, 40px); }
.post {
  background: #fff; border: 1px solid #dbdbdb; border-radius: 14px; overflow: hidden;
  font-family: var(--sans); font-size: 14px; color: #111; line-height: 1.4;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  transition: transform .5s var(--suave), box-shadow .5s var(--suave);
}
.post:hover { transform: translateY(-6px); box-shadow: 0 22px 40px -20px rgba(0,0,0,.3); }
.post-topo { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.post-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: none; padding: 2px;
  background: conic-gradient(from 200deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #feda75);
}
.post-avatar span {
  display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%;
  background: #111; color: #fff; border: 2px solid #fff; font-size: 9px; font-weight: 600; letter-spacing: -.02em;
}
.post-nome { font-weight: 600; flex: 1; }
.post-mais { color: #111; letter-spacing: 1px; }
.post .revela { border-radius: 0; }
.post img { aspect-ratio: 4 / 5; object-fit: cover; }
.post-acoes { display: flex; align-items: center; gap: 14px; padding: 10px 12px 6px; }
.post-acoes svg { width: 23px; height: 23px; }
.post-acoes .salvar { margin-left: auto; }
.post-legenda { margin: 0; padding: 0 12px 14px; }
.post-legenda b { font-weight: 600; margin-right: 4px; }

/* próximo projeto */
.proximo { margin-top: clamp(80px, 10vw, 150px); padding-top: 28px; border-top: 1px solid var(--linha); }
.proximo a {
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(140px, 26vw, 360px); align-items: end; gap: 24px;
  text-decoration: none;
}
.proximo-rotulo { margin: 0 0 10px; font-family: var(--sans); font-size: 14px; color: var(--tinta-suave); }
.proximo-titulo { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 5vw, 76px); line-height: 1.02; letter-spacing: -0.02em; }
.proximo-titulo span { display: inline-block; transition: transform .5s var(--suave); }
.proximo a:hover .proximo-titulo span { transform: translateX(10px); }
.proximo-imagem { overflow: hidden; border-radius: var(--raio-p); aspect-ratio: 4 / 3; }
.proximo-imagem img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--suave); }
.proximo a:hover .proximo-imagem img { transform: scale(1.06); }

/* ---------------- REVELAÇÃO NA ROLAGEM ---------------- */
.js [data-reveal] { opacity: 0; transform: translateY(32px); transition: opacity 1s var(--suave), transform 1.1s var(--suave); transition-delay: var(--atraso, 0s); }
.js [data-reveal].visivel { opacity: 1; transform: none; }

.js .abertura .hero-bio { transition-duration: .7s, .8s; transition-delay: .35s; }

/* foto: a máscara abre de baixo para cima, depois os cartões se abrem em leque e a etiqueta "cai" */
.js [data-reveal="foto"] { opacity: 1; transform: none; }
.js .hero-foto { transform: translateY(48px); transition: transform 1.9s var(--suave) .3s; }
.js .hero-foto.visivel { transform: none; }
.js .hero-foto .foto-mascara { clip-path: inset(100% 0 0 0 round var(--raio)); transition: clip-path 1.7s cubic-bezier(.65, 0, .25, 1) .3s; }
.js .hero-foto img { transform: scale(1.3); transition: transform 2.4s var(--suave) .3s; }
.js .hero-foto.visivel .foto-mascara { clip-path: inset(0 0 0 0 round var(--raio)); }
.js .hero-foto.visivel img { transform: none; }
.js .hero-foto:not(.visivel) .pilha, .js .hero-foto:not(.visivel) .etiqueta { opacity: 0; }
.js .hero-foto.visivel .pilha-1 { animation: leque-1 1.1s var(--suave) 1.5s backwards; }
.js .hero-foto.visivel .pilha-2 { animation: leque-2 1.1s var(--suave) 1.62s backwards; }
.js .hero-foto.visivel .etiqueta { animation: etiqueta-entra .7s cubic-bezier(.3, 1.6, .5, 1) 2.1s backwards; }
@keyframes leque-1 { from { transform: none; opacity: 0; } to { transform: rotate(-5deg) translate(-10px, 6px); opacity: 1; } }
@keyframes leque-2 { from { transform: none; opacity: 0; } to { transform: rotate(4deg) translate(12px, 4px); opacity: 1; } }
@keyframes etiqueta-entra { from { transform: rotate(-24deg) scale(.4); opacity: 0; } to { transform: rotate(-6deg); opacity: 1; } }

.palavra { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.palavra > span { display: inline-block; transform: translateY(105%); transition: transform 1.1s var(--suave); transition-delay: calc(var(--i, 0) * 55ms); }
.abertura .palavra > span { transition-duration: .75s; transition-delay: calc(var(--i, 0) * 32ms); }
.visivel .palavra > span { transform: none; }

.js .card { opacity: 0; transform: translateY(40px); transition: opacity .7s var(--suave), transform .8s var(--suave); }
.js .card.visivel { opacity: 1; transform: none; }

.js .revela { clip-path: inset(14% 0 0 0 round var(--raio-p)); transition: clip-path 1.3s var(--suave); }
.js .revela > img, .js .revela > video { transform: scale(1.12); transition: transform 1.6s var(--suave); }
.js .revela.visivel { clip-path: inset(0 0 0 0 round var(--raio-p)); }
.js .revela.visivel > img, .js .revela.visivel > video { transform: none; }
.js .post .revela, .js .post .revela.visivel { clip-path: none; }

/* ---------------- RESPONSIVO ---------------- */
@media (max-width: 900px) {
  .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .linha-imagens.trio { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 720px) {
  body { font-size: 18px; }
  .topo-links a[href="#projetos"] { display: none; }
  .hero { grid-template-columns: 1fr; align-items: start; }
  .hero-foto { order: -1; width: min(64vw, 300px); margin: 12px 0 8px 12px; }
  .etiqueta { right: -18%; }
  .grade { display: flex; flex-direction: column; gap: 44px; }
  .coluna { display: contents; }
  .card-imagem { aspect-ratio: 4 / 5 !important; }
  .proj-intro, .bloco-texto { grid-template-columns: 1fr; }
  .linha-imagens.dupla, .linha-imagens.trio { grid-template-columns: 1fr; }
  .posts { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; }
  .proximo a { grid-template-columns: 1fr; }
  .citacao { text-align: left; margin-inline: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation: none !important; }
  .js [data-reveal], .js .card { opacity: 1; transform: none; }
  .js .hero-foto .foto-mascara, .js .revela { clip-path: none; }
  .js .hero-foto .pilha, .js .hero-foto .etiqueta { opacity: 1; }
  .js .hero-foto { transform: none; }
  .js .hero-foto img, .js .revela > img, .js .revela > video, .palavra > span { transform: none; }
}