/* project page backdrops */
body[data-world]{isolation:isolate}
.project-world{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;user-select:none}
body[data-world]>.nav,body[data-world]>main,body[data-world]>.footer{position:relative;z-index:1}

.neko-world{background-image:radial-gradient(var(--edge) .6px,transparent .6px);background-size:19px 19px}
.pixel-neko{position:absolute;left:var(--x);top:var(--y);width:32px;height:32px;background:url('/assets/retro/oneko.gif') -96px 0/256px 128px no-repeat;image-rendering:pixelated;transform:scale(2);filter:grayscale(1);opacity:.45;animation:neko-frames .7s steps(1,end) infinite;animation-delay:var(--delay)}
.pixel-neko:nth-child(3n){background-position:-64px 0;animation-name:neko-sleep;animation-duration:2.5s;transform:scale(3)}
.pixel-neko:nth-child(3n + 1){animation-name:neko-idle;animation-duration:3.2s}
.ascii-neko{position:absolute;margin:0;color:var(--ink);font:17px/1.25 var(--mono);letter-spacing:2px;opacity:.24;white-space:pre}
.ascii-neko:first-of-type{left:3%;top:31%}.ascii-neko:last-of-type{right:3%;top:72%;font-size:15px}

@keyframes neko-frames{0%,100%{background-position:-96px 0}50%{background-position:-96px -32px}}
@keyframes neko-sleep{0%,100%{background-position:-64px 0}50%{background-position:-64px -32px}}
@keyframes neko-idle{0%,85%,100%{background-position:-96px -96px}90%{background-position:-96px 0}}
.wave-world{background:radial-gradient(ellipse at center,#12151400 25%,#0b0d0b 100%)}
.wave-board{position:absolute;left:0;top:55%;width:100%;height:auto;aspect-ratio:5/1;transform:translateY(-50%);overflow:visible;color:var(--edge-strong);opacity:.6}
.wave-board path,.wave-board polygon{fill:none;stroke:currentColor;stroke-width:.7;stroke-linejoin:miter;shape-rendering:crispEdges}
.wave-board [data-wave-player]{stroke:var(--ink);stroke-width:.6}
.wave-board [data-wave-particles] path{stroke-width:1}

.calm .project-world *{animation:none!important}
@media(prefers-reduced-motion:reduce){html:not([data-motion=on]) .project-world *{animation:none}}
@media(max-width:1100px){.pixel-neko{transform:scale(1.5);opacity:.23}.pixel-neko:nth-child(3n){transform:scale(2)}.ascii-neko{opacity:.1}.wave-board{opacity:.7}}
@media(max-width:760px){.project-world{opacity:.7}.ascii-neko{display:none}.pixel-neko{transform:scale(1.5)}.wave-board{opacity:.55}}
