/* simple-portfolio: all styling. The page composes itself into a glyph grid; this mostly styles the
   no-WebGL fallback, the debug counter and the invisible link overlays. */
:root{--ink:#dcd6ee;--dim:#8d84ad;--pale:#f4f0ff;--mag:#ff2bd6;--cyan:#3ff2ff;--vio:#b18cff;--bg:#06050c;--mx:0;--my:0;--sy:0px;--fs:15px;--ch:9px}
*{box-sizing:border-box}
html{background:var(--bg);color:var(--ink);scrollbar-color:#2a2140 var(--bg);scrollbar-width:thin;touch-action:pan-y}
html,a{cursor:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAX0lEQVR42u3XMQ6AQAgFUdxzUVNzMG31DnrIb7Oa2BvZxJmEmleC2SCpz+e1WyCVQrpBAgECBAgQIECA+B2ivS3YlsPC08Kz7MTTOu8KT4WnQIAAMTxiKnqEryr2PzsBzB7VQ5Y7WLYAAAAASUVORK5CYII=") 1 1,auto}
body{margin:0;min-height:100vh;overflow-x:hidden;
  font:var(--fs)/1.25 "Times New Roman",Times,"Liberation Serif",Georgia,serif;
  background:radial-gradient(60vmax 60vmax at 78% 22%,#241540 0%,transparent 60%),linear-gradient(#0b0718,#06050c)}
::selection{background:var(--mag);color:#000}

/* ---- the trip: shader canvas, fog, drifting glyphs, statue ---- */
#bg{position:fixed;inset:0;width:100%;height:100%;z-index:0;image-rendering:pixelated;image-rendering:crisp-edges}
/* the loading bar (load.js) covers the page until the first frame of the intro, then fades */
#load{position:fixed;left:0;top:0;z-index:4;background:var(--bg);image-rendering:pixelated;image-rendering:crisp-edges}
#load.out{opacity:0;transition:opacity .3s}
#fog{position:fixed;inset:-20% -30%;z-index:1;pointer-events:none;
  transform:translate3d(calc(var(--mx)*-2%),calc(var(--my)*-1.5%),0)}
#fog i{position:absolute;inset:0;animation:drift 46s ease-in-out infinite alternate;
  background:radial-gradient(38% 26% at 28% 72%,rgba(150,120,255,.16),transparent 70%),
             radial-gradient(34% 22% at 72% 58%,rgba(60,220,255,.11),transparent 70%),
             radial-gradient(52% 30% at 50% 88%,rgba(255,60,214,.10),transparent 70%)}
@keyframes drift{to{transform:translate3d(6%,-3%,0) scale(1.08)}}
#statue{position:fixed;right:3vw;bottom:-2vh;height:min(66vh,760px);z-index:2;pointer-events:none;
  transform:translate3d(calc(var(--mx)*-22px),calc(var(--my)*-14px + var(--sy)),0);
  filter:drop-shadow(0 0 22px rgba(177,140,255,.32))}
#statue img{height:100%;display:block;image-rendering:pixelated;animation:float 7s ease-in-out infinite;opacity:.92}
@keyframes float{50%{transform:translateY(-12px)}}

/* ---- the terminal: text flush to the edge ---- */
main{position:relative;z-index:3;display:flex;flex-direction:column;height:100vh;width:62vw}
#cols{flex:1;min-height:0;padding-bottom:.5em;color:#ece7fb;-webkit-text-stroke:.3px currentColor}
#cols>:first-child{margin-top:0}
h1{flex:none;white-space:nowrap;font-weight:400;font-synthesis:none;font-size:clamp(2rem,5vw,5rem);line-height:1;letter-spacing:.01em;text-transform:uppercase;
  margin:0 0 .4rem;padding:.5rem 0 0;color:var(--pale)}
h1::after{content:"▮";color:var(--cyan);text-shadow:0 0 10px var(--cyan);font-size:.5em;vertical-align:.2em;margin-left:.1em;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
p{margin:.3em 0}
h2{font-weight:400;font-synthesis:none;font-size:1.4em;line-height:1;letter-spacing:.01em;text-transform:uppercase;
  margin:.8em 0 .3em;color:var(--pale)}
/* in ascii mode the headings are drawn into the field; the DOM ones only hold the space */
h1.art,h2.art{color:transparent;overflow:hidden;white-space:nowrap;line-height:1}
/* the page is composed into the field; the DOM copy stays for readers, search, and browsers without WebGL */
html.grid main{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* debug counter, hidden unless the page is loaded with ?fps */
#fps{position:fixed;top:.4rem;right:.6rem;z-index:5;margin:0;font:bold 12px/1 ui-monospace,Menlo,Consolas,monospace;color:#ff0;user-select:none}
#links a{position:fixed;z-index:3;color:transparent;overflow:hidden;white-space:nowrap;border:0;line-height:1}
#links a:hover,#links a:focus-visible{background:transparent;color:transparent;border-bottom:1px solid var(--mag);outline:none}
h1.art{padding:0;margin:var(--ch) 0 var(--ch)}
h2.art{margin:calc(var(--ch)*2) 0 var(--ch)}
h1.art::after{display:none}
ul{list-style:none;margin:0;padding:0}
li{margin:0 0 .2em}
li small{display:inline-block;color:var(--dim);font-size:.86em}
a{color:var(--cyan);text-decoration:none;border-bottom:1px solid var(--mag);transition:background .12s,color .12s}
a:hover,a:focus-visible{background:var(--mag);color:#000;border-color:transparent;outline:none;text-shadow:none}
hr{border:0;height:10px;margin:.9em 0 .5em;opacity:.8;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M0 11h23V1H7v6h10V4h-5' fill='none' stroke='%23b18cff' stroke-width='2'/%3E%3C/svg%3E") repeat-x left center/24px 12px}
hr~p{color:var(--dim)}


@media (max-width:760px){
  main{height:auto;width:auto;padding-bottom:4rem}
  h1{white-space:normal}
  #statue{height:52vh;top:auto;bottom:-4vh;right:-8vw;transform:none}
  #statue img{opacity:.28}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important}
}