/* ============================================================================
   Demos em código das páginas de venda das skills: landing sendo montada bloco
   a bloco e editor de vídeo (corte de silêncios, legendas, 9:16, exportação).
   Tudo HTML/CSS/JS, sem imagem. O HTML já nasce no estado final (sem JS ou com
   movimento reduzido); o JS arma a demo e reconstrói a coreografia.
   ========================================================================== */
.demo--two { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); }
.demo--two .term { --term-h: 470px; }
.demo--two > .browser, .demo--two > .editor { align-self: start; }

/* ------------------------------------------------ navegador (landing) ---- */
.browser { border: 1px solid var(--line-strong); border-radius: 18px; background: linear-gradient(180deg, rgba(15, 18, 16, .97), rgba(8, 9, 9, .97)); overflow: hidden; box-shadow: 0 24px 60px -28px rgba(0, 0, 0, .8); }
.browser__bar { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 11px; color: var(--dim); }
.browser__url { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; background: rgba(8, 9, 9, .6); color: #a2aa9b; }
.browser__cnt { color: var(--accent); letter-spacing: .06em; white-space: nowrap; }
.browser__body { display: grid; gap: 5px; align-content: start; padding: 14px; }
.band { display: grid; grid-template-columns: 26px 128px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 31px; padding: 5px 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(14, 16, 15, .7); transition: opacity .4s ease, transform .4s var(--ease), border-color .6s, background .6s; }
.band__n { color: var(--dim); font-family: var(--mono); font-size: 10px; }
.band__l { color: var(--soft); font-family: var(--mono); font-size: 11px; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.band__k { display: grid; gap: 4px; }
.band__k i { display: block; height: 3px; border-radius: 2px; background: rgba(223, 234, 213, .14); }
.band__k i:first-child { width: 72%; background: rgba(var(--accent-rgb), .3); }
.band__k i:last-child { width: 44%; }
.band.is-new { border-color: rgba(var(--accent-rgb), .6); background: rgba(var(--accent-rgb), .07); }
.is-armed .band:not(.is-on) { opacity: 0; transform: translateY(8px); }
.browser__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line); }
.browser__foot .chip { transition: opacity .4s; }
.is-armed .browser__foot .chip:not(.is-on) { opacity: 0; }

/* ------------------------------------------------------ editor (vídeo) ---- */
.editor { border: 1px solid var(--line-strong); border-radius: 18px; background: linear-gradient(180deg, rgba(15, 18, 16, .97), rgba(8, 9, 9, .97)); overflow: hidden; box-shadow: 0 24px 60px -28px rgba(0, 0, 0, .8); }
.editor__bar { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 11px; color: var(--dim); }
.editor__bar > span:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.editor__bar .stat { margin-left: auto; color: var(--accent); letter-spacing: .06em; white-space: nowrap; transition: opacity .4s; }
.is-armed .editor:not(.is-trim) .stat { opacity: 0; }
.editor__main { padding: 14px; display: grid; gap: 14px; }
.vp { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: radial-gradient(ellipse 60% 70% at 50% 40%, rgba(var(--accent-rgb), .09), transparent 72%), #0b0e0c; }
.vp__head { position: absolute; left: 50%; top: 20%; width: 14%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: #1d231b; border: 1px solid rgba(var(--accent-rgb), .25); box-shadow: inset 0 0 18px rgba(var(--accent-rgb), .12); }
.vp__body { position: absolute; left: 50%; bottom: -6%; width: 34%; height: 46%; transform: translateX(-50%); border-radius: 46% 46% 0 0; background: #181e17; border: 1px solid rgba(var(--accent-rgb), .18); }
.vp__tag { position: absolute; top: 8px; left: 10px; color: var(--dim); font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; }
.vp__cap { position: absolute; left: 50%; bottom: 8%; max-width: 90%; transform: translateX(-50%); padding: 4px 11px; border-radius: 6px; background: rgba(8, 9, 9, .82); color: var(--white); font-size: clamp(11px, 1.15vw, 15px); font-weight: 600; letter-spacing: -.01em; line-height: 1.25; text-align: center; white-space: nowrap; opacity: 0; transition: opacity .3s; }
.vp.has-cap .vp__cap { opacity: 1; }
.vp.is-crop .vp__cap { width: 28%; white-space: normal; padding: 4px 6px; font-size: clamp(10px, 1vw, 13px); }
.vp__crop { position: absolute; top: 0; bottom: 0; left: 34.18%; width: 31.64%; border: 1.5px solid var(--accent); box-shadow: 0 0 0 100vmax rgba(8, 9, 9, .66); opacity: 0; transition: opacity .4s, left .9s var(--ease); pointer-events: none; }
.vp__crop b { position: absolute; top: 8px; left: 8px; padding: 2px 6px; border-radius: 5px; background: var(--accent); color: var(--accent-ink); font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .06em; }
.vp.is-crop .vp__crop { opacity: 1; }
.vp.is-crop-start .vp__crop { left: 10%; }

/* linha do tempo: 13 trechos (7 de fala e 6 silêncios), larguras em unidades */
.tl2 { --tot: 74; display: grid; gap: 8px; transition: none; }
.editor.is-trim .tl2 { --tot: 53; }
.tl2__row { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 10px; }
.tl2__lab { color: var(--dim); font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; }
.tl2__trk, .tl2__caps { position: relative; display: flex; align-items: center; height: 46px; padding: 0 6px; border: 1px solid var(--line); border-radius: 10px; background: rgba(8, 9, 9, .55); overflow: hidden; }
.tl2__caps { height: 30px; }
.sg, .cap { flex: 0 0 auto; width: calc(var(--n, 1) / var(--tot, 74) * 100%); overflow: hidden; transition: width .8s var(--ease), opacity .5s; }
.sg { display: flex; align-items: center; gap: 1px; height: 100%; }
.sg:not(.sg--s) { background: rgba(var(--accent-rgb), .14); }
.sg i { flex: 1 1 0; min-width: 1px; height: var(--h, 40%); border-radius: 1px; background: rgba(var(--accent-rgb), .65); }
.sg--s i { height: 5%; background: rgba(223, 234, 213, .24); }
.editor.is-flag .sg--s { background: repeating-linear-gradient(135deg, rgba(var(--accent-rgb), .24) 0 3px, transparent 3px 7px); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .6); }
.editor.is-trim .sg--s, .editor.is-trim .cap--s { width: 0; opacity: 0; }
.cap { display: flex; align-items: center; height: 100%; }
.cap span { display: block; width: calc(100% - 3px); margin-inline: 1.5px; padding: 3px 4px; border-radius: 5px; background: rgba(var(--accent-rgb), .14); border: 1px solid rgba(var(--accent-rgb), .35); color: #d6e6bd; font-size: 9.5px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .3s; }
.is-armed .cap:not(.is-on) span { opacity: 0; }
.tl2__head { position: absolute; top: 0; bottom: 0; left: 6px; width: 2px; background: var(--accent); box-shadow: 0 0 10px rgba(var(--accent-rgb), .6); opacity: 0; z-index: 2; }
.editor.is-scan .tl2__head { opacity: 1; animation: ed-scan 2.2s linear forwards; }
@keyframes ed-scan { from { left: 6px; } to { left: calc(100% - 8px); } }

/* larguras por trecho (mesmas para a trilha e para as legendas) */
.tl2__trk > :nth-child(1), .tl2__caps > :nth-child(1) { --n: 9; }
.tl2__trk > :nth-child(2), .tl2__caps > :nth-child(2) { --n: 3; }
.tl2__trk > :nth-child(3), .tl2__caps > :nth-child(3) { --n: 6; }
.tl2__trk > :nth-child(4), .tl2__caps > :nth-child(4) { --n: 4; }
.tl2__trk > :nth-child(5), .tl2__caps > :nth-child(5) { --n: 8; }
.tl2__trk > :nth-child(6), .tl2__caps > :nth-child(6) { --n: 2; }
.tl2__trk > :nth-child(7), .tl2__caps > :nth-child(7) { --n: 5; }
.tl2__trk > :nth-child(8), .tl2__caps > :nth-child(8) { --n: 5; }
.tl2__trk > :nth-child(9), .tl2__caps > :nth-child(9) { --n: 10; }
.tl2__trk > :nth-child(10), .tl2__caps > :nth-child(10) { --n: 3; }
.tl2__trk > :nth-child(11), .tl2__caps > :nth-child(11) { --n: 7; }
.tl2__trk > :nth-child(12), .tl2__caps > :nth-child(12) { --n: 4; }
.tl2__trk > :nth-child(13), .tl2__caps > :nth-child(13) { --n: 8; }

/* exportação */
.exp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.exp__i { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--soft); font-family: var(--mono); font-size: 11px; letter-spacing: .04em; overflow: hidden; transition: border-color .4s, background .4s; }
.exp__i small { color: var(--dim); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; }
.exp__i small::before { content: "aguardando"; }
.exp__i em { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--accent); }
.exp__i.is-run em { width: 100%; transition: width .9s linear; }
.exp__i.is-run small::before { content: "exportando"; }
.exp__i.is-done { border-color: rgba(var(--accent-rgb), .55); background: rgba(var(--accent-rgb), .07); color: var(--white); }
.exp__i.is-done em { width: 100%; }
.exp__i.is-done small { color: var(--accent); }
.exp__i.is-done small::before { content: "pronto"; }

@media (max-width: 1040px) { .demo--two { grid-template-columns: 1fr; } .demo--two .term { --term-h: 440px; } }
@media (max-width: 900px) { .band { grid-template-columns: 22px 100px minmax(0, 1fr); gap: 8px; } }
@media (max-width: 600px) {
  .demo--two .term { --term-h: 420px; }
  .editor__main { padding: 10px; gap: 10px; }
  .exp { grid-template-columns: 1fr; }
  .exp__i { min-height: 34px; }
  .cap span { font-size: 8px; padding: 2px 2px; }
  .browser__body { padding: 10px; gap: 4px; }
  .band { min-height: 28px; padding: 4px 9px; grid-template-columns: 20px 84px minmax(0, 1fr); }
  .band__l { font-size: 10px; }
  .tl2__row { grid-template-columns: 26px minmax(0, 1fr); gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .sg, .cap, .vp__crop, .band, .exp__i.is-run em { transition: none; }
  .editor.is-scan .tl2__head { animation: none; }
}
.motion-paused .sg, .motion-paused .cap, .motion-paused .vp__crop, .motion-paused .band, .motion-paused .exp__i.is-run em { transition: none; }
.motion-paused .editor.is-scan .tl2__head { animation: none; }

/* pastas espelhadas (argumento multi-IA) */
.s-chips--paths { margin: 14px 0 0; }
.s-chips--paths .chip { font-family: var(--mono); font-size: 11.5px; }

/* H1 das páginas das skills: promessa mais longa que a do OráculoOS */
@media (min-width: 901px) { .s-h1--sk { font-size: clamp(40px, 4.6vw, 68px); } }