/* O palco da home (ADR 0039): a tela partida entre quem contrata, a
   esquerda, e quem procura trabalho, a direita. Cada metade e uma foto
   cortada em cinco fatias horizontais, que entram em cascata, respondem ao
   ponteiro cada uma num passo, e abrem para a tela inteira quando o lado e
   escolhido.

   Uma variavel manda em tudo: --l, a largura do lado esquerdo em pontos de
   0 a 100. 50 e o palco em repouso, 64/36 e o foco de um lado, 100/0 e o
   lado aberto. Registrada com @property para a transicao andar nela, e nao
   pular de um valor para o outro.

   Sem JS o palco fica parado a 50/50 com as duas placas, e o cadastro de
   cada lado continua no menu. Com reduced-motion nada anda, mas abrir e
   fechar continuam funcionando, sem transicao. */

@property --l { syntax: '<number>'; inherits: true; initial-value: 50; }

.palco {
  --e-palco: cubic-bezier(.785, .135, .15, .86);
  --t-palco: .9s;
  position: relative;
  padding: 0;
  max-width: none;
  display: block;
  /* A pista: quatro capitulos de rolagem. O palco gruda e quem anda e ela. */
  height: calc(100svh * 3.6);
  background: var(--text);
}

.palco-palco {
  --l: 50;
  --px: 0;
  --py: 0;
  /* Gruda no topo e ocupa a tela. Antes de grudar, a parte de baixo dele
     fica abaixo da dobra pela altura do cabecalho: --corte e quanto falta,
     medido pelo palco.js, e as placas de baixo sobem por ele para caberem
     na primeira tela. */
  --corte: 0px;
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 36rem;
  overflow: hidden;
  container-type: size;
  background: var(--text);
  color: var(--paper);
  transition: --l var(--t-palco) var(--e-palco);
}
.palco-palco[data-foco="builder"] { --l: 64; }
.palco-palco[data-foco="worker"] { --l: 36; }
.palco-palco[data-aberto="builder"] { --l: 100; }
.palco-palco[data-aberto="worker"] { --l: 0; }
/* Rolar com um lado aberto fecha nada: o capitulo troca do mesmo jeito. */

/* ── as duas metades ─────────────────────────────────────────── */
.palco-lado {
  position: absolute;
  top: 0; bottom: 0;
  overflow: hidden;
}
.palco-lado[data-lado="builder"] { left: 0; width: calc(var(--l) * 1%); }
.palco-lado[data-lado="worker"] { right: 0; width: calc((100 - var(--l)) * 1%); }
/* O filete entre as metades e a costura do palco. */
.palco-lado[data-lado="worker"] { box-shadow: inset 1px 0 0 var(--paper); }

.palco-foto { position: absolute; inset: 0; z-index: 0; transition: filter .6s var(--e-entra); }
/* Ripas coladas, sem costura de tinta: o deslocamento entre elas e de
   poucos pixels, o bastante para a foto responder ao ponteiro sem parecer
   imagem quebrada. */
.palco-cena { position: absolute; inset: 0; display: grid; grid-template-rows: repeat(5, 1fr); }
.palco-fatia { position: relative; overflow: hidden; }

/* A foto tem a largura do palco inteiro, e nao da metade: o lado mostra um
   recorte dela, e quando ele cresce a foto se revela, em vez de esticar. O
   deslocamento acompanha --l para a foto ficar centrada na metade em
   repouso e encostada na borda quando o lado abre. */
.palco-fatia img {
  position: absolute;
  top: calc(var(--f) * -100%);
  height: 500%;
  width: 100cqw;
  max-width: none;
  object-fit: cover;
  filter: saturate(.72);
  transform: translate3d(calc(var(--px) * var(--k) * 1px), calc(var(--py) * 5px), 0) scale(1.05);
  transition: transform .6s var(--e-entra);
}
.palco-lado[data-lado="builder"] .palco-fatia img { left: calc((var(--l) - 100) * .5cqw); }
.palco-lado[data-lado="worker"] .palco-fatia img { right: calc(var(--l) * -.5cqw); }
.palco-palco[data-aberto] .palco-fatia img { transform: scale(1.05); }

/* A cascata: a fatia do meio puxa, as vizinhas vem depois, as pontas por
   ultimo. O mesmo desenho do snippet de referencia, em CSS. Cada lado entra
   a partir da costura, o worker um passo depois do builder, e o titulo
   depois dos dois: uma sequencia, e nao duas cortinas ao mesmo tempo. */
.palco-fatia:nth-child(1), .palco-fatia:nth-child(5) { --d: .16s; --k: 2; }
.palco-fatia:nth-child(2), .palco-fatia:nth-child(4) { --d: .08s; --k: 3.5; }
.palco-fatia:nth-child(3) { --d: 0s; --k: 5; }
/* A posicao da fatia vem daqui porque a CSP nao deixa style inline. */
.palco-fatia:nth-child(1) { --f: 0; }
.palco-fatia:nth-child(2) { --f: 1; }
.palco-fatia:nth-child(3) { --f: 2; }
.palco-fatia:nth-child(4) { --f: 3; }
.palco-fatia:nth-child(5) { --f: 4; }
.palco-lado[data-lado="builder"] .palco-cena[data-n="0"] .palco-fatia { animation: fatia-da-direita 1.1s var(--e-palco) var(--d) backwards; }
.palco-lado[data-lado="worker"] .palco-cena[data-n="0"] .palco-fatia { animation: fatia-da-esquerda 1.1s var(--e-palco) calc(var(--d) + .18s) backwards; }

/* ── os capitulos ────────────────────────────────────────────── */
/* Cada cena espera na costura, entra quando o capitulo chega e sai para a
   borda de fora quando ele passa. Rolando para cima, o caminho inverte
   sozinho. A cascata e a mesma da entrada: a fatia do meio puxa. */
.palco-fatia { transition: transform 1s var(--e-palco) var(--d); }
.palco-cena { z-index: 1; }
.palco-lado[data-lado="builder"] .palco-cena .palco-fatia { transform: translateX(101%); }
.palco-lado[data-lado="worker"] .palco-cena .palco-fatia { transform: translateX(-101%); }
.palco-lado[data-lado="builder"] .palco-cena.ja .palco-fatia { transform: translateX(-101%); }
.palco-lado[data-lado="worker"] .palco-cena.ja .palco-fatia { transform: translateX(101%); }
.palco-palco .palco-lado .palco-cena.agora .palco-fatia { transform: none; }
.palco-cena.agora { z-index: 2; }
@keyframes fatia-da-direita { from { transform: translateX(101%); } }
@keyframes fatia-da-esquerda { from { transform: translateX(-101%); } }

/* O lado que perdeu o foco apaga, o que ganhou fica inteiro. */
.palco-palco[data-foco="builder"] .palco-lado[data-lado="worker"] .palco-foto,
.palco-palco[data-foco="worker"] .palco-lado[data-lado="builder"] .palco-foto { filter: brightness(.45); }
.palco-palco[data-foco="builder"] .palco-lado[data-lado="worker"] .palco-placa,
.palco-palco[data-foco="worker"] .palco-lado[data-lado="builder"] .palco-placa { opacity: .6; }

/* ── a placa de cada lado ────────────────────────────────────── */
/* Texto sempre em placa de tinta solida, e nunca solto sobre a foto: o
   contraste nao pode depender de qual pedaco da foto passa por tras. */
.palco-placa {
  position: absolute;
  bottom: calc(clamp(1rem, 4cqh, 2.5rem) + var(--corte));
  width: min(30rem, calc(50cqw - 3rem));
  background: var(--text);
  color: var(--paper);
  padding: 1.25rem 1.375rem 1.375rem;
  display: grid;
  gap: .375rem;
  transition: width var(--t-palco) var(--e-palco), opacity .4s var(--e-entra);
}
.palco-lado[data-lado="builder"] .palco-placa { left: clamp(1rem, 3cqw, 3rem); }
.palco-lado[data-lado="worker"] .palco-placa { right: clamp(1rem, 3cqw, 3rem); }
.palco-placa p { margin: 0; }

.palco-quem {
  font: 600 .75rem/1.3 var(--mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--paper-lo);
}
.palco-linhas { display: grid; margin-top: .25rem; }
.palco-linha {
  grid-area: 1 / 1;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--paper-hi);
  max-width: 30rem;
  text-wrap: pretty;
  opacity: 0;
  transform: translateY(.6em);
  transition: opacity .45s var(--e-entra), transform .6s var(--e-palco);
}
.palco-palco[data-cap="0"] .palco-linha[data-n="0"],
.palco-palco[data-cap="1"] .palco-linha[data-n="1"],
.palco-palco[data-cap="2"] .palco-linha[data-n="2"],
.palco-palco[data-cap="3"] .palco-linha[data-n="3"] { opacity: 1; transform: none; transition-delay: .35s; }
.palco-faz {
  position: relative;
  justify-self: start;
  font: 700 clamp(1.75rem, 3.2cqw, 2.75rem)/1.02 var(--display);
  letter-spacing: -.03em;
  color: var(--paper-hi);
  outline: none;
  padding-bottom: .375rem;
}
/* Um filete de papel cresce sob a frase do lado em foco, a partir da
   costura. */
.palco-faz::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--paper-hi);
  transform: scaleX(0);
  transition: transform .6s var(--e-palco);
}
.palco-lado[data-lado="builder"] .palco-faz::after { transform-origin: right; }
.palco-lado[data-lado="worker"] .palco-faz::after { transform-origin: left; }
.palco-palco[data-foco="builder"] [data-lado="builder"] .palco-faz::after,
.palco-palco[data-foco="worker"] [data-lado="worker"] .palco-faz::after { transform: scaleX(1); }

/* O botao que abre o lado: reto, em mono, com a seta que anda. */
.palco-ver {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  margin-top: .5rem;
  min-height: var(--tap);
  padding: .5rem 0;
  border: 0;
  border-bottom: 1px solid var(--paper-hi);
  background: none;
  color: var(--paper-hi);
  font: 600 .8125rem/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  cursor: pointer;
}
.palco-ver::after { content: '\2192'; font-family: var(--sans); transition: transform .4s var(--e-palco); }
.palco-ver:hover::after, .palco-ver:focus-visible::after { transform: translateX(.375rem); }
.palco-ver:focus-visible { outline: 3px solid var(--paper-hi); outline-offset: 4px; }

/* O painel e o que o lado aberto diz e onde ele leva. Fechado ele nao
   existe para leitor de tela nem para Tab. */
.palco-painel { display: none; gap: .75rem; padding-top: .5rem; }
.palco-diz { font-size: 1.0625rem; line-height: 1.5; color: var(--paper-hi); max-width: 34rem; text-wrap: pretty; }
.palco-quando { font-size: .875rem; line-height: 1.5; color: var(--paper-lo); max-width: 34rem; text-wrap: pretty; }
/* Canto vivo como o resto do palco, e o unico coral entra por ultimo,
   recortado da esquerda para a direita. */
.palco-vai { justify-self: start; margin-top: .5rem; border-radius: 0; }
.palco-alt { display: inline-flex; align-items: center; justify-self: start; min-height: var(--tap); color: var(--paper-lo); font-size: .875rem; }
.palco-alt:hover { color: var(--paper-hi); }

.palco-palco[data-aberto] .palco-lado[data-aberto-aqui] .palco-placa { width: min(36rem, calc(100cqw - 3rem)); }
.palco-palco[data-aberto] .palco-lado[data-aberto-aqui] .palco-painel {
  display: grid;
  animation: painel-entra .6s var(--e-entra) .35s both;
}
.palco-palco[data-aberto] .palco-lado[data-aberto-aqui] .palco-vai { animation: vai-recorta .45s var(--e-palco) .85s both; }
.palco-palco[data-aberto] .palco-lado[data-aberto-aqui] .palco-ver { display: none; }
@keyframes painel-entra { from { opacity: 0; transform: translateY(12px); } }
@keyframes vai-recorta { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }

/* ── o titulo na costura ─────────────────────────────────────── */
/* Os tres tempos do mesmo shift ficam em cima da costura e andam com ela.
   Nao e uma terceira placa: cada linha leva a propria faixa de tinta,
   justa ao texto, como letreiro recortado. */
.palco-centro {
  position: absolute;
  top: clamp(1.25rem, 7cqh, 4.5rem);
  left: calc(var(--l) * 1%);
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100cqw - 2rem);
  z-index: 2;
  pointer-events: none;
  transition: opacity .35s var(--e-entra), visibility .35s;
}
.palco-centro h1 {
  font: 800 clamp(3rem, 8.2cqw, 8rem)/.9 var(--display);
  letter-spacing: -.05em;
  color: var(--paper-hi);
  margin: 0;
}
.palco-centro h1 span {
  display: inline-block;
  background: var(--text);
  padding: .02em .14em .08em .1em;
  animation: tempo-entra .9s var(--e-palco) .55s both;
}
.palco-centro h1 span:nth-of-type(2) { animation-delay: .67s; }
/* O tempo do capitulo acende, os outros dois recuam. */
.palco-centro h1 span { transition: color .5s var(--e-entra); }
.palco-palco[data-cap="1"] .palco-centro h1 span:not(:nth-of-type(1)),
.palco-palco[data-cap="2"] .palco-centro h1 span:not(:nth-of-type(2)),
.palco-palco[data-cap="3"] .palco-centro h1 span:not(:nth-of-type(3)) { color: var(--border-control); }
.palco-centro h1 span:nth-of-type(3) { animation-delay: .79s; }
@keyframes tempo-entra { from { clip-path: inset(0 0 100% 0); transform: translateY(.25em); } to { clip-path: inset(0); } }
.palco-aviso {
  display: inline-block;
  margin-top: .5rem;
  max-width: 21rem;
  padding: .375rem .625rem;
  background: var(--text);
  font: 500 .75rem/1.45 var(--mono);
  color: var(--paper-lo);
  text-wrap: pretty;
  animation: painel-entra .6s var(--e-entra) 1s both;
}
.palco-palco[data-aberto] .palco-centro { opacity: 0; visibility: hidden; }

/* ── o trilho: a linha do tempo na costura ───────────────────── */
.palco-trilho {
  position: absolute;
  left: calc(var(--l) * 1%);
  bottom: calc(clamp(1rem, 4cqh, 2.5rem) + var(--corte));
  transform: translateX(-50%);
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: .25rem;
  padding: .5rem .375rem;
  background: var(--text);
  transition: opacity .35s var(--e-entra), visibility .35s;
}
.palco-trilho-barra {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--paper-hi);
  transform-origin: top;
  transform: scaleY(var(--prog, 0));
}
.palco-trilho button {
  min-height: var(--tap);
  padding: .25rem .625rem;
  border: 0;
  background: none;
  color: var(--border-control);
  font: 600 .6875rem/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .3s var(--e-entra);
}
.palco-trilho button:hover, .palco-trilho button[aria-current="step"] { color: var(--paper-hi); }
.palco-trilho button:focus-visible { outline: 2px solid var(--paper-hi); outline-offset: -2px; }
.palco-palco[data-aberto] .palco-trilho { opacity: 0; visibility: hidden; }

/* ── o X ─────────────────────────────────────────────────────── */
.palco-fecha {
  position: absolute;
  top: clamp(1rem, 4cqh, 2rem);
  right: clamp(1rem, 3cqw, 3rem);
  width: 3.5rem; height: 3.5rem;
  border: 1px solid var(--paper);
  background: var(--text);
  z-index: 3;
  cursor: pointer;
  transform: scaleX(0);
  transition: transform .5s var(--e-palco), background-color var(--t-rapido) var(--e-entra);
}
.palco-fecha span {
  position: absolute; left: 50%; top: 50%;
  width: 2.25rem; height: 2px;
  background: var(--paper-hi);
  transform: translate(-50%, -50%) rotate(45deg);
}
.palco-fecha span + span { transform: translate(-50%, -50%) rotate(-45deg); }
.palco-fecha:hover, .palco-fecha:focus-visible { background: var(--paper-hi); }
.palco-fecha:hover span, .palco-fecha:focus-visible span { background: var(--text); }
.palco-fecha:focus-visible { outline: 3px solid var(--paper-hi); outline-offset: 3px; }
.palco-palco[data-aberto] .palco-fecha { transform: scaleX(1); }

/* ── cursor que diz o que o clique faz ───────────────────────── */
/* A posicao vem do palco.js, por interpolacao a cada quadro, sem
   transicao (transicao reiniciada todo quadro deixava o disco para tras).
   A escala fica no filho, que e quem anima. */
.palco-cursor {
  position: absolute;
  left: 0; top: 0;
  width: 4.75rem; height: 4.75rem;
  margin: -2.375rem 0 0 -2.375rem;
  pointer-events: none;
  z-index: 4;
  transform: translate3d(var(--cx, -200px), var(--cy, -200px), 0);
}
.palco-cursor span {
  width: 100%; height: 100%;
  border-radius: 50%;
  background: var(--text);
  color: var(--paper-hi);
  display: grid; place-items: center;
  font: 600 .6875rem/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  transform: scale(0);
  transition: transform .35s var(--e-entra), color .2s;
}
.palco-cursor span[hidden] { display: none; }
.palco-palco.cursor-ativo .palco-cursor span { transform: scale(1); }
/* Em cima de placa ou botao ele vira um ponto, em vez de sumir seco. */
.palco-palco.cursor-ativo.cursor-ponto .palco-cursor span { transform: scale(.16); color: transparent; }
.palco-cursor[hidden] { display: none; }

.palco-legenda {
  position: absolute;
  left: .75rem; top: .625rem;
  font: 500 .6875rem/1 var(--mono);
  color: var(--paper-lo);
  background: var(--text);
  padding: .25rem .375rem;
  z-index: 2;
}

/* ── celular: as metades viram faixa de cima e de baixo ──────── */
@media (max-width: 780px) {
  .palco-trilho { display: none; }
  .palco-lado[data-lado="builder"] { left: 0; right: 0; width: auto; top: 0; bottom: auto; height: calc(var(--l) * 1%); }
  .palco-lado[data-lado="worker"] { left: 0; right: 0; width: auto; top: auto; bottom: 0; height: calc((100 - var(--l)) * 1%); box-shadow: inset 0 1px 0 var(--paper); }
  .palco-fatia img,
  .palco-lado[data-lado="builder"] .palco-fatia img,
  .palco-lado[data-lado="worker"] .palco-fatia img { left: 0; right: auto; width: 100%; }
  /* Placas compactas: a frase e o botao na mesma linha, sem o rotulo, para
     a foto aparecer. Aberto, o rotulo e o painel voltam. */
  .palco-placa {
    width: auto; left: 1rem; right: 1rem;
    padding: .75rem 1rem;
    grid-template-columns: 1fr auto;
    align-items: end;
    column-gap: 1rem;
  }
  .palco-quem { display: none; }
  .palco-faz { font-size: 1.5rem; }
  .palco-ver { margin-top: 0; }
  .palco-painel { grid-column: 1 / -1; }
  .palco-palco[data-aberto] .palco-lado[data-aberto-aqui] .palco-placa { width: auto; grid-template-columns: 1fr; padding: 1rem 1.125rem 1.125rem; }
  .palco-palco[data-aberto] .palco-lado[data-aberto-aqui] .palco-quem { display: block; }
  .palco-lado[data-lado="builder"] .palco-placa { left: 1rem; top: 1rem; bottom: auto; }
  .palco-lado[data-lado="worker"] .palco-placa { right: 1rem; bottom: calc(1rem + var(--corte)); }
  .palco-linha { font-size: .9375rem; }
  .palco-linhas { grid-column: 1 / -1; grid-row: 2; }
  .palco-centro {
    top: calc(var(--l) * 1%);
    left: 1rem;
    transform: translateY(-50%);
  }
  .palco-centro h1 { font-size: clamp(2.5rem, 12vw, 3.25rem); }
  .palco-aviso { display: none; }
  /* O X fica na ponta oposta a placa do lado aberto. */
  .palco-fecha { top: auto; bottom: 1rem; right: 1rem; width: 3rem; height: 3rem; }
  .palco-palco[data-aberto="worker"] .palco-fecha { top: 1rem; bottom: auto; }
  .palco-legenda { display: none; }
}

/* ── sem movimento ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .palco-palco, .palco-placa, .palco-fecha, .palco-centro, .palco-foto, .palco-fatia img, .palco-faz::after, .palco-ver::after { transition: none; }
  .palco-fatia, .palco-centro h1 span, .palco-aviso, .palco-painel, .palco-vai { animation: none !important; }
  .palco-fatia, .palco-linha, .palco-centro h1 span, .palco-trilho { transition: none !important; }
  .palco-fatia img { transform: scale(1.05); }
  .palco-cursor { display: none; }
}