/* Tejas Soddy · portfolio
   Dark by default, light on toggle. Purple is the accent, green means "passing / live".
   Geist for text, Geist Mono for labels, numbers and the terminal. */

:root {
  --bg: #08070b;
  --fg: #ececf1;
  --muted: #9d9ba8;
  --faint: #6c6a78;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --card-top: #141319;
  --card-bottom: #0c0b10;
  --pill: rgba(255, 255, 255, 0.04);
  --nav-bg: rgba(8, 7, 11, 0.74);
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;

  --accent: #a78bfa;          /* purple */
  --accent-soft: rgba(167, 139, 250, 0.14);
  --accent-line: rgba(167, 139, 250, 0.45);
  --on-accent: #120d1f;
  --ok: #4ade80;              /* green */
  --ok-soft: rgba(74, 222, 128, 0.12);
  --glow: rgba(167, 139, 250, 0.07);

  --mono: "Geist Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #f8f7fa;
  --fg: #16141c;
  --muted: #5c5968;
  --faint: #8a8796;
  --line: rgba(20, 10, 40, 0.09);
  --line-strong: rgba(20, 10, 40, 0.2);
  --card-top: #ffffff;
  --card-bottom: #fcfbfd;
  --pill: rgba(20, 10, 40, 0.03);
  --nav-bg: rgba(248, 247, 250, 0.8);
  --shadow: 0 1px 2px rgba(20, 10, 40, 0.05);

  --accent: #6d28d9;
  --accent-soft: rgba(109, 40, 217, 0.08);
  --accent-line: rgba(109, 40, 217, 0.4);
  --on-accent: #ffffff;
  --ok: #15803d;
  --ok-soft: rgba(21, 128, 61, 0.09);
  --glow: rgba(109, 40, 217, 0.05);
  color-scheme: light;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color 0.25s ease, color 0.25s ease;
}

::selection { background: var(--accent); color: var(--on-accent); }

a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }

.wrap { width: 100%; max-width: 66rem; margin: 0 auto; padding: 0 1.5rem; }

.eyebrow {
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--accent);
}
.eyebrow::before { content: "// "; opacity: 0.6; }

/* ---------- Scroll progress ---------- */

.progress { position: fixed; inset: 0 0 auto; height: 2px; z-index: 60; pointer-events: none; }
.progress span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--ok));
  transform-origin: 0 50%; transform: scaleX(0);
}

/* ---------- Nav ---------- */

.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--nav-bg);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease;
}
.nav.scrolled { border-bottom-color: var(--line); }

.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 4.25rem; }

.wordmark {
  font-family: var(--mono);
  font-size: 1.0625rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.wordmark span { color: var(--accent); }

.nav nav { display: flex; align-items: center; gap: 1.5rem; }
.nav nav a {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s ease;
}
.nav nav a:hover { color: var(--accent); }

.theme-toggle {
  display: grid; place-items: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: 0.6rem;
  border: 1px solid var(--line-strong);
  background: var(--pill);
  color: var(--fg);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.theme-toggle:hover { border-color: var(--accent-line); color: var(--accent); }
.theme-toggle svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.i-moon { display: none; }
:root[data-theme="light"] .i-sun { display: none; }
:root[data-theme="light"] .i-moon { display: block; }

/* ---------- Hero ---------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 3.5rem;
  align-items: center;
  min-height: calc(100vh - 4.25rem);
  min-height: calc(100svh - 4.25rem);
  padding-top: 3rem;
  padding-bottom: 5rem;
}

.hero h1 {
  font-size: clamp(3rem, 7.5vw, 5rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin-top: 1.1rem;
}

.hero-sub { font-size: 1.375rem; margin-top: 1.1rem; opacity: 0.85; }

.hero-bio { max-width: 36rem; margin-top: 1.75rem; color: var(--muted); font-size: 1.0625rem; line-height: 1.85; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.25rem; }

.pill {
  display: inline-flex; align-items: center;
  height: 2.9rem; padding: 0 1.25rem;
  border-radius: 0.7rem;
  border: 1px solid var(--line-strong);
  background: var(--pill);
  font-size: 0.9375rem; font-weight: 500;
  text-decoration: none;
  transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.pill:hover { transform: translateY(-1px); border-color: var(--accent-line); color: var(--accent); }
.pill-solid { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.pill-solid:hover { color: var(--on-accent); filter: brightness(1.08); }

/* Deploy terminal: always dark, in both themes */

.term {
  position: relative;
  border-radius: 0.9rem;
  border: 1px solid rgba(167, 139, 250, 0.22);
  background: linear-gradient(180deg, #121019, #0a090e);
  box-shadow: 0 30px 80px -30px rgba(109, 40, 217, 0.45), 0 1px 0 rgba(255, 255, 255, 0.05) inset;
  color: #d9d7e3;
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.85;
  overflow: hidden;
}

.term-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.02);
}
.term-title { color: #8d8a9c; font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.term-status {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.6875rem; font-weight: 600;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  color: #4ade80; background: rgba(74, 222, 128, 0.12);
}
.term-status::before { content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: currentColor; }
.term-status[data-state="running"] { color: #c4b5fd; background: rgba(167, 139, 250, 0.14); }
.term-status[data-state="running"]::before { animation: pulse 1s ease-in-out infinite; }

.term-lines { list-style: none; padding: 1rem 1.15rem 1.25rem; min-height: 25.5rem; }
.term-lines li { white-space: pre-wrap; }
.term-lines .p { color: #a78bfa; }
.term-lines .a { color: #a78bfa; }
.term-lines .h { margin-top: 0.5rem; color: #ececf1; }
.term-lines .ok { color: #4ade80; }
.term-lines .dim { color: #75727f; }
.term-lines .sub { padding-left: 1.4rem; font-size: 0.75rem; }
.term-lines .live { margin-top: 0.6rem; color: #ececf1; }
.term-lines .live a { color: #4ade80; text-underline-offset: 3px; }
.term-lines .dot,
.badge-live .dot {
  display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%;
  background: var(--ok); box-shadow: 0 0 0 0 var(--ok);
  animation: ping 2s ease-out infinite;
  vertical-align: 0.05em; margin-right: 0.15rem;
}
.term-lines .dot { background: #4ade80; }

.cursor {
  display: inline-block; width: 0.5rem; height: 1em; margin-left: 0.3rem;
  background: #a78bfa; vertical-align: -0.15em;
  animation: blink 1.1s steps(1) infinite;
}

/* JS hides the lines, then reveals them one at a time */
.js .term-lines li { opacity: 0; transform: translateX(-4px); transition: opacity 0.25s ease, transform 0.25s ease; }
.js .term-lines li.on { opacity: 1; transform: none; }

.term-rerun {
  position: absolute; right: 0.9rem; bottom: 0.8rem;
  font: inherit; font-size: 0.6875rem;
  color: #8d8a9c; background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 0.45rem;
  padding: 0.15rem 0.55rem;
  cursor: pointer;
  opacity: 0; transition: opacity 0.3s ease, color 0.2s ease, border-color 0.2s ease;
}
.term.done .term-rerun { opacity: 1; }
.term-rerun:hover { color: #c4b5fd; border-color: rgba(167, 139, 250, 0.45); }

@keyframes blink { 50% { opacity: 0; } }
@keyframes pulse { 50% { opacity: 0.3; } }
@keyframes ping {
  0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.55); }
  80%, 100% { box-shadow: 0 0 0 0.45rem rgba(74, 222, 128, 0); }
}

.rule { border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--accent-line), transparent); opacity: 0.6; }

/* ---------- Section headings ---------- */

.projects { padding-top: 6rem; padding-bottom: 5rem; }
.toolkit { padding-top: 6rem; padding-bottom: 5rem; }

.section-title {
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin: 0.9rem 0 3rem;
}

/* ---------- Project cards ---------- */

.card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  background:
    radial-gradient(28rem circle at var(--mx, 30%) var(--my, 0%), var(--glow), transparent 60%),
    linear-gradient(180deg, var(--card-top), var(--card-bottom));
  box-shadow: var(--shadow);
  padding: 1.75rem;
  display: flex; flex-direction: column;
  transition: border-color 0.25s ease;
}
.card:hover { border-color: var(--accent-line); }

.card-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }

.num { font-family: var(--mono); font-size: 0.8125rem; color: var(--accent); font-variant-numeric: tabular-nums; }
.num i { font-style: normal; color: var(--faint); }

.badges { display: flex; gap: 0.4rem; }

.badge {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-family: var(--mono);
  font-size: 0.6875rem; font-weight: 500;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--line-strong);
  border-radius: 0.4rem;
  color: var(--muted);
  background: var(--pill);
}
.badge-accent { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.badge-live { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); background: var(--ok-soft); }
.badge-live .dot { width: 0.4rem; height: 0.4rem; margin-right: 0; }

.card h3 {
  font-size: clamp(1.9rem, 3.4vw, 2.5rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-top: 1.5rem;
}

.desc { color: var(--muted); margin-top: 0.9rem; max-width: 34rem; line-height: 1.75; }

.role { color: var(--muted); margin-top: 0.9rem; font-size: 0.9375rem; line-height: 1.7; max-width: 34rem; }
.role span {
  display: inline-block; margin-right: 0.4rem;
  font-family: var(--mono); font-size: 0.75rem; font-weight: 500;
  color: var(--accent);
}
.role span::after { content: ":"; }

.points { list-style: none; display: grid; }
.points li { color: var(--muted); font-size: 0.9375rem; line-height: 1.7; }
.points strong { display: block; margin-bottom: 0.35rem; color: var(--fg); font-weight: 500; }

.tags { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1.4rem; }
.tags li {
  font-family: var(--mono);
  font-size: 0.6875rem;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--line-strong);
  border-radius: 0.35rem;
  color: var(--muted);
  background: var(--pill);
}

.links { display: flex; gap: 1.5rem; margin-top: auto; padding-top: 1.6rem; }
.links a {
  font-family: var(--mono); font-size: 0.8125rem;
  text-decoration: none; color: var(--fg);
  transition: color 0.2s ease;
}
.links a::after { content: " ↗"; color: var(--accent); }
.links a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }

/* Featured card: copy left, screenshot right, highlights in a row underneath */

.featured {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2rem;
  border-color: var(--accent-line);
}
.featured .card-body { display: flex; flex-direction: column; }
.featured .points {
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}

.shot {
  display: block;
  border-radius: 0.6rem;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #0c0c0c;
  align-self: start;
}
.shot img { width: 100%; transition: transform 0.6s ease; }
.shot:hover img { transform: scale(1.02); }

.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-top: 1.25rem; }

.thumb {
  margin-top: 1.4rem;
  height: 13rem;
  border-radius: 0.6rem;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #0c0c0c;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 0.6s ease; }
.card:hover .thumb img { transform: scale(1.03); }

/* ---------- Toolkit ---------- */

.logos {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.logos li {
  display: grid; place-items: center; gap: 0.6rem;
  padding: 1.25rem 0.5rem 1rem;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: background-color 0.2s ease;
}
.logos li:hover { background: var(--accent-soft); }
.logos img { width: 2.25rem; height: 2.25rem; object-fit: contain; }
.logos span { font-family: var(--mono); font-size: 0.6875rem; color: var(--faint); text-align: center; }

.only-dark { display: block; }
.only-light { display: none !important; }
:root[data-theme="light"] .only-dark { display: none !important; }
:root[data-theme="light"] .only-light { display: block !important; }

.skills { margin-top: 2.5rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 3rem; }
.skills div {
  display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--line);
}
.skills dt { font-family: var(--mono); font-size: 0.8125rem; color: var(--accent); padding-top: 0.1rem; }
.skills dd { color: var(--muted); font-size: 0.9375rem; line-height: 1.65; }

/* ---------- Scroll reveal (content stays visible without JS) ---------- */

.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease, border-color 0.25s ease; }
.js .reveal.in { opacity: 1; transform: none; }

/* ---------- Footer ---------- */

.footer {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;
  padding-top: 2rem; padding-bottom: 3rem;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.8125rem; color: var(--faint);
}
.footer nav { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.footer a { color: var(--muted); text-decoration: none; }
.footer a:hover { color: var(--accent); }

/* ---------- Focus + motion ---------- */

a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal, .js .term-lines li { opacity: 1; transform: none; transition: none; }
  .cursor, .term-lines .dot, .badge-live .dot, .term-status::before { animation: none; }
  .shot img, .thumb img { transition: none; }
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; min-height: 0; padding-top: 3.5rem; padding-bottom: 4.5rem; gap: 3rem; }
  .featured { grid-template-columns: 1fr; }
  .featured .points { grid-template-columns: 1fr; gap: 1.25rem; }
  .shot { order: -1; }
  .logos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .skills { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .wrap { padding: 0 1rem; }
  .nav-inner { height: 3.75rem; }
  .wordmark { font-size: 0.9375rem; }
  .nav nav { gap: 0.85rem; }
  .nav nav a { font-size: 0.75rem; }
  .nav nav a[href="#projects"] { display: none; }
  .theme-toggle { width: 2rem; height: 2rem; }
  .hero-sub { font-size: 1.15rem; }
  .hero-bio { font-size: 1rem; }
  .term { font-size: 0.75rem; }
  .term-lines { min-height: 0; padding: 0.85rem 0.9rem 2.5rem; }
  .projects, .toolkit { padding-top: 4rem; }
  .grid { grid-template-columns: 1fr; }
  .card { padding: 1.25rem; }
  .card h3 { margin-top: 1.25rem; }
  .logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .skills div { grid-template-columns: 1fr; gap: 0.2rem; }
}

@media (max-width: 380px) {
  .nav nav a[href*="linkedin"] { display: none; }
}