*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 15.5px;
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}
h1, h2, h3, h4 { line-height: 1.15; letter-spacing: -.02em; margin: 0 0 .5em; font-weight: 600; }
p { margin: 0 0 1em; }
a { color: var(--bio); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--helix); color: #050508; }

.mono { font-family: var(--font-mono); }
.caps { text-transform: uppercase; letter-spacing: var(--track-caps); font-size: .72rem; }
.dim { color: var(--text-dim); }
.grad-text {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hide { display: none !important; }

/* scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--ink-15); border-radius: 6px; }
::-webkit-scrollbar-track { background: transparent; }

/* ambient life layer */
#ambient {
  position: fixed; inset: -20%;
  background:
    radial-gradient(42% 38% at 22% 18%, var(--helix-soft), transparent 70%),
    radial-gradient(45% 42% at 80% 78%, var(--bio-soft), transparent 70%);
  filter: blur(60px);
  animation: breath 14s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}
@keyframes breath {
  from { transform: translate3d(-2%, -1%, 0) scale(1); opacity: .8; }
  to   { transform: translate3d(2%, 2%, 0) scale(1.06); opacity: 1; }
}
#grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  animation: grainShift 1.4s steps(3) infinite;
}
@keyframes grainShift {
  0% { transform: translate(0, 0); }
  50% { transform: translate(-6px, 4px); }
  100% { transform: translate(4px, -6px); }
}

/* boot loader */
#boot {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: var(--void);
  transition: opacity .5s, visibility .5s;
}
#boot.done { opacity: 0; visibility: hidden; }
.boot-ident { font-size: 1.1rem; font-weight: 700; letter-spacing: .34em; }
.boot-ident span { color: var(--bio); }
.boot-line { font-size: .68rem; letter-spacing: .3em; color: var(--ink-50); }
.boot-rail { display: flex; gap: 6px; }
.boot-rail i {
  width: 34px; height: 3px; background: var(--ink-15); border-radius: 2px; overflow: hidden; position: relative;
}
.boot-rail i::after {
  content: ""; position: absolute; inset: 0; background: var(--grad-brand);
  transform: scaleX(0); transform-origin: left; animation: bootfill 1.4s ease forwards;
}
.boot-rail i:nth-child(2)::after { animation-delay: .35s; }
.boot-rail i:nth-child(3)::after { animation-delay: .7s; }
@keyframes bootfill { to { transform: scaleX(1); } }

#app { position: relative; z-index: 2; }