:root {
  --bg: #fbfaf7; --bg2: #f1efe9; --fg: #1c1d1f; --muted: #6a6f78; --border: #dcd9d0;
  --accent: #b7860b; --ok: #1f8a4c; --off: #9aa0a8;
  --term-bg: #0b0d10; --term-fg: #e8e6e1;
  --mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  --sans: -apple-system, system-ui, "Inter", Helvetica, Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0d10; --bg2: #111419; --fg: #e8e6e1; --muted: #8a9099; --border: #23272e;
    --accent: #f5c542; --ok: #6bd98a; --off: #5a606a; --term-bg: #07090b;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.6 var(--sans); }
a { color: var(--fg); text-decoration-color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent); }
code, pre { font-family: var(--mono); }
code { background: var(--bg2); border: 1px solid var(--border); border-radius: 4px; padding: 0 .35em; font-size: .88em; }
b { font-weight: 700; }

html[lang="pt"] .en, html[lang="en"] .pt { display: none !important; }

.top { position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center;
  padding: .8rem 1.25rem; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border); }
.brand { font: 700 1.05rem var(--mono); text-decoration: none; }
.brand b, h1 b { color: var(--accent); }
.top nav { display: flex; gap: 1.1rem; align-items: center; font: .9rem var(--mono); }
.top nav a { text-decoration: none; color: var(--muted); }
.top nav a:hover { color: var(--accent); }
#lang { font: .8rem var(--mono); background: none; color: var(--fg); border: 1px solid var(--border);
  border-radius: 6px; padding: .2rem .55rem; cursor: pointer; }
#lang:hover { border-color: var(--accent); }

main { max-width: 1040px; margin: 0 auto; padding: 0 1.25rem; }
section { padding: 4rem 0 1rem; }
h1 { font: 700 clamp(2.6rem, 8vw, 4rem)/1 var(--mono); margin: 0 0 1.25rem; letter-spacing: -.03em; }
h2 { font: 700 1.5rem var(--mono); margin: 0 0 1rem; }
h2::before { content: "# "; color: var(--accent); }
h3 { font: 700 1rem var(--mono); margin: 1.4rem 0 .3rem; }

.hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 2.5rem; align-items: center; min-height: 78vh; padding-top: 2rem; }
.hero-text p { margin: 0 0 1rem; max-width: 34rem; }
.hint { color: var(--muted); font: .88rem var(--mono); }
.hint b { color: var(--accent); }
.lead { max-width: 44rem; }

.term { background: var(--term-bg); color: var(--term-fg); border: 1px solid #23272e; border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35); overflow: hidden; }
.term-bar { display: flex; gap: 6px; padding: 10px 12px; background: #14171c; }
.term-bar i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.term-bar .r { background: #ff5f57; } .term-bar .y { background: #febc2e; } .term-bar .g { background: #28c840; }
.term pre { margin: 0; padding: 1rem 1.1rem 1.2rem; font-size: .82rem; line-height: 1.55; white-space: pre-wrap; min-height: 15rem; }
.term .c { color: #6c7480; }
.cur::after { content: "▌"; color: #f5c542; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.flow { display: grid; grid-template-columns: 1fr 5.5rem 1fr; align-items: center; gap: .5rem; margin-top: 1.75rem;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; padding: 1.1rem 1.25rem; }
.db h4 { margin: 0 0 .7rem; font: .75rem var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; min-height: 6.2rem; align-content: flex-start; }
.chip { font: .74rem var(--mono); padding: .2rem .55rem; border: 1px solid var(--border); border-radius: 6px;
  color: var(--off); transition: color .3s, border-color .3s, background .3s, transform .3s, opacity .3s; }
.chip.base { border-color: var(--accent); color: var(--accent); }
.chip.hit { color: var(--bg); background: var(--accent); border-color: var(--accent); transform: scale(1.08); }
.chip.hit.done { color: var(--accent); background: transparent; transform: none; }
.chips.local .chip { opacity: 0; transform: translateY(6px); border-style: dashed; }
.chips.local .chip.in { opacity: 1; transform: none; color: var(--ok); border: 1px solid var(--ok); }
.pipe { position: relative; height: 2px; background-image: linear-gradient(90deg, var(--border) 50%, transparent 0);
  background-size: 10px 2px; animation: dash 1s linear infinite; }
.pipe .lbl { position: absolute; top: -1.35rem; left: 50%; transform: translateX(-50%); font: .72rem var(--mono); color: var(--muted); }
.pipe .dot { position: absolute; top: -4px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); opacity: 0; }
.pipe.go .dot { animation: travel .7s ease-in forwards; }
@keyframes dash { to { background-position: 10px 0; } }
@keyframes travel { 0% { left: 0; opacity: 1; } 90% { opacity: 1; } 100% { left: calc(100% - 10px); opacity: 0; } }
.flow-count { margin-top: .6rem; min-height: 1.5em; }

.js .step { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.js .step.show { opacity: 1; transform: none; }

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.step { background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; padding: 1rem 1.1rem; }
.step > span { font: 700 .8rem var(--mono); color: var(--accent); }
.step h3 { margin-top: .2rem; }
.step p { margin: 0; color: var(--muted); font-size: .92rem; }

.demo { margin-top: 1.5rem; background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; padding: 1.1rem 1.25rem; }
.controls { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; font: .9rem var(--mono); }
.controls label { display: flex; align-items: center; gap: .6rem; }
.controls input[type=range] { accent-color: var(--accent); width: 9rem; }
output { min-width: 1ch; color: var(--accent); font-weight: 700; }
.graph { list-style: none; margin: 1.1rem 0 .6rem; padding: 0; font: .9rem var(--mono); }
.graph li { display: flex; gap: .7rem; align-items: baseline; padding: .28rem 0; transition: opacity .15s; }
.graph .tag { min-width: 5.2rem; font-size: .75rem; color: var(--muted); }
.graph .n { color: var(--muted); font-size: .8rem; margin-left: auto; }
.graph li.in { color: var(--ok); }
.graph li.in .name::before { content: "✓ "; }
.graph li.out { color: var(--off); text-decoration: line-through; }
.graph li.out .name::before { content: "– "; }
.graph li.base { color: var(--accent); }
.count { margin: 0; font: .85rem var(--mono); color: var(--muted); }
.count b { color: var(--fg); }

.cols { display: grid; grid-template-columns: 1fr 1.2fr; gap: 2rem; align-items: start; }
.cols h3:first-child { margin-top: 0; }
.term.static pre { min-height: 0; font-size: .78rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .8rem; margin-top: 2rem; }
.grid div { border: 1px solid var(--border); border-radius: 8px; padding: .75rem .9rem; display: flex; flex-direction: column; gap: .2rem; }
.grid b { font: 700 .85rem var(--mono); color: var(--accent); }
.grid span { color: var(--muted); font-size: .88rem; }
.more { color: var(--muted); font-size: .92rem; }

footer { max-width: 1040px; margin: 4rem auto 0; padding: 1.5rem 1.25rem 3rem; border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; color: var(--muted); font: .85rem var(--mono); }
footer a { color: var(--muted); }

@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .cols { grid-template-columns: 1fr; }
  .flow { grid-template-columns: 1fr; gap: 1.6rem; }
  .pipe { width: 2px; height: 3rem; justify-self: center; background-image: linear-gradient(180deg, var(--border) 50%, transparent 0);
    background-size: 2px 10px; animation-name: dash-v; }
  .pipe .lbl { top: 50%; left: 1rem; transform: translateY(-50%); }
  .pipe .dot { left: -4px; top: 0; }
  .pipe.go .dot { animation-name: travel-v; }
  .top nav a:not(:last-of-type) { display: none; }
  .top nav a[href^="https"] { display: inline; }
}
@keyframes dash-v { to { background-position: 0 10px; } }
@keyframes travel-v { 0% { top: 0; opacity: 1; } 90% { opacity: 1; } 100% { top: calc(100% - 10px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cur::after, .pipe { animation: none; }
  .js .step { opacity: 1; transform: none; transition: none; }
  .chip { transition: none; }
}

/* scrollytelling: palco sticky que troca de cena com o scroll */
.scrolly { padding: 3rem 0 0; }
.stage { display: grid; grid-template-columns: 1fr 1.1fr; gap: 2.5rem; align-items: center; }
.sc .scrolly { height: 430vh; padding-top: 0; }
.sc .stage { position: sticky; top: 3.6rem; height: calc(100vh - 3.6rem); height: calc(100svh - 3.6rem); }
.scene-text { margin-bottom: 1.5rem; }
.scene-text h3 { font-size: 1.5rem; margin: .3rem 0 .6rem; }
.scene-text p { color: var(--muted); max-width: 30rem; margin: 0; }
.kick { font: .75rem var(--mono); color: var(--accent); }
.scenes { position: relative; }
.sc .scenes { min-height: 12rem; }
.sc .scene-text { position: absolute; top: 0; left: 0; right: 0; margin: 0; opacity: 0; transform: translateY(18px);
  transition: opacity .45s ease, transform .45s ease; pointer-events: none; }
.sc .scene-text.on { opacity: 1; transform: none; pointer-events: auto; }
.dots { display: none; gap: .45rem; margin-top: 1.5rem; }
.sc .dots { display: flex; }
.dots button { width: 2.2rem; height: .4rem; border: 0; border-radius: 3px; padding: 0; cursor: pointer; background: var(--border);
  transition: background .3s, transform .3s; }
.dots button.done { background: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.dots button.on { background: var(--accent); transform: scaleY(1.6); }

.stage-vis { position: relative; background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; padding: .8rem; }
.stage-vis svg { width: 100%; height: auto; display: block; font-family: var(--mono); }
.node { transition: opacity .5s ease, transform .5s ease; transform-box: fill-box; transform-origin: center; }
.node rect { fill: var(--bg); stroke: var(--border); stroke-width: 1.2; transition: stroke .4s ease var(--dl, 0s), stroke-width .4s ease; }
.node text { fill: var(--off); font-size: 12px; text-anchor: middle; dominant-baseline: central; transition: fill .4s ease var(--dl, 0s); }
.link { fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset .6s ease var(--dl, 0s), stroke .4s ease, opacity .4s ease; }
.link.ign { stroke: var(--off); }
.badge { fill: var(--accent); font-size: 11px; text-anchor: middle; opacity: 0; transition: opacity .4s ease; }
.at1 .badge { opacity: 1; }
.at1 .node.base rect { stroke: var(--accent); stroke-width: 2.2; }
.at1 .node.base text { fill: var(--accent); }
.at2 .link { stroke-dashoffset: 0; }
.at2 .node.rel rect { stroke: var(--accent); }
.at2 .node.rel text { fill: var(--fg); }
.at2 .node.ign rect { stroke-dasharray: 4 3; }
.at2 .node.ign text { text-decoration: line-through; }
.at3 .node:not(.rel):not(.base) { opacity: .12; transform: scale(.92); }
.at3 .link.ign { opacity: .12; }
.at4 .node.rel rect, .at4 .node.base rect { stroke: var(--ok); }
.at4 .node.rel text, .at4 .node.base text { fill: var(--ok); }
.at4 .link:not(.ign) { stroke: var(--ok); }

.sqlcard { position: absolute; left: .8rem; right: .8rem; bottom: .8rem; background: var(--term-bg); color: var(--term-fg);
  border: 1px solid #23272e; border-radius: 8px; padding: .55rem .8rem; font: .7rem/1.5 var(--mono);
  opacity: 0; transform: translateY(12px); transition: opacity .45s ease, transform .45s ease; pointer-events: none; }
.sqlcard pre { margin: 0; white-space: pre-wrap; }
.sqlcard .c4 { display: none; }
.sqlcard .k { color: #6c7480; }
.sqlcard .ok { color: #6bd98a; }
.at3 .sqlcard { opacity: 1; transform: none; }
.at4 .sqlcard .c3 { display: none; }
.at4 .sqlcard .c4 { display: block; }
html:not(.sc) .js-only { display: none; }

/* demo de profundidade: transições ao mexer na bolinha */
.graph li { transition: color .35s ease var(--dl, 0s), opacity .35s ease var(--dl, 0s); padding-left: calc(var(--d, 0) * .9rem); border-radius: 6px; }
.graph li.enter { animation: enter .5s ease var(--dl, 0s) both; }
.graph li.leave { animation: leave .4s ease var(--dl, 0s) both; }
@keyframes enter { from { transform: translateX(-12px); background: color-mix(in srgb, var(--ok) 22%, transparent); } to { transform: none; background: transparent; } }
@keyframes leave { from { transform: translateX(0); } 50% { transform: translateX(8px); } to { transform: none; } }
.meter { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; margin: .5rem 0 .7rem; }
.meter i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--ok)); border-radius: 3px;
  transition: width .45s cubic-bezier(.2, .8, .2, 1); }
output.bump { animation: bump .3s ease; }
@keyframes bump { 40% { transform: scale(1.6); } }
.controls input[type=range] { -webkit-appearance: none; appearance: none; height: 6px; border-radius: 3px; cursor: pointer;
  background: linear-gradient(90deg, var(--accent) var(--p, 33%), var(--border) var(--p, 33%)); transition: background .2s; }
.controls input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--bg2); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 40%, transparent); transition: box-shadow .2s, transform .2s; }
.controls input[type=range]:active::-webkit-slider-thumb { transform: scale(1.2); box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 25%, transparent); }
.controls input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg2); }

@media (max-width: 760px) {
  .stage { grid-template-columns: 1fr; gap: 1rem; }
  .sc .stage { align-content: center; }
  .stage-vis { order: -1; }
  .sqlcard { position: static; margin-top: .6rem; display: none; }
  .at3 .sqlcard { display: block; }
  .sc .scenes { min-height: 11rem; }
  .scene-text h3 { font-size: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .node, .node rect, .node text, .link, .sqlcard, .sc .scene-text, .graph li, .meter i, .dots button { transition: none; }
  .graph li.enter, .graph li.leave, output.bump { animation: none; }
}

/* todas as seções de tela cheia: altura proporcional ao número de cenas */
.sc .scrolly { height: calc(100vh + (var(--n, 5) - 1) * 80vh); height: calc(100svh + (var(--n, 5) - 1) * 80vh); }
.stage-vis { max-height: 100%; overflow: auto; }
.stage-vis.plain { background: none; border: 0; padding: 0; overflow: visible; }

/* objetivo: fluxo vertical dentro do palco */
.stage-vis .flow { display: flex; flex-direction: column; align-items: stretch; gap: 1.6rem; margin: 0; padding: 0;
  background: none; border: 0; border-radius: 0; }
.stage-vis .flow .chips { min-height: 5.6rem; }
.stage-vis .flow .pipe { width: 2px; height: 2.6rem; align-self: center; background-image: linear-gradient(180deg, var(--border) 50%, transparent 0);
  background-size: 2px 10px; animation-name: dash-v; }
.stage-vis .flow .pipe .lbl { top: 50%; left: 1rem; transform: translateY(-50%); }
.stage-vis .flow .pipe .dot { left: -4px; top: 0; }
.stage-vis .flow .pipe.go .dot { animation-name: travel-v; }
.stage-vis .flow-count { margin: 1rem 0 0; }
.chips.local .chip.in { transition-delay: calc(var(--i, 0) * 110ms); }
.chip.hit { transition-delay: calc(var(--i, 0) * 110ms); }
.chip.hit.done { transition-delay: 0s; }

/* demo dentro do palco */
.stage-vis .demo { margin: 0; background: none; border: 0; padding: 0; }

/* usar: terminal com blocos que aparecem por cena */
.stage-vis .term.static { box-shadow: none; }
.sc .blk { opacity: 0; transition: opacity .5s ease; }
.sc .b0, .sc.sc-usar .b0 { opacity: 1; }
.at1 .b1, .at2 .b1, .at2 .b2 { opacity: 1; }
.at1 .b0, .at2 .b0 { opacity: .4; }
.at2 .b1 { opacity: .4; }
.extra { padding: 3rem 0 0; }
.sc .extra { padding-top: 1rem; }

@media (max-width: 760px) {
  .stage-vis { max-height: 52vh; }
  .stage-vis .flow { gap: 1rem; }
  .stage-vis .flow .chips { min-height: 0; }
  .stage-vis .flow .pipe { height: 1.8rem; }
}