primocode 10.12.0 → 10.14.0

package/lib/estudio/dados/projetos-ae/processo-motion-100-ia/comp-a/js/p1c.js

@@ -0,0 +1,389 @@
+/* p1c.js — Parte 1, falas 14–22 (91,4 s → fim): Passo 3 "Som e trilha", em MODO PALCO (STORYBOARD-B.md).
+ * Legenda curta embaixo; o palco desenha a palavra-chave de cada frase:
+ *   herói 🔊 + "3" · "batendo" = tecla "sound design" afundando 3× · "conversem" = 🎬 e 🔊 trocando ondas · "vivo" = ECG reto
+ *   que ganha pulso · régua de sincronia (agulha para no marcador verde em "momento certo") · "ensinar" = 🤷 + "?" apagado no
+ *   quadro-negro · busca real do YouTube · "difícil" = nó que se desfaz · "duas" = ✌️ → ① ② · notificação entra/sai/volta →
+ *   vira o círculo → G (morto cinza em silêncio / vivo colorido com caneta) · "visão" = óculos pixelados descendo · "cada coisa
+ *   com o seu som" · fecho "Passo 3 de 4 ✓ / Parte 2 →". A coluna fica oculta no trecho todo. */
+(function () {
+  const OR = '#D97757', AZ = '#2F55F4', TINTA = '#131313', CZ = '#A19E96', VERDE = '#22B85A', CY = 830;   // centro do palco neste trecho: mais baixo, perto da legenda (pedido 17/10)
+  const temEmoji = id => !!(window.EMOJI && EMOJI[id]);
+  const umDe = (...ids) => ids.find(temEmoji) || ids[ids.length - 1];
+  const ondas = (cor = AZ) => `<g class="o" fill="none" stroke="${cor}" stroke-width="2.1" stroke-linecap="round"><path class="o1" d="M16 9a4 4 0 010 6"/><path class="o2" d="M18.6 6.4a7.6 7.6 0 010 11.2"/></g>`;
+  const ALTO = (tam = 88, cor = AZ) => `<svg viewBox="0 0 24 24" width="${tam}" height="${tam}" style="position:absolute;left:0;top:0;display:block"><g transform="translate(2.6 2.4) scale(.8)">
+    <path d="M3.5 9h4l5-4v14l-5-4h-4z" fill="${TINTA}"/><g class="x" stroke="${CZ}" stroke-width="2.2" stroke-linecap="round" opacity="0"><path d="M16 9.2l5 5.6M21 9.2l-5 5.6"/></g>${ondas(cor)}</g></svg>`;
+  const caixa = (pai, css = {}) => $('div', 'janela', pai, Object.assign({ background: '#fff' }, css));
+  const pos = (e, x, y, w, h) => Object.assign(e.style, { position: 'absolute', left: (x - w / 2) + 'px', top: (y - h / 2) + 'px', width: w + 'px', height: h + 'px' });
+  // escala do palco: cada elemento principal ocupa ~70–80% da largura; grande(el, s) = camada escalada em torno do centro
+  const grande = (el, s) => { const d = $('div', null, el, { position: 'absolute', inset: '0', transformOrigin: `540px ${CY}px` }); d.style.transform = `scale(${s})`; return d; };
+  const maior = (el, s, h) => { const d = $('div', null, el, { position: 'absolute', inset: '0', transformOrigin: `456px ${h / 2}px` }); d.style.transform = `scale(${s})`; return d; };
+  const sombra = (el, x, y, w) => $('div', null, el, { position: 'absolute', left: (x - w / 2) + 'px', top: (y - w * 0.09) + 'px', width: w + 'px', height: (w * 0.18) + 'px', borderRadius: '50%', background: 'radial-gradient(closest-side, rgba(30,30,50,.22), rgba(30,30,50,0))' });
+  const vivo = (t, k = 0, a = 5) => ({ x: a * Math.sin(t * 0.9 + k * 2.3), y: a * 0.8 * Math.cos(t * 0.7 + k * 1.7), r: 1.2 * Math.sin(t * 0.6 + k) });
+
+  const T14 = F0('14'), TFIMP = F1('22') + 0.07;   // 17/10: era 173,32 (antes do respiro de 1,8 s)
+  ocultaColuna(T14 - 0.35, TEMPO.dur + 2, 0.3);
+
+  // ═══ 14 · herói do passo 3 ═══
+  const tH3 = PF('14', 'o') - 0.12;
+  passoHeroi(3, umDe('u1f50a', 'u1f3a7', 'u1f3b5'), T14 - 0.08, tH3, { ate: TFIMP });
+  legenda('14', [pula(2), ['o', 'af|som', 'e a', 'af|trilha', 'sonora.']]);
+  // "o som e a trilha": 🔔 nasce em "som" e 🎶 em "trilha", lado a lado, balançando no ritmo
+  const TSOM = PF('14', 'som'), TTRI = PF('14', 'trilha');
+  ev(TSOM, 'pop', -0.3, 0.22); ev(TTRI, 'pop', 0.3, 0.22);
+  palco(tH3 + 0.02, PF('15', 'batendo') - 0.35, (el, P) => {
+    el = grande(el, 1.22); P.s = [sombra(el, 330, CY + 190, 260), sombra(el, 750, CY + 190, 260)]; P.a = $('div', null, el); pos(P.a, 330, CY, 330, 330); P.la = emojiLot(P.a, umDe('u1f514', 'u1f3b5'), 330);
+    P.b = $('div', null, el); pos(P.b, 750, CY, 330, 330); P.lb = emojiLot(P.b, 'u1f3b6', 330);
+  }, (t, P) => {
+    [[P.a, P.la, TSOM, 0], [P.b, P.lb, TTRI, 1]].forEach(([e, l, t0, i]) => { const n = nasce(t, t0, 0.45), v = vivo(t, i, 6);
+      tf(e, { op: n.op, s: n.s, x: v.x, y: n.y + v.y + 8 * Math.sin((t - t0) * 5.4 + i * 1.6), r: 6 * Math.sin((t - t0) * 2.7 + i), blur: n.blur }); l.toca(t, t0); });
+  }, { entra: false });
+
+  // ═══ 15 · "batendo" = tecla "sound design" afundando 3× · "conversem" = 🎬 e 🔊 trocando ondas ═══
+  legenda('15', [['Eu já venho', 'f|batendo'], 'há um tempo,', 'nos vídeos anteriores,', 'sobre af|sound af|design.', 'Isso é muito f|importante', 'para que o seu a|vídeo', 'e o áudio do seu vídeo', 'af|conversem.']);
+  const HITS = [PF('15', 'batendo') + 0.03, PF('15', 'um') - 0.02, PF('15', 'tempo') + 0.2], TSD = PF('15', 'sound'), TIMP = PF('15', 'importante');
+  HITS.forEach((h, i) => { ev(h, 'tecla', 0, 0.7); ev(h + 0.01, 'pancada', 0, 0.22); });
+  palco(HITS[0] - 0.45, PF('15', 'para') - 0.1, (el, P) => {
+    el = grande(el, 1.32); P.k = $('div', null, el); pos(P.k, 540, CY + 40, 640, 300);
+    P.base = $('div', null, P.k, { position: 'absolute', left: '0', right: '0', top: '26px', bottom: '-26px', borderRadius: '56px', background: '#D9D5CB', boxShadow: '0 40px 70px -24px rgba(30,30,50,.35)' });
+    P.top = $('div', null, P.k, { position: 'absolute', inset: '0', borderRadius: '56px', background: 'linear-gradient(#FFFFFF,#F3F1EB)', boxShadow: 'inset 0 -6px 0 rgba(0,0,0,.05), 0 0 0 1px rgba(0,0,0,.05)',
+      display: 'grid', placeItems: 'center', font: '600 76px/1 GS', letterSpacing: '-0.035em', color: TINTA }, '<span>sound design</span>');
+    P.lab = P.top.firstChild;
+    P.pau = $('div', null, el, { position: 'absolute', left: '0', top: '0', width: '360px', height: '40px', transformOrigin: '340px 20px' },
+      `<svg width="360" height="40" viewBox="0 0 360 40"><rect x="10" y="12" width="330" height="16" rx="8" fill="#C98B4E"/><rect x="10" y="12" width="330" height="6" rx="3" fill="#fff" opacity=".25"/><circle cx="22" cy="20" r="19" fill="#E9C9A0"/><circle cx="16" cy="14" r="6" fill="#fff" opacity=".45"/></svg>`);
+    P.ondas = [0, 1, 2].map(() => $('div', null, el, { position: 'absolute', borderRadius: '70px', border: `4px solid ${AZ}`, opacity: 0 }));
+  }, (t, P) => {
+    let fundo = 0; HITS.forEach(h => { const d = t - h; if (d > -0.02 && d < 0.32) fundo = Math.max(fundo, d < 0.05 ? (d + 0.02) / 0.07 : Math.exp(-(d - 0.05) * 14)); });
+    const v = vivo(t, 2, 4), imp = Math.sin(Math.PI * seg(t, TIMP - 0.05, TIMP + 0.35));
+    tf(P.k, { x: v.x, y: v.y, s: 1 + 0.035 * imp, r: v.r * 0.4 });
+    P.top.style.transform = `translateY(${(22 * fundo).toFixed(2)}px)`; P.base.style.top = (26 + 0).toFixed(0) + 'px';
+    const kS = ILL(seg(t, TSD - 0.05, TSD + 0.4)); P.lab.style.color = kS > 0.5 ? AZ : TINTA;
+    // baqueta: levanta (antecipação) e desce em cada batida; depois sai pela direita
+    let ang = -38; HITS.forEach((h, i) => { const a = seg(t, h - 0.2, h), b = seg(t, h, h + 0.22); if (t > h - 0.2 && t < h + 0.22) ang = t < h ? lerp(-30, 2, ILL(a) ** 2) - 10 * Math.sin(Math.PI * a) : lerp(2, -30, ILL(b)); });
+    const sa = ILL(seg(t, HITS[2] + 0.3, HITS[2] + 0.75)), en = ILL(seg(t, HITS[0] - 0.45, HITS[0] - 0.2));
+    tf(P.pau, { x: 540 + 40 + 400 * (1 - en) + 500 * sa, y: CY - 210 + v.y, r: ang, op: en * (1 - sa) });
+    // anel de impacto em cada batida
+    P.ondas.forEach((o, i) => { const u = seg(t, HITS[i], HITS[i] + 0.5), k = ILL(u); Object.assign(o.style, { left: (540 - 320 - 30 * k) + 'px', top: (CY + 40 - 150 - 30 * k) + 'px', width: (640 + 60 * k) + 'px', height: (300 + 60 * k) + 'px', opacity: (u > 0 && u < 1 ? 0.5 * (1 - u) : 0).toFixed(3) }); });
+  });
+  // conversem: 🎬 (vídeo) e 🔊 (áudio) como dois personagens; as ondas vão de um para o outro, em turnos
+  const TVID = PF('15', 'video'), TAUD = PF('15', 'audio'), TCV = PF('15', 'conversem');
+  const TURNOS = [0, 1, 2, 3, 4].map(i => TAUD + 0.45 + i * 0.36);
+  TURNOS.forEach((tt, i) => ev(tt + 0.05, 'pop', i % 2 ? 0.4 : -0.4, 0.15));
+  palco(TVID - 0.1, F0('16') - 0.15, (el, P) => {
+    el = grande(el, 1.18); P.a = $('div', 'sq', el, { width: '240px', height: '240px', borderRadius: '70px', top: '0' }); pos(P.a, 290, CY, 240, 240);
+    P.la = emojiLot(P.a, 'u1f3ac', 190); P.la.style.left = '25px'; P.la.style.top = '25px';
+    P.b = $('div', 'sq', el, { top: '0' }, ALTO(240)); pos(P.b, 790, CY, 240, 240); P.b.style.borderRadius = '70px';
+    P.o1 = P.b.querySelector('.o1'); P.o2 = P.b.querySelector('.o2');
+    P.w = TURNOS.map((_, i) => $('div', null, el, { position: 'absolute', left: '0', top: (CY - 100) + 'px', width: '200px', height: '200px' },
+      `<svg viewBox="0 0 60 60" width="200" height="200"><g fill="none" stroke="${i % 2 ? OR : AZ}" stroke-width="4.5" stroke-linecap="round"><path d="M18 18a17 17 0 010 24"/><path d="M30 10a29 29 0 010 40"/><path d="M42 3a41 41 0 010 54"/></g></svg>`));
+  }, (t, P) => {
+    const na = nasce(t, TVID, 0.45), nb = nasce(t, TAUD, 0.45);
+    const fala = (i) => TURNOS.reduce((m, tt, j) => (j % 2 === i ? Math.max(m, Math.sin(Math.PI * seg(t, tt - 0.05, tt + 0.3))) : m), 0);
+    const va = vivo(t, 3), vb = vivo(t, 4);
+    tf(P.a, { op: na.op, s: na.s * (1 + 0.07 * fala(0)), x: va.x + 18 * fala(1), y: va.y - 16 * fala(0), r: -5 * fala(0), blur: na.blur }); P.la.toca(t, TVID);
+    tf(P.b, { op: nb.op, s: nb.s * (1 + 0.07 * fala(1)), x: vb.x - 18 * fala(0), y: vb.y - 16 * fala(1), r: 5 * fala(1), blur: nb.blur });
+    P.o1.style.opacity = (0.35 + 0.65 * fala(1)).toFixed(3); P.o2.style.opacity = (0.2 + 0.8 * fala(1)).toFixed(3);
+    P.w.forEach((w, i) => { const u = seg(t, TURNOS[i], TURNOS[i] + 0.4), k = IO(u), dir = i % 2 ? -1 : 1, x0 = dir > 0 ? 400 : 680;
+      tf(w, { x: x0 + dir * 150 * k - 100, op: u > 0 && u < 1 ? Math.sin(Math.PI * u) : 0, s: lerp(0.7, 1.1, k) * (dir < 0 ? -1 : 1) }); });
+  });
+
+  // ═══ 16 · "vivo" = ECG reto que ganha pulso · régua de sincronia · "momento certo" = agulha para no marcador verde ═══
+  legenda('16', ['Não adianta nada você ter', 'um a|vídeo que seja muito bom', 'e muito bem editado', 'se ele não estiver af|vivo.', 'Quem dá esse f|avivamento', 'para o seu vídeo',
+    'é justamente a sua', ['af|trilha', 'af|sonora', logo('spotify-icon.svg', { gira: false, tam: 84 })], 'e os seus af|elementos sonoros,', 'que você usa em cada', 'componente que aparece', 'na tela, no af|momento af|certo.']);
+  const TV16 = PF('16', 'vivo') + 0.05, PER = 0.82, VPX = 260;
+  const BIPS = [0, 1, 2, 3].map(k => TV16 + 0.246 + k * PER).filter(t => t < PF('16', 'trilha') - 0.1);
+  BIPS.forEach(b => ev(b, 'toque', 0.3, 0.32));
+  const ecgF = p => 0.1 * Math.exp(-(((p - 0.15) / 0.03) ** 2)) - 0.12 * Math.exp(-(((p - 0.27) / 0.012) ** 2)) + 1 * Math.exp(-(((p - 0.3) / 0.012) ** 2))
+    - 0.28 * Math.exp(-(((p - 0.33) / 0.014) ** 2)) + 0.24 * Math.exp(-(((p - 0.52) / 0.05) ** 2));
+  palco(F0('16') - 0.05, PF('16', 'trilha') - 0.1, (el, P) => {
+    el = grande(el, 1.12); P.c = caixa(el, { inset: 'auto' }); pos(P.c, 540, CY, 860, 470);
+    P.c.style.backgroundImage = 'linear-gradient(rgba(19,19,19,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(19,19,19,.045) 1px, transparent 1px)'; P.c.style.backgroundSize = '43px 43px';
+    P.hd = $('div', null, P.c, { position: 'absolute', left: '40px', top: '34px', display: 'flex', alignItems: 'center', gap: '16px', font: '600 46px/1 GS', letterSpacing: '-0.02em', color: CZ },
+      `<svg viewBox="0 0 24 24" width="50" height="50"><path class="cor" d="M12 20.5s-7.4-4.5-9.3-9C1.4 8.4 3.4 5 6.8 5c2 0 3.6 1.1 5.2 3 1.6-1.9 3.2-3 5.2-3 3.4 0 5.4 3.4 4.1 6.5-1.9 4.5-9.3 9-9.3 9z" fill="${CZ}"/></svg><span class="bpm">— bpm</span>`);
+    P.cor = P.hd.querySelector('.cor'); P.bpm = P.hd.querySelector('.bpm'); P.ic = P.hd.firstChild;
+    P.svg = $('div', null, P.c, { position: 'absolute', left: '0', top: '120px', width: '860px', height: '300px' }, `<svg width="860" height="300"><polyline class="ln" fill="none" stroke="${CZ}" stroke-width="9" stroke-linejoin="round" stroke-linecap="round"/><circle class="pt" r="10" fill="${CZ}"/></svg>`);
+    P.ln = P.svg.querySelector('.ln'); P.pt = P.svg.querySelector('.pt');
+  }, (t, P) => {
+    const W2 = 780, X0 = 40, base = 175, A = 150, liga = t >= TV16, kc = ILL(seg(t, TV16, TV16 + 0.3)), cor = liga ? '#E5484D' : CZ;
+    const pts = []; for (let x = 0; x <= W2; x += 5) { const tau = t - (W2 - x) / VPX, amp = tau >= TV16 ? 1 : 0, p = (((tau - TV16) % PER) + PER) % PER / PER;
+      const y = base - amp * A * ecgF(p) + 1.2 * Math.sin(tau * 31 + x * 0.05) * (1 - amp); pts.push(`${(X0 + x).toFixed(1)},${y.toFixed(1)}`); }
+    P.ln.setAttribute('points', pts.join(' ')); P.ln.setAttribute('stroke', cor);
+    const last = pts[pts.length - 1].split(','); P.pt.setAttribute('cx', last[0]); P.pt.setAttribute('cy', last[1]); P.pt.setAttribute('fill', cor);
+    let bate = 0; BIPS.forEach(b => { const d = t - b; if (d > 0 && d < 0.3) bate = Math.max(bate, Math.exp(-d * 12)); });
+    P.cor.setAttribute('fill', cor); P.bpm.textContent = liga ? '72 bpm' : '— bpm'; P.hd.style.color = liga ? TINTA : CZ;
+    tf(P.ic, { s: 1 + 0.25 * bate + 0.2 * Math.sin(Math.PI * seg(t, TV16, TV16 + 0.3)) });
+    tf(P.c, { s: 1 + 0.012 * bate + 0.02 * kc * (1 - seg(t, TV16 + 0.3, TV16 + 0.8)) });
+  });
+  // régua de sincronia: a agulha passa por WhatsApp, Instagram e Spotify (cada um nasce com o seu som no instante exato)
+  // e, em "momento certo", para em cima do marcador, que acende verde
+  const T0A = PF('16', 'que', 1) + 0.02, T1A = PF('16', 'aparece') + 0.1, TMC0 = PF('16', 'momento') - 0.2, TMC1 = PF('16', 'certo') + 0.05;
+  const X0A = 150, XS = [300, 520, 730], XM = 850, LOGOS = ['whatsapp-icon.svg', 'instagram-icon.svg', 'spotify-icon.svg'];
+  const agulha = t => t < TMC0 ? lerp(X0A, 760, IO(seg(t, T0A, T1A))) : lerp(760, XM, ILL(seg(t, TMC0, TMC1)));
+  const TC = XS.map(x => { for (let t = T0A; t <= T1A; t += 0.004) if (agulha(t) >= x) return t; return T1A; });
+  TC.forEach((t, i) => ev(t, 'pop', (XS[i] - 456) / 456 * 0.6, 0.32)); ev(TMC1, 'clique', 0.5, 0.45);
+  const barras = (n, alt, cor, sem) => Array.from({ length: n }, (_, i) => { const h = alt * (0.25 + 0.75 * Math.abs(Math.sin(i * 1.7 + sem) * Math.cos(i * 0.6 + sem * 2))); return `<i style="display:block;width:6px;border-radius:3px;height:${h.toFixed(0)}px;background:${cor}"></i>`; }).join('');
+  const linhaBarras = (pai, x, w, n, alt, cor, sem) => $('div', null, pai, { position: 'absolute', left: x + 'px', top: '318px', width: w + 'px', height: '0px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }, barras(n, alt, cor, sem));
+  palco(PF('16', 'trilha') - 0.1, F0('17') - 0.2, bloco({ h: 420, kind: 'abre',
+    monta(el, B) { el = maior(el, 1.1, 420);
+      B.c = caixa(el);
+      const ico = (svg, y) => $('div', null, B.c, { position: 'absolute', left: '40px', top: y + 'px', width: '56px', height: '56px' }, svg);
+      ico(`<svg viewBox="0 0 24 24" width="56" height="56"><rect x="2.5" y="5" width="19" height="14" rx="3.6" fill="none" stroke="${CZ}" stroke-width="1.9"/><path d="M10 9.2l5 2.8-5 2.8z" fill="${CZ}"/></svg>`, 104);
+      ico(`<svg viewBox="0 0 24 24" width="56" height="56"><path d="M3.5 9h4l5-4v14l-5-4h-4z" fill="${CZ}"/>${ondas(CZ)}</svg>`, 290);
+      $('div', null, B.c, { position: 'absolute', left: X0A + 'px', right: '50px', top: '224px', height: '2px', background: 'rgba(19,19,19,.07)' });
+      B.trilha = linhaBarras(B.c, X0A, 862 - X0A, 64, 26, 'rgba(19,19,19,.13)', 0.3);
+      B.comps = XS.map((x, i) => { const q = $('div', 'sq', B.c, { left: (x - 52) + 'px', top: '78px', width: '104px', height: '104px', borderRadius: '30px' });
+        const im = $('img', null, q, { left: '0', top: '0', width: '104px', height: '104px', objectFit: 'cover' }); im.src = LOGO(LOGOS[i]); return q; });
+      B.blips = XS.map((x, i) => linhaBarras(B.c, x - 60, 120, 13, 92, i === 1 ? OR : AZ, i * 2.3));
+      B.mk = $('div', null, B.c, { position: 'absolute', left: (XM - 34) + 'px', top: '96px', width: '68px', height: '68px', borderRadius: '50%', boxSizing: 'border-box', border: `4px dashed ${CZ}`, display: 'grid', placeItems: 'center' },
+        `<svg viewBox="0 0 24 24" width="40" height="40"><path d="M6.5 12.4l3.6 3.6 7.4-7.6" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" pathLength="1" stroke-dasharray="0 1"/></svg>`);
+      B.mkp = B.mk.querySelector('path');
+      B.ag = $('div', null, B.c, { position: 'absolute', left: '0', top: '34px', width: '4px', height: '356px', borderRadius: '2px', background: TINTA },
+        `<i style="position:absolute;left:-9px;top:-10px;width:22px;height:22px;border-radius:50%;background:${TINTA}"></i>`);
+      B.halo = $('div', null, B.c, { position: 'absolute', left: (XM - 80) + 'px', top: '50px', width: '160px', height: '160px', borderRadius: '50%', background: `radial-gradient(closest-side, rgba(34,184,90,.35), rgba(34,184,90,0))`, opacity: 0 });
+    },
+    seek(t, B) {
+      abreJanela(t, B.c, B.t);
+      const x = agulha(t); tf(B.ag, { x: x - 2, op: seg(t, T0A - 0.35, T0A - 0.05) });
+      B.trilha.style.clipPath = `inset(-100px ${(100 - 100 * clamp((x - X0A) / (862 - X0A))).toFixed(2)}% -100px 0)`;
+      B.comps.forEach((q, i) => { const n = nasce(t, TC[i]); tf(q, { op: n.op, s: n.s, y: n.y + 3 * Math.sin((t + i) * 1.6), blur: n.blur }); });
+      B.blips.forEach((b, i) => { const k = ILL(seg(t, TC[i], TC[i] + 0.22)), d = 1 - 0.35 * ILL(seg(t, TC[i] + 0.3, TC[i] + 1.2)); b.style.transform = `scaleY(${(k * d).toFixed(3)})`; b.style.opacity = clamp(k * 3).toFixed(3); });
+      const nm = nasce(t, TMC0 - 0.3, 0.4), kv = ILL(seg(t, TMC1 - 0.02, TMC1 + 0.25)), pr = Math.sin(Math.PI * seg(t, TMC1 - 0.02, TMC1 + 0.3));
+      tf(B.mk, { op: nm.op, s: nm.s * (1 + 0.18 * pr) }); B.mk.style.background = kv > 0.02 ? `rgba(34,184,90,${kv.toFixed(3)})` : 'transparent'; B.mk.style.borderColor = kv > 0.5 ? VERDE : CZ;
+      B.mk.style.borderStyle = kv > 0.5 ? 'solid' : 'dashed'; B.mkp.setAttribute('stroke-dasharray', `${ILL(seg(t, TMC1 + 0.05, TMC1 + 0.35)).toFixed(3)} 1`);
+      B.halo.style.opacity = (kv * (0.7 + 0.3 * Math.sin((t - TMC1) * 4))).toFixed(3);
+      B.ag.style.background = kv > 0.5 ? VERDE : TINTA; B.ag.firstChild.style.background = kv > 0.5 ? VERDE : TINTA;
+    } }), { y: CY });
+
+  // ═══ 17 · "ensinar" = 🤷 + "?" no quadro-negro, apagado com humor · busca real do YouTube ═══
+  legenda('17', ['Como eu já falei', 'nos vídeos anteriores,', ['não tem como eu te', 'f|ensinar'], 'af|sound af|design.', 'Isso é algo muito', 'f|particular seu,', 'mas dá para você praticar', 'pesquisando sobre sound design',
+    ['no', logo('youtube-icon.svg', { gira: false, tam: 84 }), 'f|YouTube.']]);
+  const TES = PF('17', 'ensinar'), TAP = TES + 0.85, TGZ = F0('17') + 0.5;
+  ev(TGZ, 'risco', -0.2, 0.25); ev(TES + 0.02, 'traco', 0.1, 0.3); ev(TES + 0.25, 'pop', 0.4, 0.25); ev(TAP, 'papel', 0, 0.3);
+  palco(F0('17') - 0.05, PF('17', 'mas') - 0.1, (el, P) => {
+    el = grande(el, 1.14); P.q = $('div', null, el, { position: 'absolute', borderRadius: '30px', background: '#8B6A48', boxShadow: '0 50px 90px -30px rgba(40,30,20,.45)' }); pos(P.q, 500, CY, 820, 540);
+    P.lousa = $('div', null, P.q, { position: 'absolute', left: '22px', top: '22px', right: '22px', bottom: '22px', borderRadius: '14px', background: 'radial-gradient(120% 120% at 30% 20%, #2F4A3B, #1F3329)', overflow: 'hidden' });
+    P.esc = $('div', null, P.lousa, { position: 'absolute', inset: '0' });
+    P.tx = $('div', null, P.esc, { position: 'absolute', left: '60px', top: '58px', font: '600 72px/1 GS', letterSpacing: '-0.02em', color: 'rgba(245,245,235,.88)', filter: 'blur(.6px)', whiteSpace: 'nowrap' }, 'sound design =');
+    P.qm = $('div', null, P.esc, { position: 'absolute', left: '290px', top: '150px', width: '220px', height: '300px' },
+      `<svg viewBox="0 0 22 30" width="220" height="300" style="overflow:visible"><path d="M4 9a7 7 0 1 1 10.5 6c-2.6 1.6-3.5 3-3.5 6.4" fill="none" stroke="rgba(245,245,235,.9)" stroke-width="2.6" stroke-linecap="round" pathLength="1" stroke-dasharray="0 1"/><circle cx="11" cy="27.2" r="1.7" fill="rgba(245,245,235,.9)" opacity="0"/></svg>`);
+    P.qp = P.qm.querySelector('path'); P.qd = P.qm.querySelector('circle');
+    P.mancha = $('div', null, P.lousa, { position: 'absolute', inset: '0', opacity: 0, background: 'radial-gradient(60% 40% at 45% 45%, rgba(245,245,235,.13), rgba(245,245,235,0))' });
+    P.apag = $('div', null, P.q, { position: 'absolute', left: '0', top: '0', width: '200px', height: '96px', borderRadius: '18px', background: 'linear-gradient(#5B6B8C 0 58%, #F1EEE6 58%)', boxShadow: '0 20px 30px -10px rgba(0,0,0,.4)' });
+    P.sh = $('div', null, el); pos(P.sh, 840, CY + 190, 340, 340); P.shl = emojiLot(P.sh, 'u1f937-200d-2642', 340);
+  }, (t, P) => {
+    const v = vivo(t, 5, 4); tf(P.q, { x: v.x, y: v.y, r: v.r * 0.5 });
+    const kt = seg(t, TGZ, TGZ + 0.9); P.tx.style.clipPath = `inset(0 ${(100 - 100 * kt).toFixed(1)}% 0 0)`;
+    P.qp.setAttribute('stroke-dasharray', `${IO(seg(t, TES - 0.05, TES + 0.4)).toFixed(3)} 1`); P.qd.setAttribute('opacity', seg(t, TES + 0.4, TES + 0.45).toFixed(2));
+    // apagador: passa em 2 vaivéns da esquerda para a direita; o que fica para trás some (sobra a mancha de giz)
+    const ua = seg(t, TAP, TAP + 0.7), ax = lerp(-40, 700, ua), ay = 170 + 110 * Math.sin(ua * Math.PI * 4);
+    tf(P.apag, { x: ax, y: ay, r: -8 + 10 * Math.sin(ua * 12), op: ua > 0 && ua < 1 ? 1 : 0 });
+    P.esc.style.webkitMaskImage = P.esc.style.maskImage = ua > 0 ? `linear-gradient(90deg, transparent ${(ua * 120 - 14).toFixed(1)}%, #000 ${(ua * 120 + 4).toFixed(1)}%)` : 'none';
+    P.mancha.style.opacity = (0.9 * seg(t, TAP + 0.1, TAP + 0.6)).toFixed(3);
+    const n = nasce(t, TES + 0.25, 0.5); tf(P.sh, { op: n.op, s: n.s, y: n.y + 6 * Math.sin(t * 1.5), blur: n.blur }); P.shl.toca(t, TES + 0.25);
+  });
+  // busca do YouTube: a barra digita "sound design" e o resultado real (NaughtyyJuan) nasce embaixo
+  const BUSCA = 'sound design', TD = PF('17', 'pesquisando') + 0.12, CPS = 13, TR = PF('17', 'youtube');
+  ev(TD, 'digita', 0.2, 0.3); ev(TD + 0.45, 'digita', 0.2, 0.3); ev(TR, 'aparece', 0, 0.25);
+  palco(PF('17', 'mas') - 0.1, F0('18') - 0.2, bloco({ h: 470, kind: 'abre',
+    monta(el, B) { el = maior(el, 1.1, 470);
+      B.c = caixa(el, { fontFamily: 'Roboto, Arial, sans-serif', color: '#0F0F0F' });
+      const wm = $('img', null, B.c, { position: 'absolute', left: '36px', top: '46px', height: '44px', width: 'auto' }); wm.src = LOGO('youtube-wordmark.svg');
+      B.barra = $('div', null, B.c, { position: 'absolute', left: '300px', right: '36px', top: '34px', height: '68px', borderRadius: '34px', boxShadow: 'inset 0 0 0 1.5px #D3D3D3', overflow: 'hidden' });
+      B.txt = $('span', null, B.barra, { position: 'absolute', left: '30px', top: '16px', font: '400 32px/36px Roboto, Arial, sans-serif', whiteSpace: 'nowrap' });
+      $('div', null, B.barra, { position: 'absolute', right: '0', top: '0', width: '92px', height: '68px', background: '#F8F8F8', boxShadow: 'inset 1.5px 0 0 #D3D3D3' },
+        '<svg viewBox="0 0 24 24" width="34" height="34" style="position:absolute;left:28px;top:17px"><circle cx="10.5" cy="10.5" r="6.5" fill="none" stroke="#0F0F0F" stroke-width="2"/><path d="M15.5 15.5L21 21" stroke="#0F0F0F" stroke-width="2.2" stroke-linecap="round"/></svg>');
+      B.res = $('div', null, B.c, { position: 'absolute', left: '36px', top: '136px', right: '36px', height: '300px' });
+      const th = $('img', null, B.res, { position: 'absolute', left: '0', top: '0', width: '480px', height: '270px', borderRadius: '18px', objectFit: 'cover' }); th.src = 'img/p1c/yt-naughtyyjuan-thumb.jpg';
+      $('div', null, B.res, { position: 'absolute', left: '508px', top: '4px', width: '332px', font: '500 32px/1.28 Roboto, Arial, sans-serif', color: '#0F0F0F' }, 'Everything I Know About Sound Design');
+      $('div', null, B.res, { position: 'absolute', left: '508px', top: '182px', display: 'flex', alignItems: 'center', gap: '14px', font: '400 25px/1 Roboto, Arial, sans-serif', color: '#606060' },
+        '<i style="display:block;width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#B06BFF,#3B1A73)"></i>NaughtyyJuan');
+    },
+    seek(t, B) {
+      abreJanela(t, B.c, B.t);
+      const n = clamp(Math.floor((t - TD) * CPS), 0, BUSCA.length), car = n < BUSCA.length || Math.floor(t * 2.2) % 2 === 0;
+      B.txt.innerHTML = (n ? BUSCA.slice(0, n) : '<span style="color:#888">Pesquisar</span>') + (t > TD - 0.3 && car ? '<i style="display:inline-block;width:2px;height:34px;background:#0F0F0F;vertical-align:-6px;margin-left:2px"></i>' : '');
+      const k = ILL(seg(t, TR, TR + 0.45)); tf(B.res, { op: clamp(k * 2), y: (1 - k) * 40, blur: Math.pow(1 - k, 2) * 16 });
+    } }), { y: CY });
+
+  // ═══ 18 · "difícil" = nó que se desfaz · "duas" = ✌️ → ① ② · (o palco da notificação começa em "com uma entrada") ═══
+  legenda('18', [['Não é tão', 'f|difícil', 'quanto parece,'], 'e é muito mais af|simples,', 'porque você só tem que', ['entender', 'f|duas', 'coisas:'], 'o elemento tem que ser', 'af|vivo no seu vídeo,',
+    'com uma af|entrada e uma af|saída;', 'e, nesse meio-tempo', 'que ele está na tela,', 'ele tem que af|conversar', 'com o seu vídeo.']);
+  const TDF = PF('18', 'dificil'), TDS0 = PF('18', 'quanto'), TDS1 = PF('18', 'simples') + 0.1;
+  ev(TDF - 0.05, 'risco', 0, 0.2); ev(TDS1, 'pop', 0.2, 0.18);
+  palco(F0('18') - 0.05, PF('18', 'duas') - 0.25, (el, P) => {
+    P.s = $('div', null, el, { position: 'absolute', left: '0', top: '0', width: '1080px', height: '1500px' }, `<svg width="1080" height="1500"><path class="fio" fill="none" stroke="${OR}" stroke-width="24" stroke-linecap="round" stroke-linejoin="round" pathLength="1" stroke-dasharray="0 1"/><circle class="p1" r="26" fill="${OR}"/><circle class="p2" r="26" fill="${OR}"/></svg>`);
+    P.f = P.s.querySelector('.fio'); P.p1 = P.s.querySelector('.p1'); P.p2 = P.s.querySelector('.p2');
+  }, (t, P) => {
+    // trocoide: com r grande ela dá laços (nó); r → 0 vira uma linha reta. Puxada pelas pontas enquanto desfaz
+    const k = IO(seg(t, TDS0, TDS1)), r = lerp(118, 0, k), n = 5, L = lerp(800, 940, k), x0 = 540 - L / 2, tremor = (1 - k) * 4 * Math.sin(t * 23);
+    const pts = []; for (let i = 0; i <= 240; i++) { const s = i / 240, a = 2 * Math.PI * n * s, env = Math.sin(Math.PI * s) ** 0.6;
+      const x = x0 + L * s - r * env * Math.sin(a) * 1.15, y = CY + r * env * (Math.cos(a) - 1) * 0.9 + r * env * 0.9 + tremor * Math.sin(a * 0.5) - r * 0.45 * env; pts.push((i ? 'L' : 'M') + x.toFixed(1) + ' ' + y.toFixed(1)); }
+    P.f.setAttribute('d', pts.join(' ')); P.f.setAttribute('stroke-dasharray', `${ILL(seg(t, TDF - 0.1, TDF + 0.5)).toFixed(3)} 1`);
+    const vis = seg(t, TDF + 0.3, TDF + 0.5); [P.p1, P.p2].forEach((c, i) => { c.setAttribute('cx', (i ? x0 + L : x0).toFixed(1)); c.setAttribute('cy', CY); c.setAttribute('opacity', vis.toFixed(2)); });
+    P.f.setAttribute('stroke', k > 0.98 ? TINTA : OR); [P.p1, P.p2].forEach(c => c.setAttribute('fill', k > 0.98 ? TINTA : OR));
+  });
+  const TDU = PF('18', 'duas'), TSPL = PF('18', 'elemento') - 0.15;
+  ev(TDU, 'pop', 0, 0.28); ev(TSPL + 0.05, 'pop', -0.4, 0.22); ev(TSPL + 0.17, 'pop', 0.4, 0.22);
+  const ID_V = umDe('u270c', 'u270c-fe0f');
+  palco(TDU - 0.1, PF('18', 'com') - 0.15, (el, P) => {
+    el = grande(el, 1.55); sombra(el, 540, CY + 225, 300); P.v = $('div', null, el); pos(P.v, 540, CY, 400, 400);
+    if (temEmoji(ID_V)) P.vl = emojiLot(P.v, ID_V, 400); else P.v.innerHTML = '<div style="font:330px/400px \'Segoe UI Emoji\',\'Apple Color Emoji\',sans-serif;text-align:center">✌️</div>';
+    P.n = [1, 2].map(i => { const d = $('div', null, el, { position: 'absolute', borderRadius: '50%', boxSizing: 'border-box', border: `10px solid ${AZ}`, color: AZ, font: '600 190px/1 GS', letterSpacing: '-0.04em', display: 'grid', placeItems: 'center', background: '#fff', boxShadow: '0 40px 70px -24px rgba(47,85,244,.35)' }, String(i)); pos(d, 540, CY, 300, 300); return d; });
+  }, (t, P) => {
+    const nv = nasce(t, TDU, 0.45), kd = ILL(seg(t, TSPL - 0.1, TSPL + 0.25));
+    tf(P.v, { op: nv.op * (1 - kd), s: nv.s * (1 - 0.5 * kd), r: 8 * Math.sin((t - TDU) * 3.4) * (1 - kd), y: nv.y, blur: nv.blur + 12 * kd }); if (P.vl) P.vl.toca(t, TDU);
+    const vi = PF('18', 'vivo') - 0.1;
+    P.n.forEach((d, i) => { const n = nasce(t, TSPL + i * 0.12, 0.45), dx = (i ? 1 : -1) * 168 * ILL(seg(t, TSPL + i * 0.12, TSPL + 0.4 + i * 0.12));
+      const foco = i === 0 ? ILL(seg(t, vi, vi + 0.3)) : 0; tf(d, { x: dx, y: n.y + 6 * Math.sin(t * 1.6 + i), op: n.op * (i === 1 ? 1 - 0.55 * ILL(seg(t, vi, vi + 0.3)) : 1), s: n.s * (1 + 0.1 * foco), blur: n.blur }); });
+  });
+
+  // ═══ palco 18–21: notificação entra/sai/volta e conversa → encolhe e vira o CÍRCULO → card do G → demo morto / demo vivo ═══
+  const TA = PF('18', 'com') - 0.05, TE = PF('18', 'entrada'), TS = PF('18', 'saida'), TMEIO = PF('18', 'meio-tempo'), TCONV = PF('18', 'conversar');
+  const TCIRC = PF('19', 'circulo') - 0.4, TPART = PF('19', 'particula'), TG0 = PF('19', 'escorrer'), TG1 = PF('19', 'tela') + 0.05, TGOO = PF('19', 'google');
+  const DM = CN('demo_morto'), DV = CN('demo_vivo'), TM0 = DM.t0 + 0.08, TV0 = DV.t0 + 0.08, DG = 2.6, TFIM = DV.t1 + 0.12;
+  const C = { x: 540, y: CY }, A = { x: 84, y: CY - 256, w: 912, h: 513, r: 34 }, D = { x: 540 - 36, y: CY - 36, w: 72, h: 72, r: 36 }, GC = { x: 160, y: CY - 380, w: 760, h: 760, r: 44 };
+  const lr = (P, Q, k) => ({ x: lerp(P.x, Q.x, k), y: lerp(P.y, Q.y, k), w: lerp(P.w, Q.w, k), h: lerp(P.h, Q.h, k), r: lerp(P.r, Q.r, k) });
+  const uG = k => { k = clamp(k); return 0.35 * k + 0.65 * (1 - Math.cos(Math.PI * k)) / 2; };
+  const GSEG = ['M18.223 5.777 A8.8 8.8 0 0 0 4.159 8.005', 'M4.159 8.005 A8.8 8.8 0 0 0 4.159 15.995', 'M4.159 15.995 A8.8 8.8 0 0 0 16.921 19.296', 'M16.921 19.296 A8.8 8.8 0 0 0 20.800 12.000 H12'];
+  const GCOR = ['#EA4335', '#FBBC05', '#34A853', '#4285F4'], GPAN = [0.3, -0.6, -0.1, 0.6], GPATH = 'M18.223 5.777 A8.8 8.8 0 1 0 20.800 12.000 H12';
+  VIDEOS.push({ nome: 'silencio-demo-morto', t0: DM.t0, t1: DM.t1, trilha: 'para', alvo: -20 });   // sem arquivo: só faz a trilha PARAR (silêncio total)
+  ev(TA, 'abre', 0, 0.22); ev(TE, 'notifica', 0, 0.35); ev(TS + 0.08, 'sai', 0, 0.22); ev(TMEIO, 'notifica', 0, 0.28);
+  ev(TCONV + 0.02, 'pop', -0.2, 0.18); ev(TCONV + 0.5, 'pop', 0.2, 0.18); ev(TCIRC, 'encolhe', 0, 0.25); ev(TPART, 'abre', 0, 0.22); ev(TGOO, 'pop', -0.3, 0.2);
+  legenda('19', ['Por exemplo:', ['olha esse', 'f|círculo', 'aqui.'], 'Eu quero que ele seja', ['como se fosse uma', 'f|partícula'], 'que vai af|escorrer', 'pelo vídeo inteiro,', 'fazendo um f|G', 'no meio da tela',
+    'para construir a marca', ['do', logo('google-g.svg', { gira: false, tam: 84 }), 'f|Google.']]);
+  legenda('20', ['Se essa partícula for', 'apenas um elemento', 'sem c|som, sem efeito sonoro,', 'desenhando na tela,', ['ela é um elemento', 'cf|morto.', emoji('u1fae0')]], { ate: DM.t0 - 0.1 });
+  legenda('21', ['Agora, a mesma partícula,', 'fazendo a mesma coisa,', 'só que agora sendo um', 'elemento af|vivo.'], { ate: DV.t0 - 0.1 });
+
+  palco(TA - 0.1, TFIM + 0.7, (r, c) => {
+    r = grande(r, 1.08);
+    c.w = $('div', null, r, { position: 'absolute', inset: '0', transformOrigin: `${C.x}px ${C.y}px` });
+    c.sh = $('div', 'janela', c.w, { inset: 'auto', background: '#111' });
+    c.vid = $('div', null, c.sh, { position: 'absolute', inset: '0' }); c.f = filme(c.vid, 'glass-hub');
+    c.nt = $('div', null, c.sh, { position: 'absolute', left: '36px', top: '0', width: '840px', height: '150px', borderRadius: '34px', background: 'rgba(250,250,248,.9)', backdropFilter: 'blur(18px)',
+      boxShadow: '0 24px 50px -12px rgba(0,0,0,.45)', fontFamily: 'GS, sans-serif', color: TINTA },
+      `<img src="${LOGO('instagram-icon-5000.png')}" style="position:absolute;left:26px;top:31px;width:88px;height:88px;border-radius:22px">
+       <div style="position:absolute;left:140px;top:26px;right:30px;display:flex;justify-content:space-between;font:500 23px/1 GS;color:#7A786F;letter-spacing:.04em"><span>INSTAGRAM</span><span>agora</span></div>
+       <div style="position:absolute;left:140px;top:60px;font:600 33px/1.15 GS;letter-spacing:-.01em">Nova mensagem</div>
+       <div style="position:absolute;left:140px;top:100px;font:500 29px/1.2 GS;color:#3D3C38">como você fez esse vídeo?</div>`);
+    c.g = $('div', null, c.w, { position: 'absolute', left: (C.x - 300) + 'px', top: (C.y - 300) + 'px', width: '600px', height: '600px' },
+      `<svg viewBox="0 0 24 24" width="600" height="600" style="overflow:visible">
+        <defs><mask id="p1cGM" maskUnits="userSpaceOnUse" x="-4" y="-4" width="32" height="32"><path d="${GPATH}" fill="none" stroke="#fff" stroke-width="1.6" pathLength="1" stroke-dasharray="0 1"/></mask>
+        <filter id="p1cGlow" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation=".7"/></filter></defs>
+        <g class="guia" mask="url(#p1cGM)"><path d="${GPATH}" fill="none" stroke="rgba(19,19,19,.30)" stroke-width=".3" stroke-dasharray=".02 .7" stroke-linecap="round"/></g>
+        <path class="cz" d="${GPATH}" fill="none" stroke="#C9C6BE" stroke-width="4.4" pathLength="1" stroke-dasharray="0 1"/>
+        <g class="glow" filter="url(#p1cGlow)" fill="none" stroke-width="5.2">${GSEG.map((d, i) => `<path d="${d}" stroke="${GCOR[i]}" pathLength="1" stroke-dasharray="0 1"/>`).join('')}</g>
+        <g class="tr" fill="none" stroke-width="4.4">${GSEG.map((d, i) => `<path d="${d}" stroke="${GCOR[i]}" pathLength="1" stroke-dasharray="0 1"/>`).join('')}</g>
+        <image class="logo" href="${LOGO('google-g.svg')}" x="0" y="0" width="24" height="24" opacity="0"/>
+        <circle class="halo" r="2.2" fill="#4285F4" opacity="0" filter="url(#p1cGlow)"/><circle class="dot" r="1.05" fill="${TINTA}"/>
+        <path class="cam" d="${GPATH}" fill="none" stroke="none"/></svg>`);
+    const q = s => c.g.querySelector(s);
+    c.guiaM = q('mask path'); c.guia = q('.guia'); c.cz = q('.cz'); c.glow = q('.glow'); c.glowP = [...c.glow.querySelectorAll('path')]; c.tr = [...q('.tr').querySelectorAll('path')];
+    c.logo = q('.logo'); c.dot = q('.dot'); c.halo = q('.halo'); c.cam = q('.cam');
+    const ls = GSEG.map(d => { const p = document.createElementNS('http://www.w3.org/2000/svg', 'path'); p.setAttribute('d', d); q('svg').appendChild(p); const L = p.getTotalLength(); p.remove(); return L; });
+    c.LT = ls.reduce((a, b) => a + b, 0); c.C0 = ls.map((_, i) => ls.slice(0, i).reduce((a, b) => a + b, 0)); c.LS = ls;
+    // demo vivo: um som de caneta por traço de cor (v = duração do traço)
+    const kDe = s => { let lo = 0, hi = 1; for (let i = 0; i < 40; i++) { const m = (lo + hi) / 2; if (uG(m) < s) lo = m; else hi = m; } return (lo + hi) / 2; };
+    c.TSEG = c.C0.map(c0 => TV0 + kDe(c0 / c.LT) * DG);
+    c.TSEG.forEach((ts, i) => { const te = i < 3 ? c.TSEG[i + 1] : TV0 + DG; ev(ts, 'desenha', GPAN[i], +(te - ts).toFixed(3)); });
+    c.gl = $('img', null, c.w, { position: 'absolute', left: (GC.x + 34) + 'px', top: (GC.y + 34) + 'px', width: '64px', height: '64px' }); c.gl.src = LOGO('google-g.svg');
+  }, (t, c) => {
+    // forma: palco 16:9 → círculo → card do G
+    const kab = ILL(seg(t, TA, TA + 0.55)), kc = ILL(seg(t, TCIRC, TCIRC + 0.5)), kg = ILL(seg(t, TPART - 0.05, TPART + 0.55));
+    const R = lr(lr(A, D, kc), GC, kg); Object.assign(c.sh.style, { left: R.x.toFixed(1) + 'px', top: R.y.toFixed(1) + 'px', width: R.w.toFixed(1) + 'px', height: R.h.toFixed(1) + 'px', borderRadius: R.r.toFixed(1) + 'px' });
+    const respira = kc > 0.99 && kg < 0.01 ? 1 + 0.08 * Math.sin((t - TCIRC) * 3.2) : 1;
+    const conv = Math.max(0, Math.sin(Math.PI * seg(t, TCONV, TCONV + 0.32))) + Math.max(0, Math.sin(Math.PI * seg(t, TCONV + 0.48, TCONV + 0.8)));
+    tf(c.sh, { op: clamp(seg(t, TA, TA + 0.25) * 3), s: lerp(0.93, 1, kab) * respira * (1 + 0.025 * conv), y: (1 - kab) * 30, blur: Math.pow(1 - kab, 2) * 20 });
+    c.sh.style.clipPath = kab < 1 ? `inset(${((1 - kab) * 50).toFixed(2)}% ${((1 - kab) * 6).toFixed(2)}% round 34px)` : 'none';
+    const cor = kg > 0 ? [lerp(19, 255, kg), lerp(19, 254, kg), lerp(19, 251, kg)] : [lerp(17, 19, kc), lerp(17, 19, kc), lerp(17, 19, kc)];
+    c.sh.style.background = `rgb(${cor.map(v => v | 0).join(',')})`;
+    c.f.toca(TA + (t - TA) * 0.5, TA, true); tf(c.vid, { s: 1 + 0.035 * conv, op: 1 - seg(t, TCIRC, TCIRC + 0.2) });
+    // notificação: entra (entrada) → sai (saída) → volta (meio-tempo) → conversa com o vídeo → some no círculo
+    const ent = t0 => ILL(seg(t, t0, t0 + 0.45)), sa = ILLIN(seg(t, TS + 0.08, TS + 0.42));
+    const v = t < TMEIO ? ent(TE) * (1 - sa) : ent(TMEIO), dsc = t < TMEIO ? (t < TS + 0.08 ? 1 - ent(TE) : sa) : 1 - ent(TMEIO);
+    tf(c.nt, { y: lerp(34, -200, dsc), op: clamp(v * 1.6) * (1 - seg(t, TCIRC, TCIRC + 0.15)), blur: dsc * 14, s: 1 + 0.04 * conv + 0.006 * Math.sin(t * 2.4) });
+    // G
+    const vg = kg > 0.6; c.g.style.visibility = vg ? 'visible' : 'hidden'; c.gl.style.visibility = vg ? 'visible' : 'hidden';
+    if (vg) {
+      const kGuia = uG(seg(t, TG0, TG1)), kM = uG(seg(t, TM0, TM0 + DG)), kV = uG(seg(t, TV0, TV0 + DG));
+      const volta1 = IO(seg(t, DM.t0 - 0.55, DM.t0 - 0.05)), volta2 = IO(seg(t, DM.t1 + 0.05, DM.t1 + 0.6));
+      let p, cinza = 0, colorido = 0, centro = 0;
+      if (t < TG0) { centro = 1 - ILL(seg(t, TPART + 0.1, TG0 - 0.08)); p = 0; }
+      else if (t < DM.t0 - 0.55) p = kGuia;
+      else if (t < TM0) p = 1 - volta1;
+      else if (t < DM.t1 + 0.05) { p = kM; cinza = kM; }
+      else if (t < TV0) { p = cinza = 1 - volta2; }
+      else { p = colorido = kV; }
+      if (t >= DM.t1 + 0.6 && t < TV0) { p = 0; cinza = 0; }
+      const pt = c.cam.getPointAtLength(clamp(p) * c.LT), px = lerp(pt.x, 12, centro), py = lerp(pt.y, 12, centro);
+      c.dot.setAttribute('cx', px.toFixed(3)); c.dot.setAttribute('cy', py.toFixed(3));
+      const naVivo = t >= TV0 && t < TV0 + DG, si = Math.max(0, c.C0.filter(x => x <= kV * c.LT).length - 1);
+      const bate = naVivo ? Math.exp(-Math.pow((t - (c.TSEG[si] ?? TV0)) / 0.08, 2)) : 0;
+      c.dot.setAttribute('fill', naVivo ? GCOR[si] : TINTA); c.dot.setAttribute('r', (1.05 * (naVivo ? 1.15 + 0.35 * bate : 1) * (1 + 0.06 * Math.sin(t * 3))).toFixed(3));
+      c.halo.setAttribute('cx', px.toFixed(3)); c.halo.setAttribute('cy', py.toFixed(3)); c.halo.setAttribute('fill', naVivo ? GCOR[si] : '#4285F4'); c.halo.setAttribute('opacity', (naVivo ? 0.55 + 0.3 * bate : 0).toFixed(3));
+      c.dot.setAttribute('opacity', (1 - seg(t, TV0 + DG - 0.05, TV0 + DG + 0.3)).toFixed(3));
+      c.guiaM.setAttribute('stroke-dasharray', `${kGuia.toFixed(4)} 1`); c.guia.style.opacity = (1 - seg(t, TV0 + DG, TV0 + DG + 0.3)).toFixed(3);
+      c.cz.setAttribute('stroke-dasharray', `${clamp(cinza).toFixed(4)} 1`);
+      const s = colorido * c.LT;
+      c.tr.forEach((pth, i) => { const f = clamp((s - c.C0[i]) / c.LS[i]); pth.setAttribute('stroke-dasharray', `${f.toFixed(4)} 1`); c.glowP[i].setAttribute('stroke-dasharray', `${f.toFixed(4)} 1`); });
+      c.glow.setAttribute('opacity', (t >= TV0 ? 0.55 * (1 - 0.6 * seg(t, TV0 + DG, TV0 + DG + 0.8)) : 0).toFixed(3));
+      c.logo.setAttribute('opacity', ILL(seg(t, TV0 + DG - 0.05, TV0 + DG + 0.4)).toFixed(3));
+      const kl = nasce(t, TGOO), saiL = seg(t, TGOO + 1.6, TGOO + 2.0); tf(c.gl, { op: kl.op * (1 - saiL), s: kl.s, y: kl.y, blur: kl.blur + 10 * saiL });
+    }
+    // demos (sem fala): o card cresce no centro; no fim encolhe e some em "Pegou a visão?"
+    const kD = Math.max(ILL(seg(t, DM.t0 - 0.3, DM.t0 + 0.1)) * (1 - ILL(seg(t, DM.t1, DM.t1 + 0.45))), ILL(seg(t, DV.t0 - 0.3, DV.t0 + 0.1)));
+    const fora = ILLIN(seg(t, TFIM, TFIM + 0.4)), fim = ILL(seg(t, TV0 + DG, TV0 + DG + 0.6));
+    tf(c.w, { y: 60 * kD + 4 * Math.sin(t * 0.8), s: (1 + 0.16 * kD + 0.03 * fim) * (1 - 0.15 * fora), op: 1 - fora, blur: 18 * fora });
+    c.sh.style.boxShadow = `0 ${(60 + 40 * kD).toFixed(0)}px ${(120 + 60 * kD).toFixed(0)}px -30px rgba(30,30,60,${(0.30 + 0.1 * kD).toFixed(2)}), 0 14px 34px rgba(30,30,60,.10), 0 0 0 1px rgba(0,0,0,.05)`;
+  }, { entra: false, sai: false });
+
+  // ═══ 22 · "visão" = óculos pixelados descendo ("deal with it") · cada coisa com o seu som · fecho ═══
+  legenda('22', [['Pegou a', 'f|visão?'], 'Não é difícil.', 'Só tem que entender que', 'cada coisa tem que ter', 'um af|som af|específico', 'de assimilação,', ['por mais', 'f|sutil', 'que ele seja,'], 'para não atrapalhar', 'o andamento do seu a|vídeo.'], { ate: TFIMP - 0.05 });
+  const TVI = PF('22', 'visao'), TOC = TVI + 0.12;
+  ev(TVI - 0.1, 'pop', 0, 0.25); ev(TOC + 0.4, 'pouso', 0, 0.3);
+  const PIX = (() => { const L = ['1111111111111111111111', '1111111111111111111111', '0111222211000112222110', '0011222211000112222110', '0001111110000011111100']; let s = '';
+    L.forEach((r, y) => [...r].forEach((ch, x) => { if (ch !== '0') s += `<rect x="${x}" y="${y}" width="1.02" height="1.02" fill="${ch === '1' ? '#0B0B0C' : '#fff'}"/>`; })); return `<svg viewBox="0 0 22 5" width="330" height="75" shape-rendering="crispEdges">${s}</svg>`; })();
+  palco(TVI - 0.2, PF('22', 'cada') - 0.25, (el, P) => {
+    el = grande(el, 1.8); sombra(el, 540, CY + 230, 300); P.e = $('div', null, el); pos(P.e, 540, CY, 420, 420); P.l = emojiLot(P.e, umDe('u1f60c', 'u1f610'), 420);
+    P.oc = $('div', null, el, { position: 'absolute', left: (540 - 165) + 'px', top: (CY - 72) + 'px', width: '330px', height: '75px' }, PIX);
+  }, (t, P) => {
+    const n = nasce(t, TVI - 0.1, 0.45), v = vivo(t, 6, 5);
+    const uo = seg(t, TOC, TOC + 0.55), ko = uo < 1 ? uo * uo : 1, bump = Math.sin(Math.PI * seg(t, TOC + 0.55, TOC + 0.75));
+    tf(P.e, { op: n.op, s: n.s * (1 - 0.03 * bump), x: v.x, y: n.y + v.y + 6 * bump, blur: n.blur }); P.l.toca(t, TVI - 0.1);
+    tf(P.oc, { x: v.x, y: v.y + lerp(-760, 0, ko) + 6 * bump, op: seg(t, TOC - 0.05, TOC + 0.05), r: 0 });
+  });
+  // cada coisa com o seu som: 3 peças, cada uma com uma onda diferente; em "sutil" as ondas baixam; em "andamento" a barra do vídeo corre lisa
+  const TCC = PF('22', 'cada'), TESP = PF('22', 'especifico'), TSUT = PF('22', 'sutil'), TAND = PF('22', 'andamento');
+  const PECAS = [{ id: 'u1f514', cor: AZ }, { id: 'u2728', cor: OR }, { id: 'u1f3af', cor: AZ }];
+  PECAS.forEach((_, i) => ev(TCC + i * 0.3, 'pop', (i - 1) * 0.5, 0.22));
+  palco(TCC - 0.15, TFIMP - 0.05, (el, P) => {
+    el = grande(el, 1.18);
+    P.p = PECAS.map((pc, i) => { const d = $('div', 'sq', el, { width: '220px', height: '220px', borderRadius: '64px', top: '0' }); pos(d, 230 + i * 310, CY - 110, 220, 220);
+      const l = emojiLot(d, temEmoji(pc.id) ? pc.id : 'u2728', 170); l.style.left = '25px'; l.style.top = '25px';
+      const w = linhaBarras(el, 230 + i * 310 - 100, 200, 15, 110, pc.cor, i * 1.9 + 0.7); w.style.top = (CY + 90) + 'px';
+      return { d, l, w }; });
+    P.bar = $('div', null, el, { position: 'absolute', left: '140px', width: '800px', top: (CY + 270) + 'px', height: '12px', borderRadius: '6px', background: 'rgba(19,19,19,.10)' },
+      `<b style="position:absolute;left:0;top:0;bottom:0;border-radius:6px;background:${TINTA}"></b><i style="position:absolute;top:-10px;width:32px;height:32px;border-radius:50%;background:${TINTA};box-shadow:0 6px 14px rgba(0,0,0,.25)"></i>`);
+    P.bf = P.bar.querySelector('b'); P.bk = P.bar.querySelector('i');
+  }, (t, P) => {
+    const ks = ILL(seg(t, TSUT - 0.05, TSUT + 0.5)), ke = Math.sin(Math.PI * seg(t, TESP, TESP + 0.5));
+    P.p.forEach((o, i) => { const t0 = TCC + i * 0.3, n = nasce(t, t0, 0.45), v = vivo(t, 7 + i, 4);
+      tf(o.d, { op: n.op, s: n.s * (1 + 0.06 * ke), x: v.x, y: n.y + v.y, blur: n.blur }); o.l.toca(t, t0);
+      const kw = ILL(seg(t, t0 + 0.15, t0 + 0.5)); o.w.style.transform = `translateX(${v.x.toFixed(1)}px) scaleY(${(kw * lerp(1, 0.3, ks) * (1 + 0.1 * Math.sin(t * 7 + i))).toFixed(3)})`; o.w.style.opacity = clamp(kw * 2).toFixed(3); });
+    const kb = nasce(t, TAND - 0.2, 0.4), u = seg(t, TAND - 0.1, TFIMP);
+    tf(P.bar, { op: kb.op, y: kb.y, blur: kb.blur }); P.bf.style.width = (100 * u).toFixed(2) + '%'; P.bk.style.left = (800 * u - 16).toFixed(1) + 'px';
+  });
+  // fecho: "Passo 3 de 4 ✓" e "Parte 2 →"
+  const TF0 = TFIMP + 0.05, TCK = TF0 + 0.45, TP2 = TF0 + 0.9;
+  ev(TCK, 'check', 0, 0.3); ev(TP2 + 0.2, 'seta', 0.4, 0.22);
+  palco(TF0, TEMPO.dur + 1, (el, P) => {
+    P.a = $('div', null, el, { position: 'absolute', left: '0', right: '0', top: (CY - 150) + 'px', display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '30px', font: '600 120px/1 GS', letterSpacing: '-0.045em', color: TINTA },
+      `<span>3 de 4</span><span class="ck" style="display:block;width:132px;height:132px;border-radius:50%;background:${AZ};position:relative"><svg viewBox="0 0 24 24" width="132" height="132" style="display:block;position:absolute;left:0;top:0"><path d="M6.5 12.4l3.6 3.6 7.4-7.6" fill="none" stroke="#fff" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" pathLength="1" stroke-dasharray="0 1"/></svg></span>`);
+    P.ck = P.a.querySelector('.ck'); P.ckp = P.ck.querySelector('path'); P.tx = P.a.firstChild;
+    P.b = $('div', null, el, { position: 'absolute', left: '0', right: '0', top: (CY + 60) + 'px', display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '26px', font: '600 96px/1 GS', letterSpacing: '-0.04em', color: AZ },
+      `<span>Parte 2</span><svg viewBox="0 0 60 36" width="140" height="84" style="display:block"><path d="M4 18h46M36 6l14 12-14 12" fill="none" stroke="${AZ}" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/></svg>`);
+    P.seta = P.b.lastChild;
+  }, (t, P) => {
+    const ta = palavraVida(t, TF0, true), nc = nasce(t, TCK, 0.4), tb = palavraVida(t, TP2, true);
+    tf(P.tx, ta); tf(P.ck, { op: nc.op, s: nc.s, blur: nc.blur }); P.ckp.setAttribute('stroke-dasharray', `${ILL(seg(t, TCK + 0.08, TCK + 0.4)).toFixed(3)} 1`);
+    tf(P.b, { op: tb.op, y: tb.y, s: tb.s, blur: tb.blur }); tf(P.seta, { x: 10 * Math.max(0, Math.sin((t - TP2) * 3.4)) });
+  }, { sai: false });
+})();