/* 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%; }
  .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; }
}

/* 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; }
}