/* ===================================================
   TOKENS — Catppuccin Mocha
=================================================== */
:root {
  --crust: #11111b;
  --mantle: #181825;
  --base: #1e1e2e;
  --surface0: #313244;
  --surface1: #45475a;
  --surface2: #585b70;
  --text: #cdd6f4;
  --subtext1: #bac2de;
  --subtext0: #a6adc8;
  --overlay0: #6c7086;

  --green: #a6e3a1;
  --yellow: #f9e2af;
  --peach: #fab387;
  --mauve: #cba6f7;
  --red: #f38ba8;
  --sky: #89dceb;

  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --radius: 8px;
  --border: 1px solid var(--surface0);
  --max-width: 1080px;
  --section-pad: clamp(4rem, 8vw, 7rem);
}

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

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

body {
  background: var(--base);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; }
input, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: var(--mantle);
  border: var(--border);
  border-radius: 4px;
  padding: .7rem .85rem;
  width: 100%;
}
input:focus, textarea:focus, a:focus-visible, button:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

.container { max-width: var(--max-width); margin-inline: auto; padding-inline: 1.5rem; }
.section { padding-block: var(--section-pad); }
.accent { color: var(--green); }

/* ===================================================
   TITLEBAR
=================================================== */
.titlebar {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .6rem 1.25rem;
  background: var(--crust);
  border-bottom: var(--border);
}
.titlebar__dots { display: flex; gap: .45rem; }
.dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.dot--red { background: var(--red); }
.dot--yellow { background: var(--yellow); }
.dot--green { background: var(--green); }

.titlebar__path {
  font-size: .85rem;
  color: var(--subtext0);
  flex: 1;
  text-align: center;
}
.titlebar__dir { color: var(--sky); }
.titlebar__cursor { color: var(--green); margin-left: .35rem; }

.titlebar__menu {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  padding: .4rem;
}
.titlebar__menu span { width: 20px; height: 2px; background: var(--text); display: block; }

/* ===================================================
   NAV
=================================================== */
.nav {
  position: sticky;
  top: 37px;
  z-index: 55;
  display: flex;
  gap: .25rem;
  padding: .55rem 1.25rem;
  background: var(--mantle);
  border-bottom: var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}
.nav::-webkit-scrollbar { display: none; }

.nav__link {
  font-size: .82rem;
  color: var(--subtext0);
  padding: .4rem .7rem;
  border-radius: 4px;
  white-space: nowrap;
  transition: color .15s, background .15s;
}
.nav__link:hover { color: var(--text); background: var(--surface0); }
.nav__link.active-link { color: var(--green); }

@media (max-width: 720px) {
  .titlebar__menu { display: flex; }
  .nav {
    position: fixed;
    top: 0; right: 0;
    height: 100vh;
    width: min(78vw, 300px);
    flex-direction: column;
    background: var(--crust);
    border-left: var(--border);
    border-bottom: none;
    padding: 5rem 1.5rem 2rem;
    transform: translateX(100%);
    transition: transform .25s ease;
  }
  .nav.is-open { transform: translateX(0); }
  .nav__link { font-size: 1rem; padding: .75rem .5rem; border-bottom: var(--border); }
}

/* ===================================================
   HERO
=================================================== */
.hero {
  position: relative;
  padding-block: clamp(3rem, 8vw, 6rem);
  min-height: calc(100vh - 90px);
  display: flex;
  align-items: center;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (max-width: 860px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero { min-height: auto; padding-block: 2.5rem 4rem; }
}

/* fake terminal window */
.term {
  background: var(--mantle);
  border: var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 20px 60px -20px rgba(0,0,0,.6);
  order: 2;
}
@media (max-width: 860px) { .term { order: 1; } .hero__side { order: 2; } }

.term__bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .65rem 1rem;
  background: var(--crust);
  border-bottom: var(--border);
}
.term__title { font-size: .78rem; color: var(--subtext0); }
.term__body { padding: 1.4rem 1.3rem 1.7rem; min-height: 260px; }
.term__line { font-size: .92rem; }
.prompt { color: var(--green); }
.colon { color: var(--subtext0); }
.path { color: var(--sky); }
.dollar { color: var(--subtext0); margin-right: .1rem; }
.cmd { color: var(--text); }
.caret {
  display: inline-block;
  color: var(--green);
  animation: blink 1s step-end infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.term__output { margin-top: 1.1rem; display: flex; flex-direction: column; gap: .5rem; }
.out-row { font-size: .85rem; display: flex; gap: .6rem; flex-wrap: wrap; }
.out-key { color: var(--peach); min-width: 92px; }
.out-key::after { content: ':'; }
.out-val { color: var(--subtext1); }
.blinker { color: var(--green); animation: blink 1.4s step-end infinite; }

.hero__side { order: 1; }
.eyebrow { font-size: .82rem; color: var(--subtext0); margin-bottom: 1rem; letter-spacing: .02em; }
.hero__title {
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin-bottom: 1.4rem;
}
.hero__desc { color: var(--subtext1); max-width: 46ch; margin-bottom: 1.9rem; font-size: .98rem; }

.hero__actions { display: flex; gap: .8rem; flex-wrap: wrap; margin-bottom: 2.1rem; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: inherit;
  font-size: .88rem;
  font-weight: 600;
  padding: .78rem 1.3rem;
  border-radius: 6px;
  border: var(--border);
  transition: transform .15s, background .15s, border-color .15s;
}
.btn--primary { background: var(--green); color: var(--crust); border-color: var(--green); }
.btn--primary:hover { transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--text); }
.btn--ghost:hover { border-color: var(--green); color: var(--green); }

.hero__social { display: flex; gap: 1.4rem; }
.hero__social a { font-size: .82rem; color: var(--subtext0); border-bottom: 1px solid transparent; }
.hero__social a:hover { color: var(--green); border-color: var(--green); }

.scroll-hint {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  font-size: .72rem;
  color: var(--overlay0);
}
.scroll-hint__line { width: 1px; height: 26px; background: linear-gradient(var(--green), transparent); animation: scrolldown 1.8s ease-in-out infinite; }
@keyframes scrolldown { 0%,100% { opacity: .3; } 50% { opacity: 1; } }
@media (max-width: 860px) { .scroll-hint { display: none; } }

/* ===================================================
   SECTION COMMAND LABEL
=================================================== */
.section__cmd {
  font-size: .8rem;
  color: var(--subtext0);
  margin-bottom: 2.2rem;
  padding-inline: 1.5rem;
  max-width: var(--max-width);
  margin-inline: auto;
}
.section__cmd::before { content: '$ '; color: var(--green); }

/* ===================================================
   ABOUT
=================================================== */
.about { background: var(--mantle); border-block: var(--border); }
.about__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 3rem;
}
@media (max-width: 780px) { .about__grid { grid-template-columns: 1fr; } }

.about__text p { color: var(--subtext1); margin-bottom: 1.1rem; font-size: .96rem; }
.about__text strong { color: var(--text); }

.about__facts { display: flex; flex-direction: column; gap: 1rem; align-self: start; }
.about__facts li {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: .9rem 1rem;
  background: var(--base);
  border: var(--border);
  border-radius: 6px;
}
.fact__label { font-size: .72rem; color: var(--peach); text-transform: uppercase; letter-spacing: .04em; }
.fact__value { font-size: .88rem; color: var(--text); }

/* ===================================================
   SKILLS
=================================================== */
.skills__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
@media (max-width: 780px) { .skills__grid { grid-template-columns: 1fr; } }

.skills__heading { font-size: .9rem; color: var(--sky); margin-bottom: 1rem; }
.skills__list { display: flex; flex-direction: column; gap: .55rem; }
.skills__list li { font-size: .9rem; color: var(--subtext1); }
.perm { color: var(--overlay0); margin-right: .6rem; font-size: .82rem; }

/* ===================================================
   PROJECTS
=================================================== */
.projects { background: var(--mantle); border-block: var(--border); }
.projects__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.4rem;
}
@media (max-width: 780px) { .projects__grid { grid-template-columns: 1fr; } }

.project {
  background: var(--base);
  border: var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  transition: border-color .15s, transform .15s;
}
.project:hover { border-color: var(--green); transform: translateY(-3px); }

.project__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.project__index { font-size: .8rem; color: var(--overlay0); }
.project__tags { display: flex; gap: .4rem; flex-wrap: wrap; }
.project__tags span {
  font-size: .68rem;
  color: var(--mauve);
  border: 1px solid var(--surface1);
  border-radius: 4px;
  padding: .15rem .45rem;
}
.project__title { font-size: 1.05rem; margin-bottom: .55rem; }
.project__desc { font-size: .87rem; color: var(--subtext0); margin-bottom: 1.1rem; }
.project__links { display: flex; gap: 1.2rem; }
.project__link { font-size: .82rem; color: var(--green); }
.project__link:hover { text-decoration: underline; }

.projects__note { text-align: center; margin-top: 2.2rem; font-size: .85rem; color: var(--subtext0); }
.projects__note a { color: var(--green); }
.projects__note a:hover { text-decoration: underline; }

/* ===================================================
   CONTACT
=================================================== */
.contact__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 3rem;
}
@media (max-width: 780px) { .contact__grid { grid-template-columns: 1fr; } }

.contact__title { font-size: 1.6rem; margin-bottom: .8rem; }
.contact__desc { color: var(--subtext0); margin-bottom: 1.8rem; font-size: .92rem; }

.contact__channels { display: flex; flex-direction: column; gap: 1rem; }
.contact__channels li { display: flex; flex-direction: column; gap: .2rem; }
.channel__label { font-size: .72rem; color: var(--peach); text-transform: uppercase; letter-spacing: .04em; }
.channel__value { font-size: .92rem; }
.channel__value:hover { color: var(--green); text-decoration: underline; }

.contact__form { display: flex; flex-direction: column; gap: 1.1rem; }
.field { display: flex; flex-direction: column; gap: .4rem; }
.field label { font-size: .78rem; color: var(--subtext0); }
.field label::before { content: '$ '; color: var(--green); }
.field__hint { font-size: .78rem; color: var(--subtext0); }

/* ===================================================
   FOOTER
=================================================== */
.footer { padding-block: 2rem; border-top: var(--border); }
.footer__row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .8rem; font-size: .82rem; color: var(--subtext0); }
.footer__brand { color: var(--text); }

/* ===================================================
   SCROLL UP
=================================================== */
.scrollup {
  position: fixed;
  right: 1.2rem;
  bottom: 1.2rem;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface0);
  border: var(--border);
  border-radius: 50%;
  color: var(--green);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .2s, transform .2s;
  z-index: 50;
}
.scrollup.show { opacity: 1; visibility: visible; transform: translateY(0); }

/* ===================================================
   REVEAL ON SCROLL
=================================================== */
[data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }