/* ══════════════════════════════════════════════════════════════
   CRAFTED GLITCHES — dark / minimal / futuristic landing
   ══════════════════════════════════════════════════════════════ */

:root{
  --bg:      #000000;
  --ink:     #f2f2f2;
  --ink-dim: #6a6a6a;
  --line:    rgba(255,255,255,.10);
  --glitch-a:#00e5ff;   /* cyan   */
  --glitch-b:#ff0055;   /* magenta */
  --mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --disp: "Chakra Petch", var(--mono);
}

*{ box-sizing:border-box; }

html,body{
  margin:0; height:100%;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--mono);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}

/* hide native cursor once JS is up (body.cursor-on) */
body.cursor-on,
body.cursor-on a{ cursor:none; }

/* ── live vortex canvas ─────────────────────────────────────── */
#gl{
  position:fixed; inset:0;
  width:100%; height:100%;
  display:block;
  z-index:0;
}

/* static fallback image */
.fallback{
  position:fixed; inset:0; margin:auto;
  width:min(78vmin,720px); height:auto;
  z-index:0; opacity:.9;
  pointer-events:none;
}
#fallback[hidden]{ display:none; }

/* ── overlays: scanlines · grain · vignette ─────────────────── */
.fx{ position:fixed; inset:0; pointer-events:none; z-index:2; }

/* soft central darkening so the wordmark reads over the swirl */
.fx--focus{
  z-index:1;
  background:radial-gradient(ellipse 62% 46% at center,
    rgba(0,0,0,.78) 0%,
    rgba(0,0,0,.45) 40%,
    rgba(0,0,0,0) 72%);
}

.fx--scan{
  background:repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.035) 0 1px,
    transparent 1px 3px);
  mix-blend-mode:overlay;
  opacity:.5;
  animation:scan 8s linear infinite;
}
@keyframes scan{ from{background-position:0 0;} to{background-position:0 300px;} }

.fx--grain{
  /* animated film grain via SVG fractal noise */
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
  opacity:.05;
  mix-blend-mode:screen;
  animation:grain .6s steps(4) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}   25%{transform:translate(-3%,2%)}
  50%{transform:translate(2%,-2%)}75%{transform:translate(-2%,-3%)}
  100%{transform:translate(3%,1%)}
}

.fx--vignette{
  background:radial-gradient(ellipse at center,
    transparent 40%,
    rgba(0,0,0,.55) 85%,
    #000 100%);
  z-index:3;
}

/* ── layout stage ───────────────────────────────────────────── */
.stage{
  position:relative; z-index:4;
  height:100%;
  padding:clamp(1.1rem,3.5vw,2.6rem);
  display:grid;
  grid-template-rows:auto 1fr auto auto;
  gap:clamp(1rem,3vh,2.4rem);
}

/* top strip */
.top{
  display:flex; justify-content:space-between; align-items:center;
  font-size:.66rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--ink-dim);
}
.top__stat{ display:inline-flex; align-items:center; gap:.6em; }
.pulse{
  width:6px; height:6px; border-radius:50%;
  background:var(--ink);
  box-shadow:0 0 10px var(--ink);
  animation:pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.25;transform:scale(.6)} }

/* ── centre wordmark ────────────────────────────────────────── */
.core{
  align-self:center;
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(1rem,2.6vh,1.8rem);
  text-align:center;
}

.mark{
  margin:0;
  font-family:var(--disp);
  font-weight:300;
  line-height:.92;
  letter-spacing:.12em;
  font-size:clamp(2.6rem,11vw,8.2rem);
  position:relative;
  text-transform:uppercase;
}
.mark__l{ display:block; }
.mark__l:nth-child(2){
  font-weight:600;
  /* faint outline weight-shift for tension */
}

/* rgb-split glitch layers — two-line content mirrors the real mark */
.mark::before,
.mark::after{
  content:"CRAFTED\A GLITCHES";
  position:absolute; inset:0;
  font-weight:400; letter-spacing:.12em; line-height:.92;
  white-space:pre;
  display:grid; place-content:center;
  pointer-events:none; opacity:.85;
}
/* rebuild the two-line layout for the pseudo layers */
.mark::before{ color:var(--glitch-a); mix-blend-mode:screen;
  animation:gl-a 4s steps(1) infinite; clip-path:inset(0); }
.mark::after{  color:var(--glitch-b); mix-blend-mode:screen;
  animation:gl-b 4s steps(1) infinite; clip-path:inset(0); }

@keyframes gl-a{
  0%,88%,100%{ transform:translate(0,0); opacity:0; }
  90%{ transform:translate(-3px,-2px); opacity:.9; clip-path:inset(12% 0 60% 0);}
  93%{ transform:translate(4px,1px);  opacity:.7; clip-path:inset(70% 0 8% 0);}
  96%{ transform:translate(-2px,2px); opacity:.8; clip-path:inset(40% 0 42% 0);}
}
@keyframes gl-b{
  0%,86%,100%{ transform:translate(0,0); opacity:0; }
  91%{ transform:translate(3px,2px);  opacity:.9; clip-path:inset(20% 0 55% 0);}
  94%{ transform:translate(-4px,-1px);opacity:.7; clip-path:inset(62% 0 12% 0);}
  97%{ transform:translate(2px,-2px); opacity:.8; clip-path:inset(45% 0 38% 0);}
}

.tagline{
  margin:0;
  font-size:clamp(.62rem,1.7vw,.9rem);
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--ink-dim);
  min-height:1.2em;
}
.tagline::after{ /* caret */
  content:"▍"; margin-left:.15em; color:var(--ink);
  animation:caret 1s steps(1) infinite;
}
.tagline.done::after{ content:""; }
@keyframes caret{ 50%{opacity:0;} }

/* ── repo nodes ─────────────────────────────────────────────── */
.nodes{
  align-self:end;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(.6rem,2vw,1.4rem);
  max-width:1100px; width:100%; margin:0 auto;
}
.node{
  position:relative;
  display:flex; flex-direction:column; gap:.4em;
  padding:clamp(.9rem,2vw,1.2rem) clamp(1rem,2vw,1.3rem);
  border:1px solid var(--line);
  background:rgba(0,0,0,.35);
  backdrop-filter:blur(2px);
  color:var(--ink);
  text-decoration:none;
  overflow:hidden;
  transition:border-color .35s, background .35s, transform .35s;
}
.node::before{ /* wipe accent */
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg,transparent 40%,rgba(255,255,255,.06) 50%,transparent 60%);
  transform:translateX(-120%);
  transition:transform .6s ease;
}
.node:hover{ border-color:rgba(255,255,255,.55); transform:translateY(-3px); }
.node:hover::before{ transform:translateX(120%); }
.node__dot{
  position:absolute; top:.9rem; right:.9rem;
  width:7px; height:7px; border-radius:50%;
  background:var(--ink-dim); transition:.35s;
}
.node:hover .node__dot{ background:var(--glitch-a); box-shadow:0 0 12px var(--glitch-a); }
.node__k{
  font-family:var(--disp); font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  font-size:clamp(.72rem,1.4vw,.95rem);
}
.node__v{
  font-size:.64rem; letter-spacing:.14em;
  color:var(--ink-dim); text-transform:uppercase;
}

/* ── bottom strip ───────────────────────────────────────────── */
.bottom{
  display:flex; justify-content:space-between; align-items:center;
  font-size:.6rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--ink-dim);
}

/* ── custom cursor ──────────────────────────────────────────── */
.cursor{
  position:fixed; top:0; left:0; z-index:9;
  width:26px; height:26px; margin:-13px 0 0 -13px;
  border:1px solid rgba(255,255,255,.7);
  border-radius:50%;
  pointer-events:none;
  mix-blend-mode:difference;
  transition:width .2s, height .2s, margin .2s, border-color .2s;
  will-change:transform;
}
.cursor.is-hot{
  width:52px; height:52px; margin:-26px 0 0 -26px;
  border-color:var(--glitch-a);
}

/* ── boot overlay ───────────────────────────────────────────── */
.boot{
  position:fixed; inset:0; z-index:20;
  background:#000;
  display:grid; place-content:center;
  transition:opacity .8s ease;
}
.boot.gone{ opacity:0; pointer-events:none; }
.boot__line{
  font-size:.7rem; letter-spacing:.5em; text-transform:uppercase;
  color:var(--ink-dim);
}
.boot__dots::after{
  content:""; animation:dots 1.2s steps(4) infinite;
}
@keyframes dots{ 0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."} }

/* ── responsive ─────────────────────────────────────────────── */
@media (max-width:720px){
  .nodes{ grid-template-columns:1fr; }
  .top,.bottom{ font-size:.56rem; letter-spacing:.24em; }
  .stage{ gap:1.2rem; }
  /* deterministic wordmark sizing so it never overflows narrow screens */
  .mark{ font-size:clamp(1.8rem,11.5vw,3rem); letter-spacing:.03em; }
  .mark::before,.mark::after{ letter-spacing:.03em; }
  .tagline{ letter-spacing:.16em; }
  .stage{ grid-template-rows:auto 1fr auto auto; overflow:hidden; }
}
/* hard guard against any horizontal bleed */
.mark,.tagline,.node{ max-width:100%; }
.node__v{ overflow-wrap:anywhere; }

/* ── reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .fx--scan,.fx--grain,.mark::before,.mark::after,.pulse,.node::before{
    animation:none !important;
  }
  .fx--scan,.fx--grain{ opacity:.03; }
}