/* Apresentações dos projetos dentro do site (case-<id>.html, 03/11/2026). Gerado por testes/projetos/gerar-cases.py.
   Imagens sempre inteiras (altura automática, sem recorte); textos com respiro; o case nunca leva para fora do site —
   só um projeto real com site no ar ganha, no fim, o botão "Visitar o site". Só transform/opacity nas animações. */

.cs { --cs-accent: var(--copper-l); padding: calc(var(--header-h) + env(safe-area-inset-top) + 40px) max(var(--gutter), env(safe-area-inset-right)) 120px max(var(--gutter), env(safe-area-inset-left)); }

/* abertura */
.cs__hero { display: grid; gap: 22px; margin-bottom: 48px; }
.cs__crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font: 500 12px/1.4 "JetBrains Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: rgb(245 242 237 / .6); }
.cs__crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--cs-accent); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 calc(50% + .8em) / 0 1px no-repeat; transition: background-size var(--dur-base) var(--ease-out); }
.cs__crumbs a:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); border-radius: 4px; }
@media (hover: hover) and (pointer: fine) { .cs__crumbs a:hover { background-size: 100% 1px; } }
.cs__title { margin: 0; font-weight: 800; font-size: clamp(52px, 15vw, 104px); line-height: .88; letter-spacing: -.062em; }
.cs__title .ln { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.cs__title .ln > span { display: block; animation: cs-rise .9s var(--ease-emph) both; }
@keyframes cs-rise { from { transform: translateY(105%); } }
.cs__lead { margin: 0; max-width: 28ch; font-size: clamp(22px, 5.8vw, 30px); line-height: 1.25; letter-spacing: -.02em; color: rgb(245 242 237 / .88); }
.cs__meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px 32px; margin: 8px 0 0; padding-top: 22px; border-top: 1px solid rgb(245 242 237 / .14); }
.cs__meta dt, .cs__k, .cs__next-k, .cs__dom { font: 500 12px/1.4 "JetBrains Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.cs__meta dt { margin-bottom: 8px; color: var(--cs-accent); }
.cs__meta dd { margin: 0; font-size: 16px; line-height: 1.45; color: rgb(245 242 237 / .88); }

/* capa: imagem inteira */
.cs__cover { margin: 0 0 88px; }
.cs__cover img, .cs__mod img, .cs__det img { display: block; width: 100%; height: auto; border-radius: 14px; background: #10151c; }

/* blocos de texto: rótulo à esquerda, texto à direita (no desktop) */
.cs__k { margin: 0 0 22px; color: var(--cs-accent); }
.cs__intro, .cs__ent, .cs__ficha { margin: 0 0 88px; }
.cs__txt p { margin: 0 0 1em; max-width: 34ch; font-size: clamp(20px, 5vw, 26px); line-height: 1.4; letter-spacing: -.012em; color: rgb(245 242 237 / .9); }
.cs__txt p:last-child { margin-bottom: 0; }
.cs__list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid rgb(245 242 237 / .12); }
.cs__list li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; padding: 22px 0; border-top: 1px solid rgb(245 242 237 / .12); }
.cs__list .n { grid-row: 1 / span 2; font: 500 12px/1.9 "JetBrains Mono", monospace; color: var(--cs-accent); }
.cs__list h3 { margin: 0 0 8px; font-size: 20px; line-height: 1.2; letter-spacing: -.02em; }
.cs__list p { margin: 0; max-width: 60ch; font-size: 16px; line-height: 1.55; color: rgb(245 242 237 / .76); }
.cs__ficha dl { display: grid; gap: 18px; margin: 0; }
.cs__ficha dt { margin-bottom: 6px; font-weight: 700; font-size: 16px; }
.cs__ficha dd { margin: 0; max-width: 60ch; font-size: 16px; line-height: 1.55; color: rgb(245 242 237 / .76); }

/* capítulos de imagens e galeria */
.cs__cap { margin: 0 0 88px; }
.cs__mods { display: grid; gap: 20px; }
.cs__mod, .cs__det, .cs__film { margin: 0; }
.cs__gal { display: grid; gap: 20px; }
.cs__det video, .cs__film video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 14px; background: #10151c; }
.cs__film { margin: 0 0 88px; }
.cs__film figcaption { margin-top: 14px; font-size: 14px; line-height: 1.45; color: rgb(245 242 237 / .6); }

/* desempenho: capítulos longos só são renderizados quando se aproximam da tela (o primeiro quadro não espera a página inteira) */
.cs__ent, .cs__cap, .cs__film, .cs__ficha, .cs__end { content-visibility: auto; contain-intrinsic-size: auto 900px; }

/* fim (03/11): site do cliente (se houver) e cards para escolher qualquer outro projeto, começando pelo próximo.
   Celular: trilho com rolagem lateral e encaixe; a partir de 760px: grade 2 + 3 (imagem sempre inteira). */
.cs__end { display: grid; gap: 40px; padding-top: 48px; border-top: 1px solid rgb(245 242 237 / .14); }
.cs__end-a { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; padding-bottom: 48px; border-bottom: 1px solid rgb(245 242 237 / .14); }
.cs__dom { margin: 0; color: rgb(245 242 237 / .6); }
.cs__more { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; }
.cs__more .cs__k { margin: 0; }
.cs__all { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--off); font-weight: 600; font-size: 16px; text-decoration: none; }
.cs__all svg { transition: transform var(--dur-reveal) var(--ease-emph); }
.cs__all span { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size var(--dur-base) var(--ease-out); }
.cs__all:focus-visible { outline: var(--focus-ring); outline-offset: 6px; border-radius: 6px; }
.cs__others { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 360px); gap: 16px; margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter) 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); overscroll-behavior-x: contain; scrollbar-width: none; }
.cs__others::-webkit-scrollbar { display: none; }
.cs__o { min-width: 0; scroll-snap-align: start; }
.cs__card { display: grid; gap: 16px; color: inherit; text-decoration: none; border-radius: 12px; -webkit-tap-highlight-color: transparent; }
.cs__card:focus-visible { outline: var(--focus-ring); outline-offset: 6px; }
.cs__card-m { position: relative; display: block; overflow: hidden; aspect-ratio: 1600 / 904; border-radius: 12px; background: #10151c; }
.cs__card-m picture, .cs__card-m img { display: block; width: 100%; height: 100%; }
.cs__card-m img { object-fit: cover; transition: transform 1100ms var(--ease-emph); }
.cs__o-tag { position: absolute; left: 12px; top: 12px; padding: 7px 10px; border-radius: 999px; background: rgb(11 15 20 / .78); font: 500 12px/1 "JetBrains Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--cs-accent); }
.cs__card-t { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.cs__card-n { padding-bottom: .14em; font-weight: 800; font-size: 26px; line-height: 1.05; letter-spacing: -.04em; background: linear-gradient(var(--cs-accent), var(--cs-accent)) 0 100% / 0 2px no-repeat; transition: background-size var(--dur-reveal) var(--ease-emph); }
.cs__card-y, .cs__card-d { font: 500 12px/1.5 "JetBrains Mono", monospace; letter-spacing: .06em; text-transform: uppercase; color: rgb(245 242 237 / .6); }
.cs__card-d { margin-top: -6px; }
@media (hover: hover) and (pointer: fine) {
  .cs__all:hover { color: var(--cs-accent); }
  .cs__all:hover span { background-size: 100% 1px; }
  .cs__all:hover svg { transform: rotate(45deg); }
  .cs__card:hover .cs__card-m img { transform: scale(1.04); }
  .cs__card:hover .cs__card-n { background-size: 100% 2px; }
}
.cs__card:focus-visible .cs__card-n { background-size: 100% 2px; }
@media (min-width: 760px) {
  .cs__others { grid-auto-flow: row; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 56px 24px; margin: 0; padding: 0; overflow: visible; }
  .cs__o { grid-column: span 2; }
  .cs__o:nth-child(-n + 2) { grid-column: span 3; }
  .cs__o:nth-child(-n + 2) .cs__card-n { font-size: clamp(32px, 3.4vw, 52px); }
}

/* entrada: só para o que começa abaixo da dobra (cases.js marca .cs-wait); sem JS tudo aparece */
.cs-anim .cs-rv { transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-emph); }
.cs-anim .cs-rv.cs-wait { opacity: 0; transform: translateY(28px); }

@media (min-width: 900px) and (min-height: 560px) {
  .cs { padding-top: calc(var(--header-h) + 72px); padding-bottom: 144px; }
  .cs__hero { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); column-gap: 64px; row-gap: 32px; align-items: end; margin-bottom: 64px; }
  .cs__crumbs, .cs__title { grid-column: 1 / -1; }
  .cs__title { font-size: clamp(88px, 11vw, 184px); }
  .cs__meta { grid-column: 2; grid-row: 3; margin: 0; }
  .cs__lead { grid-column: 1; grid-row: 3; align-self: start; }
  .cs__cover { margin-bottom: 128px; }
  .cs__intro, .cs__ent, .cs__ficha { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); column-gap: 64px; margin-bottom: 128px; }
  .cs__intro .cs__k, .cs__ent .cs__k, .cs__ficha .cs__k { margin: 0; padding-top: 8px; }
  .cs__cap { margin-bottom: 128px; }
  .cs__mods { gap: 24px; }
  .cs__gal { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .cs__film { margin-bottom: 128px; }
  .cs__end { gap: 56px; padding-top: 72px; }
  .cs__end-a { padding-bottom: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  .cs *, .cs *::before, .cs *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
  .cs-anim .cs-rv.cs-wait { opacity: 1; transform: none; }
}

/* (04/11) projetos reais além do Capital Focus: texto de abertura de capítulo e nota de autoria */
.cs__ctx { margin: -4px 0 28px; max-width: 52ch; font-size: 18px; line-height: 1.55; color: rgb(245 242 237 / .76); }
.cs__auth { margin: 4px 0 0; max-width: 60ch; font-size: 14px; line-height: 1.5; color: rgb(245 242 237 / .62); }

/* Best Foe: cartaz de show de rua. Vermelho do próprio site (#f24a3f: 5,2:1 sobre o ink) e a sombra deslocada das molduras dele.
   Só cor, caixa e sombra: nada se move a mais que nos outros cases. */
.cs[data-case="bestfoe"] { --cs-accent: #f24a3f; }
.cs[data-case="bestfoe"] .cs__title { text-transform: uppercase; letter-spacing: -.045em; }
.cs[data-case="bestfoe"] .cs__lead { max-width: 30ch; font-weight: 700; letter-spacing: -.025em; }
.cs[data-case="bestfoe"] .cs__meta, .cs[data-case="bestfoe"] .cs__end, .cs[data-case="bestfoe"] .cs__end-a { border-color: rgb(242 74 63 / .45); }
.cs[data-case="bestfoe"] .cs__cover img, .cs[data-case="bestfoe"] .cs__mod img { border-radius: 4px; box-shadow: 8px 8px 0 #e3261b; }
.cs[data-case="bestfoe"] .cs__film video { border-radius: 4px; box-shadow: 8px 8px 0 #e3261b; }
.cs[data-case="bestfoe"] .cs__mods { gap: 32px; }
@media (min-width: 900px) { .cs[data-case="bestfoe"] .cs__cover img, .cs[data-case="bestfoe"] .cs__mod img, .cs[data-case="bestfoe"] .cs__film video { box-shadow: 14px 14px 0 #e3261b; } }

/* Natalie Cavalcante: editorial e acolhedor. Areia do próprio sistema (#e3c7ae), título mais leve, cantos mais macios. */
.cs[data-case="natalie"] { --cs-accent: #e3c7ae; }
.cs[data-case="natalie"] .cs__title { font-weight: 500; letter-spacing: -.045em; }
.cs[data-case="natalie"] .cs__lead { max-width: 32ch; font-weight: 400; color: rgb(245 242 237 / .82); }
.cs[data-case="natalie"] .cs__cover img, .cs[data-case="natalie"] .cs__mod img, .cs[data-case="natalie"] .cs__film video { border-radius: 22px; }
.cs[data-case="natalie"] .cs__mods { gap: 28px; }

/* (04/11) telas de celular lado a lado: 3 colunas a partir de 760px; no celular, uma por vez, sem passar de 360px */
.cs__cel { display: grid; gap: 20px; justify-items: center; }
.cs__cel .cs__mod { width: 100%; max-width: 360px; }
@media (min-width: 760px) { .cs__cel { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; align-items: start; } .cs__cel .cs__mod { max-width: none; } }
.cs[data-case="bestfoe"] .cs__cel img { border-radius: 14px; }