/* Projetos · Editorial (laboratório, 03/11/2026) — proposta única depois da Vitrine rejeitada; só em lab-projetos.html.
   Dois modos sobre a mesma marcação: Grid editorial (capas protagonistas, assimetria pelo formato de cada capa)
   e Lista interativa (nomes grandes; prévia que acompanha o cursor, o teclado, ou abre no toque).
   O contêiner nunca se move (MOTION-SYSTEM): o movimento fica na moldura, na imagem, no texto interno e na prévia flutuante. */

.pj { position: relative; padding: 88px max(var(--gutter), env(safe-area-inset-right)) 104px max(var(--gutter), env(safe-area-inset-left)); border-top: 1px solid rgb(245 242 237 / .08); background: #07090c; }

/* cabeçalho monumental (mesma escala da Horizonte e da Hero) */
.pj__head { margin-bottom: 56px; } /* respiro entre o título da seção e a primeira capa */
.pj__eyebrow { margin: 0 0 18px; font: 500 12px/1.4 "JetBrains Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--copper-l); }
.pj__title { margin: 0; font-weight: 800; font-size: clamp(48px, 15vw, 104px); line-height: .86; letter-spacing: -.062em; }
.pj__title .ln { display: block; overflow: hidden; padding-bottom: .07em; margin-bottom: -.07em; }
.pj__title .ln > span { display: block; }

/* barra: filtros (texto grande, indicador terra) + contagem + Grid/Lista */
.pj__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-bottom: 40px; padding-bottom: 14px; border-bottom: 1px solid rgb(245 242 237 / .12); }
.pj__filters[hidden], .pj__views[hidden] { display: none; }
.pj__filters { display: flex; flex-wrap: wrap; gap: 0 22px; }
.pj__f { position: relative; min-height: 44px; padding: 0; border: 0; background: none; color: rgb(245 242 237 / .5); font: 600 18px/1 "Manrope", "Manrope Fallback", system-ui, sans-serif; letter-spacing: -.02em; cursor: pointer; transition: color var(--dur-base) var(--ease-out); -webkit-tap-highlight-color: transparent; }
.pj__f sup { position: relative; top: -.55em; margin-left: 3px; font: 500 12px/1 "JetBrains Mono", monospace; letter-spacing: .02em; vertical-align: baseline; }
.pj__f::after { content: ""; position: absolute; left: 0; right: 0; bottom: 7px; height: 2px; background: var(--terra); transform: scaleX(0); transform-origin: right center; transition: transform var(--dur-reveal) var(--ease-emph); }
.pj__f[aria-pressed="true"] { color: var(--off); }
.pj__f[aria-pressed="true"]::after { transform: scaleX(1); transform-origin: left center; }
.pj__f.is-pressed { color: var(--copper-l); transition-duration: var(--dur-press); }
.pj__f:focus-visible, .pj__v:focus-visible, .pj__peek:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.pj__right { display: flex; align-items: center; gap: 16px; }
.pj__count { margin: 0; font: 500 12px/1.4 "JetBrains Mono", monospace; letter-spacing: .06em; text-transform: uppercase; color: rgb(245 242 237 / .56); }
.pj__views { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 3px; border: 1px solid rgb(245 242 237 / .2); border-radius: 999px; isolation: isolate; }
.pj__views::before { content: ""; position: absolute; z-index: -1; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 999px; background: var(--off); transition: transform var(--dur-reveal) var(--ease-emph); }
.pj[data-view="lista"] .pj__views::before { transform: translateX(100%); }
.pj__v { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 92px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: none; color: rgb(245 242 237 / .72); font: 600 14px/1 "Manrope", "Manrope Fallback", system-ui, sans-serif; cursor: pointer; transition: color var(--dur-base) var(--ease-out); -webkit-tap-highlight-color: transparent; }
.pj__v svg { width: 13px; height: 13px; flex: none; }
.pj__v[aria-pressed="true"] { color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .pj__f:not([aria-pressed="true"]):hover { color: rgb(245 242 237 / .86); }
  .pj__v:not([aria-pressed="true"]):hover { color: var(--off); }
}

/* lista de projetos — celular: um por linha, capas grandes */
.pj__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 64px; }
.pj__item { position: relative; min-width: 0; }
.pj__item[hidden] { display: none !important; }
.pj__link { display: block; color: inherit; text-decoration: none; border-radius: 4px; transition: opacity var(--dur-reveal) var(--ease-out); -webkit-tap-highlight-color: transparent; }
.pj__link:focus-visible { outline: var(--focus-ring); outline-offset: 8px; }

/* capa: proporção pelo conteúdo (painéis e sites largos, app e chat em retrato) */
.pj__media { position: relative; aspect-ratio: 1600 / 904; border-radius: 4px; background: #0f1419; }
.pj__item[data-shape="p"] .pj__media { aspect-ratio: 4 / 5; }
.pj__frame { position: absolute; inset: 0; overflow: hidden; clip-path: inset(0 round 4px); transition: clip-path 900ms var(--ease-emph); }
.pj__frame picture, .pj__frame img, .pj__frame video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.pj__frame img, .pj__frame video { object-fit: cover; object-position: var(--pos, 50% 50%); }
.pj__frame picture img { transform: scale(1.001); transition: transform 1200ms var(--ease-emph), opacity var(--dur-reveal) var(--ease-out); }
.pj__frame img[data-loaded="false"] { opacity: 0; }
.pj__frame video, .pj__frame .pj__alt { opacity: 0; transition: opacity 520ms var(--ease-out); }
.pj__item.is-playing .pj__frame video, .pj__item.is-playing .pj__frame .pj__alt { opacity: 1; }

/* legenda: nome com presença; categorias e tipo discretos; ano; seta (sinal de link sem depender de hover) */
.pj__info { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "n name go" "n tags year"; align-items: baseline; column-gap: 14px; row-gap: 16px; padding-top: 24px; }
.pj__n { grid-area: n; font: 500 12px/1 "JetBrains Mono", monospace; letter-spacing: .04em; color: var(--copper-l); }
.pj__name { grid-area: name; justify-self: start; margin: 0; padding-bottom: .26em; font-weight: 800; font-size: clamp(34px, 10vw, 46px); line-height: .92; letter-spacing: -.055em; }
.pj__nm { position: relative; display: inline-block; transition: transform var(--dur-reveal) var(--ease-emph); }
.pj__nm::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.2em; height: 2px; background: var(--terra); transform: scaleX(0); transform-origin: right center; transition: transform var(--dur-reveal) var(--ease-emph); }
.pj__tags, .pj__year { font: 500 12px/1.5 "JetBrains Mono", monospace; letter-spacing: .05em; text-transform: uppercase; color: rgb(245 242 237 / .62); }
.pj__tags { grid-area: tags; }
.pj__year { grid-area: year; justify-self: end; }
.pj__go { grid-area: go; align-self: center; position: relative; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgb(245 242 237 / .26); border-radius: 50%; overflow: hidden; }
.pj__go::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--terra); transform: scale(0); transition: transform var(--dur-base) var(--ease-out); }
.pj__go svg { position: relative; width: 14px; height: 14px; transition: transform var(--dur-reveal) var(--ease-emph); }
.pj__peek { display: none; }

/* estados do item inteiro — hover (ponteiro fino), foco e pressão; a moldura recua e a imagem se aproxima */
@media (hover: hover) and (pointer: fine) {
  .pj__link:hover .pj__frame { clip-path: inset(12px round 10px); }
  .pj__link:hover .pj__frame picture img { transform: scale(1.07); }
  .pj__link:hover .pj__nm::after { transform: scaleX(1); transform-origin: left center; }
  .pj__link:hover .pj__go::before { transform: scale(1); }
  .pj__link:hover .pj__go svg { transform: rotate(45deg); }
  .pj[data-view="grid"] .pj__list:has(.pj__link:hover) .pj__link:not(:hover) { opacity: .5; }
  .pj[data-view="grid"][data-cursor="on"] .pj__media { cursor: none; }
}
.pj__link:focus-visible .pj__frame { clip-path: inset(12px round 10px); }
.pj__link:focus-visible .pj__frame picture img { transform: scale(1.07); }
.pj__link:focus-visible .pj__nm::after { transform: scaleX(1); transform-origin: left center; }
.pj__link:focus-visible .pj__go::before { transform: scale(1); }
.pj__link:focus-visible .pj__go svg { transform: rotate(45deg); }
.pj__link.is-pressed .pj__frame { clip-path: inset(8px round 8px); transition-duration: 240ms; }
.pj__link.is-pressed .pj__go::before { transform: scale(1); background: var(--copper-press); transition-duration: var(--dur-press); }

/* botão para a página de todos os projetos (só grid na Home) */
.pj__more { display: flex; justify-content: center; margin-top: 72px; }
@media (min-width: 900px) and (min-height: 560px) { .pj__more { margin-top: 112px; } }

/* cursor "Ver case" sobre as capas (só ponteiro fino; o JS posiciona) */
.pj__cursor { position: fixed; left: 0; top: 0; z-index: 7; width: 0; height: 0; pointer-events: none; }
.pj__cursor-in { position: absolute; left: -52px; top: -52px; display: grid; place-items: center; width: 104px; height: 104px; border-radius: 50%; background: var(--terra); color: var(--off); font: 700 14px/1 "Manrope", "Manrope Fallback", system-ui, sans-serif; letter-spacing: -.01em; transform: scale(0); transition: transform 420ms var(--ease-emph); }
.pj__cursor.is-on .pj__cursor-in { transform: scale(1); }

/* prévia flutuante da Lista (ponteiro fino e teclado) */
.pj__float { position: fixed; left: 0; top: 0; z-index: 6; width: clamp(300px, 28vw, 440px); aspect-ratio: 16 / 10; pointer-events: none; }
.pj__float-in { position: absolute; inset: 0; overflow: hidden; border-radius: 6px; background: #0f1419; clip-path: inset(50% 50% 50% 50% round 6px); opacity: 0; transition: clip-path 620ms var(--ease-emph), opacity 260ms var(--ease-out); }
.pj__float.is-on .pj__float-in { clip-path: inset(0 round 6px); opacity: 1; }
.pj__float-track { position: absolute; inset: 0; transition: transform 700ms var(--ease-emph); }
.pj__float-track img { position: absolute; left: 0; width: 100%; height: 100%; object-fit: cover; }

/* abertura do case: a capa escolhida cresce até a tela inteira e o nome sobe (antes da navegação) */
.pj-open { position: fixed; inset: 0; z-index: 1000; overflow: hidden; background: #07090c; transition: clip-path 640ms var(--ease-emph); }
.pj-open img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pj-open::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(7 9 12 / .78), rgb(7 9 12 / 0) 55%); }
.pj-open__name { position: absolute; z-index: 1; left: max(var(--gutter), env(safe-area-inset-left)); bottom: 6vh; margin: 0; overflow: hidden; padding-bottom: .06em; color: var(--off); font-weight: 800; font-size: clamp(56px, 13vw, 210px); line-height: .9; letter-spacing: -.062em; }
.pj-open__name span { display: block; transform: translateY(105%); transition: transform 720ms var(--ease-emph) 140ms; }
.pj-open.is-on .pj-open__name span { transform: none; }

/* entrada cinematográfica (só com JS e se a seção ainda não está na tela; sem JS tudo aparece) */
.js .pj__title .ln > span { transition: transform 900ms var(--ease-emph); }
.js .pj__title .ln + .ln > span { transition-delay: 80ms; }
.js .pj-wait .pj__title .ln > span { transform: translateY(105%); }
.js .pj__media { transition: clip-path 1100ms var(--ease-emph); }
.js .pj__info { transition: opacity 600ms var(--ease-out) 180ms, transform 800ms var(--ease-emph) 180ms; }
.js .pj__item.pj-in .pj__media { clip-path: inset(100% 0 0 0); }
.js .pj__item.pj-in .pj__frame picture img { transform: scale(1.16); }
.js .pj__item.pj-in .pj__info { opacity: 0; transform: translateY(16px); }

/* tablet e desktop: fileiras de 12 colunas — capa larga ocupa 8, retrato ocupa 4; o segundo da fileira desce (assimetria);
   a última capa larga que sobra sozinha vira plano aberto (21:9). O JS recalcula com filtros. */
@media (min-width: 640px) {
  .pj__list { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; row-gap: 72px; align-items: start; }
  .pj__item { grid-column: span 8; }
  .pj__item[data-shape="p"] { grid-column: span 4; }
  .pj__item[data-solo] { grid-column: 1 / -1; }
  .pj__item[data-second] { margin-top: 64px; }
  /* imagem inteira: a proporção é a da própria capa (larga 1600×904, retrato 4:5), sem recorte */
  .pj__item[data-shape="w"] .pj__media, .pj__item[data-solo] .pj__media { aspect-ratio: 1600 / 904; }
  .pj__item[data-shape="p"] .pj__name { font-size: 30px; }
}
@media (min-width: 900px) and (min-height: 560px) {
  .pj { padding-top: 112px; padding-bottom: 128px; }
  /* título à esquerda; filtros e Grid/Lista alinhados à base do título, à direita (as capas começam mais cedo) */
  .pj__top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 40px; margin-bottom: 48px; }
  .pj__head { margin-bottom: clamp(72px, 7vw, 120px); }
  .pj__title { font-size: clamp(72px, 10vw, 168px); }
  .pj__bar { flex-direction: column; align-items: flex-end; gap: 14px; margin: 0 0 6px; padding: 0; border: 0; }
  .pj__filters { justify-content: flex-end; }
  .pj__list { column-gap: 24px; row-gap: clamp(88px, 11vh, 128px); }
  .pj__item[data-second] { margin-top: clamp(56px, 11vh, 120px); }
  .pj__info { padding-top: 32px; column-gap: 18px; row-gap: 20px; }
  .pj__name { font-size: clamp(44px, 4.4vw, 76px); }
  .pj__item[data-shape="p"] .pj__name { font-size: clamp(36px, 3.4vw, 56px); }
  .pj__tags, .pj__year { font-size: 14px; }
  /* (03/11) o nome não fica mais sobre a capa: a imagem aparece inteira; o destaque só ganha um nome um pouco maior */
  .pj[data-view="grid"] .pj__item[data-lead] .pj__name { font-size: clamp(52px, 5.2vw, 88px); }
}

/* ===== modo Lista ===== */
.pj[data-view="lista"] .pj__list { display: block; border-top: 1px solid rgb(245 242 237 / .14); }
.pj[data-view="lista"] .pj__item { margin: 0; border-bottom: 1px solid rgb(245 242 237 / .14); }
.pj[data-view="lista"] .pj__item::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--terra); transform: scaleX(0); transform-origin: right center; transition: transform var(--dur-reveal) var(--ease-emph); }
.pj[data-view="lista"] .pj__media { display: none; }
.pj[data-view="lista"] .pj__link { display: flex; flex-direction: column; }
.pj[data-view="lista"] .pj__info { grid-template-columns: 30px minmax(0, 1fr) auto; grid-template-areas: "n name year" "n tags tags"; padding: 22px 60px 22px 0; row-gap: 10px; }
.pj[data-view="lista"] .pj__name, .pj[data-view="lista"] .pj__item[data-shape="p"] .pj__name { font-size: clamp(32px, 9vw, 44px); }
.pj[data-view="lista"] .pj__go { display: none; }
/* toque/telas estreitas: o botão + abre a imagem do projeto na própria linha (sem hover) */
.pj[data-view="lista"][data-preview="inline"] .pj__peek { position: absolute; top: 16px; right: 0; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgb(245 242 237 / .26); border-radius: 50%; background: none; color: var(--off); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }
.pj__peek svg { width: 14px; height: 14px; transition: transform var(--dur-reveal) var(--ease-emph); }
.pj__peek[aria-expanded="true"] { background: var(--off); color: var(--ink); }
.pj__peek[aria-expanded="true"] svg { transform: rotate(45deg); }
.pj[data-view="lista"][data-preview="inline"] .pj__item[data-open] .pj__media { order: 2; display: block; max-height: 62vh; margin-bottom: 22px; animation: pj-reveal 760ms var(--ease-emph) both; }
@keyframes pj-reveal { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
@media (min-width: 640px) { .pj[data-view="lista"] .pj__item { grid-column: auto; } }
@media (min-width: 900px) and (min-height: 560px) {
  .pj[data-view="lista"] .pj__info { grid-template-columns: 64px minmax(0, 1fr) minmax(0, 360px) 72px 44px; grid-template-areas: "n name tags year go"; align-items: center; column-gap: 24px; padding: 20px 0; row-gap: 0; }
  .pj[data-view="lista"] .pj__name, .pj[data-view="lista"] .pj__item[data-shape="p"] .pj__name { font-size: clamp(44px, 5vw, 84px); }
  .pj[data-view="lista"][data-preview="inline"] .pj__info { padding-right: 68px; }
  .pj[data-view="lista"][data-preview="inline"] .pj__peek { top: 50%; margin-top: -22px; }
  .pj[data-view="lista"][data-preview="float"] .pj__go { display: grid; }
}
@media (hover: hover) and (pointer: fine) {
  .pj[data-view="lista"] .pj__list:has(.pj__link:hover) .pj__link:not(:hover) { opacity: .3; }
  .pj[data-view="lista"] .pj__link:hover .pj__nm { transform: translateX(18px); }
  .pj[data-view="lista"] .pj__item:hover::after { transform: scaleX(1); transform-origin: left center; }
}
.pj[data-view="lista"] .pj__link:focus-visible .pj__nm { transform: translateX(18px); }

/* transições de vista (Grid ↔ Lista e filtros), com classe na raiz só durante a troca */
:root.pj-vt::view-transition-group(*) { animation-duration: 720ms; animation-timing-function: cubic-bezier(.2, 0, 0, 1); }
:root.pj-vt::view-transition-old(root), :root.pj-vt::view-transition-new(root) { animation-duration: 240ms; }
::view-transition-new(*.pj-media):only-child { animation: pj-vt-in 860ms cubic-bezier(.2, 0, 0, 1) both; }
::view-transition-old(*.pj-media):only-child { animation: pj-vt-out 300ms cubic-bezier(.2, 0, 0, 1) both; }
::view-transition-new(*.pj-item):only-child { animation: pj-vt-in 760ms cubic-bezier(.2, 0, 0, 1) both; }
::view-transition-old(*.pj-item):only-child { animation: pj-vt-out 280ms cubic-bezier(.2, 0, 0, 1) both; }
@keyframes pj-vt-in { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
@keyframes pj-vt-out { to { opacity: 0; transform: scale(.97); } }

@media (prefers-reduced-motion: reduce) {
  .pj *, .pj *::before, .pj *::after, .pj-open, .pj-open * { transition-duration: 1ms !important; transition-delay: 0ms !important; animation-duration: 1ms !important; }
  .pj__link:hover .pj__frame picture img, .pj__link:focus-visible .pj__frame picture img { transform: none; }
  .js .pj__item.pj-in .pj__media { clip-path: none; }
  .js .pj__item.pj-in .pj__info, .js .pj-wait .pj__title .ln > span { opacity: 1; transform: none; }
}