/* Paint and procedural touches, layered on the existing design. Remove this file's link to get the plain site back. */

/* Painted shapes with node wires behind page headings */
.pn-has-bleed{position:relative}
.pn-has-bleed>*:not(.pn-bleed){position:relative;z-index:1}
.pn-bleed{position:absolute;right:-4%;top:-30px;width:min(560px,46%);aspect-ratio:4/3;z-index:0;pointer-events:none;opacity:.72;animation:pnBleedIn 1.1s ease-out both}
.pn-blob{position:absolute;height:auto;transform:translate(calc(var(--pn-x,0)*var(--depth)*1px),calc(var(--pn-y,0)*var(--depth)*1px));transition:transform .5s ease-out}
.pn-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pn-lines path{fill:none;stroke:#e1e5e8;stroke-opacity:.5;stroke-width:1;stroke-dasharray:1;animation:pnDraw 1.8s .2s ease-out both}
.pn-lines circle{fill:#e0ad3f;stroke:#171a1e}
.pn-lines circle:nth-of-type(even){fill:#d9dbde}
.pn-bleed-soft{right:auto;left:50%;top:50%;translate:-50% -50%;width:min(620px,80%);opacity:.3;animation:none}
.pn-bleed-soft .pn-lines{display:none}
@keyframes pnBleedIn{from{opacity:0}}
@keyframes pnDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.final-cta,.home-end-inner{position:relative}
@media(max-width:800px){.pn-bleed{width:70%;right:-14%;top:-10px;opacity:.5}.pn-bleed-soft{right:auto;opacity:.22}}

/* Hero */
.home-hero:after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;z-index:2;pointer-events:none;background:linear-gradient(transparent,var(--bg,#171a1e))}
.hero-graph{transform:translate(calc(var(--px,0)*-14px),calc(var(--py,0)*-10px));transition:transform .4s ease-out}
.hero-ball{transform:translate(calc(var(--px,0)*12px),calc(var(--py,0)*8px));transition:transform .4s ease-out}
.g-flow{stroke:#fff;stroke-width:.6;opacity:0;filter:none}

/* Scroll: rise in */
.pn-rise{opacity:0;transform:translateY(18px);transition:opacity .6s ease-out,transform .6s cubic-bezier(.2,.7,.2,1),border-color .25s,box-shadow .25s}
.pn-rise.pn-in{opacity:1;transform:none}

/* Scroll: chapter titles get a brush stroke */
.pn-stroke{position:relative;display:table;margin-left:auto!important;margin-right:auto!important;isolation:isolate}
.pn-stroke:before{content:"";position:absolute;z-index:-1;left:-3%;right:-3%;bottom:.02em;height:.46em;background:var(--ink,#3fc7a6);opacity:.42;border-radius:48% 52% 44% 56%/60% 40% 62% 38%;-webkit-mask:linear-gradient(90deg,#000 88%,#0006 96%,transparent);mask:linear-gradient(90deg,#000 88%,#0006 96%,transparent);transform:scaleX(1);transform-origin:left}
.pn-rise-text:before{transform:scaleX(0);transition:transform .9s cubic-bezier(.3,.7,.2,1) .15s}
.pn-rise-text.pn-in:before{transform:scaleX(1)}

/* Cards: node sockets and a pigment glow that follows the mouse */
.feature-entry,.tutorial-card,.price-card,.info-card,.showcase-card{position:relative;isolation:isolate}
.feature-entry:after,.tutorial-card:after,.price-card:after{content:"";position:absolute;top:44px;left:-4px;width:8px;height:8px;border-radius:50%;background:#e0ad3f;box-shadow:calc(var(--card-w,0px)) 0 0 #d9dbde;opacity:0;scale:.4;transition:opacity .2s,scale .25s cubic-bezier(.3,1.6,.5,1)}
.feature-entry:hover:after,.tutorial-card:hover:after,.price-card:hover:after{opacity:1;scale:1}

/* Buttons: a paint swipe on hover */
.button{position:relative;isolation:isolate;overflow:hidden}
.button:before{content:"";position:absolute;z-index:-1;inset:-12% -18%;background:#ffffff2e;border-radius:46% 54% 40% 60%/62% 44% 56% 38%;transform:translateX(-104%) skewX(-12deg);transition:transform .45s cubic-bezier(.3,.7,.2,1)}
.button:hover:before,.button:focus-visible:before{transform:translateX(0) skewX(-12deg)}
.button.outline:before{background:#53bcb52e}

/* Navigation and text links: a short brush mark on hover */
.nav-links>a:not(.nav-cta):not(.nav-community):not(.nav-donate):not([href*="paypal"]),.footer-links a{position:relative}
.nav-links>a:not(.nav-cta):not(.nav-community):not(.nav-donate):not([href*="paypal"]):after,.footer-links a:after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:3px;background:linear-gradient(90deg,#3fc7a6,#c58a4a);border-radius:60% 40% 50% 50%;opacity:.85;transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.3,.7,.2,1)}
.nav-links>a:not(.nav-cta):not(.nav-community):not(.nav-donate):not([href*="paypal"]):hover:after,.footer-links a:hover:after{transform:scaleX(1)}

/* Home: chapters as a wired chain of nodes on the page edge */
.pn-rail{position:fixed;left:16px;top:50%;height:300px;width:20px;translate:0 -50%;z-index:20;opacity:0;pointer-events:none;transition:opacity .35s}
.pn-rail.pn-rail-on{opacity:1;pointer-events:auto}
.pn-rail svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pn-rail path{fill:none;vector-effect:non-scaling-stroke;stroke-width:1.6}
.pn-rail-bg{stroke:#ffffff26}
.pn-rail-fill{stroke:#e0ad3f;stroke-dasharray:1;stroke-dashoffset:1}
.pn-rail a{position:absolute;left:5px;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:#2a2e33;border:1.5px solid #6f7780;transition:background .2s,border-color .2s,scale .2s}
.pn-rail a:before{content:"";position:absolute;inset:-9px}
.pn-rail a.on{background:#e0ad3f;border-color:#e0ad3f}
.pn-rail a:hover{scale:1.35}
.pn-rail a span{position:absolute;left:20px;top:50%;translate:0 -50%;white-space:nowrap;font:12px "Segoe UI",system-ui,sans-serif;color:#fff;background:#8f3049;padding:4px 9px;border-radius:5px;opacity:0;pointer-events:none;transition:opacity .15s}
.pn-rail a:hover span,.pn-rail a:focus-visible span{opacity:1}
@media(max-width:1500px){.pn-rail{left:8px}}
@media(max-width:1200px){.pn-rail{display:none}}

@media(prefers-reduced-motion:reduce){
 .pn-bleed,.pn-lines path{animation:none}
 .pn-blob,.hero-graph,.hero-ball{transform:none;transition:none}
 .pn-rise{opacity:1;transform:none;transition:none}
 .button:before{transition:none}
}

.price-was{font-size:.55em;color:#8b939b;text-decoration-thickness:2px;margin-right:6px;vertical-align:middle}
.hero-platforms{display:block;margin-top:14px;color:#9aa3ab;font-size:13px}
.license-mail{margin:10px 0 0;font-size:13px;color:#9aa3ab;text-align:center}.license-mail a{color:#53bcb5}