/* froggychips.xyz — minimal modern, light, with dark-mode follow-up. */

:root {
  --bg: #ffffff;
  --fg: #1a1a1a;
  --muted: #6b6b6b;
  --rule: #e8e8e8;
  --card: #f6f7f8;
  --card-hover: #eef3ef;
  --accent: #2d8a3e;
  --max-w: 640px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e0f10;
    --fg: #e8e8e8;
    --muted: #8a8a8a;
    --rule: #232427;
    --card: #16181a;
    --card-hover: #1b2320;
    --accent: #5fbf6e;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: 'Inter var', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-feature-settings: 'cv11', 'ss03', 'ss01';
  font-size: 16px;
  line-height: 1.55;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 64px 24px 48px;
}

@media (min-width: 720px) {
  main { padding-top: 96px; }
}

header h1 {
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
}

.tagline {
  color: var(--muted);
  margin: 0 0 36px;
  font-size: 15px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.locs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  align-items: center;
}

.loc { display: inline-flex; align-items: center; gap: 6px; }

.flag {
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
  font-size: 15px;
  line-height: 1;
}

.stack { color: var(--fg); }

.bio p {
  margin: 0 0 34px;
  color: var(--fg);
  max-width: 52ch;
}

section { margin-bottom: 40px; }

h2 {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--fg);
  margin: 0 0 16px;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Current work — compact proof-of-motion links near the top */
.now-section { margin-top: -4px; }

.now-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.now-list a {
  display: grid;
  grid-template-columns: 160px 1fr auto;
  gap: 16px;
  align-items: baseline;
  padding: 10px 14px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 10px;
  color: var(--fg);
  text-decoration: none;
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.now-list a::after {
  content: "→";
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  transition: color 140ms ease, transform 140ms ease;
}

.now-list a:hover,
.now-list a:focus-visible {
  background: var(--card-hover);
  border-color: var(--accent);
  transform: translateX(2px);
}

.now-list a:hover::after,
.now-list a:focus-visible::after {
  color: var(--accent);
  transform: translateX(2px);
}

.now-list strong {
  font-size: 14.5px;
  font-weight: 600;
}

.now-list span {
  color: var(--muted);
  font-size: 14px;
}

@media (max-width: 540px) {
  .now-list a {
    grid-template-columns: 1fr auto;
    gap: 4px 10px;
  }
  .now-list span { grid-column: 1 / 2; }
  .now-list a::after { grid-row: 1 / 3; grid-column: 2 / 3; align-self: center; }
}

/* Projects — full-row clickable cards with hover dep-graph */
.projects-group + .projects-group { margin-top: 24px; }

.group-label {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0 0 10px 26px;
  opacity: 0.75;
}

.projects-wrap {
  position: relative;
  /* room on the left for the dep-graph "branch lane" */
  padding-left: 26px;
}

.deps-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.deps-overlay .dep-edge {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  stroke-dasharray: 4 4;
  transition: opacity 180ms ease;
}

.deps-overlay .dep-edge.active {
  opacity: 0.85;
  animation: dep-flow 1.6s linear infinite;
}

@keyframes dep-flow {
  to { stroke-dashoffset: -16; }
}

/* Persistent trunk line through the Froggy-ecosystem nodes */
.deps-overlay .dep-trunk {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.30;
  transition: opacity 180ms ease;
}
.projects.graph-active ~ * .dep-trunk,
.projects-wrap:has(.projects.graph-active) .dep-trunk {
  opacity: 0.18;  /* recede during hover so dashed edges read clearly */
}

.projects { display: flex; flex-direction: column; gap: 8px; }

.projects li {
  padding: 0;
  border: 0;
  position: relative;
  transition: opacity 180ms ease, transform 180ms ease;
}

/* Node dot (git-graph style) — sits in the branch lane left of each card */
.proj-node {
  position: absolute;
  left: -18px;
  top: 22px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--bg);
  border: 1.5px solid var(--muted);
  z-index: 2;
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

/* Trunk-member nodes are filled accent by default so the trunk line doesn't
   look like it's floating between hollow dots. */
.projects li.in-trunk .proj-node {
  background: color-mix(in srgb, var(--accent) 80%, var(--bg));
  border-color: var(--accent);
}

/* Dim non-related cards while a graph is active */
.projects.graph-active li {
  opacity: 0.35;
}
.projects.graph-active li.is-active,
.projects.graph-active li.is-related {
  opacity: 1;
}

/* Highlight the hovered + related nodes */
.projects.graph-active li.is-active .proj-node,
.projects.graph-active li.is-related .proj-node {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent);
}

.projects.graph-active li.is-active {
  transform: translateX(2px);
}

.projects li a {
  display: grid;
  grid-template-columns: 160px 1fr auto;
  column-gap: 20px;
  align-items: baseline;
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 10px;
  color: var(--fg);
  text-decoration: none;
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.projects li a:hover,
.projects li a:focus-visible {
  background: var(--card-hover);
  border-color: var(--accent);
}

.projects li a:hover .proj-arrow,
.projects li a:focus-visible .proj-arrow {
  color: var(--accent);
  transform: translateX(2px);
}

.proj-name {
  font-weight: 600;
  color: var(--fg);
}

.proj-desc {
  color: var(--muted);
  font-size: 14.5px;
}

.proj-desc em {
  font-style: normal;
  color: var(--accent);
  font-weight: 500;
}

.proj-desc code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
  background: var(--rule);
  color: var(--fg);
  padding: 0 4px;
  border-radius: 3px;
}

.proj-arrow {
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  transition: color 140ms ease, transform 140ms ease;
  align-self: center;
}

@media (max-width: 540px) {
  .projects li a {
    grid-template-columns: 1fr auto;
    row-gap: 4px;
    padding: 12px 14px;
  }
  .proj-name { grid-column: 1 / 2; }
  .proj-arrow { grid-row: 1 / 2; grid-column: 2 / 3; }
  .proj-desc { grid-column: 1 / 3; }
}

/* Contact */
.contact { display: flex; flex-direction: column; gap: 2px; }

.contact li { padding: 0; }

.contact li a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  color: var(--fg);
  text-decoration: none;
  border-bottom: 0;
}

.contact li a:hover .ct-label,
.contact li a:focus-visible .ct-label { color: var(--accent); }

.contact li a:hover .ico,
.contact li a:focus-visible .ico { color: var(--accent); }

.ico {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--muted);
  transition: color 140ms ease;
}

.ct-label {
  font-weight: 500;
  transition: color 140ms ease;
  min-width: 78px;
}

.ct-handle {
  color: var(--muted);
  font-size: 14.5px;
}

/* Generic links elsewhere (footer, future prose) */
a {
  color: var(--fg);
  text-decoration: none;
}

footer {
  margin-top: 56px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 14px;
}

footer p { margin: 0; }

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