/* As telas de entrada na linha do palco da home (ADR 0039): join,
   join-worker, join-builder e login. So pele e movimento. A logica do
   fluxo (uma pergunta por tela, um toque avanca, escape como texto) e a do
   ADR 0016, e as suites que guardam ela continuam valendo.

   O que muda:
   - a foto do lado de quem esta se cadastrando, em fatias, presa na
     esquerda da tela (no celular, uma faixa no topo). A cada pergunta as
     fatias andam em cascata e o contador troca
   - cada pergunta entra pelo lado de onde veio: para a frente, da direita;
     voltando, da esquerda. As opcoes entram em fila
   - opcoes, portas e campos em canto vivo, com a tinta subindo do meio no
     hover, como os botoes do palco e as portas do menu

   A foto e o contador sao desenhados pelo fluxo.js. Sem ele a tela e a
   coluna de sempre, so com os cantos novos. */

body.fluxo {
  --e-fluxo: cubic-bezier(.785, .135, .15, .86);
  --fluxo-lado: 0px;
}

/* ── a foto do lado ──────────────────────────────────────────── */
.fluxo-palco {
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: var(--fluxo-lado);
  background: var(--text);
  overflow: hidden;
  z-index: 0;
}
.fluxo-palco-fotos { position: absolute; inset: 0; display: grid; }
.fluxo-palco-foto { position: relative; display: grid; grid-template-rows: repeat(5, 1fr); overflow: hidden; }
.fluxo-palco-foto + .fluxo-palco-foto { box-shadow: inset 0 1px 0 var(--paper); }
.fluxo-fatia { position: relative; overflow: hidden; }
.fluxo-fatia img {
  position: absolute; left: 0;
  width: 100%; height: 500%;
  object-fit: cover;
  filter: saturate(.72);
  /* --passo anda a foto um pouco a cada pergunta, cada fatia num passo. */
  transform: translateX(calc(var(--passo, 0) * var(--k) * -1%)) scale(1.12);
  transition: transform 1s var(--e-fluxo) var(--d);
}
.fluxo-fatia:nth-child(1) { --f: 0; --d: .12s; --k: .6; }
.fluxo-fatia:nth-child(2) { --f: 1; --d: .06s; --k: .9; }
.fluxo-fatia:nth-child(3) { --f: 2; --d: 0s;   --k: 1.2; }
.fluxo-fatia:nth-child(4) { --f: 3; --d: .06s; --k: .9; }
.fluxo-fatia:nth-child(5) { --f: 4; --d: .12s; --k: .6; }
.fluxo-fatia img { top: calc(var(--f) * -100%); }
.fluxo-fatia { animation: fluxo-fatia-entra 1.1s var(--e-fluxo) var(--d) backwards; }
@keyframes fluxo-fatia-entra { from { transform: translateX(-101%); } }

/* O contador: o numero da pergunta grande, sobre placa de tinta. */
.fluxo-conta {
  position: absolute;
  left: clamp(1rem, 3vw, 2.5rem); bottom: clamp(1rem, 4vh, 2.5rem);
  background: var(--text); color: var(--paper-hi);
  padding: .75rem 1rem .625rem;
  display: flex; align-items: baseline; gap: .5rem;
  z-index: 1;
}
.fluxo-conta-n {
  display: inline-block;
  font: 800 clamp(3rem, 7vw, 6rem)/.85 var(--display);
  letter-spacing: -.05em;
  font-variant-numeric: tabular-nums;
}
.fluxo-conta-n.troca { animation: fluxo-conta-troca .55s var(--e-fluxo); }
@keyframes fluxo-conta-troca { from { clip-path: inset(0 0 100% 0); transform: translateY(.3em); } to { clip-path: inset(0); } }
.fluxo-conta-t { font: 600 .875rem/1 var(--mono); letter-spacing: .08em; color: var(--paper-lo); }
.fluxo-conta[hidden] { display: none; }

@media (min-width: 1000px) {
  body.fluxo.com-palco { --fluxo-lado: 38vw; padding-left: var(--fluxo-lado); }
}
@media (max-width: 999px) {
  /* No celular a foto vira uma faixa no topo, e o contador encolhe. */
  .fluxo-palco { position: relative; width: auto; height: 6.5rem; }
  .fluxo-palco-fotos { grid-template-columns: 1fr 1fr; }
  .fluxo-palco-foto + .fluxo-palco-foto { box-shadow: inset 1px 0 0 var(--paper); }
  .fluxo-conta { left: auto; right: 1rem; bottom: .75rem; padding: .375rem .625rem .25rem; }
  .fluxo-conta-n { font-size: 2.25rem; }
  .fluxo-conta-t { font-size: .75rem; }
  /* No formulario a faixa solta sai: a regra do ADR 0016 e a primeira
     resposta na metade de cima da tela, e no navegador do WhatsApp
     (390x670) os 104px da foto a empurravam para baixo. A foto passa para
     a barra do topo, no lugar do respiro que ja existia ali. */
  body.fluxo-form .fluxo-palco { display: none; }
}

/* ── no celular, a barra do topo e a placa ───────────────────── */
.fluxo-faixa { display: none; }
@media (max-width: 999px) {
  body.com-faixa main { padding-top: 0; }
  body.com-faixa .wiz-bar {
    position: relative;
    isolation: isolate;
    min-height: 5rem;
    margin-inline: calc(50% - 50vw);
    padding: 0 1.25rem .625rem;
    align-items: flex-end;
    background: var(--text);
    overflow: hidden;
  }
  .fluxo-faixa { display: block; position: absolute; inset: 0; z-index: -1; }
  .fluxo-faixa .fluxo-palco-foto { height: 100%; }
  .fluxo-faixa .fluxo-fatia img { transform: translateX(calc(var(--passo, 0) * var(--k) * -2%)) scale(1.12); }
  /* O texto da faixa fica em placa de tinta solida, como no palco. */
  body.com-faixa .wiz-voltar {
    background: var(--text); color: var(--paper-hi);
    padding: 0 .875rem; min-height: var(--tap);
  }
  body.com-faixa .wiz-voltar:focus-visible { outline-color: var(--paper-hi); }
  body.com-faixa .wiz-bar .wiz-count {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  .fluxo-faixa-n {
    position: absolute; right: 1.25rem; bottom: .625rem;
    margin: 0; min-height: var(--tap);
    padding: .375rem .625rem .25rem;
    display: flex; align-items: baseline; gap: .375rem;
    background: var(--text); color: var(--paper-hi);
  }
  .fluxo-faixa-n > span:first-child {
    display: inline-block;
    font: 800 2.25rem/.85 var(--display);
    letter-spacing: -.05em;
    font-variant-numeric: tabular-nums;
  }
  .fluxo-faixa-n > span.troca { animation: fluxo-conta-troca .55s var(--e-fluxo); }
  .fluxo-faixa-t { font: 600 .75rem/1 var(--mono); letter-spacing: .08em; color: var(--paper-lo); }
  /* A trilha encosta na placa, como a linha do tempo no pe do palco. */
  body.com-faixa .wiz { gap: 1rem; }
  body.com-faixa .wiz-bar + .wiz-track { margin-top: -1rem; }
  body.com-faixa .wiz .step-q { margin-top: 0; }
}

/* ── a pergunta entra pelo lado de onde veio ─────────────────── */
/* Enquanto desliza, a pergunta passa da borda: sem o corte a pagina
   ficava 20px mais larga e o celular deixava arrastar para o lado. */
body.fluxo main { overflow-x: clip; }
body.fluxo .wiz .step:not([hidden]) { animation: passo-vem .6s var(--e-fluxo) both; }
body.fluxo .wiz[data-dir="volta"] .step:not([hidden]) { animation-name: passo-volta; }
@keyframes passo-vem { from { opacity: 0; transform: translateX(2.5rem); } }
@keyframes passo-volta { from { opacity: 0; transform: translateX(-2.5rem); } }
body.fluxo .wiz .step:not([hidden]) .optrow > *,
body.fluxo .wiz .step:not([hidden]) .chips > *,
body.fluxo .wiz .step:not([hidden]) .chiprow > *,
body.fluxo .wiz .step:not([hidden]) .pickers > * { animation: opcao-vem .5s var(--e-entra) both; }
body.fluxo .wiz .step:not([hidden]) :is(.optrow, .chips, .chiprow, .pickers) > :nth-child(2) { animation-delay: .05s; }
body.fluxo .wiz .step:not([hidden]) :is(.optrow, .chips, .chiprow, .pickers) > :nth-child(3) { animation-delay: .1s; }
body.fluxo .wiz .step:not([hidden]) :is(.optrow, .chips, .chiprow, .pickers) > :nth-child(4) { animation-delay: .15s; }
body.fluxo .wiz .step:not([hidden]) :is(.optrow, .chips, .chiprow, .pickers) > :nth-child(5) { animation-delay: .2s; }
body.fluxo .wiz .step:not([hidden]) :is(.optrow, .chips, .chiprow, .pickers) > :nth-child(n+6) { animation-delay: .25s; }
@keyframes opcao-vem { from { opacity: 0; transform: translateY(.75rem); } }

body.fluxo .wiz .step-q {
  font: 800 clamp(2rem, 1.4rem + 2.2vw, 3.25rem)/.95 var(--display);
  letter-spacing: -.045em;
}

/* ── barra de progresso: a linha do tempo do cadastro ────────── */
body.fluxo .wiz-track { gap: 3px; }
body.fluxo .wiz-track .tick {
  flex: 1 1 0; height: 3px; border-radius: 0;
  background: var(--border);
  transform-origin: left;
}
/* O passo feito e o atual na tinta (estado nao e coral, ADR 0014); o
   atual enche da esquerda quando chega. */
body.fluxo .wiz-track .tick.done,
body.fluxo .wiz-track .tick.now { background: var(--brand); }
body.fluxo .wiz-track .tick.now { animation: tick-enche .7s var(--e-fluxo) .15s backwards; }
@keyframes tick-enche { from { transform: scaleX(0); } }
body.fluxo .wiz-count { font: 600 .75rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
body.fluxo .wiz .famrow .tchip { font: 600 .8125rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
body.fluxo .wiz-voltar { font: 600 .8125rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
body.fluxo .wiz-voltar::before { transition: transform .4s var(--e-fluxo); }
body.fluxo .wiz-voltar:hover::before { transform: translateX(-.25rem); }

/* ── opcoes, portas e campos: canto vivo e tinta subindo do meio ─ */
/* O preenchimento e um degrade de uma cor so, em vez de pseudo-elemento:
   o ::before do chip ja e o visto, e o ::after da opcao e o indicador. */
body.fluxo .optbtn span,
body.fluxo .chip-toggle span,
body.fluxo .optbtn-fam,
body.fluxo #suburb-chips .tchip,
body.fluxo .door {
  border-radius: 0;
  border: 1px solid var(--brand);
  background: linear-gradient(var(--brand), var(--brand)) center / 100% 0 no-repeat, var(--paper-hi);
  transition: background-size .45s var(--e-fluxo), color .3s var(--e-entra);
}
@media (hover: hover) {
  body.fluxo .optbtn span:hover,
  body.fluxo .chip-toggle span:hover,
  body.fluxo .optbtn-fam:hover,
  body.fluxo #suburb-chips .tchip:hover,
  body.fluxo .door:hover { background-size: 100% 100%, auto; color: var(--paper-hi); border-color: var(--brand); }
  body.fluxo .door:hover :is(.door-k, .door-b, .door-note) { color: var(--paper-lo); }
}
/* No toque nao ha hover: a tinta sobe enquanto o dedo esta em cima. */
@media (hover: none) {
  body.fluxo .optbtn span:active,
  body.fluxo .chip-toggle span:active,
  body.fluxo .optbtn-fam:active,
  body.fluxo #suburb-chips .tchip:active,
  body.fluxo .door:active { background-size: 100% 100%, auto; color: var(--paper-hi); }
}
body.fluxo #suburb-chips .tchip.is-on { border-width: 1px; padding: .625rem .875rem; }
body.fluxo .optbtn input:checked + span,
body.fluxo #suburb-chips .tchip.is-on,
body.fluxo .chip-toggle input:checked + span {
  border-width: 1px;
  border-color: var(--brand);
  background-size: 100% 100%, auto;
  color: var(--paper-hi);
}
body.fluxo .wiz .optbtn input:checked + span { padding: 0 1rem; }
body.fluxo .chip-toggle input:checked + span { padding: 0 .875rem; }
body.fluxo .wiz .optbtn input:checked + span::after { border-color: var(--paper-hi); }
body.fluxo .wiz .optbtn span::after { transition: border-width .3s var(--e-fluxo), border-color .3s; }
@media (hover: hover) {
  body.fluxo .wiz .optbtn span:hover::after { border-color: var(--paper-hi); }
}
body.fluxo .optbtn input:focus-visible + span,
body.fluxo .chip-toggle input:focus-visible + span { outline: 3px solid var(--hi-ink); outline-offset: 2px; }
body.fluxo .optbtn-fam::after { transition: transform .4s var(--e-fluxo); }
body.fluxo .optbtn-fam:hover::after { transform: translateX(.25rem); color: var(--paper-hi); }

body.fluxo .doors { gap: 0; border: 1px solid var(--text); }
body.fluxo .door { border: 0; padding: clamp(1.25rem, 3vw, 2rem); }
body.fluxo .door + .door { border-top: 1px solid var(--text); }
body.fluxo .door-h { font: 800 clamp(1.75rem, 4vw, 2.75rem)/.95 var(--display); letter-spacing: -.045em; }
body.fluxo .door-k, body.fluxo .door-note { font-family: var(--mono); letter-spacing: .08em; text-transform: uppercase; font-size: .75rem; }
@media (min-width: 720px) {
  body.fluxo:not(.com-palco) .doors { grid-template-columns: 1fr 1fr; }
  body.fluxo:not(.com-palco) .door + .door { border-top: 0; border-left: 1px solid var(--text); }
}

body.fluxo .btn { border-radius: 0; }
body.fluxo .btn-hi::after,
body.fluxo .door-cta::after { content: '\2192'; display: inline-block; margin-left: .5em; transition: transform .4s var(--e-fluxo); }
body.fluxo .btn-hi:hover::after,
body.fluxo .door:hover .door-cta::after { transform: translateX(.25rem); }
body.fluxo .btn-google::after { content: none; }

body.fluxo :is(input[type="text"], input:not([type]), input[type="tel"], input[type="email"], input[type="password"], input[type="number"], select, textarea) {
  border-radius: 0;
  border-color: var(--text);
  transition: box-shadow .35s var(--e-fluxo), border-color .2s;
}
body.fluxo :is(input, select, textarea):focus { box-shadow: inset 0 -3px 0 var(--text); }

body.fluxo .page-head h1 {
  font: 800 clamp(2.25rem, 1.5rem + 3vw, 4rem)/.92 var(--display);
  letter-spacing: -.05em;
}

/* ── sem movimento ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fluxo-fatia, .fluxo-conta-n.troca, .fluxo-faixa-n > span.troca,
  body.fluxo .wiz .step:not([hidden]),
  body.fluxo .wiz .step:not([hidden]) :is(.optrow, .chips, .chiprow, .pickers) > *,
  body.fluxo .wiz-track .tick.now { animation: none !important; }
  .fluxo-fatia img, body.fluxo .optbtn span, body.fluxo .chip-toggle span, body.fluxo .optbtn-fam, body.fluxo #suburb-chips .tchip, body.fluxo .door,
  body.fluxo .btn-hi::after, body.fluxo .door-cta::after, body.fluxo :is(input, select, textarea) { transition: none; }
}