/* Work: fita de filme como objeto sobre o branco, curvando para trás nas pontas. Os quadros são capas 9:16.
   js/work.js só diz a que distância do centro cada quadro está (data-o); a forma da curva fica aqui.
   A versão anterior, em anel 3D, está guardada em css/work-strip-3d.old.css e js/work-strip-3d.old.js. */

.work {
  position: relative;
  z-index: 2;
  overflow: hidden;
  /* A seção inteira (título, tira, projeto em foco e setas) cabe numa tela, abaixo da nav. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100svh - var(--nav-h));
  padding: 28px 0 24px;
  background: var(--white);
  color: var(--black);
  scroll-margin-top: var(--nav-h);
  --nav-h: 57px;
  /* Título e nome do projeto encolhem em telas baixas. */
  --title-size: clamp(56px, min(15vw, 14svh), 240px);
  --name-size: clamp(30px, 5svh, 56px);
  --film: #0A0A0A;
  --band: 30px;  /* faixa das perfurações, em cima e embaixo */
  --gutter-film: 8px; /* filme de cada lado da capa: 16px de filme entre duas capas */
  /* Altura que sobra para o quadro: a tela menos a nav e tudo o que é fixo na seção
     (respiros, subtítulo, faixas do filme, sombra, linha de categoria, setas = 336px), menos o título e o nome. */
  --frame-fit: calc(100svh - 336px - var(--title-size) * .86 - var(--name-size));
  /* Largura do quadro em foco: a pedida, limitada pelo que cabe na altura. */
  --frame-w: max(110px, min(clamp(200px, 18vw, 280px), var(--frame-fit) * .5625));
  --frame-h: calc(var(--frame-w) * 16 / 9);
  /* um pedaço do filme = a capa mais o filme dos dois lados */
  --seg-w: calc(var(--frame-w) + var(--gutter-film) * 2);
  --seg-h: calc(var(--frame-h) + var(--band) * 2);
  --push: 90px; /* quanto os vizinhos recuam em relação ao quadro em foco */
  --move: 600ms cubic-bezier(.2, .7, .2, 1);
}

/* Granulado próprio do Work. O granulado geral da página quase some sobre o branco,
   então aqui entra uma camada a mais, escurecendo os grãos (multiply). Fica atrás do conteúdo:
   texturiza o fundo branco sem sujar as capas dos projetos. */
.work::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  mix-blend-mode: multiply;
  opacity: var(--work-grain, .2); /* intensidade do granulado: 0 = sem, .2 = leve, .4 = forte */
}

.work__head,
.work__viewer {
  position: relative;
}

/* ---------- Pela lente ----------
   O Work é visto como se estivéssemos de óculos 3D: o branco ganha um leve tom vermelho à esquerda
   e ciano à direita, como os dois olhos; no centro, atrás da fita, as cores se encontram e o branco
   fica limpo (o "nariz"), para nada tingir os projetos. A luz é mais forte no meio e cai para as
   bordas, com os cantos arredondados como a borda da lente. Tudo fica atrás da fita.
   O ciano é mais fiel à lente de verdade que o azul da marca; só aparece aqui, bem fraco.
   Intensidade em --lens. Substitui os feixes de projetor (14/10/2026). */
.work__lights {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  /* a luz cai para as bordas, e mais nos cantos, como vista por uma lente */
  background:
    radial-gradient(ellipse 72% 78% at 50% 52%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, .1) 100%),
    radial-gradient(ellipse 95% 100% at 50% 52%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, .06) 100%);
}

.work__tint {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -4%;
  right: -4%;
  --lens-c: calc(var(--lens, .14) * .45);
  background: linear-gradient(90deg,
    rgba(242, 5, 5, var(--lens, .14)) 0%,
    rgba(242, 5, 5, var(--lens-c)) 20%,
    rgba(242, 5, 5, 0) 40%,
    rgba(0, 190, 232, 0) 60%,
    rgba(0, 190, 232, var(--lens-c)) 80%,
    rgba(0, 190, 232, var(--lens, .14)) 100%);
  mix-blend-mode: multiply;
  /* quase parado: a tinta respira e a divisa entre as cores oscila, como a cabeça mexendo */
  animation: work-lens-drift 14s ease-in-out infinite alternate, work-lens-breath 10s ease-in-out infinite;
}

@keyframes work-lens-drift {
  from { transform: translateX(-1.5%); }
  to { transform: translateX(1.5%); }
}

@keyframes work-lens-breath {
  0%, 100% { opacity: .85; }
  50% { opacity: 1; }
}

.work__lights.is-offscreen .work__tint {
  animation-play-state: paused;
}


.work__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 var(--page-pad);
  text-align: center;
}

.work__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--title-size);
  line-height: .86;
  letter-spacing: .01em;
  text-transform: uppercase;
}

.work__sub {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: .28em;
  line-height: 1.4;
  text-transform: uppercase;
}

/* ---------- Tira ----------
   A fita é um objeto pousado no branco, não uma faixa de ponta a ponta: três quadros à vista,
   curvando para trás dos dois lados e sumindo no branco. Cada quadro é um pedaço do filme
   (base preta, furos brancos, capa 9:16); os pedaços se encostam e dobram um no outro. */

.work__viewer {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}

.work__stage {
  position: relative;
  width: 100%;
  height: var(--seg-h);
  perspective: 1400px;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  /* as pontas da fita somem no branco */
  -webkit-mask-image: linear-gradient(to right, transparent calc(50% - var(--seg-w) * 1.95), #000 calc(50% - var(--seg-w) * 1.3), #000 calc(50% + var(--seg-w) * 1.3), transparent calc(50% + var(--seg-w) * 1.95));
  mask-image: linear-gradient(to right, transparent calc(50% - var(--seg-w) * 1.95), #000 calc(50% - var(--seg-w) * 1.3), #000 calc(50% + var(--seg-w) * 1.3), transparent calc(50% + var(--seg-w) * 1.95));
}

.work__stage.is-dragging {
  cursor: grabbing;
}

.work__strip {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform var(--move);
}

.work__stage.is-dragging .work__strip {
  transition: none;
}

/* Giro da passagem pelos óculos (js/work.js): cada passo tem seu tempo; is-instant muda sem animar. */
.work__stage.is-spinning :is(.work__frame, .work__dim) {
  transition-duration: var(--spin-step, 600ms);
  transition-timing-function: var(--spin-ease, linear);
}

.work__stage.is-instant :is(.work__strip, .work__frame, .work__dim) {
  transition: none;
}

/* Um pedaço do filme, com os furos vazados. */
.work__frame {
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--seg-w);
  height: var(--seg-h);
  margin-left: calc(var(--seg-w) / -2);
  padding: var(--band) var(--gutter-film);
  background-color: var(--film);
  /* Os furos são recortados do filme (máscara), então mostram o que estiver atrás:
     o fundo, o granulado e a luz dos projetores. */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14'%3E%3Crect x='9' width='10' height='14' rx='3' fill='%23000'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14'%3E%3Crect x='9' width='10' height='14' rx='3' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14'%3E%3Crect x='9' width='10' height='14' rx='3' fill='%23000'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14'%3E%3Crect x='9' width='10' height='14' rx='3' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
  -webkit-mask-size: 28px 14px, 28px 14px, 100% 100%;
  mask-size: 28px 14px, 28px 14px, 100% 100%;
  -webkit-mask-repeat: space no-repeat, space no-repeat, no-repeat;
  mask-repeat: space no-repeat, space no-repeat, no-repeat;
  -webkit-mask-position: center 8px, center calc(100% - 8px), 0 0;
  mask-position: center 8px, center calc(100% - 8px), 0 0;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  transition: transform var(--move), opacity var(--move);
  cursor: pointer;
}

/* A capa, com cantos arredondados. */
.work__cell {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: #111;
}

.work__cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.work__number {
  position: absolute;
  left: 10px;
  top: 10px;
  font-family: var(--font-heading);
  font-size: 14px;
  letter-spacing: .14em;
  line-height: 1;
  color: rgba(255, 255, 255, .7);
}

/* Escurecimento dos vizinhos: uma camada preta com opacidade, no lugar de filtro. */
.work__dim {
  position: absolute;
  inset: 0;
  background: var(--black);
  opacity: 0;
  transition: opacity var(--move);
}

/* ---------- Curva ----------
   Cada pedaço dobra 18° em relação ao anterior, com a borda encostada na borda do vizinho,
   então a fita é contínua. As posições abaixo são o centro de cada pedaço, em múltiplos da
   largura do pedaço: x para o lado, z para o fundo. A perspectiva faz o resto: quanto mais
   para trás, menor, e as bordas de cima e de baixo desenham o arco. */

/* O quadro em foco fica à frente: os vizinhos recuam --push, então parecem menores
   e o do centro passa por cima das bordas deles. */
.work__frame[data-o="0"] {
  z-index: 2;
  transform: none;
}

.work__frame[data-o="1"] {
  transform: translate3d(calc(var(--seg-w) * .9755), 0, calc(var(--seg-w) * -.1545 - var(--push))) rotateY(18deg);
}

.work__frame[data-o="-1"] {
  transform: translate3d(calc(var(--seg-w) * -.9755), 0, calc(var(--seg-w) * -.1545 - var(--push))) rotateY(-18deg);
}

.work__frame[data-o="2"] {
  transform: translate3d(calc(var(--seg-w) * 1.8556), 0, calc(var(--seg-w) * -.6029 - var(--push))) rotateY(36deg);
}

.work__frame[data-o="-2"] {
  transform: translate3d(calc(var(--seg-w) * -1.8556), 0, calc(var(--seg-w) * -.6029 - var(--push))) rotateY(-36deg);
}

/* Do sexto quadro em diante: fora de cena. */
.work__frame[data-o="3"],
.work__frame[data-o="-3"] {
  opacity: 0;
  pointer-events: none;
}

.work__frame[data-o="3"] {
  transform: translate3d(calc(var(--seg-w) * 2.5540), 0, calc(var(--seg-w) * -1.3013 - var(--push))) rotateY(54deg);
}

.work__frame[data-o="-3"] {
  transform: translate3d(calc(var(--seg-w) * -2.5540), 0, calc(var(--seg-w) * -1.3013 - var(--push))) rotateY(-54deg);
}

.work__frame:is([data-o="1"], [data-o="-1"]) .work__dim {
  opacity: .55;
}

.work__frame:is([data-o="2"], [data-o="-2"], [data-o="3"], [data-o="-3"]) .work__dim {
  opacity: .7;
}

/* Sombra suave sob a fita, para ela parecer apoiada no fundo. */
.work__shadow {
  width: calc(var(--seg-w) * 3.2);
  max-width: 92vw;
  height: 24px;
  margin-top: -6px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0));
  pointer-events: none;
}

/* ---------- Projeto em foco ---------- */

.work__info {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 14px;
  padding: 0 var(--page-pad);
  text-align: center;
}

.work__name {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--name-size);
  line-height: 1;
  white-space: nowrap;
  letter-spacing: .01em;
  text-transform: uppercase;
}

/* Categoria e ano de um lado, contador do outro, na mesma linha. */
.work__line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin: 8px 0 0;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: .24em;
  line-height: 16px;
  text-transform: uppercase;
}

.work__count {
  color: var(--ink-3);
}

.work__view {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--black);
  font-family: var(--font-heading);
  font-size: 20px;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  cursor: pointer;
  transition: color var(--dur-fast) linear;
}

.work__view:hover {
  color: var(--deep-blue);
}

.work__info.is-swapping {
  animation: work-swap 300ms cubic-bezier(.2, .7, .2, 1) both;
}

@keyframes work-swap {
  from { opacity: 0; }
  to { opacity: 1; }
}

.work__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: 8px;
}

.work__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--dur-fast) linear;
}

.work__arrow:hover {
  background: var(--deep-blue);
}

.work__arrow:disabled {
  background: var(--ink-4);
  cursor: default;
}

/* Foco de teclado: 2px, afastado 3px, Deep Blue sobre o branco. */
.work :focus-visible {
  outline: 2px solid var(--deep-blue);
  outline-offset: 3px;
}

/* ---------- Celular: 3 quadros, sem giro ---------- */

@media (max-width: 768px) {
  .work {
    /* no celular o subtítulo quebra em duas linhas: 18px a mais de altura fixa */
    --frame-fit: calc(100svh - 354px - var(--title-size) * .86 - var(--name-size));
    --frame-w: max(110px, min(64vw, var(--frame-fit) * .5625));
  }

  .work__stage {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%, #000 78%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 22%, #000 78%, transparent 100%);
  }

  /* sem giro: os vizinhos ficam 6% menores, com a borda escondida atrás do quadro em foco */
  .work__frame[data-o="1"] {
    transform: translateX(calc(var(--seg-w) * .96)) scale(.94);
  }

  .work__frame[data-o="-1"] {
    transform: translateX(calc(var(--seg-w) * -.96)) scale(.94);
  }

  .work__frame:is([data-o="2"], [data-o="-2"], [data-o="3"], [data-o="-3"]) {
    opacity: 0;
    pointer-events: none;
  }

  .work__frame:is([data-o="2"], [data-o="3"]) {
    transform: translateX(calc(var(--seg-w) * 2));
  }

  .work__frame:is([data-o="-2"], [data-o="-3"]) {
    transform: translateX(calc(var(--seg-w) * -2));
  }
}

/* ---------- Mergulho no projeto ----------
   Ao abrir um projeto, js/work.js põe uma cópia da fita numa camada fixa (.work-dive) e a câmera
   avança até o quadro em foco. Aqui: a saída do título, do nome e das setas, e a camada.
   O título sobe e o nome desce, como se a câmera passasse entre eles. */

.work.is-diving .work__stage {
  visibility: hidden;
}

.work.is-diving :is(.work__head, .work__shadow, .work__info, .work__controls) {
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms cubic-bezier(.4, 0, 1, 1), transform 320ms cubic-bezier(.4, 0, 1, 1);
}

.work.is-diving .work__head {
  transform: translateY(-56px);
}

.work.is-diving :is(.work__info, .work__controls) {
  transform: translateY(40px);
}

.is-leaving .nav {
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms linear;
}

/* --fade abre a máscara das pontas durante o mergulho, senão o quadro ampliado seria cortado por ela. */
@property --fade {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}

.work-dive {
  position: fixed;
  inset: 0;
  z-index: 200;
  overflow: hidden;
  pointer-events: none;
}

.work-dive .work__stage {
  position: absolute;
  --m-out: calc(var(--seg-w) * 1.95);
  --m-in: calc(var(--seg-w) * 1.3);
  -webkit-mask-image: linear-gradient(to right, transparent calc(50% - var(--m-out) * var(--fade)), #000 calc(50% - var(--m-in) * var(--fade)), #000 calc(50% + var(--m-in) * var(--fade)), transparent calc(50% + var(--m-out) * var(--fade)));
  mask-image: linear-gradient(to right, transparent calc(50% - var(--m-out) * var(--fade)), #000 calc(50% - var(--m-in) * var(--fade)), #000 calc(50% + var(--m-in) * var(--fade)), transparent calc(50% + var(--m-out) * var(--fade)));
}

.work-dive .work__strip,
.work-dive .work__frame {
  transition: none;
}

/* os vizinhos escurecem enquanto passam pela câmera */
.work-dive .work__dim {
  transition: opacity 600ms linear;
}

.work-dive.is-going .work__frame:not([data-o="0"]) .work__dim {
  opacity: .85;
}

/* o fim do mergulho clareia para o branco da página do projeto (que também é branca) */
.work-dive__dark {
  position: absolute;
  inset: 0;
  background: var(--white);
  opacity: 0;
}

@media (max-width: 768px) {
  .work-dive .work__stage {
    --m-out: 50%;
    --m-in: 28%;
  }
}

/* ---------- Menos movimento: a tira troca na hora ---------- */

@media (prefers-reduced-motion: reduce) {
  .work__tint {
    animation: none;
  }

  .work__strip,
  .work__frame,
  .work__dim {
    transition: none;
  }

  .work__info.is-swapping {
    animation: none;
  }
}

/* ---------- Saída para o About: fade out ----------
   Rolando do Work para o About, o branco escurece até o preto do About, como o fade out do cinema
   (decidido com o Oto em 15/10/2026, a partir de testes/work-parallax.html, modo "Mínimo").
   Nada se mexe: só a cor acompanha o scroll. --out vai de 0 (Work inteiro na tela) a 1 (saiu pelo alto)
   e é calculado em js/work.js. Por cima de tudo do Work, menos da nav. */
.work__fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  height: 60%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .6) 55%, #000 100%);
  /* ganha força rápido: já na primeira metade da saída a borda branco/preto some */
  opacity: min(1, calc(var(--out, 0) * 2.4));
  pointer-events: none;
}

/* o mesmo granulado do About (clareando o preto), para não ficar emenda onde um encontra o outro */
.work__fade::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  mix-blend-mode: screen;
  opacity: var(--about-grain, .12);
  -webkit-mask-image: linear-gradient(to bottom, transparent 30%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 30%, #000 100%);
}