/* ==========================================================================
   MoaGraph — estilos do site
   Medidas tiradas do layout (Design/Lyout design.pdf, prancheta de 1920px).
   --u vale 1px em telas de 1920px e diminui proporcionalmente em telas menores,
   então "calc(72 * var(--u))" significa "72px do layout".
   ========================================================================== */

/* ---------- Fontes (subset latino em WOFF2) ---------- */
@font-face {
  font-family: "Outreque";
  src: url("../assets/fonts/outreque-black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  ascent-override: 94.3%;
  descent-override: 26%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Outreque";
  src: url("../assets/fonts/outreque-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  ascent-override: 93.1%;
  descent-override: 24.9%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Helvetica MG";
  src: url("../assets/fonts/helvetica.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  ascent-override: 77%;
  descent-override: 23%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Helvetica MG";
  src: url("../assets/fonts/helvetica-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  ascent-override: 77%;
  descent-override: 23%;
  line-gap-override: 0%;
}

/* ---------- Variáveis ---------- */
:root {
  --laranja: #FA7A1E;
  --branco: #FFF7E9;
  --preto: #24211E;

  --fonte-titulo: "Outreque", "Arial Black", sans-serif;
  --fonte-texto: "Helvetica MG", Helvetica, Arial, sans-serif;

  --u: clamp(0.6px, calc(100vw / 1920), 1px);
  --margem: 20px;

  --texto: max(16px, calc(20 * var(--u)));
  --texto-voltar: max(17px, calc(23.8 * var(--u)));
  --botao-fonte: max(22px, calc(35.3 * var(--u)));
  --botao-altura: max(54px, calc(72 * var(--u)));
  --botao-largura: calc(625 * var(--u));

  /* animações: mesma duração e curva ease-out para tudo que cresce ou se mexe */
  --anim-tempo: 0.35s;
  --anim-curva: cubic-bezier(0.33, 1, 0.68, 1); /* ease-out */

  /* revelação ao carregar/rolar (os tempos de cada tipo de elemento ficam no animacoes.js) */
  --revelar-curva: cubic-bezier(0.22, 1, 0.36, 1); /* ease-out */
  --mover-curva: cubic-bezier(0.65, 0, 0.35, 1); /* ease-in-out: do centro até o lugar */
  --revelar-distancia: max(24px, calc(48 * var(--u))); /* quanto os blocos sobem */
}

/* ---------- Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--preto);
  color: var(--branco);
  font-family: var(--fonte-texto);
  font-size: var(--texto);
  line-height: 1.2;
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
svg,
picture {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

a:focus-visible {
  outline: 2px solid var(--branco);
  outline-offset: 4px;
}

h1,
h2,
p {
  margin: 0;
}

strong {
  font-weight: 700;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.icone {
  flex: none;
  fill: currentColor;
}

/* Prancheta: largura do layout (1920) centralizada, nunca maior que a tela */
.prancheta {
  position: relative;
  width: min(calc(1920 * var(--u)), 100%);
  margin-inline: auto;
  overflow-x: hidden;
  overflow-x: clip; /* as formas decorativas não podem criar rolagem lateral */
}

/* ---------- Componentes ---------- */

/* Botão laranja (Contato / Quem somos)
   O texto fica centralizado sozinho e o ícone "pendura" à direita, como no layout. */
.botao {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(var(--botao-largura), 100%);
  height: var(--botao-altura);
  padding: 0 16px 0.1em;
  background: var(--laranja);
  color: var(--branco);
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: var(--botao-fonte);
  line-height: 1;
  white-space: nowrap;
}

.botao__rotulo {
  position: relative;
}

.botao .icone {
  position: absolute;
  left: calc(100% + 0.15em);
  bottom: 0.22em;
  width: 0.425em;
  height: 0.425em;
}

.botao .icone-seta {
  width: 0.38em;
  height: 0.38em;
}

/* Link "Voltar aos links" */
.voltar {
  display: flex;
  justify-content: center;
}

.voltar a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.88em;
  color: var(--laranja);
  font-weight: 700;
  font-size: var(--texto-voltar);
  line-height: 1.2;
}

.voltar .icone {
  width: 0.737em;
  height: 0.743em;
  align-self: center;
}

/* Link do e-mail (abre o Gmail) e rodapé */
.rodape {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: calc(16.4 * var(--u));
  padding-inline: var(--margem);
  font-weight: 700;
}

.instagram {
  display: inline-flex;
  color: var(--laranja);
}

.instagram .icone {
  width: max(20px, calc(22 * var(--u)));
  height: max(20px, calc(22 * var(--u)));
}

/* Faixa escura no rodapé (Trabalhos e Quem somos), de ponta a ponta da tela.
   Mesmo tom do fundo, só que mais escuro; o conteúdo fica centralizado na altura. */
.rodape--faixa {
  padding-block: max(36px, calc(60 * var(--u)));
  background: #161412;
}

/* Cabeçalho das páginas Trabalhos e Quem somos: logo no canto da tela, bem perto das bordas */
.cabecalho {
  display: flex;
  align-items: center;
  padding: max(20px, calc(80 * var(--u))) var(--margem) 0 max(14px, calc(32 * var(--u)));
}

.cabecalho__logo {
  width: max(38px, calc(56.75 * var(--u)));
  height: auto;
  color: var(--branco);
}

.cabecalho__divisor {
  flex: none;
  width: max(2px, calc(3 * var(--u)));
  height: max(40px, calc(60.44 * var(--u)));
  margin: 0 calc(38.5 * var(--u)) 0 calc(37 * var(--u));
  background: var(--branco);
}

.cabecalho ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-weight: 700;
  line-height: 1.355;
}

.cabecalho nav a {
  display: inline-block;
}

.cabecalho nav a[aria-current="page"] {
  color: var(--laranja);
}

/* ---------- Animações de interação ----------
   Passar o mouse, selecionar pelo teclado (Tab) ou clicar/tocar faz o elemento
   crescer (o menu do cabeçalho só desliza para a direita), e os ícones de dentro
   se mexem. Ao sair, tudo volta com a mesma curva ease-out. Nenhuma cor muda. */
.botao,
.cartao,
.projeto,
.voltar a,
.email,
.instagram,
.cabecalho nav a,
.botao .icone,
.cartao .icone,
.voltar .icone {
  transition: transform var(--anim-tempo) var(--anim-curva);
}

/* quanto cada elemento cresce */
.botao,
.cartao {
  --escala: 1.04;
}

.projeto {
  --escala: 1.03;
}

.voltar a,
.email {
  --escala: 1.08;
}

.instagram {
  --escala: 1.12;
}

/* selecionado pelo teclado ou clicado/tocado */
:is(.botao, .cartao, .projeto, .voltar a, .email, .instagram):is(:focus-visible, :active) {
  transform: scale(var(--escala));
}

.cabecalho nav a:is(:focus-visible, :active) {
  transform: translateX(0.35em);
}

:is(.botao, .cartao):is(:focus-visible, :active) .icone-seta {
  transform: translate(0.08em, -0.08em);
}

.botao:is(:focus-visible, :active) .icone-whatsapp {
  transform: rotate(-12deg);
}

.voltar a:is(:focus-visible, :active) .icone {
  transform: translateX(-0.2em);
}

/* mouse por cima (só em aparelhos com mouse, para o efeito não ficar "preso" no celular) */
@media (hover: hover) {
  :is(.botao, .cartao, .projeto, .voltar a, .email, .instagram):hover {
    transform: scale(var(--escala));
  }

  .cabecalho nav a:hover {
    transform: translateX(0.35em);
  }

  :is(.botao, .cartao):hover .icone-seta {
    transform: translate(0.08em, -0.08em);
  }

  .botao:hover .icone-whatsapp {
    transform: rotate(-12deg);
  }

  .voltar a:hover .icone {
    transform: translateX(-0.2em);
  }
}

/* ---------- Revelação ao carregar e ao rolar ----------
   O assets/js/animacoes.js marca cada elemento e adiciona "revelado" quando ele
   entra na tela (uma vez só). A ordem, os tempos e os atrasos ficam no script.
   .revelar      → sobe e aparece
   .aparecer     → só aparece (opacidade), sem movimento
   .digitar      → o texto aparece letra por letra, com a opacidade subindo suave
   .centralizar  → aparece no meio da tela e depois desliza até o lugar dele */

/* enquanto o script prepara as animações, a página fica escondida
   (se o script não rodar, tudo aparece sozinho depois de 2,5s) */
html.carregando body > * {
  visibility: hidden;
  animation: mostrar-sem-script 0s 2.5s forwards;
}

@keyframes mostrar-sem-script {
  to {
    visibility: visible;
  }
}

.revelar:not(.revelado) {
  opacity: 0;
}

.revelar.revelado {
  animation: surgir-subindo var(--duracao) var(--revelar-curva) var(--atraso) backwards;
}

.aparecer.revelado {
  animation-name: surgir;
}

/* elementos pequenos sobem menos */
.revelar:is(.links__instagram, .voltar a) {
  --revelar-distancia: 12px;
}

/* aparece no centro da tela e depois desliza até o lugar
   (título + texto das páginas Links e Trabalhos, arte do Quem somos) */
.digitar.revelado.centralizar {
  animation: ir-para-o-lugar var(--mover-duracao) var(--mover-curva) var(--mover-atraso) backwards;
}

.revelar.revelado.centralizar {
  animation:
    surgir var(--duracao) var(--revelar-curva) var(--atraso) backwards,
    ir-para-o-lugar var(--mover-duracao) var(--mover-curva) var(--mover-atraso) backwards;
}

@keyframes surgir {
  from {
    opacity: 0;
  }
}

@keyframes surgir-subindo {
  from {
    opacity: 0;
    translate: 0 var(--revelar-distancia);
  }
}

@keyframes ir-para-o-lugar {
  from {
    translate: var(--centro-x) var(--centro-y);
  }
}

.digitar:not(.revelado) .letra {
  opacity: 0;
}

/* a cópia para leitores de tela não entra quando alguém copia o texto */
.digitar .sr-only {
  user-select: none;
}

.digitar.revelado .letra {
  animation: digitar var(--letra-tempo) var(--anim-curva) calc(var(--atraso) + var(--i) * var(--passo)) backwards;
}

@keyframes digitar {
  from {
    opacity: 0;
  }
}

/* ---------- Cursor: bolinha laranja com contorno preto ----------
   Criado pelo animacoes.js, só em aparelhos com mouse. Nos trabalhos (data-cursor)
   a bolinha se estica para a direita, virando uma pílula com o tipo do trabalho. */
html.cursor-bolinha,
html.cursor-bolinha * {
  cursor: none !important;
}

.cursor {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s var(--anim-curva);
}

.cursor--visivel {
  opacity: 1;
}

/* a bolinha fica centrada na ponta do mouse; esticada, a ponta fica no "começo" da pílula */
.cursor__forma {
  position: absolute;
  top: -8px;
  left: -8px;
  width: 16px;
  height: 16px;
  overflow: hidden;
  border: 2px solid var(--preto);
  border-radius: 999px;
  background: var(--laranja);
  transition-property: top, left, width, height;
  transition-duration: 0.45s;
  transition-timing-function: var(--anim-curva);
}

.cursor--expandido .cursor__forma {
  top: -16px;
  left: -16px;
  width: var(--largura-expandida, 88px);
  height: 32px;
}

.cursor__texto {
  position: absolute;
  top: 50%;
  left: 14px;
  width: max-content;
  translate: 0 calc(-50% + 1.5px); /* +1.5px: centraliza pela altura das letras, não pela caixa da fonte */
  color: var(--preto);
  font-family: var(--fonte-texto);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  white-space: nowrap;
}

/* letras somem rápido ao sair e aparecem uma a uma ao esticar */
.cursor__texto .letra {
  opacity: 0;
  transition: opacity 0.12s var(--anim-curva);
}

.cursor--expandido .cursor__texto .letra {
  opacity: 1;
  animation: digitar 0.3s var(--anim-curva) calc(120ms + var(--i) * 45ms) backwards;
}

/* ---------- Barra de rolagem: laranja por dentro, preta por fora ---------- */
html {
  scrollbar-color: var(--laranja) var(--preto);
}

::-webkit-scrollbar {
  width: 12px;
  height: 12px;
  background: var(--preto);
}

::-webkit-scrollbar-thumb {
  background: var(--laranja);
}

/* ==========================================================================
   Página 1 — Links (index.html)
   ========================================================================== */
.pagina-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(60 * var(--u)) var(--margem);
  overflow: hidden;
  overflow: clip;
}

.links {
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  width: min(calc(625 * var(--u)), 100%);
  text-align: center;
}

/* traçados laranja ao fundo (1cqw = 1% da coluna de 625px) */
.links__tracado {
  position: absolute;
  z-index: -1;
  left: -35.1cqw;
  top: -21.06cqw;
  width: 184.4cqw;
  max-width: none;
  opacity: 0.67;
  pointer-events: none;
  user-select: none;
}

.links__topo {
  position: relative;
}

.links__logo {
  position: absolute;
  top: calc(41.75 * var(--u));
  right: calc(100% + 143.5 * var(--u));
  width: calc(56.75 * var(--u));
  height: auto;
  color: var(--branco);
}

.links__titulo {
  color: var(--laranja);
  font-family: var(--fonte-titulo);
  font-weight: 900;
  font-size: calc(121.5 * var(--u));
  line-height: 1;
}

.links__intro {
  max-width: 23em;
  margin: calc(33.5 * var(--u)) auto 0;
}

.links__instagram {
  margin-top: calc(18.7 * var(--u) - 8px);
  padding: 8px;
}

.links__botoes {
  display: grid;
  gap: calc(13 * var(--u));
  margin-top: calc(29 * var(--u) - 8px);
}

.links__botoes .botao {
  width: 100%;
}

/* Cartão "Nossos trabalhos" */
.cartao {
  display: block;
  margin-top: calc(24 * var(--u)); /* + 13 do gap = 37 do layout */
  border: 1px solid var(--laranja);
  background: var(--preto);
  overflow: hidden;
}

.cartao img {
  width: 100%;
  height: auto;
  aspect-ratio: 625 / 203;
  object-fit: cover;
}

.cartao__texto {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.16em;
  height: max(64px, calc(87 * var(--u)));
  padding-bottom: 0.1em;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: var(--botao-fonte);
  line-height: 1;
}

.cartao__texto .icone {
  width: 0.38em;
  height: 0.38em;
  margin-top: 0.12em;
}

.pagina-links .rodape {
  margin-top: calc(121.7 * var(--u));
}

/* ==========================================================================
   Página 2 — Trabalhos (trabalhos.html)
   ========================================================================== */
.trabalhos__titulo {
  color: var(--laranja);
  font-family: var(--fonte-titulo);
  font-weight: 900;
  /* 5.9em ≈ largura da palavra: nunca estoura a tela no celular */
  font-size: min(calc(209.7 * var(--u)), calc((100vw - 2 * var(--margem)) / 5.9));
  line-height: 1;
  text-align: center;
}

.trabalhos__intro {
  max-width: 23em;
  margin: calc(1 * var(--u)) auto 0;
  padding-inline: var(--margem);
  text-align: center;
  box-sizing: content-box;
}

.trabalhos .voltar--topo {
  margin-top: calc(81.4 * var(--u));
}

.grade {
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(24 * var(--u));
  width: min(calc(1420 * var(--u)), 100% - 2 * var(--margem));
  margin: calc(89.7 * var(--u)) auto 0;
}

/* formas creme atrás da grade (1cqw = 1% da grade de 1420px) */
.grade__forma {
  position: absolute;
  z-index: -1;
  max-width: none;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.grade__forma--1 {
  left: -12.23cqw;
  top: -7.3cqw;
  width: 64.85cqw;
}

.grade__forma--2 {
  left: 71.46cqw;
  top: 90.84cqw;
  width: 40.86cqw;
}

.projeto {
  position: relative;
  display: block;
  aspect-ratio: 698 / 505;
  background: var(--laranja);
  overflow: hidden;
}

/* contorno laranja de 1px por cima da imagem */
.projeto::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--laranja);
  pointer-events: none;
}

.projeto picture,
.projeto img {
  width: 100%;
  height: 100%;
}

.projeto img {
  object-fit: cover;
}

.projeto--milanote {
  grid-column: 1 / -1;
  aspect-ratio: 1420 / 505;
}

.projeto--futuro-1 {
  grid-column: 1;
  grid-row: 3;
}

.projeto--futuro-2 {
  grid-column: 2;
  grid-row: 3 / span 2;
  aspect-ratio: auto;
}

.projeto--futuro-3 {
  grid-column: 1;
  grid-row: 4;
}

.trabalhos .voltar--base {
  margin-top: calc(84.7 * var(--u));
}

.chamada {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-inline: var(--margem);
}

.chamada__titulo {
  margin-top: calc(72.4 * var(--u));
  font-family: var(--fonte-titulo);
  font-weight: 900;
  /* 8.7em ≈ largura de "Vamos trabalhar" */
  font-size: min(calc(91.2 * var(--u)), calc((100vw - 2 * var(--margem)) / 8.7));
  line-height: 0.8925;
  text-align: center;
}

.chamada__destaque {
  color: var(--laranja);
}

.chamada .botao {
  margin-top: calc(50.5 * var(--u));
}

.trabalhos .rodape {
  margin-top: calc(180 * var(--u));
}

/* ==========================================================================
   Página 3 — Quem somos (quem-somos.html)
   ========================================================================== */
/* em telas mais altas que o layout, o conteúdo fica centralizado na vertical */
.quem-somos {
  display: flex;
  flex-direction: column;
}

.quem-somos .prancheta {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
}

.sobre {
  display: grid;
  grid-template-columns: calc(791.09 * var(--u)) calc(626 * var(--u));
  column-gap: calc(100.1 * var(--u));
  align-items: start;
  margin-block: auto;
  padding-top: calc(16 * var(--u));
  padding-left: calc(179.72 * var(--u));
}

.sobre__arte {
  width: 100%;
  height: auto;
}

.sobre__texto {
  padding-top: calc(30.1 * var(--u));
}

.sobre__titulo {
  font-family: var(--fonte-titulo);
  font-weight: 900;
  font-size: max(34px, calc(58.5 * var(--u)));
  line-height: 1;
}

.sobre__texto p {
  max-width: 30.5em;
}

.sobre__texto p + p {
  margin-top: 1.2em;
}

.sobre__titulo + p {
  margin-top: calc(34.4 * var(--u));
}

.sobre .botao {
  width: 100%;
  margin-top: calc(72 * var(--u));
}

.sobre .voltar {
  margin-top: calc(37.8 * var(--u));
}

.quem-somos .rodape {
  margin-top: calc(8 * var(--u));
}

/* ==========================================================================
   Telas menores
   ========================================================================== */

/* Tablet e celular: "Quem somos" empilha a arte em cima do texto */
@media (max-width: 1100px) {
  .sobre {
    grid-template-columns: 1fr;
    justify-items: center;
    padding: 40px var(--margem) 0;
  }

  .sobre__arte {
    width: min(460px, 85%);
  }

  .sobre__texto {
    width: 100%;
    max-width: 626px;
    padding-top: 32px;
  }

  .sobre__titulo + p {
    margin-top: 20px;
  }

  .sobre .botao {
    margin-top: 40px;
  }

  .sobre .voltar {
    margin-top: 24px;
  }

  .quem-somos .rodape {
    margin-top: 56px;
  }
}

/* Celular */
@media (max-width: 760px) {
  .cabecalho {
    padding: 20px var(--margem) 0 14px;
  }

  .cabecalho__divisor {
    margin: 0 18px;
  }

  .cabecalho ul {
    font-size: 16px;
  }

  /* Links: logo vai para cima do título */
  .pagina-links {
    padding-block: 48px 40px;
  }

  .links {
    width: min(460px, 100%);
  }

  .links__logo {
    position: static;
    width: 44px;
    margin: 0 auto 20px;
  }

  .links__titulo {
    font-size: 76px;
  }

  .links__intro {
    margin-top: 20px;
  }

  .links__instagram {
    margin-top: 8px;
  }

  .links__botoes {
    gap: 12px;
    margin-top: 12px;
  }

  .cartao {
    margin-top: 12px;
  }

  .pagina-links .rodape {
    margin-top: 56px;
  }

  /* Trabalhos: uma coluna */
  .trabalhos__titulo {
    margin-top: 32px;
  }

  .trabalhos__intro {
    margin-top: 8px;
  }

  .trabalhos .voltar--topo {
    margin-top: 32px;
  }

  .grade {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 40px;
  }

  .grade .projeto {
    grid-column: auto;
    grid-row: auto;
    aspect-ratio: 698 / 505;
  }

  .grade__forma--1 {
    left: -20cqw;
    top: -10cqw;
    width: 90cqw;
  }

  .grade__forma--2 {
    left: 55cqw;
    top: 300cqw;
    width: 70cqw;
  }

  .trabalhos .voltar--base {
    margin-top: 48px;
  }

  .chamada__titulo {
    margin-top: 48px;
  }

  .chamada .botao {
    margin-top: 28px;
  }

  .trabalhos .rodape {
    margin-top: 72px;
  }
}