:root {
  /* Catppuccin Mocha */
  --base: #1e1e2e;
  --mantle: #181825;
  --crust: #11111b;
  --surface0: #313244;
  --surface1: #45475a;
  --surface2: #585b70;
  --overlay0: #6c7086;
  --overlay1: #7f849c;
  --text: #cdd6f4;
  --subtext1: #bac2de;
  --subtext0: #a6adc8;
  --pink: #f5c2e7;
  --mauve: #cba6f7;
  --red: #f38ba8;
  --peach: #fab387;
  --yellow: #f9e2af;
  --green: #a6e3a1;
  --teal: #94e2d5;
  --sky: #89dceb;
  --sapphire: #74c7ec;
  --blue: #89b4fa;
  --lavender: #b4befe;

  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --serif: 'Fraunces', Georgia, serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--base);
  color: var(--text);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.6;
  overflow-x: hidden;
  min-height: 100vh;
  position: relative;
}

/* Subtle grid background */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(var(--surface0) 1px, transparent 1px),
    linear-gradient(90deg, var(--surface0) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: 0.15;
  pointer-events: none;
  z-index: 0;
  mask-image: radial-gradient(ellipse at center, black 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 80%);
}

/* Noise overlay */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

main { position: relative; z-index: 2; }

/* ============ NAV ============ */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  padding: 1.25rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(17, 17, 27, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--surface0);
  z-index: 100;
  font-size: 13px;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 500;
}

.nav-brand .at { color: var(--mauve); }

.nav-brand .dot {
  width: 8px; height: 8px;
  background: var(--green);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--green);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.nav-links {
  display: flex;
  gap: 2rem;
  list-style: none;
}

.nav-links a {
  color: var(--subtext0);
  text-decoration: none;
  transition: color 0.2s;
  position: relative;
}

.nav-links a::before {
  content: '~/';
  color: var(--overlay0);
  margin-right: 2px;
}

.nav-links a:hover { color: var(--mauve); }

/* ============ HERO ============ */
.hero {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 3rem;
  padding: 8rem 2rem 4rem;
  max-width: 1400px;
  margin: 0 auto;
  align-items: center;
}

.hero-left h1 {
  font-family: var(--serif);
  font-size: clamp(3rem, 7vw, 6rem);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin-bottom: 2rem;
}

.hero-left h1 .italic {
  font-style: italic;
  color: var(--mauve);
  font-weight: 400;
}

.hero-left h1 .accent {
  color: var(--peach);
  font-style: italic;
}

.hero-tagline {
  font-size: 1rem;
  color: var(--subtext0);
  max-width: 52ch;
  margin-bottom: 2.5rem;
  line-height: 1.7;
}

.hero-tagline .highlight {
  color: var(--text);
  background: linear-gradient(180deg, transparent 60%, rgba(203, 166, 247, 0.25) 60%);
  padding: 0 2px;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  font-size: 12px;
  color: var(--overlay1);
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

.hero-meta span { display: flex; align-items: center; gap: 0.4rem; }
.hero-meta .bullet { color: var(--green); }

/* ============ TERMINAL ============ */
.terminal {
  background: var(--crust);
  border: 1px solid var(--surface0);
  border-radius: 10px;
  overflow: hidden;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.4),
    0 0 0 1px var(--surface0);
  position: relative;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.terminal:focus-within {
  border-color: var(--mauve);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.4),
    0 0 0 1px var(--mauve),
    0 0 30px rgba(203, 166, 247, 0.15);
}

.terminal::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(203, 166, 247, 0.08), transparent 50%);
  pointer-events: none;
}

.terminal-bar {
  background: var(--mantle);
  padding: 0.7rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 1px solid var(--surface0);
  position: relative;
  z-index: 2;
}

.terminal-dots { display: flex; gap: 0.4rem; }

.terminal-dots span {
  width: 12px; height: 12px;
  border-radius: 50%;
}
.terminal-dots span:nth-child(1) { background: var(--red); }
.terminal-dots span:nth-child(2) { background: var(--yellow); }
.terminal-dots span:nth-child(3) { background: var(--green); }

.terminal-title {
  margin-left: auto;
  margin-right: auto;
  font-size: 12px;
  color: var(--overlay1);
}

.terminal-body {
  padding: 1.2rem;
  font-size: 13px;
  min-height: 360px;
  max-height: 440px;
  overflow-y: auto;
  position: relative;
  cursor: text;
}

.terminal-body::-webkit-scrollbar { width: 6px; }
.terminal-body::-webkit-scrollbar-track { background: transparent; }
.terminal-body::-webkit-scrollbar-thumb { background: var(--surface0); border-radius: 3px; }
.terminal-body::-webkit-scrollbar-thumb:hover { background: var(--surface1); }

.terminal-hint {
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 10px;
  color: var(--overlay0);
  background: var(--mantle);
  padding: 4px 9px;
  border-radius: 4px;
  border: 1px solid var(--surface0);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 3;
  letter-spacing: 0.05em;
}

.terminal-hint.show { opacity: 1; animation: hintPulse 2.5s ease-in-out infinite; }

@keyframes hintPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.terminal-hint .kbd {
  background: var(--surface0);
  color: var(--mauve);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 10px;
  margin-left: 2px;
}

/* Input line (visible prompt + real input field) */
.terminal-inputline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.2rem;
  border-top: 1px solid var(--surface0);
  background: var(--crust);
  position: relative;
  z-index: 2;
}

.terminal-inputline-prompt {
  font-size: 13px;
  white-space: nowrap;
  flex-shrink: 0;
}

.terminal-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-family: var(--mono);
  font-size: 13px;
  caret-color: var(--mauve);
  padding: 0;
  min-width: 0;
}

.terminal-input::placeholder {
  color: var(--overlay0);
  font-style: italic;
  opacity: 0.7;
}

.terminal-line {
  margin-bottom: 0.35rem;
  white-space: pre-wrap;
  word-break: break-word;
}

.prompt-user { color: var(--green); }
.prompt-at { color: var(--overlay0); }
.prompt-host { color: var(--blue); }
.prompt-path { color: var(--peach); }
.prompt-arrow { color: var(--mauve); }
.term-cmd { color: var(--text); }
.term-out { color: var(--subtext0); }
.term-key { color: var(--yellow); }
.term-val { color: var(--teal); }
.term-comment { color: var(--overlay0); font-style: italic; }
.term-error { color: var(--red); }

/* ============ SECTION FRAME ============ */
section.block {
  max-width: 1200px;
  margin: 0 auto;
  padding: 6rem 2rem;
}

.section-head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 3rem;
  border-bottom: 1px solid var(--surface0);
  padding-bottom: 1rem;
}

.section-head .num {
  font-family: var(--serif);
  font-size: 1.2rem;
  color: var(--overlay0);
  font-style: italic;
}

.section-head h2 {
  font-family: var(--serif);
  font-size: 2.5rem;
  font-weight: 400;
  letter-spacing: -0.02em;
}

.section-head h2 .em {
  font-style: italic;
  color: var(--mauve);
}

.section-head .cmd {
  margin-left: auto;
  font-size: 12px;
  color: var(--overlay0);
}

/* ============ PROJECTS ============ */
.projects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.25rem;
}

.project {
  background: var(--mantle);
  border: 1px solid var(--surface0);
  border-radius: 8px;
  padding: 1.5rem;
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.project::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 2px;
  background: var(--accent, var(--mauve));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.project:hover {
  transform: translateY(-4px);
  border-color: var(--accent, var(--mauve));
}

.project:hover::before { transform: scaleX(1); }

.project-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
  gap: 0.75rem;
}

.project-name {
  font-weight: 500;
  color: var(--text);
  font-size: 1.05rem;
}

.project-name::before {
  content: '▹ ';
  color: var(--accent, var(--mauve));
}

.project-status {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
  white-space: nowrap;
}

.status-live {
  background: rgba(166, 227, 161, 0.15);
  color: var(--green);
  border: 1px solid rgba(166, 227, 161, 0.3);
}

.status-wip {
  background: rgba(249, 226, 175, 0.15);
  color: var(--yellow);
  border: 1px solid rgba(249, 226, 175, 0.3);
}

.status-done {
  background: rgba(137, 180, 250, 0.15);
  color: var(--blue);
  border: 1px solid rgba(137, 180, 250, 0.3);
}

.project-desc {
  color: var(--subtext0);
  font-size: 13px;
  line-height: 1.7;
  margin-bottom: 1.25rem;
}

.project-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: 11px;
}

.project-tags span {
  color: var(--overlay1);
  padding: 2px 6px;
  border: 1px solid var(--surface0);
  border-radius: 4px;
}

.project-meta {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--surface0);
  font-size: 11px;
  color: var(--overlay0);
}

/* ============ SKILLS GRID ============ */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

.skill-cat {
  background: var(--mantle);
  border: 1px solid var(--surface0);
  border-radius: 6px;
  padding: 1.25rem;
}

.skill-cat-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--surface0);
  font-size: 13px;
  color: var(--subtext1);
}

.skill-cat-head .icon {
  color: var(--accent, var(--mauve));
  font-weight: 700;
}

.skill-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 12px;
}

.skill-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--subtext0);
}

.skill-bar {
  flex: 1;
  height: 2px;
  background: var(--surface0);
  margin: 0 0.75rem;
  position: relative;
  overflow: hidden;
}

.skill-bar-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, var(--accent, var(--mauve)), transparent);
  animation: fill 1.2s ease forwards;
  width: 0;
}

@keyframes fill {
  to { width: var(--level, 50%); }
}

.skill-lvl {
  color: var(--overlay1);
  font-size: 10px;
  min-width: 2.5rem;
  text-align: right;
}

/* ============ NOW PANEL ============ */
.now-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.now-card {
  background: var(--mantle);
  border: 1px solid var(--surface0);
  border-radius: 8px;
  padding: 1.5rem;
  position: relative;
}

.now-card-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--overlay0);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.now-card-label::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--accent, var(--green));
  border-radius: 50%;
  box-shadow: 0 0 6px var(--accent, var(--green));
}

.now-card ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  font-size: 13px;
  color: var(--subtext0);
}

.now-card li {
  display: flex;
  gap: 0.7rem;
  align-items: baseline;
}

.now-card li::before {
  content: '→';
  color: var(--accent, var(--mauve));
  flex-shrink: 0;
}

.now-card .ts {
  font-size: 11px;
  color: var(--overlay0);
  margin-left: auto;
  font-style: italic;
}

/* ============ FOOTER ============ */
footer {
  border-top: 1px solid var(--surface0);
  padding: 3rem 2rem;
  text-align: center;
  color: var(--overlay0);
  font-size: 12px;
}

footer .sig {
  font-family: var(--serif);
  font-style: italic;
  color: var(--mauve);
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

footer .socials {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin: 1.5rem 0;
}

footer .socials a {
  color: var(--subtext0);
  text-decoration: none;
  transition: color 0.2s;
  font-size: 13px;
}

footer .socials a:hover { color: var(--mauve); }

footer .exit {
  color: var(--overlay0);
  margin-top: 1.5rem;
  font-size: 11px;
}

footer .exit .prompt-arrow { color: var(--green); }

/* ============ RESPONSIVE ============ */
@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    padding-top: 7rem;
  }
  .now-grid { grid-template-columns: 1fr; }
  .nav-links { display: none; }
  .section-head { flex-wrap: wrap; }
  .section-head .cmd { display: none; }
}

/* Page scrollbar */
body::-webkit-scrollbar { width: 10px; }
body::-webkit-scrollbar-track { background: var(--base); }
body::-webkit-scrollbar-thumb { background: var(--surface1); border-radius: 4px; }
body::-webkit-scrollbar-thumb:hover { background: var(--surface2); }

/* Selection */
::selection { background: var(--mauve); color: var(--crust); }

/* Reveal on scroll */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal.in { opacity: 1; transform: translateY(0); }

/* ============ SNAKE EASTER EGG (embedded in terminal) ============ */
.snake-modal {
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 27, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  flex-direction: column;
  z-index: 10;
  border-radius: 10px;
  overflow: hidden;
  animation: snakeFade 0.18s ease;
  font-family: var(--mono);
}
.snake-modal.open { display: flex; }

@keyframes snakeFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.snake-bar {
  background: var(--mantle);
  padding: 0.55rem 0.9rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  border-bottom: 1px solid var(--surface0);
  font-size: 11px;
  color: var(--subtext1);
  flex-shrink: 0;
}

.snake-title {
  color: var(--green);
  font-weight: 700;
  letter-spacing: 0.1em;
}
.snake-title::before { content: "▸ "; color: var(--overlay1); }

.snake-score { color: var(--subtext1); }
.snake-score span { color: var(--peach); font-weight: 700; }

.snake-close {
  background: transparent;
  border: 1px solid var(--surface0);
  color: var(--overlay1);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 10px;
  padding: 2px 8px;
  line-height: 1.4;
  letter-spacing: 0.08em;
  border-radius: 4px;
  transition: color 0.15s, border-color 0.15s;
}
.snake-close:hover {
  color: var(--red);
  border-color: var(--red);
}

.snake-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem;
  min-height: 0; /* allow flex child to shrink */
}

#snakeCanvas {
  background: var(--base);
  border: 1px solid var(--surface0);
  border-radius: 4px;
  display: block;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 1 / 1;
  width: auto;
  height: auto;
  image-rendering: pixelated;
}

.snake-hint {
  background: var(--mantle);
  padding: 0.5rem 0.9rem;
  border-top: 1px solid var(--surface0);
  text-align: center;
  font-size: 10px;
  color: var(--overlay1);
  flex-shrink: 0;
  letter-spacing: 0.04em;
}
.snake-hint kbd {
  background: var(--surface0);
  color: var(--subtext1);
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid var(--surface1);
  font-family: var(--mono);
  font-size: 9px;
  margin: 0 1px;
}