/* ============================================================
   08 玻璃拟态 Glassmorphism · 2019—2022
   毛玻璃 + 背景模糊 + 渐变光斑 + 新拟态的柔和凸起
   ============================================================ */
:root[data-theme="glass"] {
  --paper: #eef2f7;
  --butter: #f6f8fb;
  --sky: #eef2f7;
  --ink: #1e293b;
  --rose: #7c6cf6;
  --pink: #ff6fb5;
  --wine: #1b2540;
  --gl-slate: #e2e8f0;
  --gl-pink: #ffb5fa;
  --gl-violet: #b8a6ff;
  --gl-cyan: #8ff0e8;
  --gl-glass: rgba(255, 255, 255, .46);
  --gl-edge: rgba(255, 255, 255, .7);
}

/* 光斑：固定在视口，内容浮在上面（:root 本身就是 html，不能再写 html 后代） */
:root[data-theme="glass"] { background: var(--gl-slate); }
:root[data-theme="glass"]::before {
  content: "";
  position: fixed;
  inset: -10%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(42% 38% at 16% 14%, #ff8fe8 0%, rgba(255, 143, 232, 0) 68%),
    radial-gradient(38% 34% at 84% 10%, #ffc98a 0%, rgba(255, 201, 138, 0) 68%),
    radial-gradient(46% 42% at 88% 80%, #6fe3d0 0%, rgba(111, 227, 208, 0) 70%),
    radial-gradient(44% 40% at 28% 88%, #9b8bff 0%, rgba(155, 139, 255, 0) 70%),
    radial-gradient(32% 30% at 50% 46%, #ffffff 0%, rgba(255, 255, 255, 0) 72%);
  filter: blur(34px) saturate(125%);
  opacity: .95;
}
:root[data-theme="glass"] body {
  position: relative;
  z-index: 1;
  background: transparent;
}

/* 所有色块区域都变透明，让光斑透出来 */
:root[data-theme="glass"] .hero,
:root[data-theme="glass"] .about,
:root[data-theme="glass"] .services,
:root[data-theme="glass"] .flow,
:root[data-theme="glass"] .skills { background: transparent; }

/* 标题：细一点、更现代，用渐变字 */
:root[data-theme="glass"] .display,
:root[data-theme="glass"] .hero__title,
:root[data-theme="glass"] .acc__title {
  font-weight: 700;
  letter-spacing: -.02em;
}
:root[data-theme="glass"] .display em,
:root[data-theme="glass"] .hero__title em {
  background-image: linear-gradient(100deg, #6d5cf6 0%, #b06cf6 46%, #ff6fb5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}
:root[data-theme="glass"] .display--light { color: #fff; }
:root[data-theme="glass"] .display--light em { background-image: linear-gradient(100deg, #ffd9a8, #ffb5fa); }

/* 玻璃卡片：所有按钮/标签统一成磨砂胶囊 */
:root[data-theme="glass"] .btn,
:root[data-theme="glass"] .chips li,
:root[data-theme="glass"] .copybtn,
:root[data-theme="glass"] .brand,
:root[data-theme="glass"] .menu__link--cta,
:root[data-theme="glass"] .art__tag,
:root[data-theme="glass"] .cursor span {
  border: 1px solid var(--gl-edge);
  border-radius: 14px;
  background: var(--gl-glass);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  color: #26324a;
  box-shadow: 0 6px 18px rgba(53, 65, 92, .14), inset 0 1px 0 rgba(255, 255, 255, .7);
  transform: none;
}
:root[data-theme="glass"] .btn > *,
:root[data-theme="glass"] .chips li > * { transform: none; }
:root[data-theme="glass"] .btn { padding: 14px 26px; font-weight: 700; color: #2a2450; }
:root[data-theme="glass"] .btn:hover { background: rgba(255, 255, 255, .68); transform: translateY(-1px); }
:root[data-theme="glass"] .btn:hover i { transform: translateY(2px); }
:root[data-theme="glass"] .ghostlink { color: #5b4bd6; }
:root[data-theme="glass"] .brand { color: #2a2450; font-weight: 800; }
:root[data-theme="glass"] .brand__mark { color: #2a2450; }
:root[data-theme="glass"] .brand__dot { color: #7c6cf6; }
:root[data-theme="glass"] .art__tag span { color: #46506b; }
:root[data-theme="glass"] .art__tag { color: #46506b; }
:root[data-theme="glass"] .menu__link { color: #38445e; }
:root[data-theme="glass"] .menu__link[aria-current="true"] { color: #5b4bd6; }
:root[data-theme="glass"] .menu__link--cta { color: #2a2450; font-weight: 700; }
:root[data-theme="glass"] .menu__link--cta[aria-current="true"] { background: rgba(124, 108, 246, .9); color: #fff; }
:root[data-theme="glass"] .chips li { border-radius: 999px; font-weight: 600; }

:root[data-theme="glass"] .kicker { color: #5b4bd6; font-weight: 700; letter-spacing: .14em; }
:root[data-theme="glass"] .kicker b { color: #a34fd0; }
:root[data-theme="glass"] .kicker--light { color: rgba(255, 255, 255, .82); }
:root[data-theme="glass"] .kicker--light b { color: #ffd9a8; }

/* 首屏：一颗虹彩球 + 毛玻璃相框 */
:root[data-theme="glass"] .art__slab {
  left: -2%;
  top: -6%;
  width: 104%;
  padding-bottom: 104%;
  border-radius: 50%;
  background:
    radial-gradient(60% 60% at 32% 26%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 60%),
    conic-gradient(from 210deg, #b8a6ff, #ffb5fa, #ffd9a8, #8ff0e8, #9db8ff, #b8a6ff);
  transform: none;
  box-shadow: 0 24px 60px rgba(90, 80, 160, .28), inset 0 0 40px rgba(255, 255, 255, .5);
  filter: saturate(115%);
}
:root[data-theme="glass"] .art__ring {
  width: 52%;
  padding-bottom: 52%;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: .9;
}
:root[data-theme="glass"] .art__cube {
  width: 20%;
  border-radius: 18px;
  background: rgba(255, 255, 255, .5);
  border: 1px solid var(--gl-edge);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 20px rgba(53, 65, 92, .16);
  --rest: rotate(-10deg);
}
:root[data-theme="glass"] .art__pip {
  border-radius: 50%;
  background: rgba(255, 255, 255, .6);
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 6px 14px rgba(53, 65, 92, .18);
}
:root[data-theme="glass"] .art__frame {
  border: 1px solid rgba(255, 255, 255, .85);
  border-radius: 22px;
  background: rgba(255, 255, 255, .3);
  padding: 8px;
  box-shadow: 0 18px 44px rgba(53, 65, 92, .24), inset 0 1px 0 rgba(255, 255, 255, .9);
  --rest: rotate(-3deg);
}
:root[data-theme="glass"] .art__frame img { border-radius: 16px; }
:root[data-theme="glass"] .art__badge { display: none; }
:root[data-theme="glass"] .hero__stamp { color: #64748b; }

:root[data-theme="glass"] .topbar { border-bottom: 1px solid rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .25); }
:root[data-theme="glass"] .topbar.is-stuck {
  background: rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border-bottom: 1px solid rgba(255, 255, 255, .7);
}

/* 列表与手风琴：每块都是玻璃板 */
:root[data-theme="glass"] .rows {
  border: 1px solid var(--gl-edge);
  border-radius: 22px;
  background: rgba(255, 255, 255, .34);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 14px 34px rgba(53, 65, 92, .12);
  overflow: hidden;
}
:root[data-theme="glass"] .rows__item { border-bottom: 1px solid rgba(255, 255, 255, .55); }
:root[data-theme="glass"] .rows__item:last-child { border-bottom: 0; }
:root[data-theme="glass"] .row::before { background: rgba(255, 255, 255, .62); }
:root[data-theme="glass"] .row:hover, :root[data-theme="glass"] .row:focus-visible { color: #1e293b; }
:root[data-theme="glass"] .row__idx { color: #7c6cf6; }
:root[data-theme="glass"] .row__name { color: #1e293b; }
:root[data-theme="glass"] .row__desc { color: #4b5876; }
:root[data-theme="glass"] .row__type { color: #64748b; }
:root[data-theme="glass"] .row__go { color: #5b4bd6; }

:root[data-theme="glass"] .acc {
  border: 1px solid var(--gl-edge);
  border-radius: 22px;
  background: rgba(255, 255, 255, .34);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 14px 34px rgba(53, 65, 92, .12);
  overflow: hidden;
}
:root[data-theme="glass"] .acc__item { border-bottom: 1px solid rgba(255, 255, 255, .55); }
:root[data-theme="glass"] .acc__item:last-child { border-bottom: 0; }
:root[data-theme="glass"] .acc__btn:hover { background: rgba(255, 255, 255, .4); }
:root[data-theme="glass"] .acc__plus {
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(255, 255, 255, .85);
  border-radius: 10px;
  color: #4b4a7a;
  box-shadow: inset 0 1px 0 #fff, 0 3px 8px rgba(53, 65, 92, .14);
}
:root[data-theme="glass"] .acc__item.is-open .acc__plus { background: linear-gradient(160deg, #9b8bff, #ff9ad5); color: #fff; border-color: rgba(255, 255, 255, .7); }
:root[data-theme="glass"] .acc__idx { color: #7c6cf6; opacity: 1; }
:root[data-theme="glass"] .acc__title { color: #1e293b; }
:root[data-theme="glass"] .acc__inner p { color: #3f4b66; }

:root[data-theme="glass"] .facts > div { border-top: 1px solid rgba(100, 116, 139, .22); }
:root[data-theme="glass"] .facts dt { color: #7c6cf6; }
:root[data-theme="glass"] .facts dd { color: #1e293b; }
:root[data-theme="glass"] .copy { color: #3f4b66; }
:root[data-theme="glass"] .note { color: #5b6780; }
:root[data-theme="glass"] .about::before {
  width: clamp(120px, 20vw, 260px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 181, 250, .55);
  filter: blur(4px);
  transform: translate(18%, -30%);
}

:root[data-theme="glass"] .ticker {
  background: rgba(255, 255, 255, .32);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255, 255, 255, .6);
  border-bottom: 1px solid rgba(255, 255, 255, .6);
}
:root[data-theme="glass"] .ticker__run { color: #26324a; }
:root[data-theme="glass"] .ticker__run i { color: #a34fd0; }
:root[data-theme="glass"] .flow {
  background: rgba(255, 255, 255, .34);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255, 255, 255, .6);
  border-bottom: 1px solid rgba(255, 255, 255, .6);
}
:root[data-theme="glass"] .flow__step h3 { color: #1e293b; }
:root[data-theme="glass"] .flow__step p { color: #4b5876; }
:root[data-theme="glass"] .flow__list::before { background: rgba(100, 116, 139, .3); }
:root[data-theme="glass"] .flow__list li::before { background: #7c6cf6; box-shadow: 0 2px 6px rgba(124, 108, 246, .5); }
:root[data-theme="glass"] .flow__no { color: #64748b; }

/* 联系区：深色玻璃 + 彩色光 */
:root[data-theme="glass"] .contact {
  background:
    radial-gradient(50% 60% at 20% 20%, rgba(124, 108, 246, .55), transparent 70%),
    radial-gradient(45% 55% at 78% 78%, rgba(255, 111, 181, .5), transparent 72%),
    linear-gradient(150deg, #1b2540, #2b2350 60%, #1b2540);
}
:root[data-theme="glass"] .contact::after {
  content: "";
  width: clamp(180px, 30vw, 380px);
  height: clamp(180px, 30vw, 380px);
  border-radius: 50%;
  background: conic-gradient(from 0deg, #b8a6ff, #ffb5fa, #8ff0e8, #b8a6ff);
  filter: blur(28px);
  opacity: .5;
  top: 6%;
  right: 2%;
}
:root[data-theme="glass"] .mail { color: #fff; background-image: linear-gradient(#ffb5fa, #ffb5fa); }
:root[data-theme="glass"] .mail:hover { color: #ffd9f7; }
:root[data-theme="glass"] .copybtn { color: #2a2450; }
:root[data-theme="glass"] .tel { color: #e2e8f0; border-color: rgba(255, 255, 255, .4); }
:root[data-theme="glass"] .note--light { color: rgba(226, 232, 240, .75); }
:root[data-theme="glass"] .foot { background: rgba(27, 37, 64, .9); color: rgba(255, 255, 255, .68); }
:root[data-theme="glass"] .ruler i { background: linear-gradient(90deg, #7c6cf6, #ff6fb5); }
:root[data-theme="glass"] .curtain { background: #eef2f7; }
:root[data-theme="glass"] .curtain__star { color: #b8a6ff; }
:root[data-theme="glass"] .curtain__sky { background: linear-gradient(160deg, #cfd8ff, #ffd9f7); }
:root[data-theme="glass"] .curtain__title { color: #1e293b; }
:root[data-theme="glass"] .curtain__title span { background-image: linear-gradient(100deg, #6d5cf6, #ff6fb5); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; text-shadow: none; }
:root[data-theme="glass"] .cursor span { border-radius: 999px; }

/* --- 字体 --- */
:root[data-theme="glass"] {
  --display: "Manrope", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", sans-serif;
}