PersonalWebApplication/Client/src/index.css

/* ── Fonts (本地打包，离线/WSL 可用) ───────────────────────── */
@import '@fontsource-variable/fraunces/opsz.css';
@import '@fontsource-variable/fraunces/opsz-italic.css';
@import '@fontsource/hanken-grotesk/300.css';
@import '@fontsource/hanken-grotesk/400.css';
@import '@fontsource/hanken-grotesk/500.css';
@import '@fontsource/hanken-grotesk/600.css';

@import 'tailwindcss';

/* ── Design tokens（暖调暗色编辑风）──────────────────────────── */
@theme {
  --color-bg: #17130f;
  --color-surface: #221c16;
  --color-text: #eae2d4;
  --color-muted: #9b8f7e;
  --color-accent: #c99a5b;
  --color-accent-soft: #e0bd8a;
  --color-line: #3a3027;

  --font-display: 'Fraunces Variable', ui-serif, Georgia, serif;
  --font-sans: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
}

/* ── Base ────────────────────────────────────────────────── */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  min-height: 100svh;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-weight: 400;
  /* 隐藏系统光标，由 CursorFollower 接管（仅精确指针设备）*/
}

@media (pointer: fine) {
  body.has-custom-cursor,
  body.has-custom-cursor * {
    cursor: none;
  }
}

/* 选中文本配色 */
::selection {
  background: var(--color-accent);
  color: var(--color-bg);
}

/* 可见键盘焦点环 */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ── 颗粒噪点（叠加在氛围面板上）─────────────────────────────── */
.grain::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* ── 动态渐变 mesh（缓慢漂移）───────────────────────────────── */
@keyframes drift {
  0%   { transform: translate3d(-6%, -4%, 0) scale(1.15) rotate(0deg); }
  50%  { transform: translate3d(6%, 4%, 0) scale(1.25) rotate(8deg); }
  100% { transform: translate3d(-6%, -4%, 0) scale(1.15) rotate(0deg); }
}

.mesh {
  position: absolute;
  inset: -25%;
  background:
    radial-gradient(40% 45% at 25% 30%, rgba(201, 154, 91, 0.45), transparent 70%),
    radial-gradient(35% 40% at 75% 65%, rgba(140, 96, 64, 0.40), transparent 70%),
    radial-gradient(45% 50% at 60% 20%, rgba(90, 70, 52, 0.40), transparent 70%);
  filter: blur(40px);
  animation: drift 26s ease-in-out infinite;
  will-change: transform;
}

/* ── 标题下划线闪烁游标 ──────────────────────────────────────── */
@keyframes blink {
  0%, 45%  { opacity: 1; }
  50%, 95% { opacity: 0; }
  100%     { opacity: 1; }
}

.cursor-bar {
  animation: blink 1.15s steps(1, end) infinite;
}

/* ── 彩虹（仿 joshwcomeau）─────────────────────────────────────
   一条横向流动的多色渐变。首尾同色，配合 200% 宽度做无缝平移。
   既可裁切到文字，也可铺在装饰条上。 */
@keyframes rainbow-pan {
  to {
    background-position: 200% center;
  }
}

.rainbow-gradient {
  background-image: linear-gradient(
    90deg,
    #ff5f6d,
    #ffb13d,
    #ffe14d,
    #4ade80,
    #38bdf8,
    #a78bfa,
    #f472b6,
    #ff5f6d
  );
  background-size: 200% auto;
  animation: rainbow-pan 6s linear infinite;
}

/* 把流动彩虹裁切进文字（始终显示彩虹色） */
.rainbow-text {
  background-image: linear-gradient(
    90deg,
    #ff5f6d,
    #ffb13d,
    #ffe14d,
    #4ade80,
    #38bdf8,
    #a78bfa,
    #f472b6,
    #ff5f6d
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rainbow-pan 6s linear infinite;
}

/* 把彩虹裁进文字但不强制颜色：默认用不透明文字色盖住，
   hover 时把文字色设为 transparent（group-hover:text-transparent）即露出彩虹。 */
.rainbow-clip {
  background-image: linear-gradient(
    90deg,
    #ff5f6d,
    #ffb13d,
    #ffe14d,
    #4ade80,
    #38bdf8,
    #a78bfa,
    #f472b6,
    #ff5f6d
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  animation: rainbow-pan 6s linear infinite;
}

/* ── 整页渐变极光背景（玻璃栏透出的就是它）──────────────────────
   固定铺满视口、置于所有内容之下。底色为 Lunada 渐变
   （uigradients「Lunada」：#A7BFE8 → #6190E8），上面叠几团同色系
   蓝光斑缓慢漂移并大幅模糊，让平面渐变产生液态流动感。 */
.aurora {
  position: fixed;
  inset: 0;
  z-index: -10;
  overflow: hidden;
  /* Lunada 渐变打底 */
  background: linear-gradient(135deg, #6190e8 0%, #89a8e6 48%, #a7bfe8 100%);
}

.aurora::before {
  content: '';
  position: absolute;
  inset: -25%;
  background:
    radial-gradient(30% 34% at 18% 28%, rgba(97, 144, 232, 0.65), transparent 70%),
    radial-gradient(28% 32% at 82% 24%, rgba(167, 191, 232, 0.70), transparent 70%),
    radial-gradient(34% 38% at 72% 78%, rgba(120, 162, 236, 0.60), transparent 70%),
    radial-gradient(26% 30% at 26% 82%, rgba(192, 211, 245, 0.55), transparent 70%),
    radial-gradient(24% 28% at 50% 50%, rgba(140, 175, 240, 0.45), transparent 70%);
  filter: blur(60px);
  /* 静止：持续漂移会让上层多个 backdrop-filter 每帧重算模糊，是卡顿主因 */
}

/* ── 两侧液态玻璃竖栏 ─────────────────────────────────────────
   backdrop-filter 把背后的极光磨成柔光；上下渐变的白色叠层 + 内侧两道
   高光边模拟玻璃厚度，做出「液态玻璃」的体积感。 */
.glass-rail {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.12),
    rgba(255, 255, 255, 0.03) 55%,
    rgba(255, 255, 255, 0.08)
  );
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow:
    inset 0 0 60px rgba(255, 255, 255, 0.06),
    inset 1px 0 0 rgba(255, 255, 255, 0.20),
    inset -1px 0 0 rgba(255, 255, 255, 0.20);
}

/* 中间内容纸张：压暗的暖色玻璃（模糊背后极光保证可读），
   两侧各一道高光描边，与左右玻璃竖栏拼出连续的玻璃接缝。 */
.glass-sheet {
  /* 底色 84% 不透明，背后极光本就几乎透不过来；省掉昂贵的 backdrop-filter，
     观感基本无差，却避免这条又高又大的区域每帧重算模糊。 */
  background: rgba(23, 19, 15, 0.84);
  box-shadow:
    inset 1px 0 0 rgba(255, 255, 255, 0.12),
    inset -1px 0 0 rgba(255, 255, 255, 0.12),
    0 30px 80px rgba(20, 30, 60, 0.30);
}

/* 两侧图片上的「液态玻璃」覆层：backdrop-filter 把图片磨成柔光，
   叠一道斜向高光 + 内侧四边亮边，做出通透的玻璃质感。
   盖在 <aside> 的背景图之上（inset-0 铺满）。 */
.glass-image {
  backdrop-filter: blur(6px) saturate(150%);
  -webkit-backdrop-filter: blur(6px) saturate(150%);
  background: linear-gradient(
    125deg,
    rgba(255, 255, 255, 0.24) 0%,
    rgba(255, 255, 255, 0.06) 28%,
    rgba(255, 255, 255, 0) 52%,
    rgba(255, 255, 255, 0.05) 72%,
    rgba(255, 255, 255, 0.14) 100%
  );
  box-shadow:
    inset 0 0 90px rgba(255, 255, 255, 0.10),
    inset 1px 0 0 rgba(255, 255, 255, 0.22),
    inset -1px 0 0 rgba(255, 255, 255, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(255, 255, 255, 0.12);
}

/* ── reduced-motion 降级 ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .mesh,
  .cursor-bar,
  .rainbow-gradient,
  .rainbow-text,
  .rainbow-clip,
  .aurora::before {
    animation: none;
  }
}