@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&family=Geist+Mono:wght@400&family=Newsreader:opsz,ital,wght@6..72,0,300;6..72,1,300&display=swap');

:root{
  --bg:#F4F3EC;
  --text:#171914;
  --muted:#73766D;
  --border:rgba(25,25,20,.13);
  --border-strong:rgba(25,25,20,.22);
  --dark:#0B1413;
}

*{margin:0;padding:0;box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html{height:100%; -webkit-text-size-adjust:100%; scrollbar-width:thin}
body{
  min-height:100%;
  font-family:'Inter', system-ui, -apple-system, sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
::selection{background:var(--dark);color:var(--bg)}
:focus-visible{outline:1.5px solid var(--dark);outline-offset:3px}

/* header — quiet identity only */
.site-header{
  padding:28px 28px 0;
  max-width:1200px;
  margin:0 auto;
}
.identity__name{
  font-size:15px;
  font-weight:500;
  letter-spacing:-.02em;
  line-height:1;
}
.identity__sub{
  margin-top:5px;
  font-size:12.5px;
  font-style:italic;
  font-weight:300;
  color:var(--muted);
  letter-spacing:-.01em;
}
@media(max-width:640px){ .site-header{padding:18px 18px 0} }

/* page */
.page{
  min-height:78vh;
  display:flex;
  justify-content:center;
  padding:56px 20px 64px;
}
.stack{
  width:min(860px, 92vw);
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* cards grid — 2x2 */
.cards{
  width:100%;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
@media(max-width:760px){ .cards{grid-template-columns:1fr} }

.card{
  position:relative;
  overflow:hidden;
  border:1px solid var(--border);
  background:#fff;
  min-height:320px;
  display:flex;
  flex-direction:column;
  isolation:isolate;
  transition:
    transform 420ms ease,
    border-color 420ms ease,
    box-shadow 420ms ease;
}
.card--github{ min-height:360px; }
.card--leetcode{ min-height:360px; }
.card:hover{
  transform:translateY(-3px);
  border-color:var(--border-strong);
  box-shadow:0 12px 40px rgba(7,20,19,.08);
}

/* visual layer */
.card-visual{
  position:absolute;
  inset:0;
  overflow:hidden;
  transition:transform 600ms ease;
}
.card:hover .card-visual{ transform:scale(1.012) }
.vis{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.card__shade{
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(7,20,19,.58) 18%, rgba(7,20,19,.18) 52%, rgba(7,20,19,.04) 100%);
  transition:opacity 420ms ease;
}
.card--medium .card__shade{
  background:linear-gradient(to top, rgba(23,25,20,.22) 14%, rgba(23,25,20,.04) 58%, rgba(244,243,236,.06) 100%);
}
.card--linkedin .card__shade{
  background:linear-gradient(to top, rgba(26,42,64,.28) 14%, rgba(26,42,64,.06) 58%, rgba(244,243,236,.04) 100%);
}
.card:hover .card__shade{ opacity:.90 }

/* inner foreground — only text on card */
.card__inner{
  position:relative;
  z-index:1;
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:18px 18px 20px;
  color:#fff;
}
.card--medium .card__inner{ color:var(--text); }
.card--linkedin .card__inner{ color:var(--text); }
.card--medium .card__inner .card__kicker,
.card--linkedin .card__inner .card__kicker{ color:rgba(23,25,20,.55) }
.card__top{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:'Geist Mono', monospace;
  font-size:10px;
  letter-spacing:.14em;
}
.card__kicker{ opacity:.95; flex:1 }
.card__arrow{
  width:28px;height:28px;
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.34);
  background:rgba(255,255,255,.10);
  backdrop-filter:blur(6px);
  font-size:14px;
  transition:transform 420ms ease;
}
.card--medium .card__arrow,
.card--linkedin .card__arrow{
  border-color:rgba(25,25,20,.14);
  background:rgba(255,255,255,.72);
}
.card:hover .card__arrow{ transform:translate(6px, -3px) }
.card:hover .card__main h2{ transform:translateX(4px) }
.card__main h2{
  font-size:28px;
  font-weight:500;
  letter-spacing:-.03em;
  line-height:1;
  transition:transform 420ms ease;
}
.card__main p{
  margin-top:8px;
  font-family:'Geist Mono', monospace;
  font-size:10px;
  letter-spacing:.10em;
  opacity:.82;
}
.card--github .card__main h2,
.card--leetcode .card__main h2{ text-shadow:0 1px 12px rgba(0,0,0,.28) }

/* — GITHUB — branching (#07110F) */
.card--github .card-visual{ background:#07110F; }
.vis--github .gh-branches path{
  stroke-dasharray:280;
  stroke-dashoffset:280;
  animation:draw 2.9s ease forwards;
}
.vis--github .br-1{ animation-delay:.15s } .vis--github .br-2{ animation-delay:.35s } .vis--github .br-3{ animation-delay:.68s } .vis--github .br-4{ animation-delay:.82s }
.vis--github .br-5{ animation-delay:1.08s } .vis--github .br-6{ animation-delay:1.22s } .vis--github .br-7{ animation-delay:1.48s } .vis--github .br-8{ animation-delay:1.58s }
@keyframes draw{ to{ stroke-dashoffset:0 } }
.vis--github .gh-nodes circle{
  fill:rgba(255,255,255,.92);
  stroke:#07110F;
  stroke-width:1.1;
  opacity:0;
  animation:nodeIn .5s ease forwards, pulseNode 3.4s ease-in-out 2.8s infinite;
}
.vis--github .n0{ animation-delay:.7s,.7s } .vis--github .n1{ animation-delay:.98s,.98s } .vis--github .n2{ animation-delay:1.02s,1.02s }
.vis--github .n3{ animation-delay:1.38s,1.38s } .vis--github .n4{ animation-delay:1.68s,1.68s } .vis--github .n5{ animation-delay:1.82s,1.82s } .vis--github .n6{ animation-delay:1.88s,1.88s }
.vis--github .n3{ fill:#7ee787 }
@keyframes nodeIn{ from{ opacity:0; transform:scale(.6)} to{ opacity:1; transform:scale(1)} }
@keyframes pulseNode{ 0%,100%{ transform:scale(1)} 50%{ transform:scale(1.07)} }
.gh-halo{ animation:halo 3.8s ease-in-out infinite; transform-origin:218px 112px; }
@keyframes halo{ 0%,100%{ opacity:.9; transform:scale(1)} 50%{ opacity:.45; transform:scale(1.1)} }
.gh-travellers .trav{
  offset-rotate:0deg;
  animation:travel 4.2s linear infinite;
}
.trav.t1{ offset-path:path('M 28 112 C 62 112 72 68 122 68 C 158 68 168 112 218 112'); animation-delay:0s }
.trav.t2{ offset-path:path('M 28 112 C 62 112 72 68 122 68 C 158 68 168 156 218 156'); animation-delay:1.2s }
.trav.t3{ offset-path:path('M 218 112 C 256 112 268 68 332 68'); animation-delay:2.4s }
@keyframes travel{ 0%{ offset-distance:0%; opacity:0 } 10%{ opacity:1 } 90%{ opacity:1 } 100%{ offset-distance:100%; opacity:0 } }

/* — LINKEDIN — connecting (pale blue-gray) */
.card--linkedin .card-visual{ background:#E7ECF1; background:linear-gradient(180deg, #E7ECF1 0%, #dde4ee 100%); }
.vis--linkedin .li-edges path{
  stroke-dasharray:220;
  stroke-dashoffset:220;
  animation:draw 2.7s ease forwards;
}
.vis--linkedin .e1{ animation-delay:.2s } .vis--linkedin .e2{ animation-delay:.38s } .vis--linkedin .e3{ animation-delay:.58s } .vis--linkedin .e4{ animation-delay:.78s } .vis--linkedin .e5{ animation-delay:.96s } .vis--linkedin .e6{ animation-delay:1.12s } .vis--linkedin .e7{ animation-delay:1.28s } .vis--linkedin .e8{ animation-delay:.48s } .vis--linkedin .e9{ animation-delay:.88s }
.vis--linkedin .ln{
  fill:white;
  stroke:rgba(60,90,130,.14);
  stroke-width:1;
  animation:lnDrift 9s ease-in-out infinite alternate;
}
.vis--linkedin .ln.center{ fill:#5b7aa3; stroke:rgba(60,90,130,.22); r:9.5; }
.vis--linkedin .n1{ animation-delay:0s } .vis--linkedin .n2{ animation-delay:.5s } .vis--linkedin .n3{ animation-delay:.9s } .vis--linkedin .n4{ animation-delay:.3s } .vis--linkedin .n5{ animation-delay:1.1s } .vis--linkedin .n6{ animation-delay:1.4s } .vis--linkedin .n7{ animation-delay:1.7s }
@keyframes lnDrift{ 0%{ transform:translate(0,0)} 50%{ transform:translate(1.4px, -1.8px)} 100%{ transform:translate(-1.1px, 1.6px)} }
.vis--linkedin .li-pulse circle{
  animation:pulseRing 3.8s ease-out infinite;
  transform-origin:142px 108px;
}
.vis--linkedin .li-pulse circle:nth-child(2){ animation-delay:1.25s }
@keyframes pulseRing{ 0%{ opacity:.38; transform:scale(.72)} 68%{ opacity:0; transform:scale(1.5)} 100%{ opacity:0; transform:scale(1.5)} }

/* — MEDIUM — writing (cream) */
.card--medium .card-visual{ background:#F3F0E8; display:flex; align-items:center; justify-content:center; }
.md-scene{
  position:relative;
  width:300px;
  height:148px;
  background:rgba(255,255,255,.62);
  border:1px solid rgba(23,25,20,.07);
  box-shadow:0 8px 24px rgba(23,25,20,.06);
  padding:18px 18px 16px;
  display:flex;
  flex-direction:column;
  gap:0;
}
.md-page{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:11px;
}
.md-line{
  height:2px;
  background:rgba(23,25,20,.14);
  border-radius:999px;
  width:0;
  animation:writeLine 7.2s ease-in-out infinite;
}
.md-line.l1{ width:88%; animation-delay:0s; }
.md-line.l2{ width:62%; animation-delay:0s; }
.md-line.l3{ width:78%; animation-delay:0s; }
.md-line.l4{ width:92%; animation-delay:0s; }
.md-line.l5{ width:54%; animation-delay:0s; }
.md-line.l6{ width:74%; animation-delay:0s; }
.md-line.l7{ width:46%; animation-delay:0s; }
.md-line.l1{ animation:writeL1 7.2s ease-in-out infinite }
.md-line.l2{ animation:writeL2 7.2s ease-in-out infinite }
.md-line.l3{ animation:writeL3 7.2s ease-in-out infinite }
.md-line.l4{ animation:writeL4 7.2s ease-in-out infinite }
.md-line.l5{ animation:writeL5 7.2s ease-in-out infinite }
.md-line.l6{ animation:writeL6 7.2s ease-in-out infinite }
.md-line.l7{ animation:writeL7 7.2s ease-in-out infinite }
@keyframes writeL1{ 0%{width:0;opacity:0} 8%{opacity:1} 18%{width:88%} 86%{width:88%;opacity:1} 92%{opacity:0} 100%{width:0;opacity:0} }
@keyframes writeL2{ 0%,18%{width:0;opacity:0} 20%{opacity:1} 30%{width:62%} 86%{width:62%;opacity:1} 92%{opacity:0} 100%{width:0} }
@keyframes writeL3{ 0%,30%{width:0;opacity:0} 32%{opacity:1} 42%{width:78%} 86%{opacity:1} 92%{opacity:0} 100%{width:0} }
@keyframes writeL4{ 0%,42%{width:0;opacity:0} 44%{opacity:1} 54%{width:92%} 86%{opacity:1} 92%{opacity:0} 100%{width:0} }
@keyframes writeL5{ 0%,54%{width:0;opacity:0} 56%{opacity:1} 62%{width:54%} 86%{opacity:1} 92%{opacity:0} 100%{width:0} }
@keyframes writeL6{ 0%,62%{width:0;opacity:0} 64%{opacity:1} 72%{width:74%} 86%{opacity:1} 92%{opacity:0} 100%{width:0} }
@keyframes writeL7{ 0%,72%{width:0;opacity:0} 74%{opacity:1} 80%{width:46%} 86%{opacity:1} 92%{opacity:0} 100%{width:0} }
.md-cursor{
  position:absolute;
  width:2px;
  height:14px;
  background:rgba(23,25,20,.82);
  bottom:22px;
  left:18px;
  animation:cursorMove 7.2s ease-in-out infinite, blink 1s steps(1) infinite;
}
@keyframes cursorMove{
  0%{ left:18px; top:22px; opacity:1 }
  18%{ left:calc(18px + 88% - 2px); top:22px }
  30%{ left:18px; top:43px }
  42%{ left:calc(18px + 78% - 2px); top:43px }
  54%{ left:18px; top:64px }
  62%{ left:calc(18px + 54% - 2px); top:64px }
  72%{ left:18px; top:85px }
  80%{ left:calc(18px + 46% - 2px); top:85px }
  86%{ opacity:1 } 92%{ opacity:0 } 100%{ opacity:0 }
}
@keyframes blink{ 0%,50%{opacity:1} 51%,100%{opacity:0} }

/* — LEETCODE — solving (near-black + amber) */
.card--leetcode .card-visual{ background:#10110F; }
.vis--leetcode{
  position:absolute;
  inset:0;
}
.vis--leetcode .lc-array rect,
.vis--leetcode .lc-tree path,
.vis--leetcode .lc-graph path{
  stroke:rgba(255,255,255,.12);
}
.vis--leetcode .lc-array{
  animation:cycle 9s ease-in-out infinite;
}
.vis--leetcode .lc-tree{
  animation:cycle 9s ease-in-out infinite;
  animation-delay:3s;
}
.vis--leetcode .lc-graph{
  animation:cycle 9s ease-in-out infinite;
  animation-delay:6s;
}
@keyframes cycle{
  0%, 30%{ opacity:1; transform:scale(1) }
  33%, 100%{ opacity:0; transform:scale(.98) }
}
.vis--leetcode .lc-array rect{
  fill:none;
  stroke:rgba(255,255,255,.18);
  stroke-width:1;
}
.vis--leetcode .lc-array circle{
  fill:rgba(255,255,255,.88);
  stroke:#10110F;
  stroke-width:1;
  animation:arrayScan 9s ease-in-out infinite;
}
.vis--leetcode .lc-array circle:nth-child(6){ animation-delay:0s } .vis--leetcode .lc-array circle:nth-child(7){ animation-delay:.2s } .vis--leetcode .lc-array circle:nth-child(8){ animation-delay:.4s } .vis--leetcode .lc-array circle:nth-child(9){ animation-delay:.6s } .vis--leetcode .lc-array circle:nth-child(10){ animation-delay:.8s }
@keyframes arrayScan{
  0%, 8%{ fill:rgba(255,255,255,.88) }
  10%, 16%{ fill:#ffb86b; transform:scale(1.12) }
  18%, 100%{ fill:rgba(255,255,255,.88) }
}
.vis--leetcode .lc-scan{
  stroke:#ffb86b;
  stroke-width:1.2;
  stroke-dasharray:80;
  stroke-dashoffset:80;
  animation:scanDraw 9s ease-in-out infinite;
}
@keyframes scanDraw{
  0%, 6%{ stroke-dashoffset:80; opacity:0 }
  10%{ opacity:1 }
  22%{ stroke-dashoffset:0; opacity:1 }
  30%{ opacity:0 }
  100%{ opacity:0 }
}
.vis--leetcode .lc-tree path{ stroke:rgba(255,255,255,.18); stroke-width:1.1; fill:none; }
.vis--leetcode .lc-tree circle{
  fill:rgba(255,255,255,.92);
  stroke:#10110F;
  stroke-width:1;
  animation:treePulse 9s ease-in-out infinite;
}
.vis--leetcode .lc-tree .lc-hl{
  fill:none;
  stroke:#ffb86b;
  stroke-width:1.2;
  opacity:0;
  animation:hlPulse 9s ease-in-out infinite;
}
@keyframes treePulse{
  0%, 38%{ transform:scale(1) }
  42%, 46%{ transform:scale(1.14); fill:#ffb86b }
  50%, 100%{ transform:scale(1) }
}
@keyframes hlPulse{
  0%, 40%{ opacity:0; transform:scale(.9) }
  43%, 47%{ opacity:1; transform:scale(1) }
  50%, 100%{ opacity:0 }
}
.vis--leetcode .lc-graph circle{ fill:rgba(255,255,255,.92); stroke:#10110F; stroke-width:1; }
.vis--leetcode .lc-graph .lc-trav{
  offset-path:path('M 68 104 L 128 104 L 182 118 L 246 104');
  offset-rotate:0deg;
  animation:travGraph 9s linear infinite;
}
@keyframes travGraph{
  0%, 66%{ offset-distance:0%; opacity:0 }
  68%{ opacity:1 }
  78%{ offset-distance:100%; opacity:1 }
  80%,100%{ opacity:0 }
}

/* note after cards */
.note{
  margin-top:32px;
  text-align:center;
  font-family:'Newsreader', serif;
  font-style:italic;
  font-weight:300;
  font-size:15px;
  line-height:1.45;
  color:var(--muted);
  letter-spacing:-.01em;
}

/* — Responsive — */
@media(max-width:760px){
  .page{ padding:40px 16px 40px }
  .stack{ width:min(560px, 94vw) }
  .cards{ gap:12px }
  .card{ min-height:300px }
  .card--github, .card--leetcode{ min-height:320px }
  .card__inner{ padding:16px 16px 18px }
  .card__main h2{ font-size:26px }
  .vis{ transform:scale(.96); transform-origin:center }
  .card:hover .vis{ transform:scale(.98) }
}

@media(max-width:480px){
  .site-header{ padding:16px 16px 0 }
  .identity__name{ font-size:14px }
  .identity__sub{ font-size:11.5px }
  .page{ padding:28px 14px 32px; min-height:auto }
  .stack{ width:100% }
  .cards{ gap:10px }
  .card{ min-height:270px; border-radius:2px }
  .card--github, .card--leetcode{ min-height:290px }
  .card__inner{ padding:14px 14px 16px }
  .card__top{ font-size:9px; letter-spacing:.12em }
  .card__arrow{ width:26px; height:26px; font-size:13px }
  .card__main h2{ font-size:22px }
  .card__main p{ font-size:9px; margin-top:6px }
  .md-scene{ width:92%; max-width:280px; height:132px; padding:14px 14px 12px }
  .md-page{ gap:9px }
  .note{ font-size:13.5px; margin-top:24px; padding:0 8px }
  .vis{ transform:scale(.88); }
  .card:hover .vis{ transform:scale(.90) }
}

@media(max-width:360px){
  .page{ padding:24px 12px 28px }
  .cards{ gap:10px }
  .card{ min-height:250px }
  .card--github, .card--leetcode{ min-height:270px }
  .md-scene{ width:100%; height:124px }
}

/* touch devices — no hover lift, keep tap feedback */
@media(hover:none){
  .card:hover{ transform:none; box-shadow:none; border-color:var(--border) }
  .card:hover .card-visual{ transform:none }
  .card:hover .card__shade{ opacity:1 }
  .card:hover .card__arrow{ transform:none }
  .card:hover .card__main h2{ transform:none }
  .card:active{ transform:scale(.985); border-color:var(--border-strong) }
}

/* reduce motion */
@media(prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important}
  .card:hover .card-visual{transform:none}
  .gh-travellers, .lc-trav{ display:none }
}