/* ============================================================
   Juan Raphael Dilag, portfolio
   Design tokens ported verbatim from the Claude Design prototype.
   ============================================================ */

:root {
  --bg: #121512;
  --bg2: #171c17;
  --bg3: #1d231d;
  --line: #232a23;
  --line2: #2c342c;
  --text: #e8ece7;
  --muted: #aab2a8;
  --faint: #6e786c;
  --accent: #7fb487;
  --accentSoft: rgba(127, 180, 135, 0.12);
  --accentInk: #0c100c;
  --shadow: rgba(0, 0, 0, 0.32);
  --maxw: 1200px;
}

[data-theme="light"] {
  --bg: #f3f5f1;
  --bg2: #ffffff;
  --bg3: #eef1ec;
  --line: #e2e6dd;
  --line2: #d4dacf;
  --text: #161a15;
  --muted: #4f5a4c;
  --faint: #8a9486;
  --accent: #3c7a4a;
  --accentSoft: rgba(60, 122, 74, 0.10);
  --accentInk: #ffffff;
  --shadow: rgba(0, 0, 0, 0.08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Hanken Grotesk', sans-serif;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  scroll-padding-top: 80px;
  overflow-x: hidden; /* allow the full-bleed hero canvas without a horizontal scrollbar */
}
::selection { background: var(--accentSoft); }
a { color: inherit; }
*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.mono { font-family: 'IBM Plex Mono', monospace; }

/* ---------------- layout ---------------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }
main { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }

.section { padding: 64px 0; border-top: 1px solid var(--line); }
.section-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 44px; }
.section-num { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--accent); }
.section-head h2 {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
}
.section-lead {
  font-size: 16px; color: var(--muted); max-width: 62ch;
  line-height: 1.6; margin: -28px 0 44px 45px;
}

/* ---------------- nav ---------------- */
header.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
header.nav nav {
  max-width: var(--maxw); margin: 0 auto; padding: 0 32px; height: 64px;
  display: flex; align-items: center; justify-content: space-between;
}
.brand { text-decoration: none; font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }
.brand span { color: var(--accent); }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a.navlink {
  text-decoration: none; font-family: 'IBM Plex Mono', monospace;
  font-size: 13px; color: var(--muted); transition: color .18s;
}
.nav-links a.navlink:hover { color: var(--text); }

button.theme-toggle {
  background: transparent; border: 1px solid var(--line2); color: var(--muted);
  font-family: 'IBM Plex Mono', monospace; font-size: 12px;
  padding: 7px 12px; border-radius: 3px; cursor: pointer; transition: color .18s, border-color .18s;
}
button.theme-toggle:hover { color: var(--text); border-color: var(--accent); }

/* buttons / CTAs */
.btn {
  text-decoration: none; display: inline-block; font-weight: 600;
  border-radius: 3px; cursor: pointer; font-family: 'Hanken Grotesk', sans-serif;
  transition: border-color .18s, transform .18s, background .18s;
}
.btn-primary { background: var(--accent); color: var(--accentInk); border: 1px solid var(--accent); }
.btn-outline { background: transparent; border: 1px solid var(--line2); color: var(--text); }
.btn-outline:hover { border-color: var(--accent); }
.btn-sm { font-size: 14px; padding: 9px 16px; }
.btn-md { font-size: 15px; padding: 13px 22px; }

/* ---------------- hero ---------------- */
.hero { position: relative; padding: 96px 0 72px; }

/* full-bleed canvas: spans the whole viewport width. Its height is capped to
   the upper part of the hero so there is NO canvas (and therefore no animation,
   live trails included) behind the profile card or at the seam with the next
   section. The fade blends the canvas's own bottom edge into solid bg. */
.hero-canvas {
  position: absolute;
  top: 0; height: 60%;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: 0; display: block; pointer-events: none;
}
.hero-fade {
  position: absolute; top: 0; height: 60%;
  left: 50%; width: 100vw; transform: translateX(-50%);
  z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent 25%, var(--bg) 100%);
}
.hero-bgcontrol {
  position: absolute; top: 38px; right: 0; z-index: 3;
  display: flex; align-items: center; gap: 10px;
}
.hero-bgcontrol .label {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--faint);
}
.bg-select-wrap { position: relative; display: inline-flex; align-items: center; }
.bg-select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--muted);
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  border: 1px solid var(--line2); border-radius: 4px;
  padding: 8px 30px 8px 12px; cursor: pointer; backdrop-filter: blur(6px);
  transition: color .18s, border-color .18s;
}
.bg-select:hover { color: var(--text); border-color: var(--accent); }
.bg-select option { background: var(--bg2); color: var(--text); }
.bg-select-caret {
  position: absolute; right: 11px; top: 50%; transform: translateY(-50%);
  font-size: 11px; color: var(--faint); pointer-events: none;
}

.hero-inner { position: relative; z-index: 2; }
.hero-kicker {
  font-family: 'IBM Plex Mono', monospace; font-size: 13px; letter-spacing: 0.08em;
  color: var(--accent); margin-bottom: 26px;
}
.hero h1 {
  font-size: clamp(40px, 7vw, 76px); line-height: 1.0; font-weight: 800;
  letter-spacing: -0.03em; margin: 0; max-width: 14ch;
}
.hero-lead { font-size: clamp(20px, 2.6vw, 26px); line-height: 1.42; color: var(--text); max-width: 30ch; margin: 30px 0 0; font-weight: 600; }
.hero-sub { font-size: 17px; line-height: 1.65; color: var(--muted); max-width: 60ch; margin: 20px 0 0; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }

/* profile record */
.profile {
  margin-top: 56px; border: 1px solid var(--line); border-radius: 4px;
  background: var(--bg2); font-family: 'IBM Plex Mono', monospace; font-size: 13.5px; max-width: 780px;
}
.profile .row { display: grid; grid-template-columns: 150px 1fr; border-bottom: 1px solid var(--line); }
.profile .row:last-child { border-bottom: none; }
.profile .k { padding: 14px 20px; color: var(--faint); border-right: 1px solid var(--line); }
.profile .v { padding: 14px 20px; color: var(--text); }
.profile .v.accent { color: var(--accent); }

/* ---------------- skills ---------------- */
.skills-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 4px; overflow: hidden;
}
.skill-group { background: var(--bg2); padding: 28px; }
.skill-group .head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.skill-group h3 { font-size: 18px; font-weight: 700; margin: 0; }
.skill-group .explore {
  background: transparent; border: none; color: var(--accent);
  font-family: 'IBM Plex Mono', monospace; font-size: 12px; cursor: pointer; padding: 0;
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; color: var(--muted);
  background: var(--bg3); border: 1px solid var(--line2); padding: 6px 11px; border-radius: 3px;
}

/* decorative closed-network packet-flow viz filling the spare skills-grid cell */
.net-cell { display: flex; flex-direction: column; grid-column: 1 / -1; }
.net-canvas { width: 100%; height: 120px; display: block; pointer-events: none; }
.net-legend { display: flex; gap: 16px; margin-top: 10px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--faint); }
.net-legend b { color: var(--accent); font-weight: 400; }

/* ---------------- projects ---------------- */
.filter-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.filter-btn {
  font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; padding: 8px 14px;
  border-radius: 3px; cursor: pointer; border: 1px solid var(--line2);
  background: transparent; color: var(--muted); transition: border-color .18s, color .18s;
}
.filter-btn:hover { color: var(--text); }
.filter-btn[aria-pressed="true"] { background: var(--accent); color: var(--accentInk); border-color: var(--accent); }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 20px; }
.card {
  background: var(--bg2); border: 1px solid var(--line); border-radius: 5px; padding: 26px;
  cursor: pointer; display: flex; flex-direction: column; gap: 16px; min-height: 260px;
  transition: border-color .18s, transform .18s, box-shadow .18s;
  text-align: left; font: inherit; color: inherit; width: 100%;
}
.card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 10px 30px var(--shadow); }
.card[hidden] { display: none; }
.card .top { display: flex; align-items: center; justify-content: space-between; }
.card .num { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--accent); }
.card .body { flex: 1; }
.card h3 { font-size: 21px; font-weight: 700; line-height: 1.2; margin: 0 0 6px; letter-spacing: -0.01em; }
.card .org { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; color: var(--faint); margin-bottom: 14px; }
.card .blurb { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 0; }
.card-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.card-tag { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--muted); background: var(--bg3); padding: 4px 9px; border-radius: 3px; }
.card .open { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; color: var(--accent); margin-top: 2px; }

.nda-badge {
  font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--faint); border: 1px solid var(--line2);
  padding: 4px 8px; border-radius: 3px;
}

.side-box { margin-top: 44px; border: 1px dashed var(--line2); border-radius: 5px; background: var(--bg2); padding: 30px; }
.side-box .eyebrow {
  font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 18px;
}
.side-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 28px; }
.side-grid h4 { font-size: 16px; font-weight: 700; margin: 0 0 8px; }
.side-grid p { font-size: 14.5px; line-height: 1.6; color: var(--muted); margin: 0; }

/* ---------------- experience ---------------- */
.exp-list { list-style: none; margin: 0; padding: 0; }
.exp-item { display: grid; grid-template-columns: 200px 1fr; gap: 28px; padding: 26px 0; border-top: 1px solid var(--line); }
.exp-period { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--faint); padding-top: 3px; }
.exp-item h3 { font-size: 18px; font-weight: 700; margin: 0 0 4px; }
.exp-org { font-size: 14.5px; color: var(--muted); margin-bottom: 10px; }
.exp-note { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 0; max-width: 64ch; }
.creds { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line); }
.creds .eyebrow {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--faint); align-self: center; margin-right: 6px;
}
.cred { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; color: var(--text); background: var(--bg2); border: 1px solid var(--line2); padding: 7px 12px; border-radius: 3px; }

/* ---------------- about ---------------- */
.about-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 56px; align-items: start; }
.about-body { font-size: 17px; line-height: 1.72; color: var(--text); }
.about-body p { margin: 0 0 18px; }
.about-body p:last-child { margin-bottom: 0; }
.about-body strong { font-weight: 600; }
.glance { border: 1px solid var(--line); border-radius: 4px; background: var(--bg2); padding: 26px; }
.glance .eyebrow {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 16px;
}
.glance dl { margin: 0; font-size: 14.5px; line-height: 1.5; }
.glance dl > div { padding: 12px 0; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; }
.glance dt { color: var(--muted); }
.glance dd { margin: 0; text-align: right; }

/* ---------------- footer ---------------- */
footer.site {
  border-top: 1px solid var(--line); background: var(--bg2); margin-top: 32px;
}
footer.site .inner { max-width: var(--maxw); margin: 0 auto; padding: 72px 32px 40px; }
footer.site .lead { font-size: 18px; color: var(--muted); max-width: 52ch; margin: 0 0 36px 45px; line-height: 1.6; }
.contact-row { display: flex; flex-wrap: wrap; gap: 12px; margin-left: 45px; }
.foot-meta {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px;
  margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--line);
  font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; color: var(--faint);
}

/* ---------------- modal (quick look) ---------------- */
.overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(8, 10, 8, 0.62); backdrop-filter: blur(4px);
  display: flex; align-items: flex-start; justify-content: center;
  overflow-y: auto; padding: 48px 24px;
}
.modal {
  background: var(--bg); border: 1px solid var(--line2); border-radius: 6px;
  max-width: 760px; width: 100%; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
}
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 28px 32px 0; }
.modal-head .tagline { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.modal-head .num { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--accent); }
.modal-head h3 { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 6px; }
.modal-head .meta { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--faint); }
.modal .nda-badge { font-size: 10.5px; }
.icon-btn {
  background: transparent; border: 1px solid var(--line2); color: var(--muted);
  font-size: 18px; width: 34px; height: 34px; border-radius: 3px; cursor: pointer;
  flex: none; line-height: 1;
}
.icon-btn:hover { color: var(--text); border-color: var(--accent); }
.modal-body { padding: 24px 32px 8px; }
.eyebrow-accent {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 8px;
}
.modal-body p { font-size: 15.5px; line-height: 1.62; color: var(--text); margin: 0 0 22px; }
.modal-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.modal-tag { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--muted); background: var(--bg3); padding: 5px 10px; border-radius: 3px; }
.modal-actions { display: flex; gap: 12px; padding: 20px 32px 28px; }

/* ---------------- full case-study detail ---------------- */
.detail { position: fixed; inset: 0; z-index: 110; background: var(--bg); overflow-y: auto; }
.detail-bar {
  position: sticky; top: 0; z-index: 5;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
}
.detail-bar .inner { max-width: 860px; margin: 0 auto; padding: 0 32px; height: 60px; display: flex; align-items: center; justify-content: space-between; }
.detail-bar button { background: transparent; border: none; color: var(--muted); font-family: 'IBM Plex Mono', monospace; font-size: 13px; cursor: pointer; padding: 0; }
.detail-bar a { text-decoration: none; font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--accent); }
.detail article { max-width: 860px; margin: 0 auto; padding: 56px 32px 96px; }
.detail .tagline { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.detail .num { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--accent); }
.detail .nda-badge { font-size: 11px; padding: 5px 10px; }
.detail h1 { font-size: clamp(32px, 5vw, 52px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.04; margin: 0 0 18px; }
.detail .meta { font-family: 'IBM Plex Mono', monospace; font-size: 14px; color: var(--muted); margin-bottom: 28px; }
.detail-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 44px; }
.detail-tag { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--muted); background: var(--bg2); border: 1px solid var(--line2); padding: 6px 11px; border-radius: 3px; }
.detail-sections { display: flex; flex-direction: column; gap: 40px; }
.detail-label { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.detail-sections p { font-size: 18px; line-height: 1.7; color: var(--text); margin: 0; }
.approach-list { display: flex; flex-direction: column; gap: 20px; }
.approach-blk { border-left: 2px solid var(--line2); padding-left: 20px; }
.approach-blk h3 { font-size: 16px; font-weight: 700; margin: 0 0 6px; }
.approach-blk p { font-size: 16px; line-height: 1.66; color: var(--muted); margin: 0; }
.outcome-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.outcome-list li { font-size: 17px; line-height: 1.66; color: var(--text); padding-left: 24px; position: relative; }
.outcome-list li::before { content: "→"; position: absolute; left: 0; top: 1px; color: var(--accent); }
.stack-block { border-top: 1px solid var(--line); padding-top: 28px; }
.stack-block .label { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); margin-bottom: 14px; }
.repo-link { display: inline-block; margin-top: 24px; text-decoration: none; font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--accent); border: 1px solid var(--line2); padding: 10px 16px; border-radius: 3px; }
.detail-back { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line); }

/* earned terminal block (CLI case study only) */
.terminal { border: 1px solid var(--line2); border-radius: 6px; overflow: hidden; margin-bottom: 48px; background: #0c0f0c; box-shadow: 0 12px 40px var(--shadow); }
.terminal .bar { display: flex; align-items: center; gap: 8px; padding: 11px 16px; border-bottom: 1px solid #1f261f; }
.terminal .dot { width: 11px; height: 11px; border-radius: 50%; background: #3a423a; }
.terminal .title { margin-left: 8px; font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: #6e786c; }
.terminal pre { margin: 0; padding: 22px 20px; font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; line-height: 1.7; color: #cdd6cb; overflow-x: auto; }
.terminal .g { color: #7fb487; }
.terminal .dim { color: #6e786c; }
.terminal .warn { color: #e0a64d; }
.terminal .err { color: #d9706b; }

/* scroll-reveal (images/mockups only, never text) */
[data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
[data-reveal].revealed { opacity: 1; transform: none; }

/* ---------------- responsive ---------------- */
@media (max-width: 820px) {
  .nav-links { gap: 16px; }
  .nav-links .navlink { display: none; }
  .about-grid { grid-template-columns: 1fr; gap: 32px; }
  .exp-item { grid-template-columns: 1fr; gap: 8px; }
  main, .wrap, header.nav nav, footer.site .inner { padding-left: 20px; padding-right: 20px; }
  .section-lead, footer.site .lead, .contact-row { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}