:root {
  --fundo: #0a0a0c;
  --superficie: #151519;
  --linha: #2e2e35;
  --suave: #93939c;
  --texto: #f2f0ea;
  --destaque: #a88aff;
  --margem: clamp(16px, 4vw, 56px);
  --titulo: "Oswald", "Arial Narrow", sans-serif;
  --corpo: "Inter", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --curva: cubic-bezier(.2, .8, .2, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--fundo); color: var(--texto); font: 400 17px/1.55 var(--corpo); overflow-x: clip; }
/* Granulação de filme: imagem pronta numa camada própria, sem mistura com a página */
body::after { content: ""; position: fixed; inset: 0; z-index: 30; pointer-events: none; background: url("/midia/marca/grao.png"); transform: translateZ(0); }
img, video, iframe { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ol, ul { margin: 0; padding: 0; }
ol, ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--destaque); outline-offset: 3px; }
[hidden] { display: none !important; }

/* Topo */
.topo { position: fixed; inset: 0 0 auto; z-index: 10; display: flex; align-items: center; justify-content: space-between; padding: 18px var(--margem); background: linear-gradient(to bottom, rgb(10 10 12 / .55), transparent); transition: color .25s; }
.topo--claro { background: none; color: var(--fundo); }
.topo__logo img { width: 112px; height: auto; transition: filter .25s; }
.topo--claro .topo__logo img { filter: invert(1); }
.topo__nav { display: flex; gap: clamp(16px, 3vw, 36px); }
.topo__nav a { font: 600 15px/1 var(--titulo); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.topo__nav a:hover, .topo__nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; }

/* Abertura: o disco fica no centro e, ao rolar, a tela entra nele */
.hero-rolagem { --trajeto: 50svh; height: calc(100svh + var(--trajeto)); }
.hero { --d: min(82svh, 48vw); --cx: 17vw; --cy: 50svh; position: sticky; top: 0; height: 100svh; min-height: 560px; overflow: hidden; }
.hero__disco { position: absolute; left: var(--cx); top: var(--cy); translate: -50% -50%; scale: .625; width: calc(var(--d) * 1.6); height: calc(var(--d) * 1.6); border-radius: 50%; background: var(--superficie); overflow: hidden; will-change: scale, translate; animation: surge .5s var(--curva) both; }
.hero__disco video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .7s ease; }
.hero__slide.ativo { opacity: 1; }
.hero__furo { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 10%; height: 10%; border-radius: 50%; background: var(--texto); z-index: 2; }
.hero__linha { position: absolute; z-index: 2; left: var(--cx); right: var(--margem); top: var(--cy); height: 1px; background: var(--texto); transform-origin: left; animation: traca .6s .1s cubic-bezier(.6, 0, .2, 1) both; }
.hero__linha::after { content: ""; position: absolute; right: -7px; top: -7px; width: 15px; height: 15px; border-radius: 50%; background: var(--destaque); }
.hero__titulo { position: absolute; z-index: 3; left: calc(var(--cx) + var(--d) / 2 + 3vw); right: var(--margem); top: var(--cy); font-weight: 400; line-height: 1; text-transform: uppercase; }
.hero__forte, .hero__leve { position: absolute; left: 0; white-space: nowrap; animation: entra .6s .25s var(--curva) both; }
.hero__forte { bottom: .08em; font: 700 min(7.4vw, 19svh)/1 var(--titulo); }
.hero__leve { top: .3em; font: 200 min(4.9vw, 11svh)/1 var(--titulo); }
.hero__tempo { position: absolute; z-index: 3; left: var(--margem); bottom: 22px; font: 400 13px/1 var(--mono); color: var(--suave); contain: layout paint; }
.hero__tempo::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 9px; border-radius: 50%; background: var(--destaque); vertical-align: 1px; animation: pisca 1.6s infinite; }
.hero__lateral { position: absolute; z-index: 3; left: calc(var(--cx) + var(--d) / 2 + 3vw); right: var(--margem); bottom: clamp(24px, 6svh, 56px); display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; animation: entra .6s .35s var(--curva) both; }
.hero--saindo .hero__lateral a { visibility: hidden; }
.hero__lateral p { max-width: 32ch; color: #c6c6cc; font-size: clamp(15px, 1.2vw, 18px); }
.hero__acoes { display: flex; flex-wrap: wrap; flex: none; gap: 10px; justify-content: flex-end; }

.botao { display: inline-block; padding: 14px 24px; background: var(--texto); color: var(--fundo); font: 600 15px/1 var(--titulo); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; border: 1px solid var(--texto); border-radius: 99px; transition: background .25s, color .25s; }
.botao:hover { background: transparent; color: var(--texto); }
.botao--linha { background: transparent; color: var(--texto); }
.botao--linha:hover { background: var(--texto); color: var(--fundo); }

@keyframes surge { from { transform: scale(.92); opacity: 0; } }
@keyframes traca { from { transform: scaleX(0); } }
@keyframes entra { from { opacity: 0; transform: translateY(18px); } }
@keyframes sobe { from { transform: translateY(18px); } }
/* O disco é desenhado 1,6x maior e reduzido, para continuar nítido no fim do zoom */
@keyframes zoom-disco { to { scale: calc(var(--esc, 3.4) * .625); translate: calc(-50% + var(--dx, 0px)) calc(-50% + var(--dy, 0px)); } }
@keyframes some { to { opacity: 0; } }

/* O zoom acompanha a rolagem fora da página: não depende do JavaScript e não engasga */
@supports (animation-timeline: scroll()) {
  .hero__disco { animation: surge .5s var(--curva) both, zoom-disco linear both; animation-timeline: auto, scroll(root block); animation-range: normal, 0 var(--trajeto); }
  .hero__linha { animation: traca .6s .1s cubic-bezier(.6, 0, .2, 1) both, some linear both; animation-timeline: auto, scroll(root block); animation-range: normal, 0 calc(var(--trajeto) * .3); }
  .hero__lateral { animation: sobe .6s .35s var(--curva) both, some linear both; animation-timeline: auto, scroll(root block); animation-range: normal, 0 calc(var(--trajeto) * .3); }
  .hero__furo, .hero__titulo, .hero__tempo { animation: some linear both; animation-timeline: scroll(root block); animation-range: 0 calc(var(--trajeto) * .3); }
}
@keyframes pisca { 50% { opacity: .25; } }
@keyframes gira { to { transform: rotate(360deg); } }

/* Seções */
.trabalhos, .servicos { position: relative; z-index: 1; background: var(--fundo); padding: clamp(72px, 9vw, 130px) var(--margem) 0; }
.secao-topo { margin-bottom: clamp(32px, 5vw, 64px); }
h2 { font: 700 clamp(52px, 10vw, 150px)/.95 var(--titulo); text-transform: uppercase; }

.trabalhos__topo { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: clamp(20px, 3vw, 40px); }
.selo { flex: none; width: clamp(92px, 11vw, 160px); height: auto; animation: gira 22s linear infinite; }
.selo text { fill: var(--texto); font: 600 21px var(--titulo); letter-spacing: .06em; }
.selo__disco { fill: var(--texto); }
.selo__furo { fill: var(--fundo); }

/* Filtros: uma linha do tempo com um ponto na categoria ativa */
.filtros { overflow-x: auto; scrollbar-width: none; padding-bottom: 12px; margin-bottom: clamp(24px, 3.4vw, 48px); }
.filtros::-webkit-scrollbar { display: none; }
.filtros__trilho { position: relative; display: flex; justify-content: space-between; gap: 24px; min-width: max-content; padding-bottom: 16px; border-bottom: 1px solid var(--linha); }
.filtros__ponto { position: absolute; bottom: -6px; left: 0; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%; background: var(--destaque); transition: left .4s var(--curva); }
.filtro { padding: 8px 0; font: 600 17px/1 var(--titulo); letter-spacing: .07em; text-transform: uppercase; color: var(--suave); transition: color .2s; }
.filtro:hover, .filtro[aria-pressed="true"] { color: var(--texto); }
.filtro sup { margin-left: 3px; font: 400 10px/0 var(--mono); letter-spacing: 0; }

/* Galeria em fileiras: cada linha preenche a largura, sem buracos */
.fileiras { --h: clamp(220px, 25vw, 440px); display: flex; flex-wrap: wrap; gap: clamp(24px, 2.6vw, 36px) clamp(8px, .9vw, 14px); }
.fileiras::after { content: ""; flex: .02 1 0; }
.card { display: block; min-width: 0; padding: 0; text-align: left; cursor: pointer; }
.fileiras .card { flex: var(--ar) 1 calc(var(--ar) * var(--h)); max-width: calc(var(--ar) * var(--h) * 1.4); }
.card__midia { position: relative; display: block; overflow: hidden; background: var(--superficie); aspect-ratio: var(--ar); }
.card__midia img, .card__midia video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--curva); }
.card:hover .card__midia img, .card:hover .card__midia video { transform: scale(1.05); }
.card__texto { display: block; padding-top: 10px; }
.card__titulo { display: block; font: 600 17px/1.2 var(--titulo); letter-spacing: .03em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card__meta { display: block; margin-top: 3px; color: var(--suave); font: 400 12px/1.3 var(--mono); }

.card--destaque { position: relative; width: 100%; margin-bottom: clamp(24px, 2.6vw, 36px); }
.card--destaque .card__midia { aspect-ratio: 21 / 9; }
.card--destaque .card__midia::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / .72), transparent 55%); }
.card--destaque .card__texto { position: absolute; z-index: 1; inset: auto clamp(16px, 3vw, 40px) clamp(16px, 2.6vw, 36px); padding: 0; }
.card--destaque .card__titulo { font-size: clamp(30px, 5.4vw, 84px); font-weight: 700; line-height: 1; white-space: normal; }
.vazio { padding: 64px 0; color: var(--suave); text-align: center; }
.ver-todos { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: clamp(36px, 5vw, 72px); }

/* Abas Vídeos e Fotos */
[data-pagina="videos"] .trabalhos, [data-pagina="fotos"] .trabalhos { padding-top: clamp(104px, 11vw, 160px); }

/* Mural de fotos: só as imagens, sem texto, encostadas umas nas outras */
.mural { columns: 4; column-gap: 8px; }
.mural .card { width: 100%; margin-bottom: 8px; break-inside: avoid; }
.js .mural .card.revelar { opacity: 0; transition: opacity .6s ease; }
.js .mural .card.revelar.visivel { opacity: 1; }
.js .mural .card.revelar .card__midia, .js .mural .card.revelar.visivel .card__midia { clip-path: none; transition: none; }
.visor--foto .visor__info { display: none; }
.visor--foto .visor__midia img { max-height: calc(100dvh - 32px); }

/* Cada trabalho abre em círculo, como a íris de uma lente */
.js .card.revelar { opacity: 1; transform: none; }
.js .card.revelar .card__midia { clip-path: circle(0% at 50% 50%); transition: clip-path .85s var(--curva); }
.js .card.revelar.visivel .card__midia { clip-path: circle(72% at 50% 50%); }

/* Discos que seguem o ponteiro */
.cursor { position: fixed; left: 0; top: 0; z-index: 20; display: grid; place-items: center; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 50%; background: var(--texto); color: var(--fundo); font: 600 14px/1 var(--titulo); letter-spacing: .1em; pointer-events: none; opacity: 0; scale: .4; transition: translate .14s ease-out, opacity .2s, scale .3s var(--curva); }
.cursor.ligado { opacity: 1; scale: 1; }
.servico-disco { position: fixed; left: 0; top: 0; z-index: 9; width: clamp(200px, 22vw, 320px); aspect-ratio: 1; margin: calc(clamp(200px, 22vw, 320px) / -2) 0 0 calc(clamp(200px, 22vw, 320px) / -2); border-radius: 50%; overflow: hidden; pointer-events: none; opacity: 0; scale: .5; transition: translate .22s ease-out, opacity .25s, scale .4s var(--curva); }
.servico-disco.ligado { opacity: 1; scale: 1; }
.servico-disco img { width: 100%; height: 100%; object-fit: cover; }

/* Serviços */
.servicos__lista { border-top: 1px solid var(--linha); counter-reset: s; }
.servicos__lista li { position: relative; display: flex; align-items: baseline; gap: clamp(16px, 3vw, 44px); padding: clamp(12px, 1.3vw, 20px) 0; border-bottom: 1px solid var(--linha); counter-increment: s; font: 200 clamp(32px, 5.6vw, 84px)/1.08 var(--titulo); text-transform: uppercase; transition: padding-left .45s var(--curva); }
.servicos__lista li::before { content: counter(s, decimal-leading-zero); font: 400 12px/1 var(--mono); color: var(--suave); }
.servicos__lista li:hover { padding-left: 22px; }

/* Contato: inverte a página, como o logo original, preto sobre claro */
.contato { position: relative; z-index: 1; overflow: hidden; margin-top: clamp(80px, 11vw, 160px); padding: clamp(72px, 9vw, 130px) var(--margem); background: var(--texto); color: var(--fundo); }
.contato__disco { position: absolute; right: -6vw; bottom: -12vw; width: 36vw; height: 36vw; border-radius: 50%; background: var(--fundo); }
.contato__disco::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10%; height: 10%; border-radius: 50%; background: var(--texto); transform: translate(-50%, -50%); }
.contato > *:not(.contato__disco) { position: relative; }
.contato h2 { font-size: clamp(56px, 11.4vw, 180px); line-height: .98; }
.contato h2 span { display: block; font-weight: 200; }
.contato > p { max-width: 38ch; margin-top: 28px; color: #4a4a50; }
.contato__links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.contato .botao { background: var(--fundo); color: var(--texto); border-color: var(--fundo); }
.contato .botao:hover { background: transparent; color: var(--fundo); }
.contato .botao--linha { background: transparent; color: var(--fundo); }
.contato .botao--linha:hover { background: var(--fundo); color: var(--texto); }
.contato__links li:first-child { flex-basis: 100%; margin-bottom: 4px; }
.contato__links li:first-child .botao { padding: 21px 38px; font-size: clamp(18px, 1.7vw, 24px); }
.contato__links li:not(:first-child) .botao { padding: 8px 15px; font-size: 12px; }

.rodape { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 22px var(--margem); background: var(--fundo); color: var(--suave); font: 400 12px/1.4 var(--mono); }

/* Entrada ao rolar */
.js .revelar { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--curva), transform .9s var(--curva); }
.js .revelar.visivel { opacity: 1; transform: none; }

/* Visor */
.visor { width: min(1180px, 100vw - 32px); max-height: calc(100dvh - 32px); padding: 0; border: 0; background: var(--fundo); color: var(--texto); overflow-y: auto; }
.visor::backdrop { background: rgb(0 0 0 / .9); }
.visor__fechar { position: sticky; top: 8px; float: right; z-index: 2; width: 44px; height: 44px; margin: 8px 8px -52px 0; border-radius: 50%; background: rgb(10 10 12 / .75); font-size: 28px; line-height: 1; }
.visor__midia { display: grid; gap: 8px; }
.visor__midia img, .visor__midia video { width: 100%; height: auto; max-height: 82dvh; object-fit: contain; background: #000; }
.visor__embed { position: relative; aspect-ratio: 16 / 9; background: #000; }
.visor__embed--vertical { aspect-ratio: 9 / 16; width: min(100%, 82dvh * 9 / 16); margin-inline: auto; }
.visor__embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.visor__info { padding: 20px clamp(16px, 3vw, 32px) 32px; }
.visor__meta { color: var(--suave); font: 400 12px/1.4 var(--mono); }
.visor h3 { margin-top: 6px; font: 700 clamp(28px, 4vw, 48px)/1.1 var(--titulo); text-transform: uppercase; }
.visor__descricao { max-width: 62ch; margin-top: 12px; color: #cfcfd4; white-space: pre-line; }

@media (max-width: 760px) {
  body { font-size: 16px; }
  .topo__logo img { width: 84px; }
  .topo__nav { gap: 12px; }
  .mural { columns: 2; column-gap: 6px; }
  .mural .card { margin-bottom: 6px; }
  .topo__nav a { font-size: 13px; letter-spacing: .05em; }
  .hero { --d: min(88vw, 46svh); --cx: 36vw; --cy: 37svh; }
  .hero__titulo { left: var(--margem); top: auto; bottom: calc(clamp(24px, 6svh, 56px) + 156px); }
  .hero__forte, .hero__leve { position: static; display: block; }
  .hero__forte { font-size: min(14.5vw, 9svh); }
  .hero__leve { margin-top: .2em; font-size: min(8.7vw, 5.4svh); }
  .hero__lateral { left: var(--margem); display: block; }
  .hero__acoes { justify-content: flex-start; margin-top: 16px; }
  .hero__tempo { display: none; }
  .trabalhos__topo { gap: 10px; }
  .selo { width: 68px; }
  .filtros { margin-inline: calc(var(--margem) * -1); padding-inline: var(--margem); }
  .filtros__trilho { justify-content: flex-start; }
  .fileiras { --h: 190px; }
  .card__titulo { font-size: 15px; }
  .card--destaque .card__midia { aspect-ratio: 4 / 5; }
  .contato__disco { right: -30vw; bottom: -36vw; width: 92vw; height: 92vw; }
  .contato { padding-bottom: 62vw; }
  .contato__links li:first-child .botao { padding: 17px 24px; font-size: 16px; text-align: center; }
}

@media (hover: none) { .servico-disco { display: none; } body::after { display: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-rolagem { height: auto; }
  .hero { position: relative; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .revelar { opacity: 1; transform: none; }
  .js .card.revelar .card__midia { clip-path: none; }
}