/* ==========================================================================
   lilliv · PLUGGBLOCK —— 个人名片页样式表
   结构：设计令牌 → 基础重置 → 布局容器 → 导航 → 首屏 → 通用区块
        → 卡片 → 联系 → 页脚 → 动效 → 响应式 → 无障碍偏好
   ========================================================================== */

/* ---------- 设计令牌 ---------- */
:root{
  --blue:#5B8DEF;
  --blue-deep:#4A90D9;
  --blue-soft:rgba(91,141,239,.10);
  --bg:#f7f8fa;
  --card:#ffffff;
  --ink:#2b2f36;
  --ink-2:#5a6169;
  --ink-3:#9aa1ab;
  --line:#e8eaee;
  --shadow:0 1px 2px rgba(20,30,50,.04), 0 8px 24px rgba(20,30,50,.06);
  --radius:20px;
  --maxw:900px;
  --nav-h:58px;
  --ease:cubic-bezier(.2,.8,.2,1);
}

/* ---------- 基础重置 ---------- */
*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Inter,sans-serif;
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{color:var(--blue-deep);text-decoration:none}
img{max-width:100%;display:block}

/* ==========================================================================
   动态背景
   结构：.bg 固定满屏 → .bg-layer 接收鼠标视差 → 4 个 .blob 缓慢漂移
        → ::after 叠一层极淡噪点，压掉大面积渐变的「塑料感」
   ========================================================================== */
.bg{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  background:linear-gradient(180deg,#f7f8fa 0%,#f2f6fd 52%,#f7f8fa 100%);
}

.bg-layer{
  position:absolute;
  inset:-6vmax;
  will-change:transform;
  transform:translate3d(0,0,0);
}

.bg .blob{
  position:absolute;
  border-radius:50%;
  filter:blur(64px);
  will-change:transform;
}

/* 左上：主蓝 */
.bg .b1{
  width:56vmax;height:56vmax;
  left:-16vmax;top:-20vmax;
  opacity:.62;
  background:radial-gradient(circle at 40% 40%,rgba(91,141,239,.60),rgba(91,141,239,0) 68%);
  animation:drift-1 38s ease-in-out infinite alternate;
}

/* 右下：深蓝 */
.bg .b2{
  width:52vmax;height:52vmax;
  right:-18vmax;bottom:-22vmax;
  opacity:.52;
  background:radial-gradient(circle at 50% 50%,rgba(74,144,217,.55),rgba(74,144,217,0) 70%);
  animation:drift-2 46s ease-in-out infinite alternate;
}

/* 中部偏右：淡紫，制造层次 */
.bg .b3{
  width:44vmax;height:44vmax;
  right:6vmax;top:6vmax;
  opacity:.30;
  background:radial-gradient(circle at 50% 50%,rgba(138,158,255,.42),rgba(138,158,255,0) 70%);
  animation:drift-3 54s ease-in-out infinite alternate;
}

/* 左下：极浅青，补足冷色过渡 */
.bg .b4{
  width:38vmax;height:38vmax;
  left:2vmax;bottom:-12vmax;
  opacity:.34;
  background:radial-gradient(circle at 50% 50%,rgba(120,214,225,.40),rgba(120,214,225,0) 72%);
  animation:drift-4 62s ease-in-out infinite alternate;
}

/* 噪点：3.5% 透明度，几乎看不见，但让渐变不「糊成一片」 */
.bg::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:.035;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

@keyframes drift-1{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(6vmax,4vmax,0) scale(1.08)}
  100%{transform:translate3d(-3vmax,7vmax,0) scale(.96)}
}
@keyframes drift-2{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-7vmax,-3vmax,0) scale(1.06)}
  100%{transform:translate3d(4vmax,-8vmax,0) scale(.94)}
}
@keyframes drift-3{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-6vmax,6vmax,0) scale(1.12)}
  100%{transform:translate3d(5vmax,-4vmax,0) scale(.98)}
}
@keyframes drift-4{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(8vmax,-5vmax,0) scale(1.05)}
  100%{transform:translate3d(-4vmax,-2vmax,0) scale(.95)}
}

/* ---------- 布局容器 ---------- */
.wrap{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 24px;
  position:relative;
  z-index:1;
}

/* ---------- 顶部导航 ---------- */
.nav{
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(247,248,250,.82);
  backdrop-filter:saturate(1.6) blur(14px);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, background .25s ease;
}
.nav.scrolled{
  border-bottom-color:var(--line);
  background:rgba(247,248,250,.92);
}

.nav-inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 24px;
  height:var(--nav-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.brand{
  font-weight:700;
  font-size:15px;
  letter-spacing:.14em;
  color:var(--ink);
  display:flex;
  align-items:center;
  gap:9px;
}
.brand-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--blue);
  box-shadow:0 0 0 4px var(--blue-soft);
}

.nav-links{display:flex;align-items:center;gap:4px}
.nav-links a{
  position:relative;
  padding:8px 14px;
  border-radius:999px;
  font-size:14.5px;
  color:var(--ink-2);
  transition:color .2s ease, background .2s ease;
}
.nav-links a:hover{color:var(--ink);background:rgba(43,47,54,.045)}
.nav-links a.active{color:var(--blue-deep);background:var(--blue-soft);font-weight:600}

/* ---------- 首屏 ---------- */
.hero{
  min-height:min(660px, calc(100vh - var(--nav-h)));
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:40px 0 44px;
}

.avatar{
  width:112px;
  height:112px;
  border-radius:50%;
  padding:4px;
  background:linear-gradient(145deg,#dfe8fb,#f6f8fc 45%,#e3ebfa);
  box-shadow:0 10px 30px rgba(74,144,217,.18);
  animation:rise .7s var(--ease) both;
}
.avatar img{
  width:100%;
  height:100%;
  border-radius:50%;
  object-fit:cover;
  background:#eef2f9;
  /* 占位图：换成自己的照片时，把 <img src> 改成图片地址即可 */
}

.name{
  margin:18px 0 0;
  font-size:clamp(34px,6vw,52px);
  line-height:1.1;
  letter-spacing:-.03em;
  font-weight:700;
  animation:rise .7s .06s var(--ease) both;
}

.tagline{
  margin:12px 0 0;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 14px;
  border-radius:999px;
  background:var(--card);
  border:1px solid var(--line);
  color:var(--blue-deep);
  font-size:13px;
  font-weight:600;
  letter-spacing:.16em;
  box-shadow:var(--shadow);
  animation:rise .7s .12s var(--ease) both;
}
.tagline i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--blue);
  display:inline-block;
}

.hero-actions{
  margin-top:24px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
  animation:rise .7s .18s var(--ease) both;
}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:42px;
  padding:0 20px;
  border-radius:999px;
  font-size:14.5px;
  font-weight:600;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .22s ease, background .2s ease, color .2s ease;
  will-change:transform;
}
.btn-primary{
  background:linear-gradient(180deg,var(--blue),var(--blue-deep));
  color:#fff;
  box-shadow:0 6px 18px rgba(74,144,217,.30);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(74,144,217,.36)}
.btn-primary:active{transform:translateY(0)}

.btn-ghost{
  background:var(--card);
  color:var(--ink);
  border-color:var(--line);
  box-shadow:var(--shadow);
}
.btn-ghost:hover{transform:translateY(-2px);border-color:#d9e2f2;color:var(--blue-deep)}

/* ---------- 通用区块 ---------- */
section{
  padding:56px 0;
  scroll-margin-top:var(--nav-h);
}
.section-head{margin-bottom:18px}

.eyebrow{
  font-size:12px;
  font-weight:700;
  letter-spacing:.22em;
  color:var(--blue-deep);
  text-transform:uppercase;
  margin:0 0 8px;
}

h2{
  margin:0;
  font-size:clamp(24px,3.4vw,30px);
  letter-spacing:-.02em;
  font-weight:700;
}

/* ---------- 卡片 ---------- */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:24px;
}

.about p{margin:0 0 9px;color:var(--ink-2)}
.about p:last-child{margin-bottom:0}
.about strong{color:var(--ink);font-weight:650}

.facts{
  margin-top:16px;
  display:grid;
  gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
}
.fact{
  padding:13px 15px;
  border-radius:13px;
  background:linear-gradient(180deg,#fbfcfe,#f5f8fd);
  border:1px solid #edf1f8;
}
.fact-k{
  font-size:12px;
  letter-spacing:.1em;
  color:var(--ink-3);
  text-transform:uppercase;
  margin:0 0 4px;
}
.fact-v{margin:0;font-weight:650;font-size:15px}

/* ---------- 联系 ---------- */
.contact-lead{margin:0 0 16px;color:var(--ink-2)}

.socials{display:flex;flex-wrap:wrap;gap:10px}
.social{
  width:46px;
  height:46px;
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--card);
  border:1px solid var(--line);
  color:var(--ink-2);
  box-shadow:var(--shadow);
  transition:transform .18s ease, color .2s ease, border-color .2s ease, box-shadow .22s ease;
}
.social:hover{
  transform:translateY(-3px);
  color:var(--blue-deep);
  border-color:#d7e3f8;
  box-shadow:0 10px 22px rgba(74,144,217,.16);
}
.social svg{
  width:20px;
  height:20px;
  display:block;
  overflow:visible;
}

.mail{
  margin-top:16px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--ink-2);
  font-size:14.5px;
}
.mail b{color:var(--blue-deep);font-weight:600}

/* ---------- 页脚 ---------- */
footer{
  position:relative;
  z-index:1;
  border-top:1px solid var(--line);
  padding:22px 0 28px;
}
.foot-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  color:var(--ink-3);
  font-size:13px;
}
.foot-inner .to-top{color:var(--ink-2)}
.foot-inner .to-top:hover{color:var(--blue-deep)}

/* ---------- 动效 ---------- */
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.in{opacity:1;transform:none}

@keyframes rise{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:none}
}

/* ---------- 响应式 ---------- */
@media (max-width:640px){
  :root{--nav-h:54px}

  .wrap{padding:0 20px}
  .nav-inner{height:var(--nav-h);padding:0 20px}
  .nav-links{gap:0}
  .nav-links a{padding:7px 10px;font-size:13.5px}
  .brand{font-size:13px;letter-spacing:.1em}

  .hero{min-height:min(540px, calc(100vh - var(--nav-h)));padding:30px 0 34px}
  .avatar{width:96px;height:96px}

  section{padding:44px 0}
  .card{padding:20px;border-radius:18px}

  .hero-actions{width:100%}
  .btn{flex:1 1 0;min-width:130px;height:42px}

  .social{width:44px;height:44px;border-radius:13px}

  /* 手机端减负：只留两块色斑，模糊半径也收小，避免中低端机掉帧 */
  .bg .blob{filter:blur(48px)}
  .bg .b3,
  .bg .b4{display:none}
  .bg .b2{opacity:.46}

  .foot-inner{justify-content:center;text-align:center}
}

/* ---------- 无障碍：减少动效 ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}