/* overrides.css — o único CSS autoral do projeto.
   Carrega DEPOIS de styles.css (purgado do Webflow). Só corrige bugs do original. */

/* o <style> quebrado do original só conseguiu aplicar esta regra (medido: scrollbar = 0px,
   -webkit-font-smoothing = auto). Reproduzida aqui para bater largura de viewport. */
body::-webkit-scrollbar { display: none; }

/* bug: body {font-size:1vw} — 12.8px num notebook de 1280, 25.6px num 4K.
   Só acima de 991px: abaixo disso o layout do original é todo em em sobre esse 1vw
   (margens de 8em, paddings de 40.4em) e mudar a base multiplicava tudo por 4. */
@media screen and (min-width: 992px) { body { font-size: clamp(15px, 1vw, 20px); } }

/* bug: o original faz display:none em .about-section, .section-6 e .motion-projects
   em <=991px — no celular o portfólio virava só hero + cards. */
@media screen and (max-width: 991px) {
  .about-section { display: flex; flex-wrap: wrap; gap: 32px; padding: 72px 24px 48px; }
  /* o HTML traz height="640" sem width. Com width:100% o browser estica a foto
     (2:3) para 320×640. height:auto devolve a proporção. */
  .about-section .profile-picture { width: 100%; max-width: 320px; height: auto; }
  .section-6 { display: block; padding: 72px 24px; }
  .motion-projects { display: block; padding: 72px 24px 0; }
  .motion-projects .w-layout-layout { grid-template-columns: 1fr !important; gap: 24px; padding: 0; }
  .motion-projects .w-layout-cell { width: 100%; }
  /* No desktop os 4 blocos alternam vídeo/texto em zigzag (ordem do DOM: 2 deles
     trazem o texto ANTES do vídeo, pensados para a coluna da direita). Em coluna
     única isso fazia o texto aparecer por cima do vídeo em 2 dos 4 — pedido do
     Marcos foi vídeo sempre primeiro. `.cell` é a classe que só o bloco de texto
     tem (o de vídeo é um `.w-layout-cell` puro), então dá pra reordenar sem tocar
     no HTML nem depender da ordem original de cada bloco. */
  .motion-projects .w-layout-cell.cell { order: 2; }
  .motion-projects .w-layout-cell:not(.cell) { order: 1; }
  /* Sem isto os 4 blocos ficam colados: cada um tem `gap:24px` só entre o vídeo e o
     texto DELE, e nada entre um bloco e o próximo. */
  .motion-projects .w-layout-layout + .w-layout-layout { margin-top: 56px; }
  .grid-5, .grid-6 { grid-template-columns: 1fr; gap: 32px; padding-right: 0; }
}

/* Fase 4: os motion-headings eram <h1 class="heading-2"> e viraram <h2> por semântica.
   Sem isto caíam de 4em para 2.5em (medido: 57.6px -> 37.5px em 1440). Devolve a tipografia do h1. */
.heading-2 { font-size: 4em; line-height: 1.1; letter-spacing: -.03em; }
@media screen and (max-width: 767px) { .heading-2 { font-size: 32px; } }
@media screen and (max-width: 479px) { .heading-2 { font-size: 28px; } }

/* Repõe o style="opacity:0" que o build-html.js (passo 6b) tira de .description.
   Fica fora do @media de propósito: em <=991px o original ainda computa opacity:0
   ali (o inline sobrevive porque o IX2 nunca roda), mesmo com display:none.
   .background-blur não entra nesta regra — sem inline, o original computa
   opacity:1 em <=991px e só cai a 0 em >=992px, onde o IX2 age. */
.description { opacity: 0; }

/* Sem o webflow.js o IX2 sumiu, e com ele a coreografia de hover dos cards.
   Os valores abaixo não são estimativa: saíram das action lists do bundle publicado
   (webflow.schunk.6db31eb680b29614.js) — a-60/a-61 disparadas em .project-item,
   a-97/a-98 (blur) e a-100/a-101 (description) disparadas em .project-link. Todas
   com mediaQueries ["main"], daí o escopo em 992px.
   Entrada e saída têm durações diferentes no IX2: a transition da entrada mora na
   regra :hover, a da saída fica na regra base. */
@media screen and (min-width: 992px) {
  /* a-60-n-6: scale .95 em 500ms outQuad · a-61-n: volta a 1 em 400ms outQuart.
     transform não é declarado em repouso de propósito — none já interpola a partir
     da identidade e o digest da paridade continua lendo transform:none. */
  .project-item { transition: transform .4s cubic-bezier(.165, .84, .44, 1); }
  .project-item:hover { transform: scale(.95); transition: transform .5s cubic-bezier(.25, .46, .45, .94); }

  /* a-60-n / a-60-n-4 / a-61-n-2: translateY -200% <-> 0 em 400ms outQuart nos dois
     sentidos. -200% de um chip de 36px = os -72px medidos no original. O wrapper é
     aninhado dentro de si mesmo e o IX2 mira CHILDREN: o descendente pega os dois. */
  .project-top-info-wrapper { transform: translateY(-200%); transition: transform .4s cubic-bezier(.165, .84, .44, 1); }
  .project-item:hover .project-top-info-wrapper { transform: translateY(0); }

  /* a-97-n-2 entra em 500ms inOutQuad · a-98-n sai em 400ms linear */
  .background-blur { opacity: 0; transition: opacity .4s linear; }
  .project-link:hover .background-blur { opacity: 1; transition: opacity .5s cubic-bezier(.455, .03, .515, .955); }

  /* a-100-n-2 entra em 500ms linear · a-101-n sai em 500ms outQuad */
  .description { transition: opacity .5s cubic-bezier(.25, .46, .45, .94); }
  .project-link:hover .description { opacity: 1; transition: opacity .5s linear; }

  .cursor.is-live { display: flex; }
  .cursor-dot-1 { transition: transform .25s cubic-bezier(.22, 1, .36, 1); }
  .cursor-text { opacity: 0; transition: opacity .25s ease; }
  .cursor.is-over .cursor-text { opacity: 1; }
}

/* Rodapé: o original tem DOIS blocos de fecho com o mesmo conteúdo e troca um pelo
   outro no breakpoint — .section-6 (depoimento + "Let's do it.") só em >=992px, e
   .container.footer só em <=991px. Medido: em 1280 a webflow.io dá .container.footer
   display=none h=0; em 533 dá display=block h=440.
   Duas consequências reais disso:
   1. /about não tem .section-6, então no desktop ela termina numa faixa preta vazia;
   2. ao desesconder .section-6 no mobile (regra acima, para o celular não perder o
      depoimento) o rebuild passou a mostrar os DOIS — medido em 533px na produção:
      "Let's do it." aparecia 2x.
   Uma regra resolve as duas: .container.footer é o fecho apenas de quem não tem
   .section-6. Assim cada página fecha uma vez só, em qualquer largura. */
body:has(.section-6) .container.footer { display: none; }
body:not(:has(.section-6)) .container.footer { display: block; }

/* reveal do main.js. html.reveal-on só existe se o JS rodou: sem JS nada some. */
.reveal-on .animation-reveal-1,
.reveal-on .animation-reveal-2 {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22, 1, .36, 1);
}
.reveal-on .animation-reveal-1.is-visible,
.reveal-on .animation-reveal-2.is-visible { opacity: 1; transform: none; }

/* <a class="w-lightbox"> virou <button data-vimeo>: zera o estilo de botão do browser */
button[data-vimeo] {
  -webkit-appearance: none; appearance: none;
  background: none; border: 0; padding: 0; text-align: inherit;
}

/* lightbox de vídeo */
dialog.vimeo-dialog {
  width: min(92vw, 1200px); max-width: none;
  padding: 0; border: 0; background: transparent;
}
dialog.vimeo-dialog::backdrop { background: #000c; }
dialog.vimeo-dialog .vimeo { position: relative; aspect-ratio: 16 / 9; }
dialog.vimeo-dialog iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 20px; }

@media (prefers-reduced-motion: reduce) {
  .reveal-on .animation-reveal-1,
  .reveal-on .animation-reveal-2 { opacity: 1; transform: none; transition: none; }
  /* os estados de hover continuam valendo, só param de animar */
  .project-item, .project-item:hover,
  .project-top-info-wrapper,
  .background-blur, .project-link:hover .background-blur,
  .description, .project-link:hover .description { transition: none; }
}

/* ============================================================================
   Seção "sobre" no celular
   O original esconde .about-section abaixo de 992px, então nunca houve layout de
   mobile aqui — o bloco herda .about-text{max-width:40%} e .heading-9{font-size:1.5em}
   sobre body{font-size:1vw}. Medido em 375: o título saía com 5,6px (1.5em de 3,75px)
   e o parágrafo, de 18px fixos, ficava espremido numa coluna de 163px ao lado de uma
   faixa preta vazia. É a distorção relatada. Uma coluna só, e os dois textos em px.
   ========================================================================== */
@media screen and (max-width: 991px) {
  .about-section { flex-direction: column; align-items: stretch; justify-content: flex-start; }
  .about-section .profile-picture { align-self: center; }
  .about-section .about-text { width: 100%; max-width: 100%; grid-row-gap: 24px; }
  .about-section .tittle-2 { width: 100%; max-width: 100%; grid-row-gap: 16px; }
  .about-section .heading-9 { font-size: 20px; line-height: 1.35; }
  .about-section .paragraph-8 { font-size: 17px; line-height: 1.6; }
}

/* ============================================================================
   Carrossel de depoimentos (.tm) — rodapé da home e fecho dos cases
   Barras de progresso no formato do Instagram Stories: uma por depoimento, a ativa
   enchendo no seu próprio tempo (padrão 18s; alguns depoimentos pedem mais ou
   menos — Shane 20s, Jeannette 10s). Quem conta o tempo é esta animação (o main.js
   troca o slide no animationend dela), então `animation-play-state: paused` é a
   pausa inteira. Sem JS o html não recebe .tm-on e os depoimentos ficam empilhados,
   todos legíveis.
   `--tm-dur` aqui é só um fallback defensivo: cada `.tm-bar` já nasce com o seu
   próprio `style="--tm-dur:…ms"` (tools/testimonials.js), que tem precedência por
   estar mais perto do elemento (o `i` filho herda dali). */
.tm { --tm-dur: 18000ms; }

.tm-head { display: flex; align-items: center; gap: 1.5rem; }

.tm-bars { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.tm-bar {
  appearance: none; -webkit-appearance: none;
  flex: 1; min-width: 0;
  height: 14px; padding: 6px 0;   /* alvo de toque de 14px sobre um traço de 2px */
  border: 0; background: none; cursor: pointer;
  box-sizing: content-box;
}
.tm-bar::before {  /* o trilho */
  content: ""; display: block; height: 2px; border-radius: 2px;
  background: #ffffff2e;
}
.tm-bar > i {
  display: block; height: 2px; margin-top: -2px; border-radius: 2px;
  background: #ffffffd9;
  transform: scaleX(0); transform-origin: left;
}
.tm-bar.is-done > i { transform: scaleX(1); }
.tm-bar > i.is-run { animation: tm-fill var(--tm-dur) linear forwards; }
.tm.is-paused .tm-bar > i.is-run { animation-play-state: paused; }
@keyframes tm-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.tm-arrows { display: flex; align-items: center; gap: 4px; }
.tm-arrow {
  appearance: none; -webkit-appearance: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0;
  border: 0; border-radius: 50%;
  background: none; color: #ffffff73; cursor: pointer;
  transition: color .2s ease, background-color .2s ease;
}
.tm-arrow:hover { color: #fff; background: #ffffff1a; }
.tm-arrow:focus-visible { outline: 1px solid #ffffff8c; outline-offset: 2px; }

/* Empilhamento só com JS: os sete slides na MESMA célula da grade.
   A grade estica todos até o mais alto (align-items: stretch, o padrão), então a
   altura do bloco é a do depoimento mais longo e NÃO muda de um slide para o outro —
   nada do que vem embaixo se mexe na troca. É de propósito que não há altura escrita
   por JS aqui: a versão anterior encolhia a caixa a cada slide e empurrava o rodapé. */
.tm-on .tm-stack { display: grid; }
.tm-on .tm-slide {
  grid-area: 1 / 1;
  margin: 0;
  /* citação no topo, pessoa encostada no rodapé da caixa fixa: assim a distância
     entre o bloco da pessoa e o "hi@marcostbsilva.com" é a mesma nos sete */
  justify-content: space-between;
  opacity: 0; visibility: hidden;
  transform: translateY(8px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.22, 1, .36, 1), visibility .5s;
}
.tm-on .tm-slide.is-active { opacity: 1; visibility: visible; transform: none; }

/* fora do modo carrossel (sem JS) os depoimentos são uma lista */
.tm-stack { display: flex; flex-direction: column; gap: 2.5rem; }
.tm-slide { display: flex; flex-direction: column; gap: 1.5em; margin: 0; }
/* A citação virou <blockquote> por semântica e pegou o estilo que o Webflow deixa no
   elemento nu: border-left 4px #142218 e padding 12px 20px. Medido: empurrava o texto
   24px para dentro (as barras e a foto ficam em x=38, o texto ia para x=62) e pintava
   um risco verde-escuro que não existe no design. O depoimento original era uma <div>
   sem nada disso. */
.tm-quote { margin: 0; border: 0; padding: 0; }

/* O rodapé (hi@… / © All rights reserved.) encostava no bloco da pessoa: a .grid-5
   termina exatamente onde o depoimento termina, e a .grid-6 vem logo abaixo, sem
   respiro nenhum (medido: 0px). Com a altura fixa do carrossel, este respiro passa a
   ser o mesmo nos sete depoimentos. */
.section-6 .grid-6 { margin-top: 2.5rem; }

/* Nome/cargo/cidade alinhados pelo TOPO da foto: com três linhas (72px) contra os
   56px do retrato, centralizar deixava o nome flutuando acima da foto.
   O max-width:333px que a .avatar herda do Webflow é o que quebrava
   "Account Executive at THR33FOLD" em duas linhas e jogava o ícone de link para o
   meio do bloco — aqui ele sai. */
.tm-person { align-items: flex-start; max-width: none; }
.tm-person .avatar-content { width: auto; gap: 0; }
/* preto e branco, como pedido — vale para todos, para o conjunto não ficar remendado */
.tm .avatar-image { width: 56px; height: 56px; border-radius: 50%; filter: grayscale(1); flex: none; }
.tm-monogram {
  display: inline-flex; align-items: center; justify-content: center;
  background: #1d1d1d; border: 1px solid #333;
  color: #9a9a9a; font-size: 15px; font-weight: 600; letter-spacing: .02em;
}

.tm-role { display: inline-flex; align-items: center; gap: .4em; text-decoration: none; }
a.tm-role:hover { color: #fff; }
.tm-ext { flex: none; opacity: .7; transition: opacity .2s ease; }
a.tm-role:hover .tm-ext { opacity: 1; }
/* A cidade não ganha cor própria de propósito: fica com o var(--grey-60) que a
   .text-regular-normal-3 já dá ao cargo. Um #ffffff59 sobre o preto daria ~3,0:1 de
   contraste, abaixo do 4,5:1 que texto de 16px precisa; o que separa as duas linhas
   é a posição, não o tom. */

@media screen and (max-width: 767px) {
  .tm-head { gap: .75rem; }
  .tm-bars { gap: 4px; }
  .tm-arrow { width: 32px; height: 32px; }  /* alvo de toque no celular */
}

@media (prefers-reduced-motion: reduce) {
  .tm-on .tm-slide { transition: none; }
  .tm-bar > i.is-run { animation: none; transform: scaleX(1); }
}