/* how.html na linguagem do palco (ADR 0039). As secoes que sairam da home
   chegam aqui com o desenho de antes; esta camada so troca a pele e poe
   cada uma para contar o que diz quando entra na tela:

   - os cabecalhos de secao ganham o filete desenhado da esquerda
   - a lista de dez passos de hoje e riscada um por um, e so depois os
     cinco passos com a gente entram
   - os tres numeros do padrao contam ate o valor (como.js)
   - docket, ficha e cartoes em canto vivo, inclinando com o ponteiro
   - o FAQ abre deslizando, e a lista de tickets cai em fila

   Com reduced-motion tudo chega pronto, sem transicao. */

body.como {
  --e-como: cubic-bezier(.785, .135, .15, .86);
  interpolate-size: allow-keywords;
}

/* ── cabecalhos de secao ─────────────────────────────────────── */
body.como .sec-head .marker {
  font: 600 .75rem/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase;
}
body.como .sec-head h2 {
  font: 800 clamp(2.25rem, 5vw, 4.25rem)/.92 var(--display);
  letter-spacing: -.05em;
}
body.como [data-reveal] .sec-head h2 { clip-path: inset(0 0 100% 0); transform: translateY(.3em); transition: clip-path .9s var(--e-como) .1s, transform .9s var(--e-como) .1s; }
body.como [data-reveal].revealed .sec-head h2 { clip-path: inset(0 0 -.2em 0); transform: none; }

/* ── canto vivo ──────────────────────────────────────────────── */
body.como :is(.docket, .worker-card, .pack, .col-new, .card, .docket-cap) { border-radius: 0; }
body.como :is(.docket, .worker-card) { border: 1px solid var(--text); transform-style: preserve-3d; transition: transform .5s var(--e-entra); }

/* ── comparacao: hoje e riscado, depois entra o com a gente ───── */
body.como .col-old li {
  width: fit-content;
  background: linear-gradient(var(--text-muted), var(--text-muted)) 2.75rem 55% / 0 1px no-repeat;
  transition: background-size .5s var(--e-como), color .5s;
}
body.como .compare.revealed .col-old li { background-size: calc(100% - 2.75rem) 1px; }
body.como .compare .col-old li:nth-child(1) { transition-delay: .3s; }
body.como .compare .col-old li:nth-child(2) { transition-delay: .4s; }
body.como .compare .col-old li:nth-child(3) { transition-delay: .5s; }
body.como .compare .col-old li:nth-child(4) { transition-delay: .6s; }
body.como .compare .col-old li:nth-child(5) { transition-delay: .7s; }
body.como .compare .col-old li:nth-child(6) { transition-delay: .8s; }
body.como .compare .col-old li:nth-child(7) { transition-delay: .9s; }
body.como .compare .col-old li:nth-child(8) { transition-delay: 1s; }
body.como .compare .col-old li:nth-child(9) { transition-delay: 1.1s; }
body.como .compare .col-old li:nth-child(10) { transition-delay: 1.2s; }
body.como .col-new { border-color: var(--text); }
body.como .col-new li { opacity: 0; transform: translateX(1.5rem); transition: opacity .5s var(--e-entra), transform .7s var(--e-como); }
body.como .compare.revealed .col-new li { opacity: 1; transform: none; }
body.como .compare .col-new li:nth-child(1) { transition-delay: 1.4s; }
body.como .compare .col-new li:nth-child(2) { transition-delay: 1.55s; }
body.como .compare .col-new li:nth-child(3) { transition-delay: 1.7s; }
body.como .compare .col-new li:nth-child(4) { transition-delay: 1.85s; }
body.como .compare .col-new li:nth-child(5) { transition-delay: 2s; }

/* ── padrao em tres numeros ──────────────────────────────────── */
body.como .standard-n { font-variant-numeric: tabular-nums; }

/* ── pacotes: relevo do ADR 0021, agora com borda de tinta ───── */
body.como .pack { border-color: var(--text); }

/* ── tickets e ficha ─────────────────────────────────────────── */
body.como .triage[open] .ticket-list li { animation: ticket-cai .45s var(--e-entra) both; }
body.como .triage[open] .ticket-list li:nth-child(2) { animation-delay: .04s; }
body.como .triage[open] .ticket-list li:nth-child(3) { animation-delay: .08s; }
body.como .triage[open] .ticket-list li:nth-child(4) { animation-delay: .12s; }
body.como .triage[open] .ticket-list li:nth-child(5) { animation-delay: .16s; }
body.como .triage[open] .ticket-list li:nth-child(6) { animation-delay: .2s; }
body.como .triage[open] .ticket-list li:nth-child(7) { animation-delay: .24s; }
body.como .triage[open] .ticket-list li:nth-child(8) { animation-delay: .28s; }
body.como .triage[open] .ticket-list li:nth-child(9) { animation-delay: .32s; }
body.como .triage[open] .ticket-list li:nth-child(10) { animation-delay: .36s; }
@keyframes ticket-cai { from { opacity: 0; transform: translateY(-.5rem); } }
body.como .checks.revealed .worker-card dl > div { animation: ficha-linha .5s var(--e-entra) both; }
body.como .checks.revealed .worker-card dl > div:nth-child(2) { animation-delay: .1s; }
body.como .checks.revealed .worker-card dl > div:nth-child(3) { animation-delay: .2s; }
body.como .checks.revealed .worker-card dl > div:nth-child(4) { animation-delay: .3s; }
body.como .checks.revealed .worker-card dl > div:nth-child(5) { animation-delay: .4s; }
body.como .checks.revealed .worker-card dl > div:nth-child(6) { animation-delay: .5s; }
@keyframes ficha-linha { from { opacity: 0; transform: translateX(-1rem); } }

/* ── FAQ abre deslizando ─────────────────────────────────────── */
body.como .faq details::details-content {
  block-size: 0; overflow: clip;
  transition: block-size .5s var(--e-como), content-visibility .5s allow-discrete;
}
body.como .faq details[open]::details-content { block-size: auto; }

/* ── quem somos ──────────────────────────────────────────────── */
body.como .sobre-texto p { opacity: 0; transform: translateY(1rem); transition: opacity .6s var(--e-entra), transform .8s var(--e-como); }
body.como .sobre.revealed .sobre-texto p { opacity: 1; transform: none; }
body.como .sobre.revealed .sobre-texto p:nth-child(2) { transition-delay: .15s; }
body.como .sobre.revealed .sobre-texto p:nth-child(3) { transition-delay: .3s; }

@media (prefers-reduced-motion: reduce) {
  body.como [data-reveal] .sec-head h2, body.como .col-old li, body.como .col-new li,
  body.como :is(.docket, .worker-card), body.como .faq details::details-content, body.como .sobre-texto p { transition: none; }
  body.como [data-reveal] .sec-head h2 { clip-path: none; transform: none; }
  body.como .col-new li, body.como .sobre-texto p { opacity: 1; transform: none; }
  body.como .triage[open] .ticket-list li, body.como .checks.revealed .worker-card dl > div { animation: none; }
}

/* O titulo do quem somos mora numa coluna de ~40% da largura: no corpo
   das outras secoes ele quebrava em seis linhas. */
body.como .sobre .sec-head h2 { font-size: clamp(2rem, 3.4vw, 3rem); }