/* ==========================================================================
   Design System — Thiago Moreira Fotógrafo
   Implementa docs/design/MASTER.md. Nenhum valor aqui é arbitrário: a paleta
   foi amostrada dos fundos infinitos do estúdio dele e a gramática de forma
   saiu da moldura de visor da própria logo.
   Carregado SEMPRE depois de tailwind.css.
   ========================================================================== */

/* --------------------------------------------------------------- fontes -- */
/* Auto-hospedadas. Nunca CDN: o CSP da página é default-src 'self'. */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------- tokens -- */

:root {
  /* Cor. Cada valor é amostra de um fundo real do estúdio — ver MASTER §2. */
  --cor-fundo: #111014;
  --cor-superficie: #1a1817;
  --cor-superficie-2: #24211e;
  --cor-texto: #f8f8f8;
  --cor-texto-suave: #c7beb4;
  --cor-acento: #c0b0a0;
  --cor-primaria: #a4988e;
  --cor-discreta: #918880;
  --cor-linha: rgba(248, 248, 248, 0.14);
  --cor-linha-forte: rgba(248, 248, 248, 0.28);
  --cor-erro: #c4756b;
  --cor-sucesso: #8fa383;

  /* As mesmas cores em canais separados. O Tailwind v3 so consegue aplicar
     opacidade (bg-fundo/85, via-fundo/70) quando a cor chega como canais soltos
     dentro de rgb(); com um var() contendo hex pronto, o modificador e
     silenciosamente descartado e o elemento sai transparente. */
  --cor-fundo-rgb: 17 16 20;
  --cor-superficie-rgb: 26 24 23;
  --cor-superficie-2-rgb: 36 33 30;
  --cor-texto-rgb: 248 248 248;
  --cor-texto-suave-rgb: 199 190 180;
  --cor-acento-rgb: 192 176 160;
  --cor-primaria-rgb: 164 152 142;
  --cor-discreta-rgb: 145 136 128;
  --cor-erro-rgb: 196 117 107;
  --cor-sucesso-rgb: 143 163 131;

  /* Tipografia */
  --fonte-display: 'Archivo', system-ui, sans-serif;
  --fonte-texto: 'Inter', system-ui, sans-serif;

  /* Calibrado pela palavra mais longa do título, não por estimativa.
     "PROFISSIONAL" mede 359px a 47px, numa caixa de 335px a 375 de viewport: a
     escala anterior estourava e o `overflow-x: hidden` do body escondia o
     estrago. Esta curva dá 36px a 320, 40px a 375 e 110px a 1440. */
  --txt-heroi: clamp(2.25rem, 0.93rem + 6.6vw, 7.5rem);
  --txt-titulo: clamp(2rem, 1.3rem + 3.5vw, 4.25rem);
  --txt-secao: clamp(1.5rem, 1.25rem + 1.2vw, 2.25rem);
  --txt-corpo-g: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --txt-corpo: 1rem;
  --txt-peq: 0.875rem;
  --txt-rotulo: 0.75rem;
  --txt-numero: clamp(0.8125rem, 0.78rem + 0.18vw, 0.9375rem);

  --lh-apertada: 0.92;
  --lh-titulo: 1.1;
  --lh-corpo: 1.65;
  --lh-rotulo: 1.4;

  --track-display: -0.03em;
  --track-normal: 0;
  --track-rotulo: 0.32em;
  --track-numero: 0.14em;

  /* Espaço. Base 4px. */
  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 12px;
  --esp-4: 16px;
  --esp-6: 24px;
  --esp-8: 32px;
  --esp-12: 48px;
  --esp-16: 64px;
  --esp-24: 96px;
  --esp-32: 128px;
  --esp-48: 192px;
  --esp-borda: clamp(20px, 5vw, 160px);

  /* Forma. A tese pede canto reto; o raio total serve só ao diafragma. */
  --raio-nenhum: 0;
  --raio-min: 2px;
  --raio-total: 9999px;

  /* Única sombra do projeto, e existe por necessidade técnica: a marca branca
     desaparece sobre foto alta-chave enquanto não houver variante escura. */
  --sombra-marca: 0 1px 12px rgba(17, 16, 20, 0.55);

  /* Movimento */
  --dur-rapida: 200ms;
  --dur-media: 300ms;
  --dur-lenta: 500ms;
  --dur-revelacao: 700ms;
  --atraso-stagger: 80ms;

  --ease-saida: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-entrada: cubic-bezier(0.64, 0, 0.78, 0);
  --ease-suave: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ----------------------------------------------------------------- base -- */

html {
  scroll-behavior: smooth;
  /* Compensa o cabeçalho fixo quando o visitante cai numa âncora. */
  scroll-padding-top: var(--esp-16);
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--cor-fundo);
  background-image: url('/assets/bg-folha-contato-mobile.svg');
  background-size: 480px auto;
  background-repeat: repeat;
  background-attachment: scroll;
  color: var(--cor-texto);
  font-family: var(--fonte-texto);
  font-size: var(--txt-corpo);
  line-height: var(--lh-corpo);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* A folha de contato detalhada só aparece onde há resolução para lê-la.
   No celular ela vira mancha e custa pintura a cada rolagem. */
@media (min-width: 768px) {
  body {
    background-image: url('/assets/bg-folha-contato.svg');
    background-size: 760px auto;
  }
}

::selection {
  background: var(--cor-acento);
  color: var(--cor-fundo);
}

/* ------------------------------------------------------------ tipografia -- */

.display {
  font-family: var(--fonte-display);
  font-weight: 800;
  letter-spacing: var(--track-display);
  line-height: var(--lh-apertada);
  text-transform: uppercase;
}

/* O rótulo é a citação direta do descritor "fotógrafo" da logo: caixa baixa,
   peso leve, entrelinha larguíssima. É a assinatura tipográfica do projeto. */
.rotulo {
  font-family: var(--fonte-texto);
  font-size: var(--txt-rotulo);
  font-weight: 400;
  letter-spacing: var(--track-rotulo);
  line-height: var(--lh-rotulo);
  text-transform: lowercase;
  color: var(--cor-discreta);
}

.numero-servico {
  font-family: var(--fonte-texto);
  font-size: var(--txt-numero);
  letter-spacing: var(--track-numero);
  font-variant-numeric: tabular-nums;
  color: var(--cor-discreta);
}

.texto-leitura {
  max-width: 62ch;
  color: var(--cor-texto-suave);
}

/* ------------------------------------------------------- foco de teclado -- */
/* Nunca outline genérico: o foco é um par de cantos de visor, coerente com a
   moldura da logo. Vale para todo interativo do projeto. */

:where(a, button, [tabindex]):focus-visible {
  outline: none;
}

:where(a, button, [tabindex]):focus-visible::after {
  content: '';
  position: absolute;
  inset: -6px;
  pointer-events: none;
  border: 1px solid var(--cor-texto);
  border-radius: var(--raio-min);
  clip-path: polygon(
    0 0, 14px 0, 14px 1px, 1px 1px, 1px 14px, 0 14px,
    0 100%, 14px 100%, 14px calc(100% - 1px), 1px calc(100% - 1px), 1px calc(100% - 14px), 0 calc(100% - 14px),
    100% 100%, calc(100% - 14px) 100%, calc(100% - 14px) calc(100% - 1px), calc(100% - 1px) calc(100% - 1px), calc(100% - 1px) calc(100% - 14px), 100% calc(100% - 14px),
    100% 0, calc(100% - 14px) 0, calc(100% - 14px) 1px, calc(100% - 1px) 1px, calc(100% - 1px) 14px, 100% 14px
  );
}

:where(a, button, [tabindex]) {
  position: relative;
}

/* --------------------------------------------------------------- botões -- */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  min-height: 48px;
  padding: var(--esp-3) var(--esp-8);
  border-radius: var(--raio-nenhum);
  font-family: var(--fonte-texto);
  font-size: var(--txt-peq);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-rapida) var(--ease-suave),
              color var(--dur-rapida) var(--ease-suave),
              border-color var(--dur-rapida) var(--ease-suave),
              transform var(--dur-rapida) var(--ease-suave);
}

.botao-primario {
  background-color: var(--cor-acento);
  color: var(--cor-fundo);
  border: 1px solid var(--cor-acento);
}

@media (hover: hover) and (pointer: fine) {
  .botao-primario:hover {
    background-color: var(--cor-texto);
    border-color: var(--cor-texto);
  }
}

.botao-primario:active {
  transform: translateY(1px);
}

.botao-primario[disabled],
.botao-primario[aria-disabled='true'] {
  background-color: var(--cor-superficie-2);
  border-color: var(--cor-superficie-2);
  color: var(--cor-discreta);
  cursor: not-allowed;
}

.botao-secundario {
  background-color: transparent;
  color: var(--cor-texto);
  border: 1px solid var(--cor-linha);
}

@media (hover: hover) and (pointer: fine) {
  .botao-secundario:hover {
    border-color: var(--cor-linha-forte);
    background-color: var(--cor-superficie);
  }
}

.botao-secundario:active {
  transform: translateY(1px);
}

/* ------------------------------------------------------ links de âncora -- */

.link-nav {
  position: relative;
  color: var(--cor-texto-suave);
  text-decoration: none;
  transition: color var(--dur-rapida) var(--ease-suave);
}

.link-nav::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 1px;
  background-color: var(--cor-texto);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-rapida) var(--ease-suave);
}

@media (hover: hover) and (pointer: fine) {
  .link-nav:hover {
    color: var(--cor-texto);
  }
}

.link-nav[aria-current='true']::before {
  transform: scaleX(1);
}

@media (hover: hover) and (pointer: fine) {
  .link-nav:hover::before {
    transform: scaleX(1);
  }
}

/* -------------------------------------------- gramática de forma da marca -- */

/* Moldura de visor: o fio fino que a palavra atravessa, tirado da logo. */
.moldura {
  position: relative;
  border: 1px solid var(--cor-linha);
}

/* Marcas de corte: cantos em L que delimitam seção sem fechar caixa. */
.marca-corte {
  position: relative;
}

.marca-corte::before,
.marca-corte::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border-color: var(--cor-linha-forte);
  border-style: solid;
  pointer-events: none;
}

.marca-corte::before {
  top: 0;
  left: 0;
  border-width: 1px 0 0 1px;
}

.marca-corte::after {
  bottom: 0;
  right: 0;
  border-width: 0 1px 1px 0;
}

/* Anel de diafragma: botão de fechar, indicador de rolagem, marcador. */
.diafragma {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--cor-linha-forte);
  border-radius: var(--raio-total);
  color: var(--cor-texto);
  background-color: transparent;
  transition: border-color var(--dur-rapida) var(--ease-suave),
              background-color var(--dur-rapida) var(--ease-suave);
}

@media (hover: hover) and (pointer: fine) {
  .diafragma:hover {
    border-color: var(--cor-texto);
    background-color: var(--cor-superficie);
  }
}

/* ----------------------------------------------------- foto no portfólio -- */
/* A moldura fica parada e a imagem se recompõe dentro dela: é o enquadramento
   sendo refeito no visor, não um cartão levantando. */

.quadro {
  position: relative;
  display: block;
  overflow: hidden;
  background-color: var(--cor-superficie);
  border: 1px solid var(--cor-linha);
}

.quadro img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform var(--dur-lenta) var(--ease-saida),
              filter var(--dur-lenta) var(--ease-saida);
}

.quadro:focus-visible img,
.quadro.esta-ativo img {
  transform: scale(1.03);
}

.quadro:focus-visible {
  border-color: var(--cor-linha-forte);
}

@media (hover: hover) and (pointer: fine) {
  .quadro:hover img {
    transform: scale(1.03);
  }

  .quadro:hover {
    border-color: var(--cor-linha-forte);
  }
}

/* Legenda da categoria. **Sempre visível**, em qualquer dispositivo.
   Ela não é enfeite de hover: é a informação que diz o que a fotografia é. Uma
   categoria que só aparece com o ponteiro em cima não existe para quem usa o
   dedo, para quem lê rápido nem para quem chega pelo teclado. O véu do quadro
   já garante o contraste dela sobre a foto. O hover apenas reforça. */
.quadro-legenda {
  position: absolute;
  left: var(--esp-4);
  right: var(--esp-4);
  bottom: var(--esp-4);
  transform: translateY(0);
  opacity: 1;
  transition: transform var(--dur-media) var(--ease-saida),
              opacity var(--dur-media) var(--ease-saida);
}

/* Reforço no foco e no toque: a legenda sobe um pouco, sem surgir do nada. */
.quadro:focus-visible .quadro-legenda,
.quadro.esta-ativo .quadro-legenda {
  transform: translateY(-4px);
}

@media (hover: hover) and (pointer: fine) {
  .quadro:hover .quadro-legenda {
    transform: translateY(-4px);
  }
}

/* Véu que garante leitura da legenda sobre foto clara (MASTER §2.1). */
.quadro-veu {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(17, 16, 20, 0.82) 0%,
    rgba(17, 16, 20, 0.34) 34%,
    rgba(17, 16, 20, 0) 62%
  );
  pointer-events: none;
}

/* --------------------------------------------------- revelação por scroll -- */

.revela {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-revelacao) var(--ease-saida),
              transform var(--dur-revelacao) var(--ease-saida);
  transition-delay: calc(var(--indice, 0) * var(--atraso-stagger));
}

.revela.esta-visivel {
  opacity: 1;
  transform: translateY(0);
}

/* ----------------------------------------------------- proteção (R30) ----- */
/* Por elemento, nunca na página inteira. Telefone, endereço, e-mail e WhatsApp
   ficam de fora e continuam copiáveis — ver a regra .selecionavel adiante. */

.midia-protegida img,
.midia-protegida video {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* Esta classe NÃO declara `position`, de propósito. Ela é combinada com
   `absolute` e `sticky` do Tailwind, e como ds.css carrega depois, qualquer
   `position` aqui venceria o utilitário e quebraria o layout em silêncio (R15).
   Quem posiciona é o Tailwind, ou a classe `.quadro`, que nunca é combinada com
   utilitário de posição. */
.midia-protegida {
  display: block;
}

/* Escudo transparente: intercepta o clique direito e o toque longo antes da
   imagem. Só em mídia que NÃO precisa ser clicável. */
.escudo-midia {
  position: absolute;
  inset: 0;
}

.sem-copia {
  user-select: none;
  -webkit-user-select: none;
}

/* Esta regra vem depois e vence: o que o visitante precisa copiar, copia. */
.selecionavel,
address,
.contato,
.telefone,
.email,
.endereco,
input,
textarea,
select,
[contenteditable] {
  user-select: text !important;
  -webkit-user-select: text !important;
  -webkit-touch-callout: default;
}

/* -------------------------------------------------------------- galeria -- */

.galeria-dialogo {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  padding: 0;
  border: 0;
  background-color: color-mix(in srgb, var(--cor-fundo) 96%, transparent);
  color: var(--cor-texto);
  overflow: hidden;
}

.galeria-dialogo::backdrop {
  background-color: rgba(17, 16, 20, 0.92);
}

.galeria-palco {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: var(--esp-12) var(--esp-4) var(--esp-16);
  margin: 0;
}

.galeria-imagem {
  display: block;
  max-width: 92vw;
  /* Reserva o espaço das setas e da legenda: a fotografia nunca encosta nelas. */
  max-height: calc(100dvh - var(--esp-32));
  width: auto;
  height: auto;
  object-fit: contain;
}

.galeria-legenda {
  position: absolute;
  left: 50%;
  bottom: var(--esp-6);
  transform: translateX(-50%);
  color: var(--cor-texto-suave);
}

.galeria-posicao {
  position: absolute;
  left: var(--esp-6);
  bottom: var(--esp-6);
  margin: 0;
}

.galeria-fechar {
  position: absolute;
  top: var(--esp-4);
  right: var(--esp-4);
  z-index: 2;
}

.galeria-anterior,
.galeria-proxima {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
}

.galeria-anterior { left: var(--esp-2); }
.galeria-proxima { right: var(--esp-2); }

/* Em tela larga as setas saem de cima da fotografia e ganham margem. */
@media (min-width: 768px) {
  .galeria-anterior { left: var(--esp-8); }
  .galeria-proxima { right: var(--esp-8); }
  .galeria-palco { padding: var(--esp-16) var(--esp-24); }
}

/* ------------------------------------- painel de serviços sem fotografia -- */
/* Batizado e eventos não têm fotografia no acervo, e repetir a imagem de outra
   categoria seria rotular errado o trabalho dele. O painel vira uma placa
   tipográfica com o nome da categoria.
   Antes era uma moldura tracejada vazia, que é exatamente o desenho que todo
   navegador usa para imagem quebrada: lia como defeito, não como escolha. */

[data-painel][data-vazio] img {
  opacity: 0;
}

[data-painel][data-vazio] {
  background-color: var(--cor-superficie);
}

[data-painel][data-vazio]::after {
  content: attr(data-vazio);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--esp-8);
  font-family: var(--fonte-display);
  font-weight: 800;
  font-size: var(--txt-secao);
  line-height: var(--lh-titulo);
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  text-align: center;
  color: var(--cor-primaria);
}

/* ----------------------------------------------------------- utilitários -- */

.pular-para-conteudo {
  position: absolute;
  left: var(--esp-4);
  top: var(--esp-4);
  z-index: 100;
  transform: translateY(-200%);
  transition: transform var(--dur-rapida) var(--ease-suave);
}

.pular-para-conteudo:focus-visible {
  transform: translateY(0);
}

.apenas-leitor-de-tela {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------- movimento off -- */
/* O visitante pediu menos movimento: o pôster assume, as revelações ficam
   instantâneas e o parallax desliga. A estrutura da página não muda. */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  .revela {
    opacity: 1;
    transform: none;
  }

  .heroi-video {
    display: none;
  }

  .heroi-poster {
    display: block;
  }
}