/* Páginas de case (/case/<slug>). Autoral, nunca passa pelo purgecss.

   Todas as medidas saíram do frame do Figma, que é fixo em 1440. A conversão para
   em usa o mesmo pé do resto do site — body{font-size:clamp(15px,1vw,20px)}, que em
   1440 dá exatamente 15px — então 1em = 15px na largura em que o design foi feito.
   Assim o case respira junto com a nav e o footer em vez de brigar com eles.

   O gutter bate por acaso feliz: .container do Webflow tem padding lateral 2.5em
   (37.5px em 1440) e o Figma começa o conteúdo em x=37 e termina em x=1400. A
   coluna de imagens do Figma tem 1365 de largura, que é 1440-2x37.5 arredondado. */

/* ---------- hero (1440x600 no Figma, x=0, y=0) ---------- */
/* O hero.jpg exportado do Figma achatou tres camadas numa foto so: um fundo em
   gradiente que la CICLA de cor, o letreiro "app" chapado e o mockup do browser.
   Por isso a pagina estava estatica. Os valores abaixo sao medidos, nao estimados:
   - as duas pontas do gradiente saem de gl.readPixels no canvas do prototipo,
     amostrado a cada 500ms nos quatro cantos do hero;
   - o periodo (~7,5s ida e volta) sai do intervalo entre extremos na mesma serie;
   - #C3CAD2 e a cor do letreiro, constante nas 26 amostras;
   - o retangulo do mockup (x=262 y=201 w=917 h=399 no frame de 1440) sai de uma
     varredura de luminancia no proprio hero.jpg (tools/hero-layers.py).
   O hero nao tem mais margin-top: no Figma ele comeca em y=0, sangrando. Quem cuida
   da legibilidade da nav preta por cima e o .nav-on-dark la embaixo. */
.case-hero {
  position: relative;
  overflow: hidden;
  aspect-ratio: 12 / 5;
  background: linear-gradient(to top right, #0b1b35, #1a4862);
}
/* estado verde por cima, com opacity indo e voltando: e o mesmo cross-fade que o
   Figma faz, e e a unica forma de interpolar dois gradientes sem @property. */
.case-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;              /* fica ENTRE o gradiente base e as camadas do hero */
  background: linear-gradient(to top right, #0b2035, #135b51);
  animation: case-hero-shift 3.75s ease-in-out infinite alternate;
}
@keyframes case-hero-shift { from { opacity: 0 } to { opacity: 1 } }
/* .is-away entra quando o hero sai da tela (main.js): uma animação infinita numa
   camada da largura da página continua custando composição mesmo invisível. */
.case-hero.is-away::after { animation-play-state: paused; }

.case-hero-word,
.case-hero-mock,
.case-hero-flat { position: absolute; display: block; z-index: 1; }
/* O parallax escreve transform nestas duas a cada frame de scroll. Sem promovê-las a
   camada própria o Chrome re-rasteriza dois PNGs grandes em cada frame e o scroll da
   página de case fica pesado perto do topo — que era o "scroll não é suave como o da
   home". Com a camada, o compositor só reposiciona a textura já pronta. */
.case-hero-word,
.case-hero-mock { will-change: transform; backface-visibility: hidden; }
.case-hero-flat { inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* o PNG do letreiro tem o mesmo 12:5 do hero, entao cobre sem recorte proprio */
.case-hero-word { inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* o mockup encosta exatamente no rodape do hero: 201+399 = 600 */
.case-hero-mock { left: 18.194%; top: 33.5%; width: 63.681%; height: auto; }

/* pista de scroll: o unico elemento do hero que nao vem do Figma. O chevron que
   aparece no mockup e parte do print da happi, entao esta pista mora no canto de
   baixo a esquerda, sobre o fundo, onde nao briga com ele. */
.case-hero-cue {
  position: absolute;
  left: 2.375rem;
  bottom: 2.25rem;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: .75rem;
  color: #c3cad2;
  font-size: .8125rem; /* 13px */
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
}
.case-hero-cue-arrow {
  width: 1px;
  height: 2.5rem;
  background: currentColor;
  transform-origin: top;
  animation: case-cue 1.8s cubic-bezier(.65, 0, .35, 1) infinite;
}
@keyframes case-cue {
  0%       { transform: scaleY(0);   opacity: 0 }
  35%      { transform: scaleY(1);   opacity: 1 }
  70%, 100%{ transform: scaleY(1) translateY(100%); opacity: 0 }
}

/* Hero claro (Oscar): a pista de scroll cinza-clara sumiria sobre o azul. */
.case-hero[data-tone="light"] .case-hero-cue { color: #131417; }

/* nav sobre o hero escuro: o logotipo e os links do site sao pretos e sumiriam.
   main.js poe .nav-on-dark no <html> enquanto a nav cobre o hero — so quando o
   hero e escuro, que e o que o data-tone diz. */
.nav-on-dark .navigation,
.nav-on-dark .navigation .link,
.nav-on-dark .navigation .letter-logo,
.nav-on-dark .navigation .nav-location { color: #fff; transition: color .3s ease; }

/* ---------- linha de meta (y=616) ---------- */
/* Company em x=37 (borda do container), Role em x=592 (início da coluna de texto)
   e Year encostado em x=1400. A segunda faixa vira um space-between só por isso. */
.case-meta {
  display: grid;
  grid-template-columns: 40.66% 1fr;
  margin-top: 1.0667em; /* 16px */
  font-size: 1.0667em;  /* 16px */
  line-height: 1.5;
}
.case-meta > div { display: flex; justify-content: space-between; }

/* ---------- título + corpo (y=685) ---------- */
/* Três trilhas: 469 / 89 de respiro / 768, sobre os 1365 úteis. A sobra de 3% na
   direita é do próprio Figma, onde a coluna termina em 1360 e o container em 1402. */
.case-head {
  display: grid;
  grid-template-columns: 34.36% 6.3% 56.26%;
  margin-top: 3em; /* 45px */
}
.case-title { grid-column: 1; }
.case-body  { grid-column: 3; display: flex; flex-direction: column; gap: 6em; /* 90px */ }

.case-title h1 {
  margin: 0;
  font-size: 3.7333em; /* 56px */
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
}
/* O styles.css do Webflow estiliza o <p> nu como branco de 14px, porque no site
   original todo parágrafo mora numa seção escura. Aqui o fundo é claro, então todo
   <p> do case precisa desfazer isso — <li> e <h2> não precisam, o Webflow não os toca. */
.case p { color: inherit; font-size: inherit; }

.case-sub {
  margin: 1.6em 0 0; /* 24px */
  font-size: 1.2em;  /* 18px */
  line-height: 1.5;
}

/* ---------- blocos da coluna de texto ---------- */
.case-block { display: flex; flex-direction: column; gap: 1.6em; /* 24px */ }
.case-block h2 {
  margin: 0;
  font-size: 3.2em; /* 48px */
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
}
.case-rt { font-size: 1.2em; line-height: 1.5; } /* 18px */
/* 1.5em aqui = 27px, que é exatamente a linha em branco que o rich text do Figma
   usa entre parágrafos — por isso os <p> vazios dele não precisam ser transcritos. */
.case-rt p { margin: 0 0 1.5em; }
.case-rt > :last-child { margin-bottom: 0; }
.case-rt strong { font-weight: 700; }
.case-rt ol, .case-rt ul { margin: 0; padding-left: 1.5em; }

/* tira de logos das onze plataformas — vetor, não foto */
.case-logos { display: block; width: 93.34%; height: auto; } /* 716.87 de 768 */

/* ---------- figuras ---------- */
/* gap imagem -> legenda é 16px em todo o design, e toda legenda é centrada */
.case-fig { display: flex; flex-direction: column; align-items: center; gap: 1.0667em; margin: 0; }
/* o recorte existe so para segurar o scale(1.05) do reveal; sem raio proprio,
   porque as faixas ja trazem o container cinza arredondado dentro do PNG */
.case-shot { display: block; width: 100%; overflow: hidden; }
.case-fig img { display: block; width: 100%; height: auto; }
.case-fig figcaption {
  font-size: 1.0667em; /* 16px */
  font-weight: 400;    /* o Webflow deixa 300 solto aqui; o Figma pede Regular */
  line-height: 1.5;
  color: #595959;
  text-align: center;
}

/* Figura que no Figma nao ocupa a faixa toda (mockup de lancamento do New School:
   416 de 1365). So no desktop: em 390px, 30% viraria uma miniatura de 107px. */
@media screen and (min-width: 992px) {
  .case-fig-narrow { width: var(--fig-w); align-self: center; }
}

/* ---------- faixas de imagem (largura total do container) ---------- */
.case-bands { display: flex; flex-direction: column; gap: 6.6em; /* 99px */ margin-top: 6.6em; }
/* o par do meio: 640 + 32 + 640 = 1312, centrado nos 1365 */
.case-pair {
  align-self: center;
  width: 96.12%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.4384%; /* 32px */
}
/* enquanto faltar o par (ver "optional" no JSON), a célula que existe fica centrada
   em vez de encostada na esquerda com meia faixa em branco do lado */
@media screen and (min-width: 992px) {
  .case-pair:has(> :only-child) { grid-template-columns: minmax(0, 48.78%); justify-content: center; }
}

/* ---------- <992px: o Figma não tem esse breakpoint, então é decisão nossa ---------- */
/* Uma coluna só, título acima do texto, faixas de ponta a ponta. */
@media screen and (max-width: 991px) {
  /* abaixo de 992 o site herda body{font-size:1vw} — 3.75px em 375. Nas páginas
     de case isso esmaga o h1 (2.1em → 8px). A casca do site não mexe; só o miolo. */
  .container.case { font-size: 16px; }
  /* o Figma so tem 1440. Em 12:5 um hero de 375 teria 156px de altura e nao contaria
     historia nenhuma, entao abaixo de 992 ele engorda e o mockup ocupa mais largura. */
  .case-hero { aspect-ratio: 4 / 3; }
  /* medido em 390: mockup 111..260 e pista 229..269 se encavalavam. Sobe o mockup e
     encolhe a pista para os dois caberem na faixa de fundo que sobra embaixo. */
  .case-hero-mock { left: 6%; width: 88%; top: 28%; }
  .case-hero-cue { left: 1.25rem; bottom: .9rem; gap: .6rem; font-size: .75rem; }
  .case-hero-cue-arrow { height: 1.6rem; }
  .case-meta { grid-template-columns: 1fr; gap: .5em; }
  .case-meta > div { display: contents; }
  .case-head { grid-template-columns: 1fr; }
  .case-title, .case-body { grid-column: 1; }
  .case-body { margin-top: 3em; gap: 4em; }
  .case-title h1 { font-size: 2.6em; }
  .case-block h2 { font-size: 2.2em; }
  .case-logos { width: 100%; }
  .case-bands { gap: 4em; margin-top: 4em; }
  .case-pair { width: 100%; grid-template-columns: 1fr; gap: 4em; }
}
@media screen and (max-width: 479px) {
  .case-title h1 { font-size: 2.1em; }
  .case-block h2 { font-size: 1.8em; }
}

/* ---------- achados da pesquisa (Key findings do New School) ---------- */
/* Duas colunas com fio embaixo de cada item, como no Figma. Ordem do HTML preenche
   a grade linha a linha, que é a mesma leitura do design. */
.case-findings-label { font-size: 1.0667em; color: #595959; }
.case-findings {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 3.2em;
}
.case-finding {
  display: flex;
  flex-direction: column;
  gap: .3em;
  padding: 1.2em 0;
  border-bottom: 1px solid #e0e0e0;
  font-size: 1.0667em;
  line-height: 1.4;
}
.case-finding strong { font-weight: 600; }
.case-finding span { color: #595959; }
@media screen and (max-width: 767px) {
  .case-findings { grid-template-columns: 1fr; gap: 0; }
}

/* ---------- prosa no meio das faixas ---------- */
/* Mesma coluna e alinhamento do .case-outro; existe porque no New School o "Solution"
   cai entre a faixa dos wireframes e as das telas. */
.case-interlude { width: 56.26%; margin-left: 40.66%; }
@media screen and (max-width: 991px) {
  .case-interlude { width: 100%; margin-left: 0; }
}

/* ---------- prosa depois das faixas (o "Outcome" do Oscar) ---------- */
/* Mesma coluna de 768 do corpo, alinhada à direita como no Figma; vazio não ocupa. */
.case-outro:empty { display: none; }
.case-outro {
  display: flex;
  flex-direction: column;
  gap: 6em;
  width: 56.26%;
  margin: 6.6em 0 0 40.66%;
}
@media screen and (max-width: 991px) {
  .case-outro { width: 100%; margin: 4em 0 0; gap: 4em; }
}

/* ---------- reveal no scroll ---------- */
/* O reclame era "as imagens estao estaticas". O site ja tinha a coreografia de reveal
   (.animation-reveal-*, IX2 do Webflow) mas ela nunca chegou nas paginas de case.
   Mesma regra de sempre: html.reveal-on so existe se o JS rodou, entao sem JS nada
   some. O zoom da foto e recortado pelo .case-shot. */
.reveal-on .case-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22, 1, .36, 1);
}
.reveal-on .case-reveal.is-visible { opacity: 1; transform: none; }
.reveal-on .case-shot img {
  transform: scale(1.05);
  transition: transform 1.1s cubic-bezier(.22, 1, .36, 1);
}
.reveal-on .case-reveal.is-visible .case-shot img,
.reveal-on .case-shot.is-visible img { transform: none; }

/* ---------- proximos projetos ---------- */
/* Nao vem do Figma: o protótipo termina no rodape. Existe porque uma pagina de case
   sem saida devolve o visitante para o botao voltar. Usa as mesmas capas da home. */
.case-next { margin-top: 8em; }
.case-next-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2em;
  padding-bottom: 1.6em;
  border-bottom: 1px solid #e0e0e0;
}
.case-next-head h2 {
  margin: 0;
  font-size: 2.1333em; /* 32px */
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
}
.case-next-head a { font-size: 1.0667em; color: #595959; text-decoration: none; }
.case-next-head a:hover { color: #131417; }

.case-next-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.4384%;
  margin-top: 2.6667em; /* 40px */
}
.case-next-card { display: block; color: inherit; text-decoration: none; }
.case-next-card .case-shot { border-radius: 1em; background: #ececec; }
/* width/height explícitos: sem largura definida a capa com loading="lazy" mede 0x0
   e o card colapsa (medido em 390px: card h=101 em vez de 363).
   `contain`, não `cover`: as quatro capas têm proporções entre 1,11 e 2,77, e o
   `cover` num 3:2 comia 46% da largura do Mozilla/Oscar (era a miniatura cortada).
   A caixa continua 3:2 para os três cards terminarem na mesma linha; a sobra é o
   cinza do próprio card. O WebP também deixou de ser recortado (cover-cards.py). */
.case-next-card img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; }
.case-next-card .case-shot img { transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.case-next-card:hover .case-shot img { transform: scale(1.04); }
.case-next-title {
  margin-top: 1.0667em;
  font-size: 1.2em;   /* 18px */
  line-height: 1.4;
}
.case-next-meta {
  margin-top: .2667em;
  font-size: 1.0667em; /* 16px */
  color: #595959;
}

@media screen and (max-width: 991px) {
  .case-next { margin-top: 5em; }
  .case-next-grid { grid-template-columns: 1fr; gap: 2.5em; }
  .case-next-head h2 { font-size: 1.8em; }
}

@media (prefers-reduced-motion: reduce) {
  /* o hero volta ao estado exportado (o azul do hero.jpg) e nada mais pulsa */
  .case-hero::after,
  .case-hero-cue-arrow { animation: none; }
  .case-hero::after { opacity: 0; }
  .reveal-on .case-reveal { opacity: 1; transform: none; transition: none; }
  .reveal-on .case-shot img,
  .case-next-card:hover .case-shot img { transform: none; transition: none; }
}

/* ---------- embed (New School / Oscar enquanto o Figma MCP estiver sem cota) ---------- */
.case-embed {
  display: block;
  width: 100%;
  height: calc(100vh - 11em);
  min-height: 36em;
  margin-top: 11em;
  border: 0;
  background: #f5f5f5;
}
@media screen and (max-width: 991px) {
  .case-embed { margin-top: 7em; height: calc(100vh - 7em); }
}

/* ---------- deck Mozilla: 35 slides 4:3, setas + teclado ---------- */
/* Os slides são IMAGENS locais (src/cases/assets/<slug>/slides/). Eram <iframe> do
   protótipo do Figma e nunca puderam carregar: figma.com responde
   `X-Frame-Options: SAMEORIGIN` + `frame-ancestors 'self' vscode-webview: vscode-file:`
   em toda rota de embed — nenhum site de terceiro emoldura o arquivo. Ver o
   cabeçalho de deck() em tools/build-cases.js. */
.case-deck {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2em;
  margin: 11em auto 4em;
  padding: 0 2.5em;
  max-width: 72em;
}
.case-slide {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  border: 0;
  border-radius: .5em;
  background: #ececec;
}

/* Enquanto não houver slides exportados: a capa + o link do protótipo em aba nova.
   Melhor um cartão que se explica do que a moldura recusada, cinza e vazia. */
.case-deck-poster {
  display: block;
  position: relative;
  width: 100%;
  border-radius: 1em;
  overflow: hidden;
  background: #ececec;
  text-decoration: none;
}
.case-deck-poster img { display: block; width: 100%; height: auto; }
.case-deck-cta {
  position: absolute;
  left: 50%;
  bottom: 1.6em;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: .55em;
  padding: .8em 1.4em;
  border-radius: 999px;
  background: #131417;
  color: #fff;
  font-size: 1.0667em;
  line-height: 1;
  white-space: nowrap;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1), background-color .3s ease;
}
.case-deck-poster:hover .case-deck-cta { transform: translateX(-50%) translateY(-3px); background: #000; }
.case-deck-note {
  margin: 0;
  max-width: 34em;
  color: #595959;
  font-size: 1.0667em;
  line-height: 1.5;
  text-align: center;
}
.case-deck-bar {
  display: flex;
  align-items: center;
  gap: 1.2em;
  font-size: 1.0667em;
}
.case-deck-btn {
  appearance: none;
  background: none;
  border: 0;
  padding: .2em .6em;
  font: inherit;
  cursor: pointer;
}
.case-deck-btn:disabled { opacity: .3; cursor: default; }
@media screen and (max-width: 991px) {
  .case-deck { margin-top: 7em; padding: 0 1.2em; }
}