/* =====================================================================
   Direction B — 玉璃 Jade Glass
   One name on a slow aurora. Glass is used sparingly: a thin pane that
   hugs the letters, with a light blur, never a big frosted slab.
   ===================================================================== */
:root {
  /* light: "pearl morning" — cool paper, deep ink, glass defined by a hairline, not by white fog */
  --bg: #e7eaf0;
  --fg: #0f1222;
  --fg-dim: rgba(15, 18, 34, .64);
  --fg-faint: rgba(15, 18, 34, .07);
  --line: rgba(15, 18, 34, .12);
  --accent: #3f47c4;
  --accent-ink: #fff;
  --glass: rgba(255, 255, 255, .42);
  --glass-strong: rgba(255, 255, 255, .7);
  --glass-brd: rgba(15, 18, 34, .1);
  --glass-hi: rgba(255, 255, 255, .9);
  --shadow: 0 30px 60px -36px rgba(30, 36, 80, .35), 0 1px 2px rgba(30, 36, 80, .06);
  --blur: 14px;
  --radius: 22px;
  --name: #0f1222;
  --name-2: #3f47c4;
  --pane: rgba(255, 255, 255, .28);
  --pane-brd: rgba(15, 18, 34, .16);
  --pane-hi: rgba(255, 255, 255, .85);
  --loader-bg: #0d0f1a; --loader-fg: #e8ebff; --loader-accent: #8fd6c8;
  --art-bg1: #e4e7f4; --art-bg2: #c9d0ea; --art-1: #4f58d8; --art-2: #2a9d8a; --art-3: #e07aa6; --art-ink: #1b1f3a; --art-paper: #f6f7fb;
}
:root[data-theme="dark"] {
  --bg: #0d0f1a;
  --fg: #e8ebff;
  --fg-dim: rgba(220, 225, 255, .62);
  --fg-faint: rgba(220, 225, 255, .08);
  --line: rgba(220, 225, 255, .12);
  --accent: #8fd6c8;
  --accent-ink: #0d0f1a;
  --glass: rgba(30, 34, 60, .3);
  --glass-strong: rgba(26, 30, 54, .62);
  --glass-brd: rgba(255, 255, 255, .12);
  --glass-hi: rgba(255, 255, 255, .2);
  --shadow: 0 40px 90px -40px rgba(0, 0, 0, .9), 0 2px 8px rgba(0, 0, 0, .3);
  --name: #c9cfe8;           /* pearl lilac, not pure white */
  --name-2: #9fd6ca;
  --pane: rgba(255, 255, 255, .045);
  --pane-brd: rgba(255, 255, 255, .16);
  --pane-hi: rgba(255, 255, 255, .28);
  --art-bg1: #1d2140; --art-bg2: #101329; --art-1: #8fd6c8; --art-2: #9b8cff; --art-3: #f3a6c8; --art-ink: #dfe3ff; --art-paper: #1a1e3a;
}

/* Glass with a lit edge: gradient border via mask */
.menu-btn, .icon-btn, .filter__btn { position: relative; }
.glass::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(140deg, var(--glass-hi), transparent 38%, transparent 62%, var(--glass-brd));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
#fx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }

/* ---------- Hero: the name, and nothing else ---------- */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh; display: grid; place-items: center;
  padding: calc(var(--topbar-h) + 16px) var(--gutter);   /* symmetric, so the name sits at the true centre of the screen */
}
.mono { display: grid; place-items: center; }
.mono__name {
  position: relative; margin: 0; display: inline-grid; place-items: center;
  padding: .04em .2em .16em;
  font: italic 400 clamp(96px, min(20vw, 32vh), 360px)/1 var(--font-latin); letter-spacing: -.025em;
  color: var(--name);
}
.mono__text { position: relative; z-index: 1; display: inline-flex; }
.mono__ch {
  display: inline-block; padding-right: .02em;
  transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0) rotate(var(--rot, 0deg));
  transition: transform .9s var(--ease-out), color .6s;
}
.mono__ch:nth-child(4), .mono__ch:nth-child(5), .mono__ch:nth-child(6) { color: color-mix(in srgb, var(--name) 72%, var(--name-2)); }

/* the name is drawn on a canvas (glass / ink + letter motion); the DOM letters stay for layout and a11y */
.mono__cv { position: absolute; pointer-events: none; z-index: 2; max-width: none !important; max-height: none !important; }
.mono__name.has-cv .mono__ch { color: transparent !important; }

/* ---------- Sections: everything sits on glass ---------- */
.section .eyebrow { color: var(--accent); }
:root:not([data-theme="dark"]) .section .eyebrow { color: var(--accent); }
.about__grid { display: grid; gap: 28px; }
.about__head { padding: clamp(28px, 4vw, 48px); border-radius: 32px; background: var(--glass); -webkit-backdrop-filter: blur(var(--blur)) saturate(150%); backdrop-filter: blur(var(--blur)) saturate(150%); border: 1px solid var(--glass-brd); box-shadow: inset 0 1px 0 var(--glass-hi), var(--shadow); }
.panel { padding: 10px 26px; border-radius: 32px; background: var(--glass); -webkit-backdrop-filter: blur(var(--blur)) saturate(150%); backdrop-filter: blur(var(--blur)) saturate(150%); border: 1px solid var(--glass-brd); box-shadow: inset 0 1px 0 var(--glass-hi), var(--shadow); }
.panel .acc { border-top: 0; }
.acc.panel { border-top: 1px solid var(--glass-brd); }
.acc__item:last-child { border-bottom: 0; }

.work__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 24px; }
.show__list { padding: 8px 22px; border-radius: 32px; background: var(--glass); -webkit-backdrop-filter: blur(var(--blur)) saturate(150%); backdrop-filter: blur(var(--blur)) saturate(150%); border: 1px solid var(--glass-brd); box-shadow: inset 0 1px 0 var(--glass-hi), var(--shadow); }
.show__item:first-child { border-top: 0; }
.show__item:last-child { border-bottom: 0; }
.show__link::after { display: none; }
.show__link { border-radius: 16px; }
.show__item.is-active .show__link { background: var(--fg-faint); }
.stage { padding: 14px; border-radius: 34px; background: var(--glass); -webkit-backdrop-filter: blur(var(--blur)) saturate(150%); backdrop-filter: blur(var(--blur)) saturate(150%); border: 1px solid var(--glass-brd); box-shadow: inset 0 1px 0 var(--glass-hi), var(--shadow); }
.stage__frame { border-radius: 24px; }
.dialbar { padding: 4px 6px 2px; }

.contact__inner { text-align: center; padding: clamp(40px, 7vw, 96px) clamp(20px, 5vw, 64px); border-radius: 44px; background: var(--glass); -webkit-backdrop-filter: blur(34px) saturate(150%); backdrop-filter: blur(34px) saturate(150%); border: 1px solid var(--glass-brd); box-shadow: inset 0 1px 0 var(--glass-hi), var(--shadow); }
.contact__inner .eyebrow { justify-content: center; }
.contact__inner .lead { margin-inline: auto; }
.contact__inner .chips { justify-content: center; }
.contact__title { font-size: clamp(52px, 8vw, 128px); }
:root:lang(en) .contact__title { font-style: italic; }
.contact__mail {
  display: inline-flex; align-items: center; gap: 14px; margin: 26px 0 26px; padding: 14px 18px 14px 28px; border-radius: 999px;
  font: italic clamp(22px, 3vw, 40px)/1 var(--font-latin); background: var(--fg); color: var(--bg); transition: transform .6s var(--ease-out), gap .6s var(--ease-out);
}
.contact__mail svg { width: 38px; height: 38px; padding: 10px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); transition: transform .6s var(--ease-out); }
.contact__mail:hover { transform: translateY(-3px); gap: 22px; }
.contact__mail:hover svg { transform: rotate(45deg); }
.detail__h { margin: 28px 0 6px; font: 400 22px/1.3 var(--font-display); }
:root:lang(en) .detail__h { font-style: italic; }
.detail { background: color-mix(in srgb, var(--bg) 94%, transparent); }

@media (min-width: 900px) {
  .about__grid { grid-template-columns: 1fr 1.15fr; align-items: start; }
  .about__head { position: sticky; top: 100px; }
}
:root:not([data-theme="dark"]) .section .eyebrow { color: var(--accent); }
@media (max-width: 760px) {
  .panel, .show__list { padding: 4px 14px; border-radius: 22px; }
  .contact__inner { border-radius: 28px; }
}

/* ---------- additions: name canvas, one-line phrase, contact icons ---------- */
.mono__name.has-cv ::selection { background: transparent; color: transparent; }
.mono__name.has-cv { -webkit-user-select: none; user-select: none; }
.nw { white-space: nowrap; }
/* contact icons: real ones in ink, not-yet-opened ones in grey */
.socials { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.soc {
  position: relative; width: 38px; height: 38px; display: inline-grid; place-items: center; border-radius: 10px; color: var(--fg);
  transition: background-color .2s, color .2s;
}
.soc svg { width: 21px; height: 21px; }
a.soc:hover, button.soc:hover, .wx.is-open .soc--wx { background: var(--fg-faint); }
.soc.is-soon { color: color-mix(in srgb, var(--fg) 30%, transparent); cursor: default; }
.soc__tip, .wx__pop {
  position: absolute; z-index: 30; bottom: calc(100% + 10px); left: 50%; transform: translate(-50%, 6px);
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s, transform .25s var(--ease-out), visibility .2s;
  white-space: nowrap; font: 13px/1.3 var(--font-ui), var(--font-zh-sans); color: var(--fg);
  background: var(--glass-strong); border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--shadow);
}
.soc__tip b { font-weight: 600; }
.soc.is-soon:hover .soc__tip, .soc.is-soon:focus-visible .soc__tip, .soc.is-soon.is-tip .soc__tip { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.wx { position: relative; display: inline-flex; }
.wx__pop { display: grid; gap: 6px; justify-items: start; padding: 12px 14px; pointer-events: auto; }
.wx.is-open .wx__pop { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.wx__k { font-size: 12px; color: var(--fg-dim); letter-spacing: .06em; }
.wx__id { font: 600 18px/1.2 var(--font-ui); letter-spacing: .02em; -webkit-user-select: all; user-select: all; }
.wx__copy { margin-top: 2px; padding: 5px 10px; border-radius: 8px; font: 600 12px/1 var(--font-ui), var(--font-zh-sans); color: var(--accent-ink); background: var(--accent); }
.socials--lg { gap: 8px; margin-top: 8px; }
.socials--lg .soc { width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 12px; }
.socials--lg .soc svg { width: 22px; height: 22px; }
.socials--lg .soc.is-soon { border-style: dashed; }
.socials--lg .wx__pop { bottom: auto; top: calc(100% + 10px); transform: translate(-50%, -6px); }
.socials--lg .wx.is-open .wx__pop { transform: translate(-50%, 0); }

.contact__inner .socials { justify-content: center; }