/* Eigen projecten als stamboom: Tjeerd, zijn bots, de platforms, creators en merken. */
.pb{position:relative;z-index:2;background:var(--bg);height:300vh}
.pb-sticky{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding-top:64px}
.pb-head{display:flex;justify-content:space-between;align-items:end;gap:24px}
.pb-head h2{margin:0;font-weight:500;font-size:clamp(34px,5vw,84px);letter-spacing:-.035em;line-height:.95}
.pb-head h2 em{font-style:normal;color:var(--sig)}
.pb-head p{margin:0;max-width:34ch;color:var(--mut);font-size:15px;line-height:1.45}
.pb svg{width:100%;height:100%;display:block;overflow:visible}
.pb-ln{fill:none;stroke:rgba(242,242,238,.22);stroke-width:1.2}
.pb-ln.hot{stroke:var(--sig);stroke-width:1.8}
.pb-n{cursor:pointer;transition:opacity .5s}
.pb-n text{fill:var(--fg);font:500 13px var(--mono);text-transform:uppercase;letter-spacing:.06em}
.pb-n .sub{fill:var(--mut);font-size:11px}
.pb-n .big{font:600 44px var(--type);letter-spacing:-.04em;text-transform:none}
.pb-n:focus{outline:none}.pb-n:focus-visible .ring{stroke:var(--sig);stroke-width:3}
.pb-n ellipse{transition:transform .3s cubic-bezier(.2,.8,.2,1);transform-box:fill-box;transform-origin:center}
.pb-n.blink ellipse{animation:pbBlink .42s ease-in-out 2}
@keyframes pbBlink{0%,100%{scale:1 1}45%,55%{scale:1.1 .12}}
@media (prefers-reduced-motion:reduce){.pb-n.blink ellipse{animation:none}}
.pb-halo{transform-box:fill-box;transform-origin:center;animation:pbHalo 2.4s ease-in-out infinite}
@keyframes pbHalo{50%{scale:1.15;opacity:.4}}
.pb-arc{fill:none;stroke:var(--sig);stroke-width:1.6;stroke-dasharray:4 5;opacity:.85}
.pb-bub rect{fill:var(--bg);stroke:var(--sig);stroke-width:1.2}
.pb-bub text{fill:var(--fg);font:400 13px var(--type);letter-spacing:0;text-transform:none}
.pb-bub .who{fill:var(--sig);font:500 10px var(--mono);letter-spacing:.06em;text-transform:uppercase}
.pb-bub{transition:opacity .35s,transform .35s;transform-box:fill-box}
.pb-card{position:absolute;left:max(16px,env(safe-area-inset-left));bottom:84px;width:min(340px,80vw);background:var(--fg);color:var(--bg);padding:14px 16px 16px;transform:translateY(12px);opacity:0;transition:.35s;pointer-events:none}
.pb-card.on{transform:none;opacity:1}
.pb-card b{display:block;font:600 24px var(--type);text-transform:none;letter-spacing:-.02em;margin:4px 0 6px}
.pb-card p{margin:0;font:15px/1.4 var(--type);text-transform:none;letter-spacing:0}
.pb-flow{display:flex;gap:6px;flex-wrap:wrap;padding:14px 0 18px;border-top:1px solid var(--line)}
.pb-flow>span{padding:7px 11px;border:1px solid var(--line);border-radius:999px;color:var(--mut);transition:.4s;white-space:nowrap}
.pb-flow>span.on{border-color:var(--sig);color:var(--fg);background:color-mix(in srgb,var(--sig) 18%,transparent)}
.pb-flow i{font-style:normal;color:var(--sig);margin-right:6px}
@media (max-width:820px){.pb-head{flex-direction:column;align-items:start;gap:8px}.pb-head p{font-size:13px}.pb-card{bottom:120px}.pb-flow span:nth-child(n){padding:5px 8px;font-size:10px}}