/* =========================================================
   Personal portfolio site — light theme, minimal
   - Config-driven via assets/js/site-config.js
   - Animated blob background + network texture
   - Responsive hamburger nav at 720px
   ========================================================= */

:root{
  --bg: #fbfbfe;
  --fg: #0b1220;
  --muted: rgba(11,18,32,.70);
  --muted2: rgba(11,18,32,.56);
  --stroke: rgba(11,18,32,.10);
  --stroke2: rgba(11,18,32,.07);
  --accent: #0ea5e9;
  --accent2:#8b5cf6;
  --maxw: 980px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: var(--sans);
  color: var(--fg);
  background: var(--bg);
  overflow-x:hidden;
}

/* Background: animated blobs + drifting network texture overlay */
.bgfx{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  overflow:hidden;
}
.bgfx::before,
.bgfx::after{
  content:"";
  position:absolute;
  width: 920px;
  height: 920px;
  border-radius: 999px;
  filter: blur(44px);
  opacity: .28;
  transform: translate3d(0,0,0);
}
.bgfx::before{
  left: -260px;
  top: -360px;
  background: radial-gradient(circle at 30% 30%, rgba(14,165,233,.55), transparent 60%),
              radial-gradient(circle at 70% 70%, rgba(139,92,246,.45), transparent 62%);
  animation: floatA 20s ease-in-out infinite alternate;
}
.bgfx::after{
  right: -340px;
  bottom: -440px;
  background: radial-gradient(circle at 30% 40%, rgba(139,92,246,.40), transparent 62%),
              radial-gradient(circle at 70% 60%, rgba(14,165,233,.22), transparent 62%);
  animation: floatB 24s ease-in-out infinite alternate;
}
@keyframes floatA{
  from{ transform: translate3d(0,0,0) scale(1.0); }
  to{ transform: translate3d(60px, 40px, 0) scale(1.06); }
}
@keyframes floatB{
  from{ transform: translate3d(0,0,0) scale(1.0); }
  to{ transform: translate3d(-54px, -36px, 0) scale(1.08); }
}

/* network texture */
.bgtex{
  position: fixed;
  inset: -20px;
  z-index: -1;
  pointer-events: none;
  opacity: .20;
  background-image: url("../img/neural-bg.svg");
  background-size: 1200px auto;
  background-repeat: repeat;
  mix-blend-mode: multiply;
  animation: texDrift 30s linear infinite;
}
@keyframes texDrift{
  from{ background-position: 0px 0px; }
  to{ background-position: 520px 320px; }
}

@media (prefers-reduced-motion: reduce){
  .bgfx::before, .bgfx::after{ animation:none !important; }
  .bgtex{ animation:none !important; }
  main{ animation:none !important; }
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .entry{ transition:none !important; }
}

/* links */
a{ color: inherit; text-decoration: none; }
a:hover{ text-decoration: underline; text-underline-offset: 3px; }
a.link{
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid rgba(14,165,233,.35);
}
a.link:hover{ text-decoration: none; border-bottom-color: rgba(14,165,233,.70); }

/* layout */
.wrap{ max-width: var(--maxw); margin:0 auto; padding: 0 18px; }
main{ padding: clamp(60px, 20vh, 240px) 0 96px; }

/* Home layout — content starts ~1/4 down viewport */
body.home main{
  padding-top: clamp(80px, 22vh, 260px);
}
body.home .hero{
  padding: 0;
}

/* Header */
header{
  position: sticky;
  top:0;
  z-index: 10;
  background: rgba(251,251,254,.74);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(11,18,32,.06);
}
.nav{
  height: 60px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
}
.brand{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 820;
  letter-spacing: -0.2px;
}
.brand .mark{
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 0 0 4px rgba(14,165,233,.10);
}

.navlinks{
  display:flex;
  align-items:center;
  gap: 6px;
}
.navlinks a{
  font-size: 13px;
  font-weight: 650;
  color: var(--muted);
  padding: 7px 10px;
  border-radius: 12px;
}
.navlinks a:hover{
  color: var(--fg);
  background: rgba(11,18,32,.035);
  text-decoration: none;
}
.navlinks a[aria-current="page"]{
  color: var(--fg);
  background: rgba(11,18,32,.045);
  border: 1px solid rgba(11,18,32,.07);
}

.tools{
  display:flex;
  align-items:center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content:flex-end;
}
.iconbtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(11,18,32,.07);
  background: rgba(255,255,255,.62);
}
.iconbtn:hover{ background: rgba(11,18,32,.04); text-decoration:none; }
.iconbtn svg{ width: 18px; height: 18px; color: rgba(11,18,32,.78); }

/* Hero */
.hero{ padding-top: 30px; }
.hero-top{
  display: flex;
  align-items: center;
  gap: 22px;
}
.hero-avatar{
  width: 80px;
  height: 80px;
  border-radius: 999px;
  object-fit: cover;
  border: 2px solid rgba(11,18,32,.08);
  flex-shrink: 0;
}
.h1{
  margin:0 0 12px;
  font-size: 54px;
  line-height: 1.02;
  letter-spacing: -1.1px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.subtitle{
  margin: 0 0 16px;
  max-width: 74ch;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.80;
}
/* About block on homepage */
.about-block{
  margin: 20px 0 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(11,18,32,.07);
}
.about-block p{
  margin: 0;
  max-width: 68ch;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.80;
}

/* Email line at bottom of homepage */
.email-line{
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid rgba(11,18,32,.06);
}
.email-obf{
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted2);
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: color .15s ease;
}
.email-obf:hover{
  color: var(--fg);
}
/* Hide the [at] / [dot] from renderers while keeping it readable for humans via CSS */
.email-obf .eat{
  font-size: 11px;
  color: rgba(11,18,32,.32);
  pointer-events: none;
  user-select: none;
}

/* Minimal page head */
.pagehead{ padding-top: 18px; }
.pagehead h1{
  margin:0 0 10px;
  font-size: 34px;
  letter-spacing: -0.7px;
}
.pagehead p{
  margin:0;
  color: var(--muted);
  max-width: 78ch;
  line-height: 1.75;
}

/* Entries */
.entries{
  margin-top: 22px;
  display:flex;
  flex-direction: column;
  gap: 14px;
}
.entry{
  padding: 16px;
  border-radius: 14px;
  border: 1px solid var(--stroke2);
  background: rgba(255,255,255,.50);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.entry:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(11,18,32,.06);
  background: rgba(255,255,255,.72);
}
.entry h3{
  margin:0 0 6px;
  font-size: 16px;
  letter-spacing: -.2px;
}
.entry p{
  margin:0;
  color: var(--muted);
  line-height: 1.65;
  font-size: 14px;
}
.tags{
  margin-top: 8px;
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}
.tag{
  font-size: 12px;
  color: var(--muted2);
  border: 1px solid rgba(11,18,32,.07);
  background: rgba(255,255,255,.70);
  padding: 4px 9px;
  border-radius: 999px;
}

/* Writing: posts list */
.postlist{
  margin-top: 18px;
  border-top: 1px solid rgba(11,18,32,.07);
  padding-top: 14px;
}
.post{
  padding: 12px 0;
  border-top: 1px solid rgba(11,18,32,.07);
}
.post:first-child{ border-top: 0; }
.post .date{
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted2);
}
.post a.title{
  display:inline-block;
  margin-top: 4px;
  font-weight: 760;
  color: rgba(11,18,32,.92);
  text-decoration:none;
  border-bottom: 1px solid rgba(11,18,32,.18);
  padding-bottom: 2px;
}
.post a.title:hover{ border-bottom-color: rgba(14,165,233,.60); }
.post .excerpt{
  margin-top: 6px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

/* Toast */
#toast{
  position: fixed;
  right: 16px;
  bottom: 16px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(11,18,32,.08);
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(10px);
  color: rgba(11,18,32,.86);
  font-weight: 720;
  font-size: 13px;
  box-shadow: 0 12px 36px rgba(11,18,32,.10);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .16s ease, transform .16s ease;
  pointer-events:none;
}

/* ── Hamburger (hidden on desktop) ───────────────────────── */
.hamburger{
  display:none;
  align-items:center;
  justify-content:center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(11,18,32,.07);
  border-radius: 10px;
  background: rgba(255,255,255,.62);
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}
.hamburger svg{ width: 20px; height: 20px; color: rgba(11,18,32,.78); }

/* ── Entry card image ────────────────────────────────────── */
.entry-img{
  width: 100%;
  max-width: 320px;
  height: auto;
  border-radius: 10px;
  border: 1px solid rgba(11,18,32,.07);
  margin-bottom: 10px;
}

/* ── Entry link ──────────────────────────────────────────── */
.entry-link{
  display: inline-block;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 650;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(14,165,233,.25);
}
.entry-link:hover{ border-bottom-color: rgba(14,165,233,.60); text-decoration:none; }

/* ── Page fade-in ────────────────────────────────────────── */
@keyframes fadeIn{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}
main{
  animation: fadeIn .4s ease both;
}

/* ── Scroll reveal ───────────────────────────────────────── */
.reveal{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .45s ease, transform .45s ease;
}
.reveal.visible{
  opacity: 1;
  transform: translateY(0);
}

/* ── Dark-mode toggle button ─────────────────────────────── */
.theme-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(11,18,32,.07);
  background: rgba(255,255,255,.62);
  cursor:pointer;
  padding:0;
  -webkit-tap-highlight-color: transparent;
}
.theme-toggle:hover{ background: rgba(11,18,32,.04); }
.theme-toggle svg{ width: 18px; height: 18px; color: rgba(11,18,32,.78); }
/* hide the inactive icon */
.theme-toggle .icon-moon{ display:inline; }
.theme-toggle .icon-sun{ display:none; }

/* ── Dark mode ───────────────────────────────────────────── */
html.dark{
  --bg: #0e1420;
  --fg: #e4e8f0;
  --muted: rgba(228,232,240,.65);
  --muted2: rgba(228,232,240,.48);
  --stroke: rgba(228,232,240,.12);
  --stroke2: rgba(228,232,240,.08);
  --accent: #38bdf8;
  --accent2: #a78bfa;
}
html.dark body{ background: var(--bg); color: var(--fg); }
html.dark header{ background: rgba(14,20,32,.80); border-bottom-color: rgba(228,232,240,.06); }
html.dark .iconbtn{ border-color: rgba(228,232,240,.10); background: rgba(228,232,240,.06); }
html.dark .iconbtn:hover{ background: rgba(228,232,240,.12); }
html.dark .iconbtn svg{ color: rgba(228,232,240,.78); }
html.dark .theme-toggle{ border-color: rgba(228,232,240,.10); background: rgba(228,232,240,.06); }
html.dark .theme-toggle:hover{ background: rgba(228,232,240,.12); }
html.dark .theme-toggle svg{ color: rgba(228,232,240,.78); }
html.dark .theme-toggle .icon-moon{ display:none; }
html.dark .theme-toggle .icon-sun{ display:inline; }
html.dark .hamburger{ border-color: rgba(228,232,240,.10); background: rgba(228,232,240,.06); }
html.dark .hamburger svg{ color: rgba(228,232,240,.78); }
html.dark .navlinks a{ color: var(--muted); }
html.dark .navlinks a:hover{ color: var(--fg); background: rgba(228,232,240,.06); }
html.dark .navlinks a[aria-current="page"]{ color: var(--fg); background: rgba(228,232,240,.08); border-color: rgba(228,232,240,.10); }
html.dark .entry{ background: rgba(228,232,240,.04); border-color: rgba(228,232,240,.08); }
html.dark .entry:hover{ background: rgba(228,232,240,.08); box-shadow: 0 8px 24px rgba(0,0,0,.18); }
html.dark .tag{ background: rgba(228,232,240,.06); border-color: rgba(228,232,240,.10); color: var(--muted2); }
html.dark .post a.title{ color: rgba(228,232,240,.90); border-bottom-color: rgba(228,232,240,.20); }
html.dark .post a.title:hover{ border-bottom-color: var(--accent); }
html.dark a.link{ border-bottom-color: rgba(56,189,248,.30); }
html.dark a.link:hover{ border-bottom-color: rgba(56,189,248,.60); }
html.dark #toast{ background: rgba(14,20,32,.90); border-color: rgba(228,232,240,.10); color: rgba(228,232,240,.88); }
html.dark .bgfx::before,
html.dark .bgfx::after{ opacity: .14; }
html.dark .bgtex{ opacity: .06; mix-blend-mode: screen; }
html.dark .email-obf{ color: var(--muted2); }
html.dark .email-obf:hover{ color: var(--fg); }
html.dark .email-obf .eat{ color: rgba(228,232,240,.25); }
html.dark .hero-avatar{ border-color: rgba(228,232,240,.12); }

@media (prefers-color-scheme: dark){
  html:not(.light) {
    --bg: #0e1420;
    --fg: #e4e8f0;
    --muted: rgba(228,232,240,.65);
    --muted2: rgba(228,232,240,.48);
    --stroke: rgba(228,232,240,.12);
    --stroke2: rgba(228,232,240,.08);
    --accent: #38bdf8;
    --accent2: #a78bfa;
  }
  html:not(.light) body{ background: var(--bg); color: var(--fg); }
  html:not(.light) header{ background: rgba(14,20,32,.80); border-bottom-color: rgba(228,232,240,.06); }
  html:not(.light) .iconbtn{ border-color: rgba(228,232,240,.10); background: rgba(228,232,240,.06); }
  html:not(.light) .iconbtn:hover{ background: rgba(228,232,240,.12); }
  html:not(.light) .iconbtn svg{ color: rgba(228,232,240,.78); }
  html:not(.light) .theme-toggle{ border-color: rgba(228,232,240,.10); background: rgba(228,232,240,.06); }
  html:not(.light) .theme-toggle:hover{ background: rgba(228,232,240,.12); }
  html:not(.light) .theme-toggle svg{ color: rgba(228,232,240,.78); }
  html:not(.light) .theme-toggle .icon-moon{ display:none; }
  html:not(.light) .theme-toggle .icon-sun{ display:inline; }
  html:not(.light) .hamburger{ border-color: rgba(228,232,240,.10); background: rgba(228,232,240,.06); }
  html:not(.light) .hamburger svg{ color: rgba(228,232,240,.78); }
  html:not(.light) .navlinks a{ color: var(--muted); }
  html:not(.light) .navlinks a:hover{ color: var(--fg); background: rgba(228,232,240,.06); }
  html:not(.light) .navlinks a[aria-current="page"]{ color: var(--fg); background: rgba(228,232,240,.08); border-color: rgba(228,232,240,.10); }
  html:not(.light) .entry{ background: rgba(228,232,240,.04); border-color: rgba(228,232,240,.08); }
  html:not(.light) .entry:hover{ background: rgba(228,232,240,.08); box-shadow: 0 8px 24px rgba(0,0,0,.18); }
  html:not(.light) .tag{ background: rgba(228,232,240,.06); border-color: rgba(228,232,240,.10); color: var(--muted2); }
  html:not(.light) .post a.title{ color: rgba(228,232,240,.90); border-bottom-color: rgba(228,232,240,.20); }
  html:not(.light) .post a.title:hover{ border-bottom-color: var(--accent); }
  html:not(.light) a.link{ border-bottom-color: rgba(56,189,248,.30); }
  html:not(.light) a.link:hover{ border-bottom-color: rgba(56,189,248,.60); }
  html:not(.light) #toast{ background: rgba(14,20,32,.90); border-color: rgba(228,232,240,.10); color: rgba(228,232,240,.88); }
  html:not(.light) .bgfx::before,
  html:not(.light) .bgfx::after{ opacity: .14; }
  html:not(.light) .bgtex{ opacity: .06; mix-blend-mode: screen; }
  html:not(.light) .email-obf{ color: var(--muted2); }
  html:not(.light) .email-obf:hover{ color: var(--fg); }
  html:not(.light) .email-obf .eat{ color: rgba(228,232,240,.25); }
  html:not(.light) .hero-avatar{ border-color: rgba(228,232,240,.12); }
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 720px){
  /* Show hamburger, hide desktop nav + social tools */
  .hamburger{ display:inline-flex; }
  .navlinks,
  .tools{
    display:none;
  }
  /* When nav-open class is on header, show them stacked */
  header.nav-open .navlinks,
  header.nav-open .tools{
    display:flex;
  }
  .nav{
    flex-wrap: wrap;
    height: auto;
    padding-top: 10px;
    padding-bottom: 10px;
    gap: 8px;
  }
  .navlinks{
    order: 10;
    flex-basis: 100%;
    flex-direction: column;
    gap: 2px;
    padding: 8px 0 4px;
    border-top: 1px solid rgba(11,18,32,.06);
  }
  .navlinks a{
    padding: 10px 12px;
    font-size: 14px;
    border-radius: 10px;
  }
  .tools{
    order: 11;
    flex-basis: 100%;
    justify-content: flex-start;
    padding: 4px 0 2px;
    border-top: 1px solid rgba(11,18,32,.06);
  }

  /* Hero */
  .hero-top{ gap: 14px; }
  .hero-avatar{ width: 60px; height: 60px; }
  .h1{ font-size: 34px; letter-spacing: -0.6px; }
  .subtitle{ font-size: 14px; }
  body.home main{ padding-top: clamp(60px, 14vh, 140px); }
  main{ padding: clamp(40px, 14vh, 140px) 0 60px; }

  /* Page head */
  .pagehead h1{ font-size: 26px; }

  /* Entry cards */
  .entry-img{ max-width: 100%; }
}

@media (max-width: 480px){
  .wrap{ padding: 0 14px; }
  .h1{ font-size: 28px; }
  .about-block p{ font-size: 14px; }
  .entry h3{ font-size: 15px; }
  .entry p{ font-size: 13px; }
  .tag{ font-size: 11px; padding: 3px 7px; }
}