/* ═══════════════════════════════════════════════════════════════
   Mini Produções — css/site.css
   Ordem: fontes → tokens → base → cursor → cabeçalho e menu → hero (a tela) →
   faixa (a mesa de corte) → manifesto → créditos → contato → rodapé →
   projetor → responsivo → movimento reduzido
   Princípio: sala escura com a luz azul acesa. O trabalho é a cor;
   o azul da marca é a luz da sala.
   ═══════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Azeret Mono";
  src: url("../fonts/azeret-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  --sala: #0A0C10;                     /* sala de projeção: azul-preto, nunca #000 */
  --carvao: #12151C;                   /* superfícies */
  --fio: rgba(233, 237, 243, .14);     /* hairlines */
  --tela: #E9EDF3;                     /* texto principal — 16,7:1 sobre --sala */
  --cinza: #8C93A3;                    /* texto secundário — 6,3:1 sobre --sala */
  --azul: #2448F0;                     /* o azul da marca: botão, marcador, cursor. 6,4:1 com branco */
  --luz: #8CB0FF;                      /* a luz do feixe: timecode, poeira, hover, foco. 9,1:1 sobre --sala */
  --luz-rgb: 140, 176, 255;
  --tally: #F0362B;                    /* luz de gravação. Só o ponto REC. */

  --margem: clamp(20px, 5vw, 72px);
  --largura: 1280px;
  --topo: 72px;
  --suave: cubic-bezier(.22, 1, .36, 1);
  --display: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Azeret Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}

/* ── base ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--sala); color-scheme: dark; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--sala);
  color: var(--tela);
  font: 400 1.0625rem/1.6 var(--display);
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
}
/* âncoras param abaixo do cabeçalho fixo */
section[id] { scroll-margin-top: calc(var(--topo) + 8px); }
img, video { display: block; max-width: 100%; }
[hidden] { display: none !important; }   /* vence o display:block acima e qualquer outro */
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, p, dl, dd { margin: 0; }
::selection { background: var(--azul); color: #fff; }
:focus-visible { outline: 2px solid var(--luz); outline-offset: 3px; }

/* a poeira do projetor fica atrás do conteúdo, na frente do fundo */
.poeira { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
main, footer { position: relative; z-index: 1; }

/* grão: tira o banding do fundo escuro, custa 0 requisições */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: .045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

.display { font-stretch: 125%; font-weight: 800; letter-spacing: -.02em; line-height: .95; }
.mono { font-family: var(--mono); font-size: .75rem; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.titulo-secao { font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.02; text-wrap: balance; }

.pular {
  position: absolute; left: var(--margem); top: -100px; z-index: 70;
  padding: 10px 16px; background: var(--tela); color: var(--sala); border-radius: 999px;
}
.pular:focus { top: 12px; }

/* botões */
.botao {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 26px; border-radius: 999px;   /* pílula: pedido do cliente */
  font-weight: 500; font-size: .95rem; white-space: nowrap;
  transition: background .2s, color .2s, transform .2s, box-shadow .2s;
}
.botao-primario { background: var(--azul); color: #fff; }
.botao-primario:hover { background: #3358FF; box-shadow: 0 0 28px rgba(36, 72, 240, .35); }
.botao-primario:active { transform: translateY(1px); }

/* ── cursor (só mouse de verdade; js/cursor.js liga a classe) ─── */
.cur-custom body, .cur-custom a, .cur-custom button, .cur-custom .faixa, .cur-custom .fotograma { cursor: none; }
.cur-custom dialog, .cur-custom dialog * { cursor: auto; }   /* o <dialog> vive na top layer, acima do cursor custom */
.cursor-ponto, .cursor-anel {
  position: fixed; left: 0; top: 0; z-index: 80; pointer-events: none;
  border-radius: 50%; opacity: 0; will-change: transform;
}
.cursor-ponto { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--luz); box-shadow: 0 0 8px rgba(var(--luz-rgb), .8); transition: opacity .2s; }
.cursor-anel {
  width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border: 1px solid rgba(var(--luz-rgb), .55);
  display: grid; place-items: center;
  transition: opacity .2s, width .25s var(--suave), height .25s var(--suave), margin .25s var(--suave), background .25s, border-color .25s, scale .15s;
}
.cursor-texto { font-family: var(--mono); font-size: .66rem; letter-spacing: .08em; color: #fff; opacity: 0; transition: opacity .2s; white-space: nowrap; }
.cur-visivel .cursor-ponto, .cur-visivel .cursor-anel { opacity: 1; }
.cur-ativo .cursor-anel { width: 48px; height: 48px; margin: -24px 0 0 -24px; border-color: var(--luz); }
.cur-rotulo .cursor-anel { width: 76px; height: 76px; margin: -38px 0 0 -38px; background: var(--azul); border-color: var(--azul); }
.cur-rotulo .cursor-ponto { opacity: 0; }
.cur-rotulo .cursor-texto { opacity: 1; }
.cur-pressionado .cursor-anel { scale: .82; }

/* ── cabeçalho ────────────────────────────────────────────────── */
.topo {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center; gap: 32px;
  height: calc(var(--topo) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) var(--margem) 0;
  border-bottom: 1px solid transparent;
  transition: background .3s, border-color .3s;
}
.topo.rolou {
  background: rgba(10, 12, 16, .85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-color: var(--fio);
}
.marca { font-stretch: 125%; font-weight: 800; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 10px; }
.marca::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--azul); box-shadow: 0 0 10px rgba(var(--luz-rgb), .7); }
.nav { display: flex; gap: 28px; margin-left: auto; }
.nav a { color: var(--cinza); font-size: .95rem; transition: color .2s; }
.nav a:hover { color: var(--tela); }
.nav a[aria-current="true"] { color: var(--luz); }

.menu-botao {
  display: none; margin-left: auto;
  width: 44px; height: 44px;
  flex-direction: column; justify-content: center; align-items: center; gap: 6px;
}
.menu-botao span { display: block; width: 22px; height: 2px; background: var(--tela); transition: transform .3s var(--suave); }
.menu-botao[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.menu-botao[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

/* menu do celular: folha inteira com a tela ao fundo */
.menu {
  position: fixed; inset: 0; z-index: 35;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: calc(var(--topo) + 24px) var(--margem) calc(36px + env(safe-area-inset-bottom));
  overflow: hidden;
}
.menu[hidden] { display: none; }
.menu-fundo { position: absolute; inset: 0; z-index: -1; background: var(--carvao); }
.menu-fundo video, .menu-fundo img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s; transform: scale(1.06); }
.menu.aberto .menu-fundo video, .menu.aberto .menu-fundo img { opacity: 1; }
.menu-fundo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(10, 12, 16, .55) 0%, rgba(10, 12, 16, .78) 45%, rgba(10, 12, 16, .96) 100%);
}
.menu-osd { position: absolute; left: var(--margem); top: calc(var(--topo) + 24px); font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; color: var(--luz); font-variant-numeric: tabular-nums; }
.menu nav { display: grid; gap: 16px; }
.menu nav a {
  font-stretch: 125%; font-weight: 800; font-size: clamp(2rem, 9.5vw, 3.25rem); letter-spacing: -.02em; line-height: 1;
  opacity: 0; transform: translateY(22px);
  transition: opacity .5s var(--suave), transform .5s var(--suave);
  transition-delay: calc(.08s + var(--i, 0) * .07s);
}
.menu.aberto nav a { opacity: 1; transform: none; }
.menu nav .botao { font-stretch: 100%; font-weight: 500; font-size: 1rem; letter-spacing: 0; margin-top: 12px; justify-self: start; }
.menu-atalhos { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 28px; font-family: var(--mono); font-size: .75rem; letter-spacing: .06em; color: var(--luz); }
.menu-atalhos:empty { display: none; }

/* ── hero: a tela ─────────────────────────────────────────────── */
.hero { min-height: 100svh; display: flex; flex-direction: column; padding-top: var(--topo); }
.tela { position: relative; flex: 0 0 auto; perspective: 1100px; }
.tela-cena {
  position: relative;
  /* letterbox: nunca mais alto que 60% da viewport, para o título caber na dobra (medido em 1366×768 e 1280×800) */
  height: min(calc(100vw / 2.39), 60vh);
  height: min(calc(100vw / 2.39), 60svh);
  min-height: 240px; max-height: 720px;
  background: var(--carvao);
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}
.tela-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tela-abrir { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; }
.tela-abrir:focus-visible { outline-offset: -3px; }

/* as duas metades que se abrem no carregamento */
.painel { position: absolute; left: 0; right: 0; height: 50%; background: var(--sala); z-index: 2; transform: translateZ(12px); }
.painel-cima { top: 0; transform-origin: 50% 0; }
.painel-baixo { bottom: 0; transform-origin: 50% 100%; }
html:not(.js) .painel { display: none; }
.js .painel { transform: translateZ(12px) scaleY(1); }
.js.pronto .painel { transform: translateZ(12px) scaleY(0); transition: transform .9s var(--suave) .15s; }

/* OSD: o que a câmera mostra */
.osd {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 16px 20px;
  transform: translateZ(28px);
  font-family: var(--mono); font-size: .72rem; letter-spacing: .08em;
  color: var(--luz); text-shadow: 0 1px 3px rgba(0, 0, 0, .7);
  font-variant-numeric: tabular-nums;
}
.osd-rec { display: inline-flex; align-items: center; gap: 8px; color: var(--tela); }
.tally { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--tally); box-shadow: 0 0 10px var(--tally); }
.tocando .tally { animation: tally 1.2s steps(1, end) infinite; }
@keyframes tally { 50% { opacity: .25; } }
.js .osd { opacity: 0; }
.js.pronto .osd { opacity: 1; transition: opacity .5s .7s; }

.hero-texto {
  flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 16px;
  padding: 28px var(--margem) 32px;
  max-width: calc(var(--largura) + 2 * var(--margem));
}
.hero-titulo { font-size: clamp(2.75rem, min(6.2vw, 8.5vh), 6rem); max-width: 16ch; text-wrap: balance; }
.hero-sub { color: var(--cinza); max-width: 48rem; font-size: clamp(1rem, 1.4vw, 1.2rem); }
.hero-cta { display: none; align-self: flex-start; }
.js .hero-texto > * { opacity: 0; transform: translateY(18px); }
.js.pronto .hero-texto > * {
  opacity: 1; transform: none;
  transition: opacity .7s var(--suave), transform .7s var(--suave);
  transition-delay: calc(.45s + var(--i, 0) * .12s);
}

/* ── faixa: a mesa de corte ───────────────────────────────────── */
.trabalhos { padding-top: clamp(56px, 8vw, 120px); }
.secao-cabeca {
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  padding: 0 var(--margem); margin-bottom: 32px;
  max-width: calc(var(--largura) + 2 * var(--margem));
}
.contador { color: var(--luz); }

.faixa {
  --w: clamp(260px, 52vw, 760px);
  /* raio do cilindro: (w/2) / tan(PASSO/2), PASSO = 34° → 1,70 deixa 4% de folga entre fotogramas.
     Se mudar PASSO em faixa.js, recalcular aqui. */
  --r: calc(var(--w) * 1.70);
  position: relative;
  height: calc(var(--w) * 9 / 16 + 64px);
  perspective: 1400px;
  perspective-origin: 50% 50%;
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.faixa.arrastando { cursor: grabbing; }
.faixa:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--luz); }

.rolo {
  position: absolute; left: 50%; top: 50%; width: 0; height: 0;
  transform-style: preserve-3d;
  transform: translateZ(calc(-1 * var(--r, 0px))) rotateY(var(--ang, 0deg));
}
.fotograma {
  position: absolute; left: 0; top: 0;
  width: var(--w); aspect-ratio: 16 / 9;
  translate: -50% -50%;
  transform: rotateY(var(--a, 0deg)) translateZ(var(--r, 0px)) scale(var(--s, 1));
  transition: transform .5s var(--suave), box-shadow .5s;
  background: var(--carvao);
  border: 1px solid var(--fio);
  border-radius: 4px;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.fotograma.ativo { box-shadow: 0 24px 80px rgba(var(--luz-rgb), .12); }
.fotograma-midia { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* sombra do fundo da sala sobre o que está longe: opacidade só (compositor), nunca filter */
.fotograma::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--sala); opacity: var(--sombra, 0); transition: opacity .2s;
}
.fotograma-numero { position: absolute; left: 14px; bottom: 12px; z-index: 1; text-shadow: 0 1px 3px rgba(0, 0, 0, .7); }
.fotograma-luz {
  position: absolute; right: 14px; top: 12px; z-index: 1;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--azul); box-shadow: 0 0 12px rgba(var(--luz-rgb), .9);
  opacity: 0; transition: opacity .3s;
}
.fotograma.ativo.tocando .fotograma-luz { opacity: 1; }
.fotograma.ativo { cursor: pointer; }

.faixa-controles {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px;
  padding: 12px var(--margem) 0;
  max-width: calc(var(--largura) + 2 * var(--margem));
}
.legenda { color: var(--cinza); min-height: 1.6em; }
.legenda b { color: var(--tela); font-weight: 500; }
.seta {
  width: 44px; height: 44px; border: 1px solid var(--fio); border-radius: 50%;
  display: grid; place-items: center; color: var(--tela);
  transition: border-color .2s, color .2s, opacity .2s;
}
.seta:hover:not(:disabled) { border-color: var(--luz); color: var(--luz); }
.seta:disabled { opacity: .3; cursor: default; }
.clientes-linha { padding: 40px var(--margem) 0; color: var(--cinza); }
.clientes-linha b { color: var(--tela); font-weight: 500; }

/* faixa plana: movimento reduzido ou sem 3D — mesma marcação, rolagem nativa com snap */
.faixa.plana {
  perspective: none; height: auto;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--margem);
  padding: 0 var(--margem) 8px;
  cursor: auto; scrollbar-width: none;
}
.faixa.plana::-webkit-scrollbar { display: none; }
.faixa.plana .rolo { position: static; display: flex; gap: 16px; width: max-content; height: auto; transform: none; }
.faixa.plana .fotograma { position: relative; translate: none; transform: none; flex: 0 0 var(--w); scroll-snap-align: start; box-shadow: none; }
.faixa.plana .fotograma::after { opacity: 0; }

/* ── manifesto ────────────────────────────────────────────────── */
.manifesto { padding: clamp(80px, 10vw, 160px) var(--margem); content-visibility: auto; contain-intrinsic-size: auto 480px; }
.manifesto-texto {
  font-weight: 700;
  font-size: clamp(1.5rem, 3.2vw, 2.75rem); line-height: 1.2;
  max-width: 24ch; display: grid; gap: .25em;
}
.manifesto-texto .longe { color: var(--cinza); }

/* ── créditos ─────────────────────────────────────────────────── */
.servicos { padding: 0 var(--margem) clamp(80px, 10vw, 160px); max-width: calc(var(--largura) + 2 * var(--margem)); content-visibility: auto; contain-intrinsic-size: auto 560px; }
.creditos { margin-top: 40px; border-top: 1px solid var(--fio); }
.credito {
  display: grid; grid-template-columns: minmax(180px, 1fr) 2fr; gap: 24px;
  padding: 28px 0; border-bottom: 1px solid var(--fio);
}
.credito dt { font-stretch: 125%; font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; }
.credito dd { color: var(--cinza); max-width: 52ch; }

/* ── contato ──────────────────────────────────────────────────── */
.contato { padding: 0 var(--margem) clamp(80px, 10vw, 160px); display: grid; gap: 20px; justify-items: start; max-width: calc(var(--largura) + 2 * var(--margem)); content-visibility: auto; contain-intrinsic-size: auto 360px; }
.contato-texto { color: var(--cinza); max-width: 44ch; }
.contato-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.contato-acoes:empty { display: none; }
.contato-email, .contato-insta { color: var(--cinza); text-decoration: underline; text-underline-offset: 4px; transition: color .2s; }
.contato-email:hover, .contato-insta:hover { color: var(--luz); }

/* ── rodapé ───────────────────────────────────────────────────── */
.rodape {
  display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center;
  padding: 28px var(--margem) calc(28px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--fio);
  color: var(--cinza); font-size: .9rem;
}
.rodape-marca { font-stretch: 125%; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: .8rem; color: var(--tela); }
.rodape-insta:hover { color: var(--luz); }
.rodape-credito { margin-left: auto; }

/* ── projetor (dialog) ────────────────────────────────────────── */
.projetor {
  border: 0; padding: 0; background: transparent; color: var(--tela);
  width: min(1200px, 92vw); max-width: none; max-height: none;
}
.projetor::backdrop { background: rgba(10, 12, 16, .94); }
.projetor-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 12px; }
.projetor-legenda { color: var(--cinza); }
.projetor-legenda b { color: var(--tela); font-weight: 500; }
.projetor-fechar { flex: 0 0 auto; width: 44px; height: 44px; border: 1px solid var(--fio); border-radius: 50%; display: grid; place-items: center; transition: border-color .2s, color .2s; }
.projetor-fechar:hover { border-color: var(--luz); color: var(--luz); }
.projetor-video, .projetor-imagem { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: #000; border-radius: 4px; }

/* ── responsivo ───────────────────────────────────────────────── */
@media (max-width: 899px) {
  .nav, .topo-cta { display: none; }
  .menu-botao { display: flex; }
  .hero { min-height: 0; }
  .tela-cena { height: auto; aspect-ratio: 16 / 9; min-height: 0; }
  .hero-titulo { font-size: clamp(2.4rem, 11vw, 4.25rem); }
  .hero-texto { padding-bottom: 40px; }
  .hero-cta { display: inline-flex; }
  .faixa { --w: min(78vw, 640px); perspective: 900px; }
  .faixa.plana { --w: min(78vw, 640px); }
  .secao-cabeca { margin-bottom: 20px; }
  .clientes-linha { padding-top: 28px; }
}
@media (max-width: 640px) {
  .credito { grid-template-columns: 1fr; gap: 8px; padding: 22px 0; }
}

/* ── movimento reduzido ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .painel { display: none; }
  .js .hero-texto > *, .js .osd { opacity: 1; transform: none; transition: none; }
  .tela-cena { transform: none !important; }
  .tocando .tally { animation: none; }
  .fotograma { transition: none; }
  .menu nav a { opacity: 1; transform: none; transition: none; }
  .menu-fundo video, .menu-fundo img { transition: none; transform: none; }
  .poeira { display: none; }
  .menu-botao span, .botao, .seta, .nav a { transition: none; }
}
/* classe de teste: reproduz o bloco acima sem mudar a preferência do sistema */
.reduzir { scroll-behavior: auto; }
.reduzir .painel { display: none; }
.reduzir .hero-texto > *, .reduzir .osd { opacity: 1; transform: none; transition: none; }
.reduzir .tela-cena { transform: none !important; }
.reduzir .tocando .tally { animation: none; }
.reduzir .menu nav a { opacity: 1; transform: none; transition: none; }
.reduzir .poeira { display: none; }