/* ============================================================
   Interactive CV — richer, animated, its own personality,
   still rooted in the site's dark identity. (site.css loads first.)
   ============================================================ */

.cv-page { position: relative; background: var(--bg); }
.cv-page::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1200px 620px at 82% -8%, rgba(143,186,209,0.10), transparent 60%),
    radial-gradient(900px 520px at -6% 8%, rgba(201,166,224,0.08), transparent 55%);
}

.cv-wide { max-width: 1040px; }

@media (prefers-reduced-motion: no-preference) {
  .cv-anim { opacity: 0; transform: translateY(16px); animation: cvUp .7s cubic-bezier(.2,.7,.2,1) forwards; }
}
@keyframes cvUp { to { opacity: 1; transform: none; } }

/* ── Hero ─────────────────────────────────────────────────── */
.cv-hero { padding: clamp(40px, 6vw, 72px) 0 clamp(28px, 4vw, 44px); }
.cv-eyebrow {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 16px;
}
.cv-name {
  font-family: var(--font-serif); font-weight: 600; letter-spacing: -0.02em; line-height: 1.04;
  font-size: clamp(2.3rem, 6vw, 4rem);
  background: linear-gradient(92deg, var(--text) 30%, var(--accent-2) 120%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.cv-ipa {
  font-family: var(--font-mono); font-size: clamp(.9rem, 2.4vw, 1.25rem); color: var(--accent);
  letter-spacing: .04em; margin-top: 8px; opacity: .9;
}
.cv-ipa .ipa-cursor { color: var(--accent-2); animation: blink 1.1s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }
.cv-headline {
  font-family: var(--font-serif); font-style: italic; font-size: clamp(1.1rem, 2.6vw, 1.5rem);
  color: var(--text); line-height: 1.4; margin-top: 22px; max-width: 30ch;
}
.cv-summary { font-size: 1rem; color: var(--text-2); line-height: 1.75; margin-top: 18px; max-width: 68ch; }

.cv-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 34px; }
.metric {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 18px 16px;
  position: relative; overflow: hidden;
}
.metric::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: linear-gradient(var(--accent), var(--accent-2));
}
.metric-value {
  font-family: var(--font-serif); font-weight: 600; font-size: clamp(1.8rem, 5vw, 2.6rem);
  color: var(--text); line-height: 1; font-variant-numeric: tabular-nums;
}
.metric-label {
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-muted); margin-top: 8px;
}

/* ── Blocks ───────────────────────────────────────────────── */
.cv-block { padding: clamp(38px, 5vw, 60px) 0; border-top: 1px solid var(--rule-soft); }
.cv-block-head { margin-bottom: 26px; }
.cv-block-head h2 {
  font-family: var(--font-serif); font-weight: 600; font-size: clamp(1.4rem, 3.5vw, 1.9rem);
  letter-spacing: -0.01em; color: var(--text); padding-left: 0;
}
.cv-block-head h2::before { display: none; }
.cv-block-sub { color: var(--text-muted); font-size: .9rem; margin-top: 8px; max-width: 62ch; }

/* ── Skills: radar + bars ─────────────────────────────────── */
.skills-layout { display: grid; grid-template-columns: 320px 1fr; gap: 40px; align-items: center; }
.radar-wrap { display: flex; justify-content: center; }
#radar { width: 100%; max-width: 320px; height: auto; }
.radar-grid { fill: none; stroke: var(--rule); stroke-width: 1; }
.radar-axis { stroke: var(--rule); stroke-width: 1; }
.radar-shape { fill: rgba(143,186,209,0.16); stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.radar-dot { fill: var(--accent-2); }
.radar-label { fill: var(--text-2); font-family: var(--font-mono); font-size: 9px; letter-spacing: .04em; text-transform: uppercase; }
.radar-val { fill: var(--text-muted); font-family: var(--font-mono); font-size: 8px; }

.skill-groups { display: grid; gap: 22px; }
.skill-group-name {
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
  margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
}
.skill-group-name .dot { width: 9px; height: 9px; border-radius: 50%; }
.skill-row { margin-bottom: 10px; }
.skill-row-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; }
.skill-name { font-size: .86rem; color: var(--text); }
.skill-pct { font-family: var(--font-mono); font-size: .68rem; color: var(--text-muted); }
.skill-track { height: 6px; background: var(--bg-2); border: 1px solid var(--rule-soft); border-radius: 6px; overflow: hidden; }
.skill-fill { height: 100%; width: 0; border-radius: 6px; transition: width 1.1s cubic-bezier(.2,.7,.2,1); }

/* ── Knowledge map (force graph) ──────────────────────────── */
.graph-wrap {
  position: relative; border: 1px solid var(--rule); border-radius: 12px; overflow: hidden;
  background:
    radial-gradient(700px 380px at 70% 20%, rgba(143,186,209,0.06), transparent 60%),
    var(--bg-2);
  height: clamp(520px, 74vh, 700px);
  touch-action: none;
}
#graph { width: 100%; height: 100%; display: block; cursor: grab; }
#graph.dragging { cursor: grabbing; }

/* Radial knowledge map */
.rm-link { stroke: var(--rule); stroke-width: 1; transition: stroke-opacity .2s; }
.rm-link.rm-dim { stroke-opacity: .06; }
.rm-lateral { fill: none; stroke-width: 1.1; stroke-opacity: .22; transition: stroke-opacity .2s, stroke-width .2s; }
.rm-lateral.rm-on { stroke-opacity: .85; stroke-width: 1.7; }
.rm-lateral.rm-dim { stroke-opacity: .05; }
.rm-node { transition: opacity .2s; }
.rm-node circle { transition: opacity .2s, fill-opacity .2s, stroke-opacity .2s; }
.rm-node text.rm-label { pointer-events: none; }
.rm-label.center { font-family: var(--font-serif); font-size: 13px; font-weight: 600; fill: var(--text); }
.rm-label.domain { font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; fill: var(--text); }
.rm-label.skill { font-family: var(--font-sans); font-size: 10px; fill: var(--text-2); }
.rm-label.area { font-family: var(--font-sans); font-size: 9.5px; fill: var(--text-muted); }
/* Area names stay hidden until you hover the area or its parent branch — keeps the rim clean */
.rm-node.area text.rm-label { opacity: 0; transition: opacity .2s; }
.rm-node.area:hover text.rm-label,
.rm-node.area.rm-reveal text.rm-label,
.rm-node.area.rm-active text.rm-label { opacity: 1; }
.rm-node.rm-active text { fill: var(--text); font-weight: 600; }
.rm-node.rm-active circle { stroke-opacity: 1; }
.rm-node.rm-dim { opacity: .16; }
.gph-link { stroke: var(--rule); stroke-width: 1.2; transition: stroke .2s, stroke-opacity .2s; }
.gph-node circle { transition: opacity .2s, filter .2s; }
.gph-node text {
  font-family: var(--font-sans); font-size: 11px; fill: var(--text-2); pointer-events: none;
  transition: opacity .2s, fill .2s;
}
.gph-node.hub text { font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; fill: var(--text); }
.gph-node.center text { font-family: var(--font-serif); font-size: 14px; fill: var(--text); }
.gph-dim { opacity: .18; }
.gph-node.active text { fill: var(--text); font-weight: 500; }

.graph-controls { position: absolute; top: 12px; right: 12px; z-index: 3; display: flex; gap: 6px; }
.graph-btn, .graph-reset {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em; line-height: 1;
  color: var(--text-2); background: rgba(20,20,23,.72); border: 1px solid var(--rule);
  border-radius: 6px; cursor: pointer; backdrop-filter: blur(4px);
}
.graph-btn { width: 30px; height: 30px; font-size: 1rem; display: inline-flex; align-items: center; justify-content: center; }
.graph-reset { padding: 6px 12px; }
.graph-btn:hover, .graph-reset:hover { color: var(--accent-2); border-color: var(--accent-line); }
.graph-caption {
  font-size: .78rem; color: var(--text-muted); margin-top: 12px; line-height: 1.5; max-width: 66ch;
}
.graph-legend {
  position: absolute; left: 12px; bottom: 12px; z-index: 3; display: flex; flex-wrap: wrap; gap: 6px 14px;
}
.legend-item { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: .64rem; color: var(--text-2); }
.legend-item .dot { width: 9px; height: 9px; border-radius: 50%; }

/* ── Timeline ─────────────────────────────────────────────── */
.tl-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.tl-filter {
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-muted); background: var(--surface); border: 1px solid var(--rule);
  border-radius: 20px; padding: 6px 14px; cursor: pointer;
}
.tl-filter:hover { color: var(--accent); border-color: var(--accent-line); }
.tl-filter.active { color: var(--bg); background: var(--accent); border-color: var(--accent); }

.timeline { position: relative; padding-left: 30px; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--rule); }
.tl-entry { position: relative; padding: 0 0 26px 0; }
.tl-entry::before {
  content: ""; position: absolute; left: -30px; top: 4px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--accent); box-shadow: 0 0 0 4px var(--bg);
}
.tl-entry[data-kind="research"]::before { border-color: #8FD1B4; }
.tl-entry[data-kind="training"]::before { border-color: #E0C98F; }
.tl-entry[data-kind="experience"]::before { border-color: #C9A6E0; }
.tl-when { font-family: var(--font-mono); font-size: .68rem; color: var(--text-muted); letter-spacing: .04em; }
.tl-title { font-family: var(--font-serif); font-size: 1.1rem; font-weight: 500; color: var(--text); margin: 3px 0 1px; }
.tl-org { font-size: .84rem; color: var(--accent); }
.tl-detail { font-size: .88rem; color: var(--text-2); line-height: 1.6; margin-top: 6px; max-width: 66ch; }
.tl-kind-tag {
  display: inline-block; font-family: var(--font-mono); font-size: .58rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted); border: 1px solid var(--rule-soft); border-radius: 4px; padding: 1px 6px; margin-left: 8px; vertical-align: middle;
}

/* ── Areas + Languages ────────────────────────────────────── */
/* Areas of expertise — interactive 2.5D constellation */
.areas-stage {
  position: relative; height: clamp(440px, 66vh, 600px);
  border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; touch-action: none;
  background: radial-gradient(760px 420px at 50% 0%, rgba(143,186,209,.05), transparent 60%), var(--bg-2);
}
.areas-view { position: absolute; inset: 0; transform-origin: 0 0; }
.areas-edges { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.area-edge { stroke: var(--rule); stroke-width: 1.2; transition: stroke .2s, stroke-opacity .2s; }
.area-edge.active { stroke: var(--accent); stroke-width: 1.6; }
.area-edge.dim { stroke-opacity: .12; }
.areas-nodes { position: absolute; inset: 0; }
.area-node {
  --ac: var(--accent);
  position: absolute; top: 0; left: 0; will-change: transform;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font-family: var(--font-sans); font-size: .86rem; color: var(--text);
  background: color-mix(in srgb, var(--ac) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--ac) 40%, var(--rule));
  border-radius: 22px; padding: 9px 15px; cursor: grab;
  box-shadow: 0 10px 22px -14px rgba(0,0,0,.85);
  transition: box-shadow .2s, border-color .2s, background .2s, opacity .2s, filter .2s;
}
.area-node:hover { border-color: var(--ac); box-shadow: 0 16px 30px -14px var(--ac); }
.area-node:active { cursor: grabbing; }
.area-node-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ac); flex: none; box-shadow: 0 0 8px 0 var(--ac); }
.area-node.selected { border-color: var(--ac); background: color-mix(in srgb, var(--ac) 22%, var(--surface)); box-shadow: 0 20px 40px -14px var(--ac); z-index: 4; }
.area-node.related { border-color: color-mix(in srgb, var(--ac) 60%, var(--rule)); }
.area-node.dim { opacity: .28; filter: saturate(.6); }

.areas-controls { position: absolute; top: 12px; right: 12px; z-index: 6; display: flex; gap: 6px; }

.area-detail {
  position: absolute; left: 12px; bottom: 12px; z-index: 7; width: min(360px, calc(100% - 24px));
  background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(8px);
  border: 1px solid var(--accent-line); border-radius: 12px; padding: 18px 18px 16px;
  box-shadow: 0 24px 50px -20px rgba(0,0,0,.9);
}
.area-detail-close { position: absolute; top: 8px; right: 12px; background: none; border: none; color: var(--text-muted); font-size: 1.25rem; cursor: pointer; line-height: 1; }
.area-detail-close:hover { color: var(--accent-2); }
.area-detail-title { font-family: var(--font-serif); font-size: 1.2rem; font-weight: 600; color: var(--text); padding-right: 20px; }
.area-detail-desc { font-size: .9rem; color: var(--text-2); line-height: 1.6; margin-top: 8px; }
.area-detail-links-wrap { margin-top: 14px; }
.area-detail-links-label { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
.area-detail-links { display: flex; flex-wrap: wrap; gap: 6px; }
.area-detail-link {
  --ac: var(--accent); font-family: var(--font-sans); font-size: .76rem; color: var(--text-2);
  background: color-mix(in srgb, var(--ac) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--ac) 34%, var(--rule));
  border-radius: 14px; padding: 5px 11px; cursor: pointer; transition: color .15s, border-color .15s, background .15s;
}
.area-detail-link:hover { color: var(--text); border-color: var(--ac); background: color-mix(in srgb, var(--ac) 18%, var(--surface)); }

@media (max-width: 560px) {
  .areas-stage { height: clamp(400px, 72vh, 520px); }
  .area-detail { left: 10px; right: 10px; bottom: 10px; width: auto; }
}

.lang-bars { display: grid; gap: 16px; max-width: 520px; }
.lang-row-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.lang-name { font-family: var(--font-serif); font-size: 1.02rem; color: var(--text); }
.lang-level { font-family: var(--font-mono); font-size: .68rem; color: var(--text-muted); letter-spacing: .04em; }
.lang-track { height: 8px; background: var(--bg-2); border: 1px solid var(--rule-soft); border-radius: 8px; overflow: hidden; }
.lang-fill { height: 100%; width: 0; border-radius: 8px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width 1.1s cubic-bezier(.2,.7,.2,1); }

/* ── Highlights ───────────────────────────────────────────── */
.hl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.hl-card {
  display: block; background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 20px;
  position: relative; overflow: hidden; transition: transform .18s, border-color .18s, background .18s;
}
.hl-card:hover { transform: translateY(-3px); border-color: var(--accent-line); background: var(--surface-2); }
.hl-name { font-family: var(--font-mono); font-size: .92rem; font-weight: 500; color: var(--accent); }
.hl-card:hover .hl-name { color: var(--accent-2); }
.hl-desc { font-size: .85rem; color: var(--text-2); line-height: 1.6; margin-top: 8px; }
.hl-card::after { content: "↗"; position: absolute; top: 16px; right: 16px; font-family: var(--font-mono); color: var(--text-muted); }
.hl-card:hover::after { color: var(--accent); }

/* ── Projects (agnostic fields, per-project styling) ──────── */
.proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.proj-card {
  --pc: var(--accent);
  position: relative; display: flex; flex-direction: column; gap: 10px;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 22px;
  overflow: hidden; transition: transform .18s cubic-bezier(.2,.7,.2,1), box-shadow .2s, border-color .2s, background .2s;
}
.proj-card:hover { transform: translateY(-4px); border-color: var(--pc); box-shadow: 0 22px 44px -26px var(--pc); }
.proj-top { display: flex; align-items: center; justify-content: space-between; }
.proj-glyph {
  font-family: var(--font-serif); font-size: 1.9rem; line-height: 1; color: var(--pc);
  transition: transform .25s cubic-bezier(.2,.7,.2,1);
}
.proj-card:hover .proj-glyph { transform: scale(1.18) rotate(-4deg); }
.proj-year { font-family: var(--font-mono); font-size: .68rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.proj-name { font-family: var(--font-serif); font-size: 1.22rem; font-weight: 600; color: var(--text); line-height: 1.2; }
.proj-card:hover .proj-name { color: var(--pc); }
.proj-lang { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; color: var(--pc); opacity: .85; }
.proj-desc { font-size: .85rem; color: var(--text-2); line-height: 1.6; flex: 1; }
.proj-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.proj-tag {
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .03em; color: var(--text-muted);
  background: var(--bg-2); border: 1px solid var(--rule-soft); border-radius: 4px; padding: 2px 7px;
}
.proj-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2px; }
.proj-links a {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .03em; color: var(--pc);
  border-bottom: 1px solid transparent;
}
.proj-links a:hover { border-bottom-color: var(--pc); }
.proj-links a::after { content: " ↗"; font-size: .85em; }

/* variants */
.proj-card.solid { background: var(--surface); }
.proj-card.solid { background: color-mix(in srgb, var(--pc) 12%, var(--surface)); border-color: color-mix(in srgb, var(--pc) 40%, var(--rule)); }
.proj-card.outline { background: transparent; border-width: 1.5px; border-color: color-mix(in srgb, var(--pc) 55%, var(--rule)); }
.proj-card.outline .proj-glyph { font-size: 2.2rem; }
.proj-card.minimal { border: none; border-top: 2px solid var(--pc); border-radius: 0 0 10px 10px; background: transparent; padding-left: 4px; padding-right: 4px; }
.proj-card.minimal .proj-glyph { opacity: .8; }
.proj-card.minimal:hover { box-shadow: none; transform: translateY(-2px); }

/* ── Foot ─────────────────────────────────────────────────── */
.cv-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; padding: 40px 0 8px; border-top: 1px solid var(--rule-soft); }
.cv-foot-dl {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 11px 22px;
  font-family: var(--font-mono); font-size: .76rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--bg); background: var(--accent); border-radius: 7px;
}
.cv-foot-dl::before { content: "↓"; }
.cv-foot-dl:hover { background: var(--accent-2); color: var(--bg); }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 820px) {
  .skills-layout { grid-template-columns: 1fr; gap: 30px; }
  .radar-wrap { max-width: 300px; margin: 0 auto; }
  .cv-two-col { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 560px) {
  .cv-metrics { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .graph-legend { position: static; margin: 10px 14px 14px; }
  .graph-wrap { height: clamp(360px, 70vh, 480px); }
}