/* Kwaba v2026 — seção "Para quem eu trabalho": pessoas de vidro com uma mini-história
   Cada membro é um traço grosso e translúcido; onde eles se cruzam o vidro "soma" e escurece.
   As pessoas observam um problema; "eu" (laranja) entra e resolve. A história dura --dur. */

/* palco rebaixado dentro do card, onde as pessoas ficam */
.aud .pessoas {
    --dur: 7s;
    display: block; width: 100%; height: auto; aspect-ratio: 240 / 140; margin-bottom: 22px;
    border-radius: 18px; overflow: hidden;
    background: linear-gradient(160deg, #fdfbff, #f3eef8);
    box-shadow: inset 3px 3px 8px rgba(82, 43, 120, .10), inset -3px -3px 8px #fff;
}
.pessoas-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ============ PESSOAS DE VIDRO ============ */
.pp { --c: #7d55a8; }
.pp.eu { --c: #EE8B3D; }
.pp .vd { fill: none; stroke: var(--c); stroke-opacity: .5; stroke-linecap: round; }
.pp .p { stroke-width: 10; }
.pp .t { stroke-width: 19; }
.pp .b { stroke-width: 8.5; }
.pp .c { fill: var(--c); fill-opacity: .32; stroke-width: 2; stroke-opacity: .45; }
.pp .luz { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; opacity: .7; }
.pp .brilho { fill: #fff; opacity: .85; }
.pp .chao { fill: #522B78; opacity: .14; filter: url(#pq-chao); }
.pp .bolha { fill: rgba(255, 255, 255, .75); stroke: rgba(125, 85, 168, .4); stroke-width: 1.2; }
.pp text, .cena text { font-family: var(--mono); font-weight: 800; text-anchor: middle; }
.pp .duvida text { font-size: 10px; fill: #7d55a8; }

/* ============ CENÁRIO DE VIDRO ============ */
.cena .vidro { fill: rgba(255, 255, 255, .55); stroke: rgba(125, 85, 168, .28); stroke-width: 1.5; filter: url(#pq-sombra); }
.cena .vidro-fraco { fill: rgba(125, 85, 168, .06); }
.cena .nó { fill: none; stroke: rgba(125, 85, 168, .55); stroke-width: 3; stroke-linecap: round; }
.cena .fluxo, .cena .lampada { fill: none; stroke: var(--orange); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; }
.cena .etapa { fill: rgba(238, 139, 61, .55); stroke: #fff; stroke-width: 1.5; }
.cena .bloco { fill: rgba(125, 85, 168, .32); }
.cena .bloco-eu { fill: rgba(238, 139, 61, .6); }
.cena .ok { fill: var(--orange); }
.cena .ok-v { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cena .grande-duvida { font-size: 34px; fill: rgba(125, 85, 168, .4); }
.cena .raios { fill: none; stroke: var(--orange); stroke-width: 2.4; stroke-linecap: round; }
.cena .coracao { fill: rgba(238, 139, 61, .6); stroke: #fff; stroke-width: 1.5; }

/* ============ BARRA DE PROGRESSO (rodapé de cada cena) ============ */
.cena .trilho { fill: rgba(125, 85, 168, .13); }
.cena .progresso {
    fill: url(#pq-barra);
    animation-name: progresso; animation-timing-function: linear;
    transform-box: fill-box; transform-origin: left center;
}
.cena .marco { fill: #fff; }
@keyframes progresso { from { transform: scaleX(0); } to { transform: none; } }

/* card cuja história está tocando: sobe um pouco para puxar o olhar (a sequência anda da esquerda para a direita) */
.aud.is-tocando { transform: translateY(-4px); box-shadow: var(--sh-lg), var(--hl); }

/* ============ A HISTÓRIA ============
   0–40%  eu entro pela direita (as pessoas observam, com dúvida)
   44–56% eu aponto / ajo
   54–74% o problema se desfaz e a solução aparece
   72–86% as pessoas comemoram */
.cena * { animation-duration: var(--dur); animation-timing-function: ease; animation-fill-mode: both; }
/* só roda quando o JS marca a cena com .play (ao aparecer na tela) */
.cena:not(.play) * { animation-play-state: paused !important; }

.eu-entra { animation-name: eu-entra; }
.eu-passo { animation-name: eu-passo; animation-timing-function: linear; }
.pensa { animation-name: pensa; }
.duvida, .surge { animation-name: surge-some; transform-box: fill-box; transform-origin: center; }
.surge { animation-name: surge; }
.some { animation-name: some; }
.desenha { animation-name: desenha; }
.arruma { animation-name: arruma; transform-box: fill-box; transform-origin: center; }
.braco.aponta { animation-name: braco-aponta; }

@keyframes eu-entra {
    0%, 12% { transform: translateX(150px); opacity: 0; }
    17% { opacity: 1; }
    40%, 100% { transform: none; opacity: 1; }
}
@keyframes eu-passo {
    0%, 16% { transform: none; } 20% { transform: translateY(-3px); } 24% { transform: none; }
    28% { transform: translateY(-3px); } 32% { transform: none; } 36% { transform: translateY(-3px); }
    40%, 100% { transform: none; }
}
@keyframes pensa {
    0%, 6% { transform: none; } 14% { transform: rotate(-4deg); } 24% { transform: rotate(3deg); }
    34% { transform: rotate(-3deg); } 44% { transform: rotate(2deg); } 52%, 72% { transform: none; }
    78% { transform: translateY(-9px); } 84% { transform: none; } 88% { transform: translateY(-4px); } 92%, 100% { transform: none; }
}
@keyframes surge-some {
    0%, 4% { opacity: 0; transform: scale(.5); } 10%, 50% { opacity: 1; transform: none; }
    58%, 100% { opacity: 0; transform: scale(.5); }
}
@keyframes surge { 0%, 62% { opacity: 0; transform: scale(.4); } 72% { opacity: 1; transform: scale(1.15); } 78%, 100% { opacity: 1; transform: none; } }
@keyframes some { 0%, 52% { opacity: 1; } 62%, 100% { opacity: 0; } }
@keyframes desenha { 0%, 56% { stroke-dashoffset: 100; } 74%, 100% { stroke-dashoffset: 0; } }
@keyframes arruma {
    0%, 54% { transform: translate(var(--mx), var(--my)) rotate(var(--mr)); }
    70%, 100% { transform: none; }
}
@keyframes braco-aponta { 0%, 42% { transform: rotate(var(--de)); } 54%, 100% { transform: none; } }

/* ============ TIMES DE PRODUTO: eu e um colega montamos a interface juntos ============
   6–30%  entramos, um de cada lado, sobre a interface bagunçada
   35–66% cada um encaixa um bloco na sua vez (o braço estica até a tela)
   76–88% a tela é validada (contorno laranja + ✓) e comemoramos */
.monta-entra-dir { animation-name: monta-entra-dir; }
.monta-entra-esq { animation-name: monta-entra-esq; }
.monta-passo { animation-name: monta-passo; animation-timing-function: linear; }
.braco.monta-a { animation-name: braco-monta-a; }
.braco.monta-b { animation-name: braco-monta-b; }
/* cada bloco tem a própria animação curta, disparada no seu momento (--bt, em % da história) */
.cena .monta {
    animation-name: monta-bloco; animation-duration: .8s; animation-timing-function: cubic-bezier(.3, 1.4, .5, 1);
    animation-delay: calc(var(--dur) * var(--bt) / 100 - .5s);
    transform-box: fill-box; transform-origin: center;
}
.tela-valida { animation-name: tela-valida; }
.valida { animation-name: valida; transform-box: fill-box; transform-origin: center; }

@keyframes monta-entra-dir { 0%, 6% { transform: translateX(150px); opacity: 0; } 11% { opacity: 1; } 30%, 100% { transform: none; opacity: 1; } }
@keyframes monta-entra-esq { 0%, 6% { transform: translateX(-150px); opacity: 0; } 11% { opacity: 1; } 30%, 100% { transform: none; opacity: 1; } }
@keyframes monta-passo {
    0%, 10% { transform: none; } 14% { transform: translateY(-3px); } 18% { transform: none; }
    22% { transform: translateY(-3px); } 26% { transform: none; } 30%, 82% { transform: none; }
    87% { transform: translateY(-9px); } 92% { transform: none; } 95% { transform: translateY(-4px); } 98%, 100% { transform: none; }
}
@keyframes braco-monta-a {
    0%, 30% { transform: rotate(var(--de)); } 34%, 38% { transform: none; } 43% { transform: rotate(var(--de)); }
    48%, 53% { transform: none; } 58%, 100% { transform: rotate(var(--de)); }
}
@keyframes braco-monta-b {
    0%, 39% { transform: rotate(var(--de)); } 43%, 47% { transform: none; } 51% { transform: rotate(var(--de)); }
    56%, 66% { transform: none; } 72%, 100% { transform: rotate(var(--de)); }
}
@keyframes monta-bloco {
    from { transform: translate(var(--mx), var(--my)) rotate(var(--mr)); }
    to { transform: none; }
}
@keyframes tela-valida {
    0%, 74% { stroke: rgba(125, 85, 168, .28); stroke-width: 1.5; }
    82%, 100% { stroke: var(--orange); stroke-width: 2.4; }
}
@keyframes valida { 0%, 76% { opacity: 0; transform: scale(.4); } 83% { opacity: 1; transform: scale(1.2); } 88%, 100% { opacity: 1; transform: none; } }

/* ============ EDUCAÇÃO: eu crio materiais, as crianças se interessam, o professor comemora ============
   0–60%  as crianças conversam (balões alternados); o professor, à direita, lamenta com a mão na testa
   10–30% eu entro entre ele e o quadro; 34–60% desenho os materiais (triângulo, círculo, gráfico)
   58–66% bato a mão com o professor
   66–76% eu saio de cena; lâmpadas nas crianças, a conversa para e elas levantam a mão
   84–96% o professor levanta os braços e pula */
.cena .bolha { fill: rgba(255, 255, 255, .8); stroke: rgba(125, 85, 168, .4); stroke-width: 1.2; }
.cena .pontinho { fill: #7d55a8; }
.cena .risco { fill: none; stroke: var(--orange); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; }
.cena .halo { fill: rgba(238, 139, 61, .25); }
.cena .bulbo { fill: rgba(255, 216, 170, .9); stroke: var(--orange); stroke-width: 1.4; stroke-linejoin: round; }
.cena .rosca { stroke: var(--orange); stroke-width: 1.6; stroke-linecap: round; }
.cena .gota { fill: rgba(125, 85, 168, .35); stroke: rgba(255, 255, 255, .9); stroke-width: .8; }

.edu-conversa { animation-name: edu-conversa; }
.edu-conversa-b { animation-name: edu-conversa-b; }
.balao-a { animation-name: edu-balao-a; }
.balao-b { animation-name: edu-balao-b; }
.edu-lamenta { animation-name: edu-lamenta; }
.cena .gota { animation-name: edu-gota; }
.braco.edu-prof-braco { animation-name: edu-prof-braco; }
.braco.edu-prof-esq { animation-name: edu-prof-esq; }
.braco.edu-toca { animation-name: edu-toca; }
.braco.edu-levanta { animation-name: edu-levanta; }
.braco.edu-desenha { animation-name: edu-desenha; }
.edu-eu { animation-name: edu-eu; }
.edu-eu-passo { animation-name: edu-eu-passo; animation-timing-function: linear; }
/* traços no quadro e lâmpadas: animações curtas, cada uma no seu momento (--bt, em % da história) */
.cena .risco { animation-name: risca; animation-duration: .9s; animation-delay: calc(var(--dur) * var(--bt) / 100); }
.lampadinha {
    animation-name: acende; animation-duration: .7s; animation-timing-function: cubic-bezier(.3, 1.6, .5, 1);
    animation-delay: calc(var(--dur) * var(--bt) / 100); transform-box: fill-box; transform-origin: center bottom;
}

@keyframes edu-conversa {
    0%, 4% { transform: none; } 8% { transform: translateY(-1.6px); } 12% { transform: none; } 28% { transform: translateY(-1.6px); }
    32% { transform: none; } 48% { transform: translateY(-1.6px); } 52%, 100% { transform: none; }
}
@keyframes edu-conversa-b {
    0%, 14% { transform: none; } 18% { transform: translateY(-1.6px); } 22% { transform: none; } 38% { transform: translateY(-1.6px); }
    42% { transform: none; } 58% { transform: translateY(-1.6px); } 62%, 100% { transform: none; }
}
@keyframes edu-balao-a { 0%, 4% { opacity: 0; } 6%, 14% { opacity: 1; } 16%, 24% { opacity: 0; } 26%, 34% { opacity: 1; } 36%, 44% { opacity: 0; } 46%, 54% { opacity: 1; } 56%, 100% { opacity: 0; } }
@keyframes edu-balao-b { 0%, 14% { opacity: 0; } 16%, 24% { opacity: 1; } 26%, 34% { opacity: 0; } 36%, 44% { opacity: 1; } 46%, 56% { opacity: 0; } 58%, 60% { opacity: 1; } 62%, 100% { opacity: 0; } }
@keyframes edu-lamenta {
    0%, 4% { transform: none; } 16% { transform: rotate(4deg) translateY(1px); } 30% { transform: rotate(1deg); }
    44% { transform: rotate(4deg) translateY(1px); } 58% { transform: rotate(1deg); } 70%, 84% { transform: none; }
    89% { transform: translateY(-10px); } 93% { transform: none; } 96% { transform: translateY(-4px); } 99%, 100% { transform: none; }
}
@keyframes edu-gota { 0%, 8% { opacity: 0; transform: none; } 14%, 50% { opacity: 1; } 58%, 100% { opacity: 0; transform: translateY(4px); } }
@keyframes edu-prof-braco { 0%, 80% { transform: rotate(var(--de)); } 87%, 100% { transform: none; } }
@keyframes edu-levanta { 0%, 68% { transform: rotate(var(--de)); } 76%, 100% { transform: none; } }
/* braço do professor: mão na testa → "toca aqui" comigo → erguido */
@keyframes edu-prof-esq { 0%, 56% { transform: rotate(var(--de)); } 61%, 84% { transform: none; } 90%, 100% { transform: rotate(var(--up)); } }
@keyframes edu-toca { 0%, 56% { transform: rotate(var(--de)); } 61%, 66% { transform: none; } 70%, 100% { transform: rotate(var(--de)); } }
@keyframes edu-desenha {
    0%, 32% { transform: rotate(var(--de)); } 35% { transform: none; } 38% { transform: rotate(calc(var(--de) * .2)); }
    41% { transform: none; } 44% { transform: rotate(calc(var(--de) * .2)); } 47% { transform: none; }
    50% { transform: rotate(calc(var(--de) * .2)); } 53% { transform: none; } 56% { transform: rotate(calc(var(--de) * .2)); }
    59% { transform: none; } 64%, 100% { transform: rotate(var(--de)); }
}
@keyframes edu-eu {
    0%, 8% { transform: translateX(120px); opacity: 0; } 12% { opacity: 1; } 30%, 67% { transform: none; opacity: 1; }
    82% { opacity: 1; } 86%, 100% { transform: translateX(130px); opacity: 0; }
}
@keyframes edu-eu-passo {
    0%, 12% { transform: none; } 16% { transform: translateY(-3px); } 20% { transform: none; } 24% { transform: translateY(-3px); }
    28%, 68% { transform: none; } 72% { transform: translateY(-3px); } 76% { transform: none; } 80% { transform: translateY(-3px); }
    84%, 100% { transform: none; }
}
/* a opacidade esconde a ponta arredondada do traço antes de ele começar */
@keyframes risca { from { stroke-dashoffset: 100; opacity: 0; } 2% { opacity: 1; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes acende { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: none; } }

/* ============ INSTITUIÇÕES E PROJETOS SOCIAIS: quatro atos (a cena dura 11 s) ============
   0–24%   ato 1: alguém usa o totem, eu ao lado apoiando; a tela confirma
   25–49%  ato 2: alguém preenche um formulário no computador e envia com sucesso
   50–73%  ato 3: duas pessoas se encontram num evento e brindam com os crachás
   74–100% ato 4: mais gente chega; ao fundo surgem o totem, os crachás e o computador,
           uma linha em círculo conecta os três (81–90%), o coração acende e todos comemoram */
.cena .tela { fill: rgba(125, 85, 168, .14); }
.cena .tela-linha { fill: rgba(125, 85, 168, .4); }
.cena .campo { fill: rgba(125, 85, 168, .14); }
.cena .preenche { fill: rgba(125, 85, 168, .45); }
.cena .botao-form { fill: var(--orange); }
.cena .teclado { fill: rgba(125, 85, 168, .35); }
.cena .pe-mesa { fill: none; stroke: rgba(125, 85, 168, .3); stroke-width: 3; stroke-linecap: round; }
.cena .varal { fill: none; stroke: rgba(125, 85, 168, .35); stroke-width: 1; }
.cena .band-a { fill: rgba(125, 85, 168, .4); }
.cena .band-b { fill: rgba(238, 139, 61, .55); }
.cena .cracha rect { fill: #fff; stroke: rgba(125, 85, 168, .55); stroke-width: 1; }
.cena .cracha .cracha-faixa { fill: var(--orange); stroke: none; }
.cena .tchin { fill: none; stroke: var(--orange); stroke-width: 2; stroke-linecap: round; }
.cena .anel-base { fill: rgba(125, 85, 168, .05); stroke: rgba(125, 85, 168, .18); stroke-width: 1.5; }
.cena .liga {
    fill: none; stroke: var(--orange); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 100;
    filter: drop-shadow(0 0 3px rgba(238, 139, 61, .55));
    animation-name: risca; animation-duration: 1.1s; animation-timing-function: ease-in-out;
    animation-delay: calc(var(--dur) * var(--bt) / 100);
}

.ato-1 { animation-name: ato-1; } .ato-2 { animation-name: ato-2; }
.ato-3 { animation-name: ato-3; } .ato-4 { animation-name: ato-4; }
.braco.so-toca { animation-name: so-toca; }
.braco.so-apoia { animation-name: so-apoia; }
.braco.so-digita { animation-name: so-digita; }
.braco.so-brinde { animation-name: so-brinde; }
.braco.so-vibra { animation-name: so-vibra; }
.so-chega-esq { animation-name: so-chega-esq; }
.so-chega-dir { animation-name: so-chega-dir; }
.so-festa { animation-name: so-festa; }
/* elementos que entram no seu momento (--bt, em % da história) */
.cena .pop, .cena .preenche, .so-aparece { animation-delay: calc(var(--dur) * var(--bt) / 100); }
.cena .pop {
    animation-name: acende; animation-duration: .6s; animation-timing-function: cubic-bezier(.3, 1.6, .5, 1);
    transform-box: fill-box; transform-origin: center;
}
.cena .preenche { animation-name: preenche; animation-duration: .8s; transform-box: fill-box; transform-origin: left center; }
.so-aparece { animation-name: aparece; animation-duration: .6s; animation-timing-function: cubic-bezier(.3, 1.5, .5, 1); }

@keyframes ato-1 { 0%, 22% { opacity: 1; } 25%, 100% { opacity: 0; } }
@keyframes ato-2 { 0%, 23% { opacity: 0; } 26%, 47% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes ato-3 { 0%, 48% { opacity: 0; } 51%, 71% { opacity: 1; } 74%, 100% { opacity: 0; } }
@keyframes ato-4 { 0%, 72% { opacity: 0; } 75%, 100% { opacity: 1; } }
@keyframes so-toca {
    0%, 4% { transform: rotate(var(--de)); } 7% { transform: none; } 9% { transform: rotate(calc(var(--de) * .12)); }
    11% { transform: none; } 13% { transform: rotate(calc(var(--de) * .12)); } 15%, 18% { transform: none; }
    21%, 100% { transform: rotate(var(--de)); }
}
@keyframes so-apoia { 0%, 4% { transform: rotate(var(--de)); } 8%, 20% { transform: none; } 24%, 100% { transform: rotate(var(--de)); } }
@keyframes so-digita {
    0%, 26% { transform: rotate(var(--de)); } 28% { transform: none; } 30% { transform: rotate(-7deg); } 32% { transform: none; }
    34% { transform: rotate(-7deg); } 36% { transform: none; } 38% { transform: rotate(-7deg); } 40% { transform: none; }
    47%, 100% { transform: rotate(var(--de)); }
}
@keyframes so-chega-esq { 0%, 50% { transform: translateX(-36px); } 57%, 100% { transform: none; } }
@keyframes so-chega-dir { 0%, 50% { transform: translateX(36px); } 57%, 100% { transform: none; } }
@keyframes so-brinde {
    0%, 57% { transform: rotate(var(--de)); } 61% { transform: none; } 62.5% { transform: rotate(calc(var(--de) * .1)); }
    64%, 71% { transform: none; } 74%, 100% { transform: rotate(var(--de)); }
}
@keyframes so-vibra { 0%, 87% { transform: rotate(var(--de)); } 91%, 100% { transform: none; } }
@keyframes so-festa {
    0%, 91% { transform: none; } 93.5% { transform: translateY(-9px); } 96% { transform: none; }
    98% { transform: translateY(-5px); } 100% { transform: none; }
}
@keyframes preenche { from { transform: scaleX(0); } to { transform: none; } }
/* faísca que acende e some ("toca aqui" da educação) */
.cena .pop.faisca { animation-name: faisca; animation-duration: 1.2s; }
@keyframes faisca { 0% { opacity: 0; transform: scale(.4); } 25% { opacity: 1; transform: scale(1.15); } 60% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(1.1); } }
@keyframes aparece { from { opacity: 0; transform: translateY(16px) scale(.6); } to { opacity: 1; transform: none; } }

/* sem animação: mostra direto o final da história */
@media (prefers-reduced-motion: reduce) {
    .cena * { animation-delay: calc(var(--dur) * -1) !important; animation-play-state: paused !important; }
}