/* ============================================================================
   LRNZNCLOUD — Portfolio / Link-Hub
   Cyberpunk-kitsune brand (Tokyo/Osaka neon). Magenta #FF00FF + cyan #00FFFF
   on true black. Derived from the LRNZNCLOUD Design System.
   ========================================================================== */
@import url('./assets/fonts/fonts.css');

/* ---------------------------------------------------------------- TOKENS -- */
:root {
  /* ink (magenta-tinted blacks) */
  --ink-1000:#000000; --ink-950:#07020A; --ink-900:#0D0412; --ink-800:#160820;
  --ink-700:#20102D; --ink-600:#2E1640;
  /* magenta */
  --magenta-300:#FF9BF6; --magenta-400:#FF5CF0; --magenta-500:#FF00FF;
  --magenta-600:#C400C9; --magenta-700:#8E0093; --magenta-800:#4F0053; --magenta-900:#2A002C;
  /* cyan */
  --cyan-300:#B5FFFF; --cyan-400:#66FFFF; --cyan-500:#00FFFF;
  --cyan-600:#00C2C9; --cyan-700:#008A91; --cyan-900:#00343A;
  /* neutrals */
  --white:#FFFFFF; --white-90:rgba(255,255,255,.90); --white-70:rgba(255,255,255,.68);
  --white-45:rgba(255,255,255,.60); --white-20:rgba(255,255,255,.20);
  /* surfaces */
  --bg-base:var(--ink-1000); --bg-panel:var(--ink-900); --surface-card:var(--ink-800);
  --surface-input:var(--ink-700); --surface-hover:var(--ink-600);
  /* text */
  --text-primary:var(--white); --text-secondary:var(--white-70); --text-muted:var(--white-45);
  --text-on-accent:var(--ink-1000); --text-link:var(--cyan-500);
  /* brand accents */
  --accent:var(--magenta-500); --accent-strong:var(--magenta-400); --accent-dim:var(--magenta-700);
  --accent-2:var(--cyan-500); --accent-2-dim:var(--cyan-700);
  /* borders */
  --border-subtle:rgba(255,0,255,.22); --border-default:rgba(255,0,255,.40);
  --border-strong:var(--magenta-500); --border-cyan:rgba(0,255,255,.40);
  /* status */
  --success:#00FFA3; --warning:#FFD400; --danger:#FF2D6B; --info:var(--cyan-500);

  /* type */
  --font-display:'Rampart One','Chakra Petch',system-ui,sans-serif;
  --font-ui:'Chakra Petch','Segoe UI',system-ui,sans-serif;
  --font-body:'Chakra Petch','Segoe UI',system-ui,sans-serif;
  --font-mono:'Share Tech Mono',ui-monospace,'SFMono-Regular',monospace;
  --fw-light:300; --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;
  --text-2xs:11px; --text-xs:12px; --text-sm:14px; --text-md:16px; --text-lg:20px;
  --text-xl:25px; --text-2xl:31px; --text-3xl:39px; --text-4xl:49px; --text-5xl:61px; --text-6xl:76px;
  --leading-tight:1.05; --leading-snug:1.25; --leading-normal:1.5; --leading-relaxed:1.7;
  --tracking-tight:-0.01em; --tracking-normal:0; --tracking-wide:0.08em;
  --tracking-wider:0.18em; --tracking-mono:0.04em;

  /* spacing */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --space-10:128px;
  /* radii + chamfer */
  --radius-sm:4px; --radius-md:8px; --radius-lg:14px; --radius-pill:999px;
  --clip-chamfer:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
  --clip-chamfer-sm:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  /* glow */
  --glow-magenta-sm:0 0 6px rgba(255,0,255,.55);
  --glow-magenta:0 0 14px rgba(255,0,255,.55),0 0 2px rgba(255,0,255,.9);
  --glow-magenta-lg:0 0 28px rgba(255,0,255,.6),0 0 8px rgba(255,0,255,.85);
  --glow-cyan-sm:0 0 6px rgba(0,255,255,.55);
  --glow-cyan:0 0 14px rgba(0,255,255,.55),0 0 2px rgba(0,255,255,.9);
  --glow-cyan-lg:0 0 28px rgba(0,255,255,.6),0 0 8px rgba(0,255,255,.85);
  --shadow-panel:0 18px 50px -12px rgba(0,0,0,.9),0 0 0 1px var(--border-subtle);
  --text-glow-magenta:0 0 12px rgba(255,0,255,.7);
  --text-glow-cyan:0 0 12px rgba(0,255,255,.7);
  --glitch-shadow:2px 0 0 var(--cyan-500),-2px 0 0 var(--magenta-500);
  /* motion */
  --ease-out:cubic-bezier(0.16,1,0.3,1); --ease-snap:cubic-bezier(0.2,0.9,0.2,1);
  --dur-fast:120ms; --dur-base:200ms; --dur-slow:360ms;
  /* layout */
  --container-max:1200px; --grid-line:rgba(255,0,255,.055);
}

/* ------------------------------------------------------------------ BASE -- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; min-height:100vh;
  background:var(--bg-base); color:var(--text-primary);
  font-family:var(--font-body); font-weight:var(--fw-regular);
  font-size:var(--text-md); line-height:var(--leading-normal);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3,h4{
  font-family:var(--font-ui); font-weight:var(--fw-bold);
  line-height:var(--leading-tight); margin:0 0 var(--space-4);
  letter-spacing:var(--tracking-tight);
}
h1{font-size:var(--text-4xl)} h2{font-size:var(--text-3xl)}
h3{font-size:var(--text-2xl)} h4{font-size:var(--text-xl)}
p{margin:0 0 var(--space-4); color:var(--text-secondary)}
a{color:var(--text-link); text-decoration:none; transition:color var(--dur-fast) var(--ease-out)}
a:hover{text-shadow:var(--text-glow-cyan)}
img{max-width:100%; display:block}
::selection{background:var(--magenta-500); color:var(--ink-1000)}
:focus-visible{outline:2px solid var(--accent-2); outline-offset:3px; border-radius:2px}

/* accessibility utilities */
.sr-only{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link{
  position:fixed; top:8px; left:8px; z-index:100; transform:translateY(-160%);
  background:var(--accent); color:var(--ink-1000); font-family:var(--font-mono);
  text-transform:uppercase; letter-spacing:var(--tracking-wide); font-size:var(--text-xs);
  padding:var(--space-2) var(--space-4); clip-path:var(--clip-chamfer-sm);
  transition:transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus{transform:translateY(0)}
#top,#repos,#stack,#kitsune{scroll-margin-top:76px}

/* ONE persistent WebGL world behind everything (world.js). Opaque when active,
   so it covers the CSS grid/bloom fallback; those still show if WebGL is off. */
#world{
  position:fixed; inset:0; width:100%; height:100%; z-index:-1;
  display:block; pointer-events:none;
}
/* fallbacks that the world replaces once it's live */
html.world-on .hero-mask,
html.world-on #morph-fallback,
html.world-on .repo-bg{display:none}

/* signature cyber-grid backdrop — slowly panning toward the horizon */
.grid-bg{
  position:fixed; inset:-2px; z-index:-2; pointer-events:none;
  background-color:var(--bg-base);
  background-image:
    linear-gradient(var(--grid-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 85% 58% at 50% 0%,#000 20%,transparent 100%);
  animation:grid-pan 46s linear infinite;
}
@keyframes grid-pan{from{background-position:0 0}to{background-position:0 56px}}
/* radial magenta bloom behind the hero */
.bloom{
  position:fixed; top:-20vh; left:50%; transform:translateX(-50%);
  width:min(1100px,120vw); height:80vh; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(255,0,255,.18),transparent 62%),
             radial-gradient(ellipse 60% 50% at 30% 30%,rgba(0,255,255,.10),transparent 60%);
  filter:blur(6px);
}
.container{width:100%; max-width:var(--container-max); margin:0 auto; padding:0 var(--space-5)}

/* HUD eyebrow */
.eyebrow{
  font-family:var(--font-mono); text-transform:uppercase;
  letter-spacing:var(--tracking-wider); font-size:var(--text-xs);
  color:var(--accent-2); margin:0 0 var(--space-4);
}
.eyebrow.magenta{color:var(--accent)}

/* ------------------------------------------------------------------- NAV -- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--space-3) var(--space-5);
  background:rgba(7,2,10,.72); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border-subtle);
}
.nav-brand{display:flex; align-items:center; gap:var(--space-3); cursor:pointer}
.nav-brand .nav-mask{width:40px; height:40px; object-fit:contain; filter:drop-shadow(0 0 8px rgba(255,0,255,.6))}
/* click the mask 5× easter egg — a quick wink + glitch */
.nav-brand .nav-mask.mask-wink{animation:mask-wink .9s var(--ease-out)}
@keyframes mask-wink{
  0%{transform:scaleY(1) rotate(0)} 15%{transform:scaleY(.1) rotate(-6deg)} 30%{transform:scaleY(1) rotate(0)}
  45%{transform:scale(1.25) rotate(4deg); filter:drop-shadow(0 0 14px rgba(0,255,255,.9))}
  70%{transform:scale(1) rotate(-3deg)} 100%{transform:scale(1) rotate(0)}
}
.nav-brand .nav-wordmark{
  height:20px; width:auto; display:block;
  filter:drop-shadow(0 0 8px rgba(255,0,255,.45)) drop-shadow(0 0 3px rgba(0,255,255,.3));
}
.nav-links{display:flex; align-items:center; gap:var(--space-2); list-style:none; margin:0; padding:0}
.nav-links a{
  font-family:var(--font-mono); text-transform:uppercase; font-size:var(--text-xs);
  letter-spacing:var(--tracking-wide); color:var(--text-secondary);
  padding:var(--space-2) var(--space-3); border-radius:var(--radius-sm);
  transition:color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out);
}
.nav-links a:hover{color:var(--white); background:rgba(255,0,255,.08); text-shadow:none}
.nav-links a.active{color:var(--accent-2); background:rgba(0,255,255,.07)}
.nav-links a.is-cta{
  color:var(--accent-2); border:1px solid var(--border-cyan);
}
.nav-links a.is-cta:hover{color:var(--ink-1000); background:var(--accent-2); box-shadow:var(--glow-cyan-sm)}

/* ----------------------------------------------------------------- HERO -- */
.hero{
  position:relative; text-align:center; isolation:isolate; overflow:hidden;
  min-height:100vh; min-height:100svh;
  padding:calc(var(--space-8) + 40px) var(--space-5) var(--space-9);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  touch-action:pan-y; /* horizontal drag rotates the globe, vertical still scrolls */
}
/* animated scroll cue at the bottom of the full-screen hero */
.scroll-cue{
  position:absolute; bottom:16px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:var(--text-2xs); text-transform:uppercase;
  letter-spacing:var(--tracking-wider); color:var(--text-muted);
  pointer-events:none; z-index:1; user-select:none;
}
.scroll-cue::after{
  content:""; width:1px; height:34px;
  background:linear-gradient(180deg,var(--accent-2),transparent);
  animation:cue 1.9s var(--ease-out) infinite;
}
@keyframes cue{
  0%{transform:scaleY(0); transform-origin:top; opacity:1}
  55%{transform:scaleY(1); opacity:1}
  100%{transform:scaleY(1); opacity:0}
}
/* drag/click affordance for the interactive globe (only when WebGL is live) */
.hero-hint{
  display:none; font-family:var(--font-mono); font-size:var(--text-2xs);
  text-transform:uppercase; letter-spacing:var(--tracking-wider);
  color:var(--text-muted); margin:var(--space-5) 0 0; user-select:none;
}
.hero-hint b{color:var(--accent-2); font-weight:400}
html.world-on .hero-hint{display:block}
/* tappable Konami hint (works on mobile — no keyboard needed) */
.konami-hint{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:var(--space-2); margin:var(--space-3) 0 0; user-select:none;
}
.konami-hint .kh-label{
  font-family:var(--font-mono); text-transform:uppercase; font-size:var(--text-2xs);
  letter-spacing:var(--tracking-wider); color:var(--text-muted);
}
.konami-hint .kh-keys{display:inline-flex; gap:5px; flex-wrap:wrap}
.kh-key{
  min-width:26px; height:26px; padding:0 6px;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:var(--text-xs); line-height:1; color:var(--text-secondary);
  background:rgba(22,8,32,.6); border:1px solid var(--border-subtle);
  clip-path:var(--clip-chamfer-sm); cursor:pointer;
  transition:color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
             background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.kh-key:hover{color:var(--white); border-color:var(--border-cyan)}
.kh-key:active{transform:scale(.94)}
.kh-key.ok{color:var(--ink-1000); background:var(--accent-2); border-color:var(--accent-2); box-shadow:var(--glow-cyan-sm)}
@media (max-width:640px){ .kh-key{min-width:30px; height:30px} }
html.world-on.world-grab{cursor:grabbing}
/* legibility scrim over the persistent world, behind the hero text — darker so
   the bright globe doesn't clash with the wordmark's outline */
html.world-on .hero::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse 70% 66% at 50% 50%,
    rgba(5,2,10,.95), rgba(5,2,10,.6) 46%, transparent 80%);
}
.hero-mask{width:clamp(150px,26vw,250px); height:auto; margin-bottom:var(--space-5); position:relative; z-index:1}
.mask-img{
  width:100%; height:auto; display:block;
  filter:drop-shadow(0 0 26px rgba(255,0,255,.5)) drop-shadow(0 0 12px rgba(0,255,255,.35));
  animation:mask-flicker 6.5s infinite;
}
@keyframes mask-flicker{
  0%,44%,100%{opacity:1; transform:translate(0,0)}
  45%{opacity:.72; transform:translate(-2px,1px)} 46%{opacity:1; transform:translate(2px,-1px)} 47%{transform:translate(0,0)}
  90%{transform:translate(0,0)} 91%{opacity:.82; transform:translate(3px,0)} 92.5%{opacity:1; transform:translate(-2px,0)} 93.5%{transform:translate(0,0)}
}
/* real brand wordmark (custom brush-katakana face, RGB-split baked in) */
.wordmark-lock{margin:var(--space-2) 0 0; line-height:0; position:relative; z-index:1}
.wordmark-img{
  width:min(560px,84vw); height:auto; display:inline-block;
  filter:drop-shadow(0 0 18px rgba(255,0,255,.45)) drop-shadow(0 0 6px rgba(0,255,255,.3));
  animation:wm-glitch 5.2s infinite;
}
@keyframes wm-glitch{
  0%,88%,100%{transform:translate(0,0); clip-path:inset(0 0 0 0)}
  89%{transform:translate(-3px,0); clip-path:inset(18% 0 56% 0)}
  91%{transform:translate(3px,0); clip-path:inset(60% 0 8% 0)}
  93%{transform:translate(-2px,0); clip-path:inset(36% 0 40% 0)}
  94%{transform:translate(0,0); clip-path:inset(0 0 0 0)}
}
/* giant decorative Rampart One kanji watermark behind the hero */
.hero-kanji{
  position:absolute; top:48%; left:50%; transform:translate(-50%,-50%);
  font-family:var(--font-display); font-size:min(78vh,720px); line-height:1;
  color:var(--magenta-500); opacity:.05; pointer-events:none; z-index:0; user-select:none;
}
.hero .kana{
  font-family:var(--font-mono); color:var(--accent-2); font-size:var(--text-md);
  letter-spacing:var(--tracking-wide); margin:var(--space-5) 0 var(--space-2); display:block;
}
.hero .lede{
  max-width:620px; font-size:var(--text-lg); color:var(--text-secondary);
  margin:var(--space-2) auto var(--space-6);
}
.hero-cta{display:flex; flex-wrap:wrap; gap:var(--space-3); justify-content:center}

/* ---------------------------------------------------------------- BUTTON -- */
.btn{
  --btn-accent:var(--accent);
  display:inline-flex; align-items:center; gap:var(--space-2);
  font-family:var(--font-ui); font-weight:var(--fw-semibold);
  text-transform:uppercase; letter-spacing:var(--tracking-wide); font-size:var(--text-sm);
  padding:var(--space-3) var(--space-5); cursor:pointer;
  border:1px solid var(--btn-accent); background:transparent; color:var(--white);
  clip-path:var(--clip-chamfer-sm);
  transition:transform var(--dur-fast) var(--ease-snap),
             box-shadow var(--dur-base) var(--ease-out),
             background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.btn:hover{box-shadow:0 0 14px -2px var(--btn-accent); text-shadow:none}
.btn:active{transform:scale(.97)}
.btn-primary{--btn-accent:var(--accent); background:var(--accent); color:var(--ink-1000)}
.btn-primary:hover{background:var(--accent-strong); box-shadow:var(--glow-magenta)}
.btn-ghost{--btn-accent:var(--border-cyan); color:var(--accent-2)}
.btn-ghost:hover{border-color:var(--accent-2); color:var(--white); box-shadow:var(--glow-cyan-sm)}
/* support / donation buttons — warm amber accent (on-system --warning token) */
.btn-support{--btn-accent:var(--warning); color:var(--warning)}
.btn-support:hover{background:var(--warning); color:var(--ink-1000); border-color:var(--warning); box-shadow:0 0 16px -2px var(--warning)}
.btn .ico{flex:none; width:1em; height:1em}

/* ------------------------------------------------------------- SUPPORT -- */
.support{text-align:center}
.support-inner{max-width:660px; margin:0 auto}
.support h2{margin-bottom:var(--space-3)}
.support .support-lead{color:var(--text-secondary); max-width:54ch; margin:0 auto var(--space-6)}
.support-cta{display:flex; flex-wrap:wrap; gap:var(--space-3); justify-content:center}

/* ----------------------------------------------------------- STAT READOUT -- */
.stats{
  display:flex; flex-wrap:wrap; justify-content:center; gap:var(--space-3);
  margin-top:var(--space-7);
}
.stat{
  min-width:120px; padding:var(--space-3) var(--space-5);
  border:1px solid var(--border-subtle); background:rgba(22,8,32,.5);
  clip-path:var(--clip-chamfer-sm); text-align:left;
}
.stat .num{
  font-family:var(--font-mono); font-size:var(--text-2xl); color:var(--accent-2);
  line-height:1; display:block;
}
.stat .lbl{
  font-family:var(--font-mono); text-transform:uppercase; font-size:var(--text-2xs);
  letter-spacing:var(--tracking-wider); color:var(--text-muted); margin-top:var(--space-1);
}

/* --------------------------------------------------------------- SECTION -- */
.section{padding:var(--space-9) 0; position:relative}
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--space-4); margin-bottom:var(--space-7); flex-wrap:wrap;
}
.section-head h2{margin:0}
.section-head .meta{font-family:var(--font-mono); color:var(--text-muted); font-size:var(--text-sm)}
.rule{height:1px; background:linear-gradient(90deg,var(--border-strong),transparent); border:0; margin:0}

/* ------------------------------------------------------------- REPO GRID -- */
.repo-grid{
  display:grid; gap:var(--space-4);
  grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));
}
.repo-card{
  display:flex; flex-direction:column; gap:var(--space-3);
  background:var(--surface-card); border:1px solid var(--border-default);
  clip-path:var(--clip-chamfer); padding:var(--space-5);
  position:relative; overflow:hidden; isolation:isolate;
  transition:transform var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out);
}
.repo-card::before{
  content:""; position:absolute; top:0; right:0; width:44px; height:44px;
  background:linear-gradient(225deg,rgba(0,255,255,.14),transparent 60%); pointer-events:none;
}
.repo-card:hover{transform:translateY(-3px); border-color:var(--border-strong); box-shadow:var(--glow-magenta)}
.repo-card:focus-within{border-color:var(--border-strong); box-shadow:var(--glow-magenta)}
.repo-card .repo-top{display:flex; align-items:center; justify-content:space-between; gap:var(--space-2)}
.repo-card .repo-name{
  font-family:var(--font-ui); font-weight:var(--fw-semibold); font-size:var(--text-lg);
  color:var(--white); letter-spacing:var(--tracking-tight); word-break:break-word;
}
.repo-card a.repo-name::after{content:""; position:absolute; inset:0}
.repo-card:hover .repo-name{color:var(--magenta-300)}
.repo-card .repo-desc{
  color:var(--text-secondary); font-size:var(--text-sm); margin:0; flex:1;
  line-height:var(--leading-normal);
}
.repo-meta{
  display:flex; flex-wrap:wrap; gap:var(--space-4); align-items:center;
  font-family:var(--font-mono); font-size:var(--text-xs); color:var(--text-muted);
  letter-spacing:var(--tracking-mono);
}
.repo-meta .m{display:inline-flex; align-items:center; gap:6px}
.dot{width:9px; height:9px; border-radius:50%; background:var(--accent-2); box-shadow:var(--glow-cyan-sm); flex:none}
.tag{
  font-family:var(--font-mono); font-size:var(--text-2xs); text-transform:uppercase;
  letter-spacing:var(--tracking-wide); color:var(--accent-2);
  border:1px solid var(--border-cyan); padding:3px 10px; clip-path:var(--clip-chamfer-sm);
  white-space:nowrap;
}
.tag.archived{color:var(--warning); border-color:rgba(255,212,0,.4)}

/* skeleton loading */
.repo-card.skeleton{pointer-events:none}
.skeleton .sk{background:linear-gradient(90deg,rgba(255,0,255,.06),rgba(0,255,255,.10),rgba(255,0,255,.06));
  background-size:200% 100%; animation:sk 1.3s linear infinite; border-radius:3px; height:14px}
.skeleton .sk.lg{height:22px; width:60%} .skeleton .sk.md{width:90%} .skeleton .sk.sm{width:40%; height:11px}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* state banners */
.state{
  text-align:center; padding:var(--space-8) var(--space-5);
  border:1px dashed var(--border-default); clip-path:var(--clip-chamfer);
  background:rgba(13,4,18,.6); grid-column:1/-1;
}
.state p{margin:var(--space-2) 0 0}
.state .jp{font-family:var(--font-mono); color:var(--accent); letter-spacing:var(--tracking-wide)}
.state .btn{margin-top:var(--space-5)}

/* ------------------------------------------------------------- HERO LINK -- */
.linkhub{display:grid; gap:var(--space-4); grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.linkhub .repo-card{cursor:pointer}

/* --------------------------------------------------------------- FOOTER -- */
.footer{
  border-top:1px solid var(--border-subtle); margin-top:var(--space-9);
  padding:var(--space-8) 0 var(--space-7);
}
.footer .fwrap{display:flex; flex-wrap:wrap; gap:var(--space-6); justify-content:space-between; align-items:flex-start}
.footer .fbrand{display:flex; align-items:center; gap:var(--space-3)}
.footer .foot-mask{width:46px; height:46px; object-fit:contain; filter:drop-shadow(0 0 8px rgba(255,0,255,.6))}
.footer .fbrand .wm{font-family:var(--font-ui); font-weight:var(--fw-bold); letter-spacing:var(--tracking-wide)}
.footer .fnote{color:var(--text-muted); font-size:var(--text-sm); max-width:340px; margin-top:var(--space-3)}
.footer nav{display:flex; flex-direction:column; gap:var(--space-2)}
.footer nav a{
  font-family:var(--font-mono); text-transform:uppercase; font-size:var(--text-xs);
  letter-spacing:var(--tracking-wide); color:var(--text-secondary);
}
.footer nav a:hover{color:var(--white)}
.footer .copy{
  font-family:var(--font-mono); font-size:var(--text-2xs); color:var(--text-muted);
  letter-spacing:var(--tracking-mono); margin-top:var(--space-7); text-align:center;
  text-transform:uppercase;
}

/* ------------------------------------------------------- LEGAL / PROSE -- */
.prose{max-width:760px; margin:0 auto; padding:calc(var(--space-10)) var(--space-5) var(--space-9)}
.prose h1{font-size:var(--text-3xl); margin-bottom:var(--space-2)}
.prose h2{
  font-size:var(--text-xl); margin:var(--space-8) 0 var(--space-3);
  color:var(--magenta-300); letter-spacing:var(--tracking-tight);
}
.prose h2::before{content:"// "; color:var(--accent-2); font-family:var(--font-mono); font-size:var(--text-md)}
.prose p,.prose li{color:var(--text-secondary); line-height:var(--leading-relaxed)}
.prose a{color:var(--accent-2)}
.prose .card{
  background:var(--surface-card); border:1px solid var(--border-default);
  clip-path:var(--clip-chamfer); padding:var(--space-5); margin:var(--space-4) 0;
}
.prose .card p:last-child{margin-bottom:0}
.prose dl{display:grid; grid-template-columns:auto 1fr; gap:var(--space-2) var(--space-5); margin:0}
.prose dt{font-family:var(--font-mono); text-transform:uppercase; font-size:var(--text-xs);
  letter-spacing:var(--tracking-wide); color:var(--text-muted); padding-top:2px}
.prose dd{margin:0; color:var(--text-primary)}
.prose .back{
  display:inline-flex; align-items:center; gap:var(--space-2); margin-bottom:var(--space-6);
  font-family:var(--font-mono); text-transform:uppercase; font-size:var(--text-xs);
  letter-spacing:var(--tracking-wide);
}
.callout{
  border-left:2px solid var(--accent); background:rgba(255,0,255,.06);
  padding:var(--space-4) var(--space-5); margin:var(--space-5) 0; font-size:var(--text-sm);
}
.callout strong{color:var(--white)}

/* ===================================== REPO DETAIL SUBPAGE (repo.html) === */
#main.prose{scroll-margin-top:76px}
/* text wordmark fallback in nav/footer brand (matches the image wordmark weight) */
.nav-brand .wm{
  font-family:var(--font-ui); font-weight:var(--fw-bold); font-size:var(--text-lg);
  letter-spacing:var(--tracking-wide); color:var(--white);
}
/* repo header */
.repo-title{
  font-size:var(--text-4xl); margin:0 0 var(--space-3); word-break:break-word;
  text-shadow:0 0 18px rgba(255,0,255,.5),0 0 6px rgba(0,255,255,.35);
}
.repo-desc-lead{color:var(--text-secondary); font-size:var(--text-lg); margin:0 0 var(--space-5); max-width:70ch}
.repo-head-meta{margin:0 0 var(--space-4)}
.repo-topics{display:flex; flex-wrap:wrap; gap:var(--space-2); margin:0 0 var(--space-6)}
.repo-topics:empty{display:none}
.repo-actions{display:flex; flex-wrap:wrap; gap:var(--space-3); margin:0 0 var(--space-2)}

/* README skeleton */
.readme-skeleton{display:flex; flex-direction:column; gap:var(--space-4)}
.readme-skeleton .sk{
  height:16px; border-radius:3px;
  background:linear-gradient(90deg,rgba(255,0,255,.06),rgba(0,255,255,.10),rgba(255,0,255,.06));
  background-size:200% 100%; animation:sk 1.3s linear infinite;
}
.readme-skeleton .sk.lg{height:26px; width:52%} .readme-skeleton .sk.md{width:92%} .readme-skeleton .sk.sm{width:38%; height:12px}

/* ============ rendered README (GitHub HTML, styled into the neon theme) === */
.readme{color:var(--text-secondary); line-height:var(--leading-relaxed); font-size:var(--text-md)}
.readme > *:first-child{margin-top:0}
.readme h1,.readme h2,.readme h3,.readme h4,.readme h5,.readme h6{
  font-family:var(--font-ui); font-weight:var(--fw-bold); color:var(--magenta-300);
  line-height:var(--leading-snug); letter-spacing:var(--tracking-tight);
  margin:var(--space-7) 0 var(--space-3); scroll-margin-top:84px;
}
.readme h1{font-size:var(--text-2xl)} .readme h2{font-size:var(--text-xl)}
.readme h3{font-size:var(--text-lg)} .readme h4,.readme h5,.readme h6{font-size:var(--text-md); color:var(--magenta-400)}
.readme h1::before,.readme h2::before{content:"// "; color:var(--accent-2); font-family:var(--font-mono); font-size:.7em}
.readme h1,.readme h2{border-bottom:1px solid var(--border-subtle); padding-bottom:var(--space-2)}
/* GitHub heading anchor link (the octicon) — keep unobtrusive */
.readme a.anchor{box-shadow:none; text-shadow:none}
.readme a.anchor svg{display:none}
.readme p{margin:0 0 var(--space-4); color:var(--text-secondary)}
.readme a{color:var(--accent-2); text-decoration:none; word-break:break-word}
.readme a:hover{text-shadow:var(--text-glow-cyan); text-decoration:underline}
.readme strong,.readme b{color:var(--white); font-weight:var(--fw-semibold)}
.readme em{color:var(--magenta-300)}
.readme ul,.readme ol{margin:0 0 var(--space-4); padding-left:var(--space-5)}
.readme li{margin:var(--space-1) 0; color:var(--text-secondary)}
.readme li::marker{color:var(--accent)}
.readme ul.contains-task-list{list-style:none; padding-left:var(--space-2)}
.readme .task-list-item{list-style:none}
.readme input[type=checkbox]{accent-color:var(--accent-2); margin-right:6px}
.readme blockquote{
  margin:var(--space-5) 0; padding:var(--space-3) var(--space-5);
  border-left:2px solid var(--accent); background:rgba(255,0,255,.06); color:var(--text-secondary);
}
.readme blockquote p:last-child{margin-bottom:0}
.readme hr{height:1px; border:0; margin:var(--space-6) 0; background:linear-gradient(90deg,var(--border-strong),transparent)}
/* inline code + code blocks */
.readme code{
  font-family:var(--font-mono); font-size:.9em; color:var(--cyan-300);
  background:rgba(0,255,255,.08); border:1px solid var(--border-cyan);
  padding:1px 6px; border-radius:4px; word-break:break-word;
}
.readme pre{
  background:var(--ink-950); border:1px solid var(--border-default);
  clip-path:var(--clip-chamfer); padding:var(--space-4) var(--space-5);
  margin:0 0 var(--space-5); overflow-x:auto; box-shadow:inset 0 0 0 1px rgba(0,255,255,.06);
}
.readme pre code{
  background:none; border:0; padding:0; color:var(--text-primary); font-size:var(--text-sm);
  white-space:pre; line-height:var(--leading-normal); word-break:normal;
}
/* tables */
.readme table{
  width:100%; border-collapse:collapse; margin:0 0 var(--space-5); font-size:var(--text-sm);
  display:block; overflow-x:auto; /* scroll wide tables instead of breaking the layout */
}
.readme th,.readme td{border:1px solid var(--border-subtle); padding:var(--space-2) var(--space-3); text-align:left}
.readme th{background:rgba(255,0,255,.10); color:var(--white); font-family:var(--font-ui); text-transform:uppercase; letter-spacing:var(--tracking-wide); font-size:var(--text-xs)}
.readme tr:nth-child(even) td{background:rgba(255,255,255,.02)}
/* images + badges */
.readme img{max-width:100%; height:auto; border-radius:var(--radius-sm)}
.readme p img,.readme a img{display:inline-block; vertical-align:middle; margin:2px 3px} /* badges/inline */
.readme img.emoji{display:inline; width:1.1em; height:1.1em; margin:0 .05em; vertical-align:-0.15em; border-radius:0}
.readme details{margin:0 0 var(--space-4)}
.readme summary{cursor:pointer; color:var(--accent-2); font-family:var(--font-mono); text-transform:uppercase; letter-spacing:var(--tracking-wide); font-size:var(--text-sm)}
.readme kbd{font-family:var(--font-mono); font-size:.85em; background:var(--surface-input); border:1px solid var(--border-default); border-radius:3px; padding:1px 5px}

/* ------------------------------------------------------------- GLITCH FX -- */
.glitch{position:relative; display:inline-block; animation:neon-flicker 5.5s infinite}
.glitch::before,.glitch::after{
  content:attr(data-text); position:absolute; inset:0; pointer-events:none;
  background:var(--bg-base);
}
.glitch::before{color:var(--cyan-500); animation:glitch-x 3s infinite steps(1); z-index:-1}
.glitch::after{color:var(--magenta-500); animation:glitch-y 2.6s infinite steps(1); z-index:-1}
@keyframes glitch-x{
  0%,78%,100%{transform:translate(0,0);clip-path:inset(0 0 0 0)}
  80%{transform:translate(-4px,-2px);clip-path:inset(8% 0 58% 0)}
  83%{transform:translate(4px,2px);clip-path:inset(62% 0 10% 0)}
  86%{transform:translate(-3px,0);clip-path:inset(32% 0 40% 0)}
  89%{transform:translate(5px,-1px);clip-path:inset(45% 0 22% 0)}
  92%{transform:translate(-2px,1px);clip-path:inset(12% 0 70% 0)}
}
@keyframes glitch-y{
  0%,74%,100%{transform:translate(0,0);clip-path:inset(0 0 0 0)}
  76%{transform:translate(4px,2px);clip-path:inset(48% 0 30% 0)}
  81%{transform:translate(-4px,-2px);clip-path:inset(14% 0 62% 0)}
  85%{transform:translate(3px,0);clip-path:inset(72% 0 6% 0)}
  90%{transform:translate(-5px,1px);clip-path:inset(28% 0 48% 0)}
}
/* neon tube flicker */
@keyframes neon-flicker{
  0%,100%{opacity:1} 92%{opacity:1} 92.5%{opacity:.35} 93%{opacity:1}
  93.5%{opacity:.6} 94%{opacity:1} 97%{opacity:1} 97.4%{opacity:.4} 97.8%{opacity:1}
}
.enter{opacity:0; transform:translateY(14px); animation:enter .7s var(--ease-out) forwards}
.enter.d1{animation-delay:.06s} .enter.d2{animation-delay:.14s}
.enter.d3{animation-delay:.22s} .enter.d4{animation-delay:.30s}
@keyframes enter{to{opacity:1; transform:translateY(0)}}

/* ================================================= TOKYO / GLITCH FX ==== */
/* CRT scanlines overlay (sits above everything, non-interactive) */
.fx-scanlines{
  position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.3;
  background:repeating-linear-gradient(0deg,
    rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,0,0,.18) 3px, rgba(0,0,0,0) 4px);
  mix-blend-mode:multiply;
}
/* a single neon scan-beam sweeping down the screen */
.fx-scanlines::after{
  content:""; position:absolute; left:0; right:0; height:180px;
  background:linear-gradient(180deg,transparent,rgba(0,255,255,.05) 45%,rgba(255,0,255,.06) 55%,transparent);
  mix-blend-mode:screen; animation:beam 7s linear infinite;
}
@keyframes beam{0%{top:-20%} 100%{top:120%}}
/* CRT vignette / edge darkening */
.fx-vignette{
  position:fixed; inset:0; z-index:59; pointer-events:none;
  background:radial-gradient(ellipse 120% 100% at 50% 45%,transparent 55%,rgba(0,0,0,.55) 100%);
}

/* Katakana / HUD ticker marquee */
.ticker{
  position:relative; overflow:hidden; white-space:nowrap;
  border-top:1px solid var(--border-subtle); border-bottom:1px solid var(--border-subtle);
  background:linear-gradient(90deg,rgba(255,0,255,.06),rgba(0,255,255,.06));
  padding:var(--space-2) 0;
}
.ticker-track{display:inline-block; animation:ticker 30s linear infinite; will-change:transform}
.ticker-track span{
  font-family:var(--font-mono); text-transform:uppercase; font-size:var(--text-xs);
  letter-spacing:var(--tracking-wider); color:var(--text-secondary); padding:0 var(--space-4);
}
.ticker-track span b{color:var(--accent-2); font-weight:400}
.ticker-track span i{color:var(--accent); font-style:normal}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* HUD corner brackets (drop into any position:relative container) */
.hud{position:relative}
.hud > .corner{position:absolute; width:26px; height:26px; pointer-events:none; opacity:.8}
.hud > .corner::before,.hud > .corner::after{content:""; position:absolute; background:var(--accent)}
.hud > .corner::before{width:100%; height:2px}
.hud > .corner::after{width:2px; height:100%}
.hud > .corner.cy::before,.hud > .corner.cy::after{background:var(--accent-2)}
.corner.tl{top:10px; left:10px} .corner.tl::before{top:0;left:0} .corner.tl::after{top:0;left:0}
.corner.tr{top:10px; right:10px} .corner.tr::before{top:0;right:0} .corner.tr::after{top:0;right:0}
.corner.bl{bottom:10px; left:10px} .corner.bl::before{bottom:0;left:0} .corner.bl::after{bottom:0;left:0}
.corner.br{bottom:10px; right:10px} .corner.br::before{bottom:0;right:0} .corner.br::after{bottom:0;right:0}

/* Fixed vertical side-rails (HUD readout down the screen edges) */
.rail{
  position:fixed; top:50%; z-index:40; pointer-events:none;
  font-family:var(--font-mono); text-transform:uppercase; font-size:var(--text-2xs);
  letter-spacing:var(--tracking-wider); color:var(--white-45);
  writing-mode:vertical-rl;
}
.rail b{color:var(--accent-2); font-weight:400}
.rail-l{left:14px; transform:translateY(-50%)}
.rail-r{right:14px; transform:translateY(-50%) rotate(180deg)}
@media (max-width:1180px){.rail{display:none}}

/* Blinking HUD cursor */
.cursor::after{content:"▮"; margin-left:.15em; color:var(--accent-2); animation:blink 1.1s steps(1) infinite}
@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}}

/* Scattered neon geometry in the hero */
.hero .spark{position:absolute; color:var(--accent-2); pointer-events:none; opacity:.5;
  font-family:var(--font-mono); animation:float 6s ease-in-out infinite}
.hero .spark.s1{top:16%; left:12%; color:var(--accent)}
.hero .spark.s2{top:30%; right:12%; animation-delay:1.2s}
.hero .spark.s3{bottom:24%; left:18%; animation-delay:2.4s; color:var(--accent)}
.hero .spark.s4{top:52%; right:20%; animation-delay:.6s}
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(8deg)}}

/* Repo-card glitch on hover — quick RGB split on the title */
.repo-card:hover .repo-name,.repo-card:focus-within .repo-name{
  animation:txt-glitch .45s steps(2,end) 1;
}
@keyframes txt-glitch{
  0%{text-shadow:0 0 0 transparent}
  25%{text-shadow:2px 0 0 var(--cyan-500),-2px 0 0 var(--magenta-500)}
  50%{text-shadow:-2px 0 0 var(--cyan-500),2px 0 0 var(--magenta-500)}
  75%{text-shadow:1px 0 0 var(--cyan-500),-1px 0 0 var(--magenta-500)}
  100%{text-shadow:0 0 8px rgba(255,0,255,.6)}
}
/* scanline shimmer sweep across a hovered card */
.repo-card::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0;
  background:linear-gradient(180deg,transparent,rgba(0,255,255,.06) 50%,transparent);
  transform:translateY(-100%); transition:opacity var(--dur-base) var(--ease-out);
}
.repo-card:hover::after{opacity:1; animation:card-scan 1.1s ease-in-out}
@keyframes card-scan{0%{transform:translateY(-100%)}100%{transform:translateY(100%)}}
/* HUD inventory index watermark on each card (sits behind content) */
.repo-idx{
  position:absolute; bottom:0; right:12px; z-index:-1; pointer-events:none;
  font-family:var(--font-mono); font-size:var(--text-4xl); line-height:1;
  color:var(--white); opacity:.06; letter-spacing:.04em; user-select:none;
}

/* ============================================== INTERACTIVITY / FX ====== */
/* scroll-reveal — hidden state ONLY while JS is active (content-safe without JS) */
.reveal-on .reveal{opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out)}
.reveal-on .reveal.in{opacity:1; transform:none}
.reveal.d1{transition-delay:.05s} .reveal.d2{transition-delay:.12s} .reveal.d3{transition-delay:.19s}

/* petal / ember canvas (ambient, behind content) */
.petals{position:fixed; inset:0; z-index:-1; pointer-events:none}

/* 3D tilt cards — holographic glare sheen */
[data-tilt]{transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out); transform-style:preserve-3d; will-change:transform}
[data-tilt].tilting{transition:box-shadow .3s var(--ease-out)}
.glare{
  position:absolute; inset:0; z-index:3; pointer-events:none; opacity:0;
  clip-path:inherit; border-radius:inherit; mix-blend-mode:screen;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),
    rgba(0,255,255,.28), rgba(255,0,255,.14) 34%, transparent 60%);
  transition:opacity .25s var(--ease-out);
}
[data-tilt].tilting .glare{opacity:1}

/* custom HUD cursor (fine pointers only) */
@media (hover:hover) and (pointer:fine){
  body.has-cur{cursor:none}
  body.has-cur a, body.has-cur button, body.has-cur .btn, body.has-cur [data-tilt]{cursor:none}
}
.cur-dot,.cur-ring{position:fixed; top:0; left:0; z-index:90; pointer-events:none; border-radius:50%;
  margin-left:-4px; margin-top:-4px; mix-blend-mode:screen}
.cur-dot{width:8px; height:8px; background:var(--accent-2); box-shadow:var(--glow-cyan-sm)}
.cur-ring{width:34px; height:34px; margin-left:-17px; margin-top:-17px; border:1.5px solid var(--accent);
  transition:width .2s var(--ease-out), height .2s var(--ease-out), border-color .2s, opacity .2s}
.cur-ring.hot{width:52px; height:52px; margin-left:-26px; margin-top:-26px; border-color:var(--accent-2); box-shadow:var(--glow-cyan-sm)}
.cur-ring.down{width:22px; height:22px; margin-left:-11px; margin-top:-11px}

/* boot-glitch intro overlay */
.boot{position:fixed; inset:0; z-index:120; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--space-3); background:var(--ink-1000); transition:opacity .5s var(--ease-out)}
.boot.out{opacity:0}
.boot-txt{font-family:var(--font-ui); font-weight:var(--fw-bold); font-size:clamp(32px,7vw,64px);
  letter-spacing:.06em; color:var(--white); position:relative; animation:boot-glitch .9s steps(2) infinite}
.boot-txt::before,.boot-txt::after{content:attr(data-text); position:absolute; inset:0}
.boot-txt::before{color:var(--accent-2); transform:translate(-3px,0)} .boot-txt::after{color:var(--accent); transform:translate(3px,0)}
.boot-sub{font-family:var(--font-mono); text-transform:uppercase; letter-spacing:var(--tracking-wider);
  font-size:var(--text-xs); color:var(--accent-2)}
@keyframes boot-glitch{0%,100%{clip-path:inset(0 0 0 0)}25%{clip-path:inset(20% 0 40% 0)}50%{clip-path:inset(55% 0 10% 0)}75%{clip-path:inset(35% 0 45% 0)}}

/* Konami hyper-mode hue cycle. NB: never put this filter on <body>/<html> —
   a filter on an ancestor turns it into the containing block for position:fixed
   descendants, which would rip #world / nav / the overdrive layers off the
   viewport. Apply it only to elements that have NO fixed descendants. */
@keyframes hyper{0%,100%{filter:none}50%{filter:hue-rotate(55deg) saturate(1.3)}}
body.overdrive #world{animation:hyper 6s linear infinite}
.konami-toast{position:fixed; left:50%; bottom:40px; transform:translateX(-50%); z-index:130;
  font-family:var(--font-mono); text-transform:uppercase; letter-spacing:var(--tracking-wide); font-size:var(--text-sm);
  color:var(--ink-1000); background:var(--accent); padding:var(--space-3) var(--space-5); clip-path:var(--clip-chamfer-sm);
  box-shadow:var(--glow-magenta); animation:enter .4s var(--ease-out)}

/* ============================================ KONAMI OVERDRIVE ========= */
/* full-screen katakana Matrix takeover */
.od-rain{position:fixed; inset:0; z-index:58; pointer-events:none; mix-blend-mode:screen; opacity:.6}
/* glitching オーバードライブ banner (reuses .glitch RGB-split ::before/::after) */
.od-banner{
  position:fixed; left:50%; top:15%; bottom:auto; transform:translate(-50%,-50%); z-index:62; pointer-events:none;
  font-family:var(--font-ui); font-weight:var(--fw-bold); font-size:clamp(28px,7vw,80px);
  letter-spacing:.05em; color:var(--white); white-space:nowrap; background:transparent;
  text-shadow:0 0 26px rgba(255,0,255,.85),0 0 8px rgba(0,255,255,.6);
  animation:od-bannerin .5s var(--ease-out) both, neon-flicker 3.4s infinite;
}
.od-banner::before,.od-banner::after{background:transparent}
@keyframes od-bannerin{
  from{opacity:0; transform:translate(-50%,-50%) scale(1.6); filter:blur(10px)}
  to{opacity:.9; transform:translate(-50%,-50%) scale(1); filter:blur(0)}
}
/* screen shake + hue cycle on the scrolling content (fixed nav/world stay put) */
body.overdrive main{animation:od-shake .26s steps(2,end) infinite, hyper 6s linear infinite}
@keyframes od-shake{
  0%{transform:translate(0,0)} 20%{transform:translate(-2px,1px)} 40%{transform:translate(2px,-1px)}
  60%{transform:translate(-1px,-2px)} 80%{transform:translate(2px,1px)} 100%{transform:translate(0,0)}
}
/* intensified CRT scanlines + faster scan-beam */
body.overdrive .fx-scanlines{opacity:.55}
body.overdrive .fx-scanlines::after{animation-duration:2.2s}
/* subtle full-screen RGB tear veil (low luminance swing → seizure-safe) */
body.overdrive::after{
  content:""; position:fixed; inset:0; z-index:61; pointer-events:none; mix-blend-mode:screen;
  background:repeating-linear-gradient(0deg,rgba(255,0,255,.05) 0 2px,transparent 2px 5px);
  animation:od-tear .22s steps(2,end) infinite;
}
@keyframes od-tear{0%{transform:translateY(0); opacity:.5} 50%{opacity:.32} 100%{transform:translateY(5px); opacity:.5}}

/* ================================================ JAPAN MOTIFS ========== */
.section{isolation:isolate}
/* Rising-sun rays + Fuji silhouette behind the repos section */
.repo-bg{position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none}
.rays{
  position:absolute; left:50%; top:-10%; width:160vw; aspect-ratio:1; transform:translateX(-50%);
  background:repeating-conic-gradient(from 0deg, rgba(255,0,255,.06) 0 4deg, transparent 4deg 11deg);
  border-radius:50%; animation:spin 120s linear infinite;
  -webkit-mask-image:radial-gradient(circle,#000 6%,transparent 58%);
  mask-image:radial-gradient(circle,#000 6%,transparent 58%);
}
@keyframes spin{to{transform:translateX(-50%) rotate(360deg)}}
.fuji{position:absolute; left:50%; bottom:-1px; width:min(820px,130vw); height:auto; transform:translateX(-50%); opacity:.55}

/* Seigaiha (青海波) wave band — graphical divider / ambient */
.seigaiha{
  height:56px; --w:rgba(0,255,255,.20); pointer-events:none;
  background:
    radial-gradient(circle at 50% 0,transparent 24%,var(--w) 25% 27%,transparent 28% 49%,var(--w) 50% 52%,transparent 53% 74%,var(--w) 75% 77%,transparent 78%) 0 0/64px 32px,
    radial-gradient(circle at 50% 0,transparent 24%,var(--w) 25% 27%,transparent 28% 49%,var(--w) 50% 52%,transparent 53% 74%,var(--w) 75% 77%,transparent 78%) 32px 16px/64px 32px;
  animation:wave-drift 26s linear infinite; opacity:.7;
}
.seigaiha.magenta{--w:rgba(255,0,255,.18)}
@keyframes wave-drift{to{background-position:64px 0,96px 16px}}

/* floating chōchin lanterns (impressum ambient) */
.lantern-field{position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none}
.lantern{position:absolute; width:34px; height:48px; opacity:.5; animation:bob 7s ease-in-out infinite}
.lantern::before{content:""; position:absolute; inset:4px 0; border-radius:50%/40%;
  background:radial-gradient(circle at 50% 35%, var(--magenta-400), var(--magenta-700));
  box-shadow:var(--glow-magenta-sm); border-top:2px solid var(--ink-1000); border-bottom:2px solid var(--ink-1000)}
.lantern::after{content:""; position:absolute; left:50%; top:-8px; width:1px; height:10px; background:var(--border-cyan); transform:translateX(-50%)}
.lantern.cy::before{background:radial-gradient(circle at 50% 35%, var(--cyan-400), var(--cyan-700)); box-shadow:var(--glow-cyan-sm)}
.lantern.l1{left:8%; top:18%; animation-delay:.2s} .lantern.l2{left:82%; top:26%; animation-delay:1.4s}
.lantern.l3{left:16%; top:64%; animation-delay:2.6s} .lantern.l4{left:88%; top:72%; animation-delay:3.4s}
.lantern.l5{left:70%; top:52%; animation-delay:.8s}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-16px) rotate(3deg)}}

/* ====================================== TELEMETRIE / DATA-VIZ ========== */
.stack-grid{
  display:grid; gap:var(--space-4);
  grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));
}
.panel{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--surface-card); border:1px solid var(--border-default);
  clip-path:var(--clip-chamfer); padding:var(--space-6) var(--space-5) var(--space-5);
}
.panel-title{
  font-family:var(--font-ui); font-size:var(--text-lg); text-transform:uppercase;
  letter-spacing:var(--tracking-wide); margin:0 0 var(--space-1);
}
.panel-sub{font-family:var(--font-mono); font-size:var(--text-xs); color:var(--text-muted); margin:0 0 var(--space-5)}

/* interactive language donut */
.donut-wrap{position:relative; width:min(280px,100%); margin:0 auto; aspect-ratio:1}
#lang-donut{width:100%; height:100%; display:block}
#lang-donut.hit{cursor:pointer}
.donut-center{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; pointer-events:none; text-align:center;
  padding:0 18%;
}
.donut-center .dc-num{
  font-family:var(--font-mono); font-size:var(--text-3xl); line-height:1;
  color:var(--accent-2); text-shadow:var(--text-glow-cyan);
}
.donut-center .dc-lbl{
  font-family:var(--font-mono); font-size:var(--text-2xs); text-transform:uppercase;
  letter-spacing:var(--tracking-wide); color:var(--text-muted); margin-top:var(--space-1);
  word-break:break-word;
}

/* chips — donut legend + repo filter */
.legend{display:flex; flex-wrap:wrap; gap:var(--space-2); justify-content:center; margin-top:var(--space-5)}
.filterbar{display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-5)}
.chip{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:var(--text-2xs); text-transform:uppercase;
  letter-spacing:var(--tracking-wide); color:var(--text-secondary);
  background:rgba(22,8,32,.6); border:1px solid var(--border-subtle);
  padding:6px 12px; clip-path:var(--clip-chamfer-sm); cursor:pointer;
  transition:color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
             background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.chip .sw{width:9px; height:9px; border-radius:2px; background:var(--accent); box-shadow:0 0 6px rgba(255,0,255,.6); flex:none}
.chip:hover{color:var(--white); border-color:var(--border-cyan)}
.chip.on{color:var(--ink-1000); background:var(--accent); border-color:var(--accent); box-shadow:var(--glow-magenta-sm)}
.chip.on .sw{background:var(--ink-1000); box-shadow:none}

/* top-repo neon bars */
.bars{display:flex; flex-direction:column; gap:var(--space-4); margin-top:var(--space-2)}
.bar-row{display:block; position:relative}
.bar-top{
  display:flex; justify-content:space-between; gap:var(--space-3);
  font-family:var(--font-mono); font-size:var(--text-xs); letter-spacing:var(--tracking-mono);
  margin-bottom:6px;
}
.bar-top .bn{color:var(--white); word-break:break-word}
.bar-top .bn i{color:var(--text-muted); font-style:normal}
.bar-top .bv{color:var(--accent-2); white-space:nowrap}
.bar-track{height:10px; background:rgba(255,255,255,.06); position:relative; overflow:hidden; border-radius:2px}
.bar-fill{
  height:100%; width:0;
  background:linear-gradient(90deg,var(--magenta-600),var(--magenta-500) 55%,var(--cyan-500));
  box-shadow:0 0 10px rgba(255,0,255,.5);
  transition:width 1s var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.bars.grow .bar-fill{width:var(--w,0%)}
a.bar-row:hover .bar-fill,a.bar-row:focus-visible .bar-fill{box-shadow:0 0 16px rgba(0,255,255,.75)}
a.bar-row:hover .bn{color:var(--magenta-300); text-shadow:var(--glitch-shadow)}

/* ============================= KITSUNE MORPH BAND (world morph target) === */
/* tall, mostly-empty band so the persistent world cloud — morphed from globe
   to kitsune — is the visual; only a heading + hint sit over it. */
.morph-band{
  position:relative; overflow:hidden; text-align:center;
  min-height:118vh; min-height:118svh;
  margin-top:var(--space-9); padding:var(--space-9) var(--space-5);
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  border-top:1px solid var(--border-subtle);
}
.morph-band .eyebrow{margin-bottom:var(--space-2)}
.morph-title{
  font-family:var(--font-ui); font-weight:var(--fw-bold); font-size:var(--text-3xl);
  letter-spacing:var(--tracking-tight); margin:0;
  text-shadow:0 0 18px rgba(255,0,255,.5),0 0 6px rgba(0,255,255,.35);
}
#morph-fallback{  /* only shown when the world is inactive (no WebGL / reduced motion) */
  margin:var(--space-7) auto 0; width:min(300px,62%); height:auto;
  filter:drop-shadow(0 0 26px rgba(255,0,255,.5)) drop-shadow(0 0 12px rgba(0,255,255,.35));
}
.morph-hint{
  position:absolute; left:0; right:0; bottom:var(--space-7);
  font-family:var(--font-mono); font-size:var(--text-2xs); text-transform:uppercase;
  letter-spacing:var(--tracking-wider); color:var(--text-muted); margin:0; user-select:none;
}
.morph-hint b{color:var(--accent-2); font-weight:400}

/* --------------------------------------------------------------- MOBILE -- */
@media (max-width:640px){
  .panel{padding:var(--space-5) var(--space-4)}
  .morph-band{min-height:104vh; min-height:104svh; padding:var(--space-8) var(--space-4)}
  .nav{padding:var(--space-3) var(--space-4)}
  .nav-links a{padding:var(--space-2)}
  .nav-brand .nav-wordmark{display:none}
  .section{padding:var(--space-8) 0}
  .footer .fwrap{flex-direction:column; gap:var(--space-5)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .enter{opacity:1; transform:none}
}