/* ── 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;
}

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