/* ══════════════════════════════════════════════════════════
   TOGE_INUMAKI — PORTFOLIO · MAIN CSS
   Author  : Lionel
   Version : 2.0.0
   ══════════════════════════════════════════════════════════ */

/* ── DESIGN TOKENS ── */
:root {
  --bg:              #060608;
  --bg-2:            #0c0c14;
  --bg-3:            #111120;
  --surface:         rgba(255,255,255,.035);
  --surface-hover:   rgba(255,255,255,.065);
  --border:          rgba(255,255,255,.07);
  --border-soft:     rgba(255,255,255,.04);
  --border-accent:   rgba(124,58,237,.30);
  --text-1:          #eeeef8;
  --text-2:          #9090b0;
  --text-3:          #50506a;
  --violet:          #7c3aed;
  --violet-mid:      #8b5cf6;
  --violet-light:    #a78bfa;
  --violet-glow:     rgba(124,58,237,.22);
  --cyan:            #06b6d4;
  --cyan-mid:        #22d3ee;
  --cyan-light:      #67e8f9;
  --cyan-glow:       rgba(6,182,212,.20);
  --emerald:         #10b981;
  --emerald-light:   #34d399;
  --emerald-glow:    rgba(16,185,129,.18);
  --red:             #ef4444;
  --yellow:          #f59e0b;
  --radius-sm:       6px;
  --radius-md:       10px;
  --radius-lg:       16px;
  --radius-xl:       24px;
  --radius-full:     9999px;
  --font-sans:       'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono:       'JetBrains Mono', ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
  --shadow-sm:       0 1px 3px rgba(0,0,0,.5);
  --shadow-md:       0 4px 16px rgba(0,0,0,.6);
  --shadow-lg:       0 8px 32px rgba(0,0,0,.7);
  --shadow-violet:   0 0 24px rgba(124,58,237,.30);
  --shadow-cyan:     0 0 24px rgba(6,182,212,.25);
  --ease-out-expo:   cubic-bezier(.16,1,.3,1);
  --ease-spring:     cubic-bezier(.34,1.56,.64,1);
  --t-fast:          150ms;
  --t-base:          250ms;
  --t-slow:          450ms;
  --nav-h:           72px;
}

/* ── RESET ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
}
body {
  background: var(--bg);
  color: var(--text-1);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100vh;
  cursor: none;
}
img, video { max-width:100%; display:block; }
button { cursor: none; font-family: inherit; border: none; background: none; }
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
::-webkit-scrollbar          { width: 3px; }
::-webkit-scrollbar-track    { background: var(--bg); }
::-webkit-scrollbar-thumb    { background: var(--violet-mid); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--cyan-mid); }
::selection { background: rgba(124,58,237,.35); color: #fff; }
:focus-visible {
  outline: 2px solid var(--violet-mid);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ── UTILITY ── */
.hidden { display: none !important; }

/* ══════════════════════════════════════════════════════════
   CURSOR
══════════════════════════════════════════════════════════ */
.cursor { position: fixed; top:0; left:0; z-index:9999; pointer-events:none; }
.cursor-dot {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--violet-light);
  transform: translate(-50%,-50%);
  transition: width var(--t-fast), height var(--t-fast), background var(--t-fast);
  will-change: transform;
}
.cursor-ring {
  position: absolute;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1.5px solid rgba(124,58,237,.55);
  transform: translate(-50%,-50%);
  transition: width var(--t-base), height var(--t-base), border-color var(--t-base);
  will-change: transform;
}
.cursor.pressed .cursor-dot   { width: 10px; height: 10px; }
.cursor.pressed .cursor-ring  { transform: translate(-50%,-50%) scale(.75); }
.cursor.hovering .cursor-dot  { width: 8px; height: 8px; background: var(--cyan-mid); }
.cursor.hovering .cursor-ring {
  width: 48px; height: 48px;
  border-color: rgba(34,211,238,.55);
  background: rgba(34,211,238,.05);
}

/* ══════════════════════════════════════════════════════════
   LOADER
══════════════════════════════════════════════════════════ */
.loader {
  position: fixed; inset: 0; z-index: 8000;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .6s ease;
}
.loader-inner {
  width: min(480px, 90vw);
  display: flex; flex-direction: column; gap: 1.25rem;
}
.loader-logo {
  font-family: var(--font-mono);
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: 700;
  color: var(--cyan-mid);
  letter-spacing: .12em;
  text-shadow: 0 0 20px var(--cyan), 0 0 60px rgba(6,182,212,.35);
  animation: flicker 8s infinite;
  user-select: none;
}
.loader-logo span { color: var(--violet-light); }

.loader-terminal {
  background: rgba(0,0,0,.6);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  min-height: 9rem;
  max-height: 9rem;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: .78rem;
}
.loader-lines { display: flex; flex-direction: column; gap: .3rem; }
.loader-done-line {
  display: flex; align-items: center; gap: .6rem;
  color: var(--text-3);
  animation: fade-in .2s ease;
}
.lp-check  { color: var(--emerald); font-size: .8rem; }
.lp-text   { color: var(--text-2); }
.loader-prompt {
  display: flex; align-items: center; gap: .5rem;
  margin-top: .4rem;
  color: var(--text-1);
}
.lp-arrow  { color: var(--violet-light); }
.lp-cursor {
  color: var(--cyan-mid);
  animation: blink .9s step-end infinite;
  font-size: .9rem;
}

.loader-bar-wrap {
  display: flex; align-items: center; gap: 1rem;
}
.loader-bar-track {
  flex: 1; height: 2px;
  background: var(--border);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.loader-bar-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--violet), var(--cyan-mid));
  border-radius: var(--radius-full);
  box-shadow: 0 0 8px var(--violet-mid);
  transition: width .05s linear;
}
.loader-pct {
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--text-3);
  min-width: 2.8rem;
  text-align: right;
}
.loader-status {
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .2em;
  color: var(--text-3);
  text-transform: uppercase;
}

/* ══════════════════════════════════════════════════════════
   BACKGROUND LAYERS
══════════════════════════════════════════════════════════ */
.bg-noise {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size: 200px;
}
.bg-grid {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: .038;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
}
.bg-orbs {
  position: fixed; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none;
}
.orb {
  position: absolute; border-radius: 50%;
  filter: blur(80px);
  will-change: transform;
}
.orb-1 {
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(124,58,237,.18) 0%, transparent 65%);
  top: -15%; left: -10%;
  animation: orb1 22s ease-in-out infinite;
}
.orb-2 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(6,182,212,.14) 0%, transparent 65%);
  bottom: -5%; right: -8%;
  animation: orb2 26s ease-in-out infinite;
}
.orb-3 {
  width: 450px; height: 450px;
  background: radial-gradient(circle, rgba(124,58,237,.10) 0%, transparent 65%);
  top: 45%; left: 45%;
  animation: orb3 19s ease-in-out infinite;
}
.orb-4 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(16,185,129,.08) 0%, transparent 65%);
  top: 70%; left: 15%;
  animation: orb1 30s ease-in-out infinite reverse;
}
.particles-canvas {
  position: fixed; inset: 0; z-index: 1;
  pointer-events: none; opacity: .6;
}
.mouse-glow {
  position: fixed; z-index: 2; pointer-events: none;
  width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, rgba(124,58,237,.07) 0%, rgba(6,182,212,.04) 40%, transparent 70%);
  transform: translate(-50%,-50%);
  left: 0; top: 0;
  will-change: transform;
}
.scroll-progress {
  position: fixed; top: 0; left: 0; z-index: 200;
  height: 2px; width: 100%;
  background: linear-gradient(90deg, var(--violet), var(--cyan-mid));
  transform-origin: left;
  transform: scaleX(0);
  box-shadow: 0 0 6px var(--violet-mid);
}

/* ══════════════════════════════════════════════════════════
   NAVIGATION
══════════════════════════════════════════════════════════ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(1rem, 4vw, 3rem);
  background: linear-gradient(to bottom, rgba(6,6,8,.85) 0%, transparent 100%);
  backdrop-filter: blur(12px) saturate(1.5);
  -webkit-backdrop-filter: blur(12px) saturate(1.5);
  border-bottom: 1px solid var(--border-soft);
}
.nav-logo {
  font-family: var(--font-mono);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--violet-light);
  text-transform: uppercase;
  transition: color var(--t-base);
  user-select: none;
}
.nav-logo:hover { color: #fff; }
.nav-logo-accent { color: var(--cyan-mid); }

.nav-center { display: flex; align-items: center; }
.nav-pill {
  display: flex; align-items: center;
  padding: .35rem .5rem;
  border-radius: var(--radius-full);
  gap: .25rem;
  position: relative;
}
.glass {
  background: rgba(10,10,20,.65);
  border: 1px solid var(--border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.nav-indicator {
  position: absolute; left: .5rem;
  height: calc(100% - .7rem);
  background: rgba(124,58,237,.20);
  border: 1px solid rgba(124,58,237,.35);
  border-radius: var(--radius-full);
  transition: transform var(--t-slow) var(--ease-out-expo), width var(--t-slow) var(--ease-out-expo);
  pointer-events: none;
  z-index: 0;
}
.nav-link {
  position: relative; z-index: 1;
  padding: .4rem .85rem;
  border-radius: var(--radius-full);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-2);
  transition: color var(--t-base);
  white-space: nowrap;
}
.nav-link:hover    { color: var(--text-1); }
.nav-link.active   { color: #fff; font-weight: 700; }

.nav-right { display: flex; align-items: center; gap: 1rem; }
.nav-status {
  display: flex; align-items: center; gap: .45rem;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  color: var(--emerald-light);
  text-transform: uppercase;
}
.status-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--emerald);
  box-shadow: 0 0 6px var(--emerald);
  animation: pulse-dot 2.5s ease-in-out infinite;
}

/* ══════════════════════════════════════════════════════════
   REVEAL ANIMATION
══════════════════════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity .65s var(--ease-out-expo) var(--d, 0s),
    transform .65s var(--ease-out-expo) var(--d, 0s);
}
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ══════════════════════════════════════════════════════════
   SECTIONS — COMMON
══════════════════════════════════════════════════════════ */
.app    { position: relative; z-index: 3; }
main    { position: relative; z-index: 10; }
.section {
  position: relative;
  padding: calc(var(--nav-h) + 4rem) clamp(1rem, 4vw, 2.5rem) 6rem;
  min-height: 100vh;
}

.container-narrow { max-width: 62rem;  margin: 0 auto; }
.container-wide   { max-width: 88rem;  margin: 0 auto; }
.container-form   { max-width: 42rem;  margin: 0 auto; }

.section-header { margin-bottom: 3.5rem; }
.section-eyebrow {
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--violet-light);
  letter-spacing: .22em;
  text-transform: uppercase;
  margin-bottom: .6rem;
}
.section-title {
  font-size: clamp(2.2rem, 5vw, 4rem);
  font-weight: 900;
  color: #fff;
  letter-spacing: -.02em;
  line-height: 1.05;
  margin-bottom: 1.25rem;
}
.accent-v { color: var(--violet-light); }
.accent-c { color: var(--cyan-mid); }
.section-line {
  height: 1px; width: 4rem;
  background: linear-gradient(90deg, var(--violet-mid), transparent);
}
.section-sub {
  color: var(--text-2);
  font-size: 1rem;
  margin-top: 1rem;
  line-height: 1.6;
}

/* ── Glass Card ── */
.glass-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  position: relative;
  overflow: hidden;
  transition:
    border-color var(--t-slow),
    box-shadow var(--t-slow),
    transform var(--t-slow) var(--ease-out-expo);
}
.glass-card:hover {
  border-color: rgba(124,58,237,.28);
  box-shadow: var(--shadow-violet), var(--shadow-lg);
}

/* Shimmer border on hover */
.shimmer { position: relative; }
.shimmer::after {
  content: '';
  position: absolute; inset: -1px;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--violet-mid), var(--cyan-mid), var(--violet-mid));
  background-size: 300% 100%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 1px;
  opacity: 0;
  animation: shimmer-move 2.5s linear infinite;
  transition: opacity var(--t-slow);
  pointer-events: none;
  z-index: 0;
}
.shimmer:hover::after { opacity: 1; }

/* ══════════════════════════════════════════════════════════
   HOME SECTION
══════════════════════════════════════════════════════════ */
.section-home {
  display: flex; flex-direction: column;
  justify-content: center;
  padding-top: var(--nav-h);
  min-height: 100vh;
}
.home-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
  align-items: center;
  max-width: 88rem;
  margin: 0 auto;
  width: 100%;
}
@media (min-width: 900px) {
  .home-grid { grid-template-columns: 1fr 1fr; }
}

/* Badge */
.badge-available {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .45rem 1rem;
  border-radius: var(--radius-full);
  border: 1px solid rgba(16,185,129,.28);
  background: rgba(16,185,129,.08);
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--emerald-light);
  margin-bottom: 1.75rem;
  width: fit-content;
}
.badge-ping-wrap {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 8px; height: 8px;
}
.badge-ping {
  position: absolute; inset: -3px;
  border-radius: 50%;
  background: var(--emerald);
  opacity: .7;
  animation: ping 2s ease-in-out infinite;
}
.badge-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--emerald);
  box-shadow: 0 0 5px var(--emerald);
}

/* Name */
.hero-name {
  font-size: clamp(4rem, 11vw, 9rem);
  font-weight: 900;
  line-height: .9;
  letter-spacing: -.04em;
  color: #fff;
  margin-bottom: .5rem;
  user-select: none;
}
.glitch { position: relative; display: inline-block; }
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute; inset: 0;
  font: inherit; color: inherit; letter-spacing: inherit;
}
.glitch::before {
  color: var(--cyan-mid);
  animation: glitch-a 4s infinite linear;
  clip-path: inset(0 0 0 0);
  opacity: .65;
}
.glitch::after {
  color: var(--violet-light);
  animation: glitch-b 4s infinite linear;
  opacity: .65;
}
.glitch:hover::before { animation-duration: .4s; }
.glitch:hover::after  { animation-duration: .4s; }

/* Handle */
.hero-handle {
  font-family: var(--font-mono);
  font-size: clamp(.9rem, 2.2vw, 1.35rem);
  letter-spacing: .18em;
  color: var(--violet-light);
  margin-bottom: .9rem;
}
.handle-bracket { color: var(--text-3); }
.handle-text { color: var(--violet-light); }

/* Role */
.hero-role {
  font-family: var(--font-mono);
  font-size: clamp(.8rem, 1.8vw, 1rem);
  color: var(--text-2);
  letter-spacing: .12em;
  margin-bottom: 1.75rem;
}
.role-tag { color: var(--cyan-mid); }
.role-text { color: var(--text-2); margin: 0 .3rem; }

/* Typewriter */
.typewriter-wrap {
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--font-mono);
  font-size: clamp(.85rem, 2vw, 1.05rem);
  margin-bottom: 2.5rem;
  min-height: 1.8rem;
}
.tw-prefix { color: var(--emerald-light); }
.tw-text   { color: var(--cyan-light); }
.tw-cursor {
  display: inline-block;
  width: 2px; height: 1.15em;
  background: var(--cyan-mid);
  margin-left: 2px;
  animation: blink .9s step-end infinite;
  vertical-align: text-bottom;
}

/* Stats */
.hero-stats {
  display: flex; align-items: center; gap: 1.5rem;
  margin-bottom: 2.5rem;
}
.stat-item { display: flex; flex-direction: column; gap: .15rem; }
.stat-num {
  font-size: 1.6rem; font-weight: 900;
  color: #fff; line-height: 1;
  background: linear-gradient(135deg, var(--violet-light), var(--cyan-mid));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.stat-label {
  font-family: var(--font-mono);
  font-size: .65rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-3);
}
.stat-sep {
  font-family: var(--font-mono);
  color: var(--border-accent);
  font-size: .9rem;
  align-self: center;
}

/* CTA */
.hero-cta { display: flex; flex-wrap: wrap; gap: .9rem; }

.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .85rem 1.75rem;
  border-radius: var(--radius-md);
  font-size: .85rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  transition:
    transform var(--t-base) var(--ease-spring),
    box-shadow var(--t-base),
    background var(--t-base),
    border-color var(--t-base);
  will-change: transform;
  white-space: nowrap;
}
.btn:active { transform: scale(.96) !important; }
.btn-text  { position: relative; z-index: 1; }
.btn-icon  { font-size: 1rem; transition: transform var(--t-base); }
.btn:hover .btn-icon { transform: translateX(3px); }

.btn-primary {
  background: linear-gradient(135deg, var(--violet) 0%, #6d28d9 100%);
  color: #fff;
  border: 1px solid rgba(124,58,237,.5);
  box-shadow: 0 0 20px rgba(124,58,237,.35), 0 4px 12px rgba(0,0,0,.4);
}
.btn-primary:hover {
  box-shadow: 0 0 36px rgba(124,58,237,.60), 0 8px 24px rgba(0,0,0,.5);
}
.btn-ghost {
  background: transparent;
  color: var(--text-1);
  border: 1px solid var(--border);
}
.btn-ghost:hover {
  border-color: rgba(124,58,237,.45);
  background: rgba(124,58,237,.08);
}

/* Scroll indicator */
.scroll-indicator {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  margin-top: 4rem;
  align-self: center;
}
.scroll-line {
  width: 1px; height: 48px;
  background: linear-gradient(to bottom, transparent, var(--violet-mid), transparent);
  animation: scroll-drift 2s ease-in-out infinite;
}
.scroll-label {
  font-family: var(--font-mono);
  font-size: .62rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--text-3);
  writing-mode: horizontal-tb;
}

/* ── Avatar ── */
.home-right {
  display: flex; align-items: center; justify-content: center;
}
.avatar-scene {
  position: relative;
  width: clamp(260px, 40vw, 380px);
  height: clamp(260px, 40vw, 380px);
  transform-style: preserve-3d;
  transition: transform .4s var(--ease-out-expo);
  cursor: none;
}
.avatar-glow {
  position: absolute; inset: -20%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, rgba(124,58,237,.20), rgba(6,182,212,.12) 50%, transparent 70%);
  filter: blur(30px);
  animation: glow-pulse 4s ease-in-out infinite;
}
.avatar-ring-outer {
  position: absolute; inset: -8%;
  border-radius: 50%;
  border: 1px solid rgba(124,58,237,.22);
  background: transparent;
}
.avatar-ring-inner {
  position: absolute; inset: 8px;
  border-radius: 50%;
  border: 1px dashed rgba(34,211,238,.15);
  animation: spin-rev 12s linear infinite;
}
.avatar-ring-mid {
  position: absolute; inset: 3%;
  border-radius: 50%;
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    conic-gradient(from 0deg, var(--violet), var(--cyan-mid), var(--violet)) border-box;
}
.avatar-frame {
  position: absolute; inset: 5%;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid rgba(10,10,20,.8);
  background: var(--bg-2);
}
.avatar-img {
  width: 100%; height: 100%;
  object-fit: cover; border-radius: 50%;
}
.avatar-fallback {
  display: none;
  width: 100%; height: 100%;
  align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 3.5rem; font-weight: 900;
  color: var(--violet-light);
  background: linear-gradient(135deg, rgba(124,58,237,.15), rgba(6,182,212,.10));
}

/* Floating badges */
.avatar-badge-tl,
.avatar-badge-tr,
.avatar-badge-bl,
.avatar-badge-br {
  position: absolute;
  font-family: var(--font-mono);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .1em;
  padding: .3rem .65rem;
  border-radius: var(--radius-sm);
  background: rgba(10,10,20,.85);
  border: 1px solid var(--border);
  color: var(--text-2);
  backdrop-filter: blur(8px);
  pointer-events: none;
}
.avatar-badge-tl { top: 12%; left: -8%;  border-color: rgba(124,58,237,.35); color: var(--violet-light); animation: float-badge 3.5s ease-in-out infinite; }
.avatar-badge-tr { top: 12%; right: -8%; border-color: rgba(34,211,238,.35); color: var(--cyan-light);   animation: float-badge 4.2s ease-in-out infinite reverse; }
.avatar-badge-bl { bottom: 16%; left: -10%; border-color: rgba(16,185,129,.35); color: var(--emerald-light); animation: float-badge 3.8s ease-in-out infinite .5s; }
.avatar-badge-br { bottom: 16%; right: -10%; border-color: rgba(245,158,11,.35); color: #fbbf24; animation: float-badge 4.5s ease-in-out infinite 1s; }

/* ══════════════════════════════════════════════════════════
   ABOUT SECTION
══════════════════════════════════════════════════════════ */
.section-about { padding-top: calc(var(--nav-h) + 4rem); }
.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 900px) {
  .about-grid { grid-template-columns: 1.1fr 1fr; gap: 2rem; }
}
.about-bio { padding: 0 0 1.5rem; }

/* Terminal chrome */
.terminal-header {
  display: flex; align-items: center; gap: .45rem;
  padding: .8rem 1.25rem;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 0;
}
.t-dot {
  width: 11px; height: 11px; border-radius: 50%;
}
.t-red    { background: #ff5f57; }
.t-yellow { background: #ffbd2e; }
.t-green  { background: #28c841; }
.t-title {
  font-family: var(--font-mono);
  font-size: .68rem; color: var(--text-3);
  margin-left: .5rem;
  letter-spacing: .04em;
}
.terminal-body {
  padding: 1.25rem 1.5rem;
  font-family: var(--font-mono);
  font-size: .83rem;
  line-height: 1.75;
}
.t-line { display: flex; align-items: flex-start; gap: .5rem; }
.t-blank { height: .6rem; }
.t-prompt { color: var(--violet-light); font-weight: 700; flex-shrink: 0; }
.t-key    { color: var(--cyan-light); }
.t-string { color: #fbbf24; }
.t-output {
  color: var(--text-2);
  flex: 1;
  padding-left: 1.5rem;
}
.t-paragraph { display: block; padding-left: 1.5rem; }
.t-comment { color: var(--text-3); font-style: italic; }
.t-violet  { color: var(--violet-light); font-style: italic; }
.t-cursor-inline {
  display: inline-block;
  color: var(--violet-light);
  animation: blink .9s step-end infinite;
}

/* About right */
.about-right { display: flex; flex-direction: column; gap: 1.5rem; }
.card-title {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--font-mono);
  font-size: .8rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--cyan-mid);
  margin-bottom: 1.25rem;
}
.card-title-icon { color: var(--violet-light); font-size: .9rem; }

/* Skills grid */
.skills-grid {
  display: flex; flex-wrap: wrap; gap: .5rem;
}
.skill-chip {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .35rem .75rem;
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-sm);
  background: rgba(124,58,237,.07);
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--violet-light);
  transition: all var(--t-base);
  opacity: 0;
}
.skill-chip:hover {
  border-color: rgba(34,211,238,.45);
  color: var(--cyan-light);
  background: rgba(34,211,238,.08);
  transform: translateY(-2px);
}
.skill-level {
  font-size: .65rem; color: var(--text-3);
  font-weight: 500;
}

/* Expertise bars */
.expertise-list { display: flex; flex-direction: column; gap: 1rem; }
.expertise-item { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: .75rem; }
.exp-label {
  font-family: var(--font-mono);
  font-size: .75rem; color: var(--text-2);
  white-space: nowrap;
}
.exp-bar-wrap {
  flex: 1; height: 3px;
  background: rgba(255,255,255,.06);
  border-radius: var(--radius-full); overflow: hidden;
}
.exp-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--violet), var(--cyan-mid));
  border-radius: var(--radius-full);
  width: 0%;
  box-shadow: 0 0 6px var(--violet-mid);
}
.exp-pct {
  font-family: var(--font-mono);
  font-size: .68rem; color: var(--text-3);
  min-width: 2.2rem; text-align: right;
}

/* ══════════════════════════════════════════════════════════
   PROJECTS SECTION
══════════════════════════════════════════════════════════ */
.section-projects { padding-top: calc(var(--nav-h) + 4rem); }

/* Filters */
.projects-filters {
  display: flex; flex-wrap: wrap; gap: .6rem;
  margin-bottom: 2.5rem;
}
.filter-btn {
  display: flex; align-items: center; gap: .45rem;
  padding: .5rem 1.1rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: .72rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-2);
  transition: all var(--t-base);
}
.filter-btn:hover {
  border-color: rgba(124,58,237,.4);
  color: var(--text-1);
  background: rgba(124,58,237,.08);
}
.filter-btn.active {
  border-color: rgba(124,58,237,.55);
  color: var(--violet-light);
  background: rgba(124,58,237,.15);
  box-shadow: 0 0 14px rgba(124,58,237,.20);
}
.filter-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,.08);
  font-size: .62rem;
  color: var(--text-3);
}
.filter-btn.active .filter-count {
  background: rgba(124,58,237,.3);
  color: var(--violet-light);
}

/* Grid */
.projects-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 640px)  { .projects-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1100px) { .projects-grid { grid-template-columns: repeat(4,1fr); } }

/* Card */
.proj-card {
  padding: 0;
  display: flex; flex-direction: column;
  transform-style: preserve-3d;
  transition:
    transform .35s var(--ease-out-expo),
    border-color var(--t-slow),
    box-shadow var(--t-slow);
  animation: fade-up .55s var(--ease-out-expo) both;
}
.proj-card:hover {
  border-color: rgba(124,58,237,.32);
  box-shadow: 0 0 28px rgba(124,58,237,.18), 0 12px 40px rgba(0,0,0,.6);
}
.proj-inner {
  display: flex; flex-direction: column; justify-content: space-between;
  height: 100%; padding: 1.5rem;
  position: relative; z-index: 1;
}
.proj-top    { flex: 1; }
.proj-bottom { margin-top: 1.25rem; }
.proj-glow {
  position: absolute; inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}

.proj-meta {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .75rem;
}
.proj-type {
  font-family: var(--font-mono);
  font-size: .62rem; font-weight: 700; letter-spacing: .12em;
  padding: .2rem .6rem; border-radius: var(--radius-sm);
  border: 1px solid;
}
.type-WEB     { color: var(--violet-light); border-color: rgba(124,58,237,.40); background: rgba(124,58,237,.10); }
.type-API     { color: var(--cyan-light);   border-color: rgba(34,211,238,.40); background: rgba(34,211,238,.08); }
.type-BOT     { color: var(--emerald-light);border-color: rgba(16,185,129,.40); background: rgba(16,185,129,.08); }
.proj-gh-badge {
  font-family: var(--font-mono);
  font-size: .6rem; letter-spacing: .1em;
  color: var(--text-3);
}

.proj-name {
  font-size: 1rem; font-weight: 800;
  color: #fff; font-family: var(--font-mono);
  letter-spacing: .05em;
  margin-bottom: .5rem;
  transition: color var(--t-base);
}
.proj-card:hover .proj-name { color: var(--violet-light); }
.proj-desc {
  font-size: .82rem; color: var(--text-2);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.proj-tags {
  display: flex; flex-wrap: wrap; gap: .35rem;
  margin-bottom: 1rem;
}
.proj-tag {
  font-family: var(--font-mono);
  font-size: .62rem;
  padding: .15rem .5rem;
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  color: var(--text-3);
  background: rgba(0,0,0,.4);
}
.proj-link {
  display: flex; align-items: center; justify-content: center; gap: .45rem;
  width: 100%; padding: .6rem;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  color: var(--text-2);
  text-transform: uppercase;
  transition: all var(--t-base);
}
.proj-link:hover {
  background: rgba(124,58,237,.18);
  border-color: rgba(124,58,237,.5);
  color: var(--violet-light);
}

/* ══════════════════════════════════════════════════════════
   CONTACT SECTION
══════════════════════════════════════════════════════════ */
.section-contact { padding-top: calc(var(--nav-h) + 4rem); }

.contact-info {
  display: flex; flex-direction: column; gap: .75rem;
  margin-bottom: 2rem;
}
.contact-method {
  display: flex; align-items: center; gap: .85rem;
  padding: .85rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text-2);
  font-size: .875rem;
  transition: all var(--t-base);
  text-decoration: none;
}
.contact-method:hover {
  border-color: rgba(124,58,237,.4);
  color: var(--text-1);
  background: rgba(124,58,237,.08);
  transform: translateX(4px);
}
.cm-icon {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--radius-sm);
  background: rgba(124,58,237,.1);
  border: 1px solid rgba(124,58,237,.2);
  color: var(--violet-light);
  flex-shrink: 0;
}
.cm-text { flex: 1; font-family: var(--font-mono); font-size: .82rem; }
.cm-arrow { color: var(--text-3); font-size: .9rem; transition: transform var(--t-base); }
.contact-method:hover .cm-arrow { transform: translate(2px,-2px); color: var(--violet-light); }

/* Contact card */
.contact-card { padding: 0; }
.contact-deco-1 {
  position: absolute; top: -4rem; right: -4rem;
  width: 18rem; height: 18rem; border-radius: 50%;
  background: radial-gradient(circle, rgba(6,182,212,.07) 0%, transparent 65%);
  filter: blur(40px); pointer-events: none;
}
.contact-deco-2 {
  position: absolute; bottom: -4rem; left: -4rem;
  width: 14rem; height: 14rem; border-radius: 50%;
  background: radial-gradient(circle, rgba(124,58,237,.07) 0%, transparent 65%);
  filter: blur(40px); pointer-events: none;
}
.contact-form { padding: 1.5rem 1.75rem; }

/* Form */
.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}
@media (min-width: 540px) { .form-row { grid-template-columns: 1fr 1fr; } }
.form-group { margin-bottom: 1rem; }
.form-label {
  display: flex; align-items: center; gap: .4rem;
  font-family: var(--font-mono);
  font-size: .68rem; letter-spacing: .18em;
  color: var(--cyan-mid);
  margin-bottom: .55rem;
  text-transform: uppercase;
}
.label-prefix { color: var(--violet-light); font-size: .75rem; }
.input-wrap { position: relative; }
.form-input,
.form-textarea {
  width: 100%;
  background: rgba(0,0,0,.45);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: .8rem 1rem;
  color: var(--text-1);
  font-family: var(--font-mono);
  font-size: .85rem;
  transition: border-color var(--t-base), box-shadow var(--t-base);
  outline: none;
}
.form-input::placeholder,
.form-textarea::placeholder { color: var(--text-3); font-style: italic; }
.form-input:focus,
.form-textarea:focus {
  border-color: rgba(34,211,238,.5);
  box-shadow: 0 0 0 3px rgba(34,211,238,.08), 0 0 14px rgba(34,211,238,.12);
}
.input-focus-bar {
  position: absolute; bottom: 0; left: .5rem; right: .5rem;
  height: 1px;
  background: linear-gradient(90deg, var(--violet), var(--cyan-mid));
  border-radius: var(--radius-full);
  transform: scaleX(0);
  transition: transform var(--t-base) var(--ease-out-expo);
}
.form-input:focus ~ .input-focus-bar,
.form-textarea:focus ~ .input-focus-bar { transform: scaleX(1); }
.form-textarea { resize: none; min-height: 8rem; line-height: 1.6; }

/* Submit */
.btn-submit {
  width: 100%;
  padding: 1rem 1.5rem;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--violet) 0%, #6d28d9 50%, var(--cyan) 100%);
  background-size: 200% 100%;
  background-position: 0% 0%;
  color: #fff;
  font-family: var(--font-mono);
  font-size: .82rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  border: none;
  box-shadow: 0 0 20px rgba(124,58,237,.35), 0 4px 16px rgba(0,0,0,.4);
  transition: all var(--t-base);
}
.btn-submit:hover {
  background-position: 100% 0%;
  box-shadow: 0 0 36px rgba(124,58,237,.55), 0 8px 28px rgba(0,0,0,.5);
  transform: translateY(-1px);
}
.btn-submit:active { transform: translateY(0) scale(.98); }
.btn-submit:disabled { opacity: .75; cursor: wait; transform: none; }
.submit-label,
.submit-spinner { display: flex; align-items: center; justify-content: center; gap: .65rem; }
.spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,.25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin-loader .7s linear infinite;
}

/* Success */
.success-block {
  padding: 3rem 1.75rem 2.5rem;
  text-align: center;
}
.success-icon {
  display: flex; align-items: center; justify-content: center;
  width: 72px; height: 72px;
  border-radius: 50%;
  background: rgba(16,185,129,.1);
  border: 1px solid rgba(16,185,129,.3);
  color: var(--emerald-light);
  margin: 0 auto 1.5rem;
  animation: scale-in .4s var(--ease-spring) both;
}
.success-title {
  font-size: 1.35rem; font-weight: 800;
  color: #fff; margin-bottom: .5rem;
  font-family: var(--font-mono);
}
.success-msg {
  font-size: .875rem; color: var(--text-2);
  line-height: 1.6;
}

/* ══════════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════════ */
.footer {
  position: relative; z-index: 10;
  border-top: 1px solid var(--border-soft);
  padding: 1.5rem clamp(1rem, 4vw, 3rem);
}
.footer-inner {
  display: flex; align-items: center;
  justify-content: space-between;
  flex-wrap: wrap; gap: .75rem;
  max-width: 88rem; margin: 0 auto;
}
.footer-left {
  display: flex; align-items: center; gap: .75rem;
  font-family: var(--font-mono);
  font-size: .72rem;
}
.footer-logo { color: var(--violet-light); font-weight: 700; letter-spacing: .1em; }
.footer-sep  { color: var(--text-3); }
.footer-name { color: var(--text-2); }
.footer-center {
  display: flex; align-items: center; gap: .45rem;
  font-family: var(--font-mono);
  font-size: .68rem; color: var(--text-3);
  letter-spacing: .1em;
}
.footer-status-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--emerald);
  box-shadow: 0 0 4px var(--emerald);
  animation: pulse-dot 3s ease-in-out infinite;
}
.footer-right { font-family: var(--font-mono); font-size: .68rem; color: var(--text-3); }

/* ══════════════════════════════════════════════════════════
   KEYFRAMES
══════════════════════════════════════════════════════════ */
@keyframes blink {
  0%,100% { opacity:1; } 50% { opacity:0; }
}
@keyframes fade-in {
  from { opacity:0; transform:translateY(4px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes fade-up {
  from { opacity:0; transform:translateY(24px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes scale-in {
  from { opacity:0; transform:scale(.7); }
  to   { opacity:1; transform:scale(1); }
}
@keyframes flicker {
  0%,89%,93%,97%,100% { opacity:1; }
  90%,94%,96%         { opacity:.4; }
}
@keyframes glitch-a {
  0%,100% { clip-path:inset(22% 0 58% 0); transform:translate(-4px,0); }
  25%     { clip-path:inset(72% 0 8% 0);  transform:translate(4px,0); }
  50%     { clip-path:inset(40% 0 40% 0); transform:translate(-2px,0); }
  75%     { clip-path:inset(5% 0 78% 0);  transform:translate(3px,0); }
}
@keyframes glitch-b {
  0%,100% { clip-path:inset(58% 0 18% 0); transform:translate(4px,0); }
  25%     { clip-path:inset(8% 0 72% 0);  transform:translate(-4px,0); }
  50%     { clip-path:inset(45% 0 32% 0); transform:translate(2px,0); }
  75%     { clip-path:inset(25% 0 55% 0); transform:translate(-3px,0); }
}
@keyframes spin-slow { to { transform:rotate(360deg); } }
.spin-slow { animation: spin-slow 8s linear infinite; }
@keyframes spin-rev  { to { transform:rotate(-360deg); } }
.spin-rev { animation: spin-rev 12s linear infinite; }
@keyframes spin-loader { to { transform:rotate(360deg); } }

@keyframes orb1 {
  0%,100% { transform:translate(0,0) scale(1); }
  35%     { transform:translate(80px,-90px) scale(1.1); }
  65%     { transform:translate(-60px,50px) scale(.92); }
}
@keyframes orb2 {
  0%,100% { transform:translate(0,0) scale(1); }
  40%     { transform:translate(-80px,60px) scale(.9); }
  70%     { transform:translate(50px,-70px) scale(1.08); }
}
@keyframes orb3 {
  0%,100% { transform:translate(-50%,-50%) scale(1); }
  50%     { transform:translate(-50%,-50%) scale(1.15); }
}

@keyframes glow-pulse {
  0%,100% { opacity:.7; transform:scale(1); }
  50%     { opacity:1;  transform:scale(1.05); }
}
@keyframes ping {
  0%,100% { opacity:.7; transform:scale(1); }
  60%     { opacity:0;  transform:scale(2.2); }
}
@keyframes pulse-dot {
  0%,100% { opacity:1; box-shadow:0 0 4px var(--emerald); }
  50%     { opacity:.6; box-shadow:0 0 10px var(--emerald); }
}
@keyframes float-badge {
  0%,100% { transform:translateY(0); }
  50%     { transform:translateY(-8px); }
}
@keyframes scroll-drift {
  0%,100% { opacity:.3; transform:scaleY(1); }
  50%     { opacity:.8; transform:scaleY(1.1); }
}
@keyframes shimmer-move {
  from { background-position: 300% 0; }
  to   { background-position: -300% 0; }
}

/* ══════════════════════════════════════════════════════════
   SCANLINES (subtle)
══════════════════════════════════════════════════════════ */
body::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9000;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 2px,
    rgba(0,0,0,.014) 2px, rgba(0,0,0,.014) 4px
  );
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE
══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  body { cursor: auto; }
  .cursor { display: none; }
  .nav-logo { font-size: .72rem; letter-spacing: .12em; }
  .nav-link { padding: .35rem .6rem; font-size: .65rem; }
  .nav-status { display: none; }
  .hero-stats { gap: 1rem; }
  .stat-sep { display: none; }
  .hero-cta { flex-direction: column; }
  .hero-cta .btn { width: 100%; justify-content: center; }
  .home-right { display: none; }
  .avatar-badge-tl,
  .avatar-badge-tr,
  .avatar-badge-bl,
  .avatar-badge-br { display: none; }
  .about-grid { grid-template-columns: 1fr; }
  .section-title { letter-spacing: -.015em; }
  .footer-inner { justify-content: center; text-align: center; }
  .footer-right { display: none; }
}
@media (max-width: 480px) {
  .nav-pill { gap: 0; }
  .nav-link { padding: .3rem .5rem; font-size: .6rem; letter-spacing: .04em; }
  .hero-name { font-size: clamp(3.5rem, 14vw, 5rem); }
}
@media (hover: none) {
  .cursor { display: none; }
  body { cursor: auto; }
  button, a { cursor: pointer; }
}

/* ══════════════════════════════════════════════════════════
   PRINT
══════════════════════════════════════════════════════════ */
@media print {
  .cursor, .bg-noise, .bg-grid, .bg-orbs,
  .particles-canvas, .mouse-glow, .scroll-progress,
  .loader, .nav { display: none; }
  body { background: #fff; color: #000; }
  .section { min-height: auto; padding: 2rem 0; }
}