/* Reveal e etiquetas de secao */
.js .reveal{opacity:0;transform:translateY(20px);transition:opacity var(--reveal) var(--ease),transform var(--reveal) var(--ease)}
.js .reveal.is-in{opacity:1;transform:none}
.js .reveal[data-d="1"]{transition-delay:60ms}
.js .reveal[data-d="2"]{transition-delay:120ms}
.js .reveal[data-d="3"]{transition-delay:180ms}
.js .reveal[data-d="4"]{transition-delay:240ms}
.js .reveal[data-d="5"]{transition-delay:300ms}

.sec-head{max-width:720px}
.sec-head h2{margin-top:14px}
.sec-head .lead{margin-top:16px}

/* ---------- demonstracao / prova de execucao ---------- */
.demo__grid{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(28px,4vw,56px);
  margin-top:44px;
  align-items:start;
}
.stage-col{position:sticky;top:92px}

.player{
  position:relative;
  border:1px solid var(--line-strong);
  border-radius:var(--r-card);
  background:linear-gradient(170deg,rgba(24,34,53,.86),rgba(8,11,18,.96));
  box-shadow:var(--shadow-card);
  overflow:hidden;
}
.player__head{
  display:flex;align-items:center;gap:10px;
  padding:11px 14px;border-bottom:1px solid var(--line);
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:#8f9bb3;
}
.player__head .tag{
  margin-left:auto;color:var(--cyan);border:1px solid rgba(88,230,255,.3);
  border-radius:999px;padding:3px 8px;background:rgba(88,230,255,.07);
  letter-spacing:.1em;
}
.player__stage{
  position:relative;
  aspect-ratio:4/3;
  background:
    radial-gradient(70% 70% at 30% 20%, rgba(155,124,255,.18), transparent 65%),
    radial-gradient(60% 60% at 80% 80%, rgba(88,230,255,.14), transparent 70%),
    #0b0f18;
  overflow:hidden;
}
.beat{
  position:absolute;inset:0;
  opacity:0;visibility:hidden;
  transform:scale(.985);
  transition:opacity 480ms var(--ease),transform 480ms var(--ease),visibility 480ms;
  display:grid;place-items:center;
  padding:6%;
}
.beat.on{opacity:1;visibility:visible;transform:none}

/* beat 1: peca final */
.piece{
  position:relative;width:100%;max-width:360px;aspect-ratio:4/5;
  border-radius:14px;overflow:hidden;
  border:1px solid rgba(246,248,252,.14);
  background:#0d1220;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.9);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:18px;
}
.piece__art{position:absolute;inset:0;z-index:0}
.piece__art svg{width:100%;height:100%}
.piece__body{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:space-between;height:100%}
.piece__kicker{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(246,248,252,.72)}
.piece__title{font-size:clamp(1.15rem,2vw,1.55rem);line-height:1.02;letter-spacing:-.03em;font-weight:600;max-width:9ch;text-shadow:0 2px 18px rgba(0,0,0,.5)}
.piece__foot{display:flex;align-items:center;justify-content:space-between;font-family:var(--font-mono);font-size:.58rem;letter-spacing:.12em;color:rgba(246,248,252,.66)}

/* beat 2: grafo */
.graph{width:100%;height:100%}
.graph .g-edge{fill:none;stroke:rgba(88,230,255,.4);stroke-width:1.4;stroke-dasharray:4 5}
.graph .g-edge.on{stroke:rgba(198,243,107,.85);stroke-dasharray:none}
.graph .g-node{fill:rgba(24,34,53,.95);stroke:rgba(246,248,252,.2);stroke-width:1}
.graph .g-node.on{stroke:var(--lime);stroke-width:1.6;fill:rgba(32,45,66,1)}
.graph text{font-family:var(--font-mono);font-size:9px;fill:#b9c3d4;letter-spacing:.04em}
.graph text.on{fill:#eafcc0}

/* beat 3: antes e depois */
.split{position:relative;width:100%;aspect-ratio:4/3;border-radius:12px;overflow:hidden;border:1px solid rgba(246,248,252,.13)}
.split__side{position:absolute;inset:0;padding:16px;display:flex;flex-direction:column;justify-content:space-between}
.split__side--in{
  background:linear-gradient(160deg,#141b2b,#0c1119);
  clip-path:inset(0 52% 0 0);
}
.split__side--out{
  background:
    radial-gradient(60% 60% at 70% 30%, rgba(198,243,107,.22), transparent 70%),
    radial-gradient(60% 60% at 30% 80%, rgba(155,124,255,.28), transparent 70%),
    #131a29;
  clip-path:inset(0 0 0 48%);
}
.split__side span{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(246,248,252,.72)}
.split__txt{font-size:.82rem;color:#cfd7e4;line-height:1.45;max-width:22ch}

.pieces{display:flex;gap:14px;align-items:center;justify-content:center;width:100%;max-height:100%}
.pieces__col{display:grid;gap:10px}
.piece--main{width:clamp(170px,44%,290px)}
.piece--mini{
  width:clamp(58px,10vw,86px);aspect-ratio:4/5;border-radius:10px;
  border:1px solid rgba(246,248,252,.16);overflow:hidden;position:relative;
  display:flex;align-items:flex-end;padding:7px;
  box-shadow:0 12px 30px -18px rgba(0,0,0,.9);
}
.piece--mini span{position:relative;z-index:1;font-family:var(--font-mono);font-size:.56rem;letter-spacing:.08em;color:rgba(246,248,252,.82)}
.piece--mini::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(8,11,18,.7))}
.split__side span{font-size:.64rem;color:rgba(246,248,252,.75)}
  .split__cap{font-family:var(--font-mono);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(246,248,252,.5)}
.split__art{
  flex:1;margin:12px 0;border-radius:8px;position:relative;overflow:hidden;
  border:1px solid rgba(246,248,252,.18);
  background:
    radial-gradient(60% 60% at 62% 26%, rgba(198,243,107,.5), transparent 64%),
    radial-gradient(66% 66% at 26% 82%, rgba(155,124,255,.55), transparent 70%),
    linear-gradient(160deg,#17203a,#0d1220);
  box-shadow:0 12px 26px -16px rgba(0,0,0,.9);
}
.split__art svg{position:absolute;inset:0;width:100%;height:100%}
.split__art-tag{
  position:absolute;right:8px;bottom:8px;
  font-family:var(--font-mono);font-size:.55rem;letter-spacing:.1em;
  color:#0a0d14;background:var(--lime);border-radius:4px;padding:1px 5px;
}
.split__handle{position:absolute;top:0;bottom:0;left:50%;width:1px;background:rgba(246,248,252,.6);z-index:2}
.split__handle::after{
  content:"";position:absolute;top:50%;left:50%;width:26px;height:26px;margin:-13px 0 0 -13px;
  border-radius:50%;background:rgba(246,248,252,.95);
  box-shadow:0 4px 14px rgba(0,0,0,.5);
}

.player__controls{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;border-top:1px solid var(--line);
  background:rgba(8,11,18,.6);
}
.play-btn{
  width:38px;height:38px;flex:none;border-radius:50%;border:0;cursor:pointer;
  background:var(--lime);color:#0a0d14;display:grid;place-items:center;
  transition:transform var(--fast) var(--ease),background var(--fast) var(--ease);
}
.play-btn:hover{background:#d3fa86;transform:scale(1.04)}
.play-btn:active{transform:scale(.96)}
.play-btn svg{width:14px;height:14px}
.play-btn .i-pause{display:none}
.player.is-playing .play-btn .i-play{display:none}
.player.is-playing .play-btn .i-pause{display:block}

.play-time{font-family:var(--font-mono);font-size:.7rem;color:#8f9bb3;letter-spacing:.04em;flex:none}
.play-track{position:relative;flex:1;height:3px;border-radius:999px;background:rgba(246,248,252,.14);overflow:hidden}
.play-track i{position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(var(--tp,0));background:linear-gradient(90deg,var(--cyan),var(--lime));border-radius:999px}
.beat-dots{display:flex;gap:6px;flex:none}
.beat-dots button{
  width:22px;height:22px;border-radius:6px;border:1px solid var(--line-strong);
  background:transparent;cursor:pointer;font-family:var(--font-mono);font-size:.6rem;color:#8f9bb3;
  transition:color var(--fast) var(--ease),border-color var(--fast) var(--ease),background var(--fast) var(--ease);
}
.beat-dots button[aria-current="true"]{color:#0a0d14;background:var(--lime);border-color:var(--lime)}

.player__note{
  padding:10px 14px;border-top:1px solid var(--line);
  font-size:.74rem;color:#8f9bb3;line-height:1.45;
  background:rgba(8,11,18,.5);
}
.player__note b{color:#c3cbd9;font-weight:500}

.transcript{margin-top:14px;border:1px solid var(--line);border-radius:14px;background:rgba(17,23,37,.5)}
.transcript summary{
  cursor:pointer;padding:12px 16px;font-size:.84rem;color:#c3cbd9;list-style:none;
  display:flex;align-items:center;gap:10px;
}
.transcript summary::-webkit-details-marker{display:none}
.transcript summary::after{content:"+";margin-left:auto;font-family:var(--font-mono);color:var(--cyan)}
.transcript[open] summary::after{content:"-"}
.transcript__body{padding:0 16px 16px;display:grid;gap:10px}
.transcript__body p{font-size:.84rem;color:var(--muted);line-height:1.55}
.transcript__body b{color:#dbe3f0;font-weight:500}

/* passos a direita */
.steps{display:grid;gap:14px;padding:0;margin:0;list-style:none}
.step{
  border:1px solid var(--line);
  border-radius:16px;
  padding:20px;
  background:linear-gradient(160deg,rgba(24,34,53,.5),rgba(17,23,37,.3));
  transition:border-color var(--std) var(--ease),background var(--std) var(--ease),transform var(--std) var(--ease);
  cursor:pointer;
  text-align:left;
  width:100%;
  font:inherit;
  color:inherit;
}
.step:hover{border-color:var(--line-strong)}
.step[aria-current="true"]{border-color:rgba(198,243,107,.45);background:linear-gradient(160deg,rgba(30,43,64,.72),rgba(17,23,37,.5))}
.step__time{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em;color:var(--cyan)}
.step[aria-current="true"] .step__time{color:var(--lime)}
.step h3{margin-top:8px;font-size:1.02rem}
.step p{margin-top:8px;font-size:.88rem;color:var(--muted);line-height:1.5}