/* dot.2u — a cena do ponto (docs/specs/landing-v3.md §3). Sem cor digitada: só tokens.
   Um palco fixo (sticky) e uma coluna que rola. O ponto nasce no hero (tempo, personagem.md §4) e, a cada passo do
   "como funciona", constrói o componente daquele passo (scroll); no fim tudo volta ao ponto. Três modos:
   - sem JS ou com prefers-reduced-motion: estado final, parado (tudo desenhado, olhos em repouso);
   - .cena.viva com animation-timeline (nativo): o scroll dirige o desenho;
   - .cena.viva.por-passo (fallback): o passo visível vira data-passo e os componentes aparecem por transição. */
.cena { display: flex; flex-direction: column; view-timeline-name: --cena; view-timeline-axis: block; }
.coluna { display: grid; min-width: 0; }
.hero, .frase, .jornada { padding-inline: 1.25rem; }
.hero { min-height: 44vh; display: flex; flex-direction: column; justify-content: center; padding-block: 2rem 4rem; }
.frase { padding-block: 3rem 5rem; }
.frase .grande { font: 700 clamp(1.9rem, 4.6vw, 3.6rem)/1.06 var(--titulo); letter-spacing: -0.028em; margin: 0; text-wrap: balance; max-width: 16ch; }
.jornada { padding-block: 2rem 4rem; }
.jornada h2 { margin-bottom: 0.4em; }
.passos { list-style: none; margin: 0; padding: 0; counter-reset: passo; }
.passos li { counter-increment: passo; min-height: 46vh; display: flex; flex-direction: column; justify-content: center; padding-block: 1.5rem; max-width: 30rem; }
.passos li::before { content: "0" counter(passo); color: var(--c-primaria); font: 700 0.95rem/1 var(--titulo); letter-spacing: 0.08em; margin-bottom: 0.8rem; }
.passos h3 { margin-bottom: 0.3em; }
.passos p { margin: 0; color: var(--c-texto-sec); }
.fecho-jornada { min-height: 30vh; display: flex; align-items: center; max-width: 24rem; font: 600 clamp(1.25rem, 2vw, 1.6rem)/1.3 var(--titulo); color: var(--c-texto); }

/* O palco: fixo enquanto a cena rola. No celular fica no alto; no desktop, na coluna da direita, inteiro. */
.palco { margin: 0; position: sticky; top: 0; z-index: 1; height: 50vh; min-height: 300px; display: grid; place-items: center; order: -1;
  background: var(--grao), var(--c-fundo); background-size: 220px 220px, auto; background-blend-mode: soft-light, normal;
  -webkit-mask-image: linear-gradient(180deg, var(--c-sobre-primaria) 84%, transparent); mask-image: linear-gradient(180deg, var(--c-sobre-primaria) 84%, transparent); }
.cena-svg { width: 100%; height: 100%; display: block; }
.cena-svg text { font: 600 15px var(--corpo); fill: var(--c-texto-sec); text-anchor: middle; }
.cena-svg .balao-texto { font: 600 22px var(--corpo); fill: var(--c-texto); text-anchor: start; }
.cena-svg .tr { fill: none; stroke: color-mix(in srgb, var(--c-texto) 78%, transparent); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.cena-svg .tr.fino { stroke-width: 2; }
.cena-svg .tr.amarelo { stroke: var(--c-primaria); }
.cena-svg .tr.linha { stroke-width: 3.4; }
.cena-svg .pl { fill: color-mix(in srgb, var(--c-texto) 82%, transparent); }
.cena-svg .pl.amarelo, .cena-svg .sel { fill: var(--c-primaria); }
.cena-svg .balao { fill: color-mix(in srgb, var(--c-texto) 12%, transparent); }
.cena-svg .semente { fill: var(--c-olho); opacity: 0; }
/* o ponto: cores da marca (variante V2, tokens.css); as cápsulas obedecem às variáveis --e-* (olhar, por scroll) e --olhos/--pisca (tempo).
   A geometria é a de ponto.svg, inlinada duas vezes (ids originais na cena; sufixo -fim no encerramento). */
/* valores de tempo nos ancestrais (.palco, .ponto-fim): as animações de tempo mudam --olhos/--pisca na .ponto-caixa; a de scroll muda --e-* no .ponto */
.palco, .ponto-fim { --olhos: 1; --pisca: 0; --pisca-u: 0; }
.ponto #corpo, .ponto #corpo-fim { fill: var(--c-corpo); }
.ponto #anel, .ponto #anel-fim { fill: none; stroke: var(--c-anel); stroke-width: 17.92; }
.ponto .olho { fill: none; stroke: var(--c-olho); stroke-width: 81.92; stroke-linecap: round; stroke-linejoin: round; }
.ponto #e-repouso, .ponto #e-repouso-fim { opacity: calc(var(--e-repouso, 1) * var(--olhos) * (1 - var(--pisca)) * (1 - var(--pisca-u))); }
.ponto #e-atento, .ponto #e-atento-fim { opacity: calc(var(--e-atento, 0) * var(--olhos) * (1 - var(--pisca))); }
.ponto #e-pensando, .ponto #e-pensando-fim { opacity: calc(var(--e-pensando, 0) * var(--olhos) * (1 - var(--pisca))); }
.ponto #e-olhando_esq, .ponto #e-olhando_esq-fim { opacity: calc(var(--e-olhando_esq, 0) * var(--olhos) * (1 - var(--pisca))); }
.ponto #e-olhando_dir, .ponto #e-olhando_dir-fim { opacity: calc(var(--e-olhando_dir, 0) * var(--olhos) * (1 - var(--pisca))); }
.ponto #e-pronto, .ponto #e-pronto-fim { opacity: calc(var(--e-pronto, 0) * var(--olhos) * (1 - var(--pisca))); }
.ponto #e-ops, .ponto #e-ops-fim { opacity: calc(var(--e-ops, 0) * var(--olhos) * (1 - var(--pisca))); }
.ponto #e-piscando, .ponto #e-piscando-fim { opacity: calc(var(--pisca) * var(--olhos)); }
.ponto #e-u_u, .ponto #e-u_u-fim { opacity: calc(var(--pisca-u) * var(--olhos)); }
.ponto-caixa { transform-origin: 300px 380px; }
.comp { transform-origin: 300px 380px; }

/* === Modo vivo: o scroll constrói (animação nativa dirigida pelo scroll) === */
@supports (animation-timeline: view()) {
  .cena.viva:not(.por-passo) .comp { animation: comp-sobe linear both; animation-timeline: --cena; animation-range: contain 0% contain 100%; }
  .cena.viva:not(.por-passo) .tr { stroke-dasharray: 1; animation: tracar linear both; animation-timeline: --cena; animation-range: contain 0% contain 100%; }
  .cena.viva:not(.por-passo) .pl, .cena.viva:not(.por-passo) .sel, .cena.viva:not(.por-passo) .balao, .cena.viva:not(.por-passo) text { animation: preencher linear both; animation-timeline: --cena; animation-range: contain 0% contain 100%; transform-origin: 300px 380px; }
  .cena.viva:not(.por-passo) .cena-svg .ponto { animation: olhar linear both; animation-timeline: --cena; animation-range: contain 0% contain 100%; }
}
/* Janelas de cada passo, em % do percurso da cena: 1 25–33 · 2 37–45 · 3 49–57 · 4 61–69 · 5 73–81 · 6 85–92 · volta 94–100.
   Keyframes não leem variáveis, então há um conjunto por passo. */
@keyframes comp-sobe { 0%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(0.04); } }
@keyframes tracar { 0% { stroke-dashoffset: 1; } 100% { stroke-dashoffset: 0; } }
@keyframes preencher { 0% { opacity: 0; transform: scale(0.2); } 100% { opacity: 1; transform: none; } }
@supports (animation-timeline: view()) {
  .cena.viva:not(.por-passo) .c1 .tr { animation-name: tracar-1; } .cena.viva:not(.por-passo) .c2 .tr { animation-name: tracar-2; }
  .cena.viva:not(.por-passo) .c3 .tr { animation-name: tracar-3; } .cena.viva:not(.por-passo) .c4 .tr { animation-name: tracar-4; }
  .cena.viva:not(.por-passo) .c5 .tr { animation-name: tracar-5; } .cena.viva:not(.por-passo) .c6 .tr { animation-name: tracar-6; }
  .cena.viva:not(.por-passo) .c2 :is(.pl, .sel) { animation-name: preencher-2; } .cena.viva:not(.por-passo) .c3 .pl { animation-name: preencher-3; }
  .cena.viva:not(.por-passo) .c3 .b2 { animation-name: preencher-3b; } .cena.viva:not(.por-passo) .c3 .b3 { animation-name: preencher-3c; }
  .cena.viva:not(.por-passo) .c4 .pl { animation-name: preencher-4; } .cena.viva:not(.por-passo) .c5 text { animation-name: preencher-5; }
  .cena.viva:not(.por-passo) .c6 :is(.balao, text) { animation-name: preencher-6; }
  .cena.viva:not(.por-passo) .c1 .fino { animation-name: tracar-1, sumir-6; } /* os colchetes do visor saem quando o balão entra */
}
.cena:not(.viva) .c1 .fino, .cena.viva.por-passo[data-passo="6"] .c1 .fino { opacity: 0; }
@keyframes sumir-6 { 0%, 84% { opacity: 1; } 88%, 100% { opacity: 0; } }
@keyframes tracar-1 { 0%, 25% { stroke-dashoffset: 1; } 33%, 100% { stroke-dashoffset: 0; } }
@keyframes tracar-2 { 0%, 37% { stroke-dashoffset: 1; } 45%, 100% { stroke-dashoffset: 0; } }
@keyframes tracar-3 { 0%, 49% { stroke-dashoffset: 1; } 57%, 100% { stroke-dashoffset: 0; } }
@keyframes tracar-4 { 0%, 64% { stroke-dashoffset: 1; } 70%, 100% { stroke-dashoffset: 0; } }
@keyframes tracar-5 { 0%, 73% { stroke-dashoffset: 1; } 81%, 100% { stroke-dashoffset: 0; } }
@keyframes tracar-6 { 0%, 88% { stroke-dashoffset: 1; } 92%, 100% { stroke-dashoffset: 0; } }
@keyframes preencher-2 { 0%, 41% { opacity: 0; transform: scaleX(0.2); } 46%, 100% { opacity: 1; transform: none; } }
@keyframes preencher-3 { 0%, 49% { opacity: 0; transform: scale(0.2); } 53%, 100% { opacity: 1; transform: none; } }
@keyframes preencher-3b { 0%, 52% { opacity: 0; transform: scale(0.2); } 56%, 100% { opacity: 1; transform: none; } }
@keyframes preencher-3c { 0%, 55% { opacity: 0; transform: scale(0.2); } 59%, 100% { opacity: 1; transform: none; } }
@keyframes preencher-4 { 0%, 61% { opacity: 0; transform: scale(0.2); } 66%, 100% { opacity: 1; transform: none; } }
@keyframes preencher-5 { 0%, 78% { opacity: 0; } 82%, 100% { opacity: 1; } }
@keyframes preencher-6 { 0%, 85% { opacity: 0; transform: scale(0.2); } 89%, 100% { opacity: 1; transform: none; } }
/* os olhos pelo percurso: atento (manda) → pensando (corta, legenda, capa) → olhando p/ os formatos → pronto (aprovado) → repouso (volta) */
/* toda variável em todo keyframe: a que falta num keyframe interpolaria para o valor inicial no meio do trecho */
@keyframes olhar {
  0%, 35.9% { --e-atento: 1; --e-pensando: 0; --e-olhando_dir: 0; --e-pronto: 0; --e-repouso: 0; }
  36%, 71.9% { --e-atento: 0; --e-pensando: 1; --e-olhando_dir: 0; --e-pronto: 0; --e-repouso: 0; }
  72%, 83.9% { --e-atento: 0; --e-pensando: 0; --e-olhando_dir: 1; --e-pronto: 0; --e-repouso: 0; }
  84%, 94.9% { --e-atento: 0; --e-pensando: 0; --e-olhando_dir: 0; --e-pronto: 1; --e-repouso: 0; }
  95%, 100% { --e-atento: 0; --e-pensando: 0; --e-olhando_dir: 0; --e-pronto: 0; --e-repouso: 1; }
}

/* === Nascimento do ponto (tempo, não scroll; personagem.md §4): 0–400 vazio · 400–700 semente · 700–1200 corpo 0,06→1 R · 1200 olhos atento · 1900 uma piscada === */
.cena.viva .ponto-caixa { animation: nascer 1.2s var(--ease) both, olhos-abrem 1.2s linear both, piscada-uma 2.02s linear both; }
.cena.viva .semente { animation: semente 0.95s var(--ease) both; transform-origin: 300px 380px; }
/* variáveis não registradas interpolam de forma discreta (trocam no meio de dois keyframes): os pares a 0,1% de distância fixam o instante */
@keyframes nascer { 0%, 58% { opacity: 0; transform: scale(0.06); } 100% { opacity: 1; transform: none; } }
@keyframes semente { 0%, 42% { opacity: 0; transform: scale(0); } 73% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }
@keyframes olhos-abrem { 0%, 99.9% { --olhos: 0; } 100% { --olhos: 1; } }
@keyframes piscada-uma { 0%, 94% { --pisca: 0; } 94.1%, 99.9% { --pisca: 1; } 100% { --pisca: 0; } }

/* === Fallback por passo (sem animation-timeline): o passo visível liga os componentes, com transição === */
.cena.viva.por-passo .comp { opacity: 0; transform: scale(0.15); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.cena.viva.por-passo[data-passo="1"] .c1, .cena.viva.por-passo[data-passo="2"] :is(.c1, .c2), .cena.viva.por-passo[data-passo="3"] :is(.c1, .c2, .c3),
.cena.viva.por-passo[data-passo="4"] :is(.c1, .c2, .c3, .c4), .cena.viva.por-passo[data-passo="5"] :is(.c1, .c2, .c3, .c4, .c5),
.cena.viva.por-passo[data-passo="6"] :is(.c1, .c2, .c3, .c4, .c5, .c6) { opacity: 1; transform: none; }
.cena.viva.por-passo .cena-svg .ponto { --e-repouso: 0; --e-atento: 1; }
.cena.viva.por-passo:is([data-passo="2"], [data-passo="3"], [data-passo="4"]) .cena-svg .ponto { --e-atento: 0; --e-pensando: 1; }
.cena.viva.por-passo[data-passo="5"] .cena-svg .ponto { --e-atento: 0; --e-olhando_dir: 1; }
.cena.viva.por-passo[data-passo="6"] .cena-svg .ponto { --e-atento: 0; --e-pronto: 1; }
.cena.viva.por-passo[data-passo="7"] .cena-svg .ponto { --e-atento: 0; --e-repouso: 1; }

/* === Encerramento (fecho): ao chegar, duas piscadas de 120 ms com 240 ms de intervalo; a 2ª em u_u (personagem.md §4) === */
.ponto-fim.chegou { animation: duas-piscadas 2.2s linear both; }
@keyframes duas-piscadas { 0%, 68% { --pisca: 0; --pisca-u: 0; } 68.2%, 73.6% { --pisca: 1; } 73.7%, 84.5% { --pisca: 0; } 84.6%, 90% { --pisca-u: 1; } 90.1%, 100% { --pisca: 0; --pisca-u: 0; } }

/* === Celular e tablet (< 52rem), v3.1: SEM palco sticky (feedback do dono: "uma espécie de faixa"; o palco cobria o CTA).
   O palco vira um bloco normal e transparente no hero (o ponto nasce ali e rola junto com a página) e cada passo ganha a sua
   cena compacta (.cena-passo), clonada do próprio palco pelo script: o celular em construção até aquele passo, o componente do
   passo se desenha quando entra na tela, e o mesmo ponto aparece em cada cena com o olhar daquele passo. === */
@media (max-width: 51.99rem) {
  .palco { position: relative; height: auto; min-height: 0; background: none; -webkit-mask-image: none; mask-image: none; padding-top: 0.5rem; }
  .cena.com-minis .palco .cena-svg { width: auto; height: 118px; } /* só o ponto nascendo: a vista recorta nele (script) */
  .cena.com-minis .palco .comp { display: none; } /* os componentes passam para as cenas dos passos */
  .cena.com-minis .passos li { min-height: 0; padding-block: 2.5rem 1.5rem; }
  .cena.com-minis .fecho-jornada { min-height: 0; flex-direction: column; align-items: flex-start; gap: 1rem; padding-block: 2rem 3rem; }
}
.cena-passo { margin: 0 0 1.4rem; display: flex; justify-content: center; order: -1; } /* a cena vem antes do número e do título */
.cena-passo .cena-svg { width: auto; height: min(38vh, 290px); }
.fecho-jornada .cena-passo .cena-svg { height: 96px; }
.cena-passo .estado { opacity: 0; }
.cena-passo .p-corpo { fill: var(--c-corpo); }
.cena-passo .p-anel { fill: none; stroke: var(--c-anel); stroke-width: 17.92; }
.cena-passo svg[data-olhar="atento"] .p-e-atento, .cena-passo svg[data-olhar="pensando"] .p-e-pensando, .cena-passo svg[data-olhar="olhando_dir"] .p-e-olhando_dir,
.cena-passo svg[data-olhar="pronto"] .p-e-pronto, .cena-passo svg[data-olhar="repouso"] .p-e-repouso { opacity: 1; }
/* a cena compacta não segue a linha do tempo do palco: só o componente do passo (.agora) se desenha, quando o passo é visto */
.cena .cena-passo :is(.comp, .tr, .pl, .sel, .balao, text, .ponto, .ponto-caixa) { animation: none !important; }
.cena-passo .agora :is(.pl, .sel, .balao, text) { transform-box: fill-box; transform-origin: center; }
.cena.viva .cena-passo .agora .tr { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.9s var(--ease) 0.1s; }
.cena.viva .cena-passo .agora :is(.pl, .sel, .balao, text) { opacity: 0; transform: scale(0.2); transition: opacity 0.5s var(--ease) 0.55s, transform 0.5s var(--ease) 0.55s; }
.cena.viva .visto > .cena-passo .agora .tr { stroke-dashoffset: 0; }
.cena.viva .visto > .cena-passo .agora :is(.pl, .sel, .balao, text) { opacity: 1; transform: none; }
@media (min-width: 52rem) { .cena-passo { display: none; } }
@media (min-width: 52rem) {
  .cena { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: start; }
  .palco { order: 0; height: 100vh; min-height: 560px; background: transparent; -webkit-mask-image: none; mask-image: none; }
  .hero { min-height: 100vh; padding-block: 4rem; }
  .hero, .frase, .jornada { padding-inline: max(1.25rem, calc((100vw - var(--largura)) / 2)) 2rem; }
  .passos li { min-height: 60vh; }
}
@media (prefers-reduced-motion: reduce) {
  .cena.viva .cena-passo .agora .tr { stroke-dashoffset: 0; transition: none; }
  .cena.viva .cena-passo .agora :is(.pl, .sel, .balao, text) { opacity: 1; transform: none; transition: none; }
  .cena .comp, .cena .tr, .cena .pl, .cena .sel, .cena .balao, .cena text, .cena .ponto, .cena .ponto-caixa, .cena .semente { animation: none !important; transition: none !important; opacity: 1; transform: none; stroke-dashoffset: 0; }
  .cena .semente { opacity: 0; }
}