/* ==========================================================================
   黄海东 · 作品集 — 基础层（设计令牌 / 重置 / 通用组件）
   浅色底 + 巨型渐变标题 + 圆角分区 + 磁吸 + 滚动驱动动效
   ========================================================================== */

:root {
  /* ── 浅色基调 ── */
  --bg:         #F5F5F3;
  --surface:    #FFFFFF;
  --ink:        #0C0C0C;
  --fg:         #2A2E33;
  --muted:      #646973;
  --soft:       #BBCCD7;
  --line:       rgba(12, 12, 12, 0.12);
  --line-soft:  rgba(12, 12, 12, 0.07);
  --line-mid:   rgba(12, 12, 12, 0.15);

  /* ── 暗色分区 ── */
  --dark:       #0C0C0C;
  --dark-fg:    #D7E2EA;
  --dark-muted: rgba(215, 226, 234, 0.62);
  --dark-line:  rgba(215, 226, 234, 0.16);

  /* ── 渐变文字：浅底 / 暗底两套 ── */
  --grad-on-light: linear-gradient(180deg, #0C0C0C 0%, #646973 100%);
  --grad-on-dark:  linear-gradient(180deg, #646973 0%, #BBCCD7 100%);

  /* ── 点缀色：电源 / 示波器 LED 荧光绿，仅用于状态点与悬停指示 ── */
  --led:        #37E379;

  /* ── 工程标注字体 ── */
  --font-mono:  'IBM Plex Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  /* ── 动效与圆角 ── */
  --ease:           cubic-bezier(0.25, 0.1, 0.25, 1);
  --radius-band:    40px;
  --radius-card:    40px;
}

@media (min-width: 640px) {
  :root { --radius-band: 50px; --radius-card: 50px; }
}

@media (min-width: 768px) {
  :root { --radius-band: 60px; --radius-card: 60px; }
}

/* ── 重置 ─────────────────────────────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  background: var(--bg);
}

body {
  font-family: 'Kanit', 'Noto Sans SC', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--fg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
video { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; border: 0; background: none; cursor: pointer; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* 主包裹层：裁掉横向溢出（跑马灯 / 巨型标题） */
.site { overflow-x: clip; }

/* ── 巨型渐变标题 ─────────────────────────────────────────────────────── */
.hero-heading,
.section-heading {
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  background-image: var(--grad-on-light);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* 暗色分区里换成规格原版渐变 #646973 → #BBCCD7 */
.on-dark .hero-heading,
.on-dark .section-heading,
.on-dark.hero-heading,
.on-dark.section-heading {
  background-image: var(--grad-on-dark);
}

/* ── 分区外框：顶部大圆角 + 上提叠压 ───────────────────────────────────── */
.band {
  position: relative;
  z-index: 10;
  border-radius: var(--radius-band) var(--radius-band) 0 0;
}

.band--light { background: var(--surface); color: var(--fg); }
.band--dark  { background: var(--dark);    color: var(--dark-fg); }

.band--pull { margin-top: -2.5rem; }
@media (min-width: 640px) { .band--pull { margin-top: -3rem; } }
@media (min-width: 768px) { .band--pull { margin-top: -3.5rem; } }

/* ── 滚动淡入（对应 FadeIn） ──────────────────────────────────────────── */
.fade-in {
  opacity: 0;
  transform: translate3d(var(--fx, 0px), var(--fy, 30px), 0);
  transition:
    opacity   var(--fd, 0.7s) var(--ease) var(--fdelay, 0s),
    transform var(--fd, 0.7s) var(--ease) var(--fdelay, 0s);
}

.fade-in.is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* ── 磁吸（对应 Magnet） ──────────────────────────────────────────────── */
.magnet {
  transition: transform 0.6s ease-in-out;
  will-change: transform;
}

.magnet.is-hot { transition: transform 0.3s ease-out; }

/* ── 按钮：墨色胶囊 + LED 状态点（对应 ContactButton） ────────────────── */
.btn-contact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.75rem 2rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #FFFFFF;
  background: var(--ink);
  box-shadow: 0 10px 28px -12px rgba(12, 12, 12, 0.45);
  white-space: nowrap;
  transition: transform 0.3s var(--ease), background-color 0.3s var(--ease), color 0.3s var(--ease);
}

/* 按钮内的电源 LED：静态为暗态，悬停点亮 */
.btn-contact::before {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  box-shadow: 0 0 0 0 rgba(55, 227, 121, 0);
  transition: background-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.btn-contact:hover { transform: translateY(-2px); }
.btn-contact:hover::before {
  background: var(--led);
  box-shadow: 0 0 10px 1px rgba(55, 227, 121, 0.75);
}
.btn-contact:active { transform: translateY(0); }

/* 暗色分区里反白 */
.on-dark .btn-contact {
  background: var(--dark-fg);
  color: var(--ink);
  box-shadow: 0 10px 28px -12px rgba(0, 0, 0, 0.8);
}
.on-dark .btn-contact::before { background: rgba(12, 12, 12, 0.3); }
.on-dark .btn-contact:hover::before { background: #1DA457; }

@media (min-width: 640px) {
  .btn-contact { padding: 0.875rem 2.5rem; font-size: 0.875rem; }
}

@media (min-width: 768px) {
  .btn-contact { padding: 1rem 3rem; font-size: 1rem; }
}

/* ── 按钮：幽灵描边胶囊（对应 LiveProjectButton） ─────────────────────── */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 2rem;
  border: 2px solid var(--dark-fg);
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dark-fg);
  white-space: nowrap;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}

.btn-ghost:hover { background: rgba(215, 226, 234, 0.1); }

@media (min-width: 640px) {
  .btn-ghost { padding: 0.875rem 2.5rem; font-size: 1rem; }
}

.btn-ghost--ink {
  border-color: var(--ink);
  color: var(--ink);
}

.btn-ghost--ink:hover { background: rgba(12, 12, 12, 0.06); }

.btn-ghost__icon { width: 1rem; height: 1rem; flex: none; }

/* ── 小标签 ───────────────────────────────────────────────────────────── */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.on-dark .eyebrow { color: var(--dark-muted); }

/* ── LED 状态点：全站唯一点缀色，如板载电源灯 ─────────────────────────── */
.led {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--led);
  box-shadow: 0 0 8px 1px rgba(55, 227, 121, 0.65);
  animation: led-breathe 2.6s var(--ease) infinite;
}

@keyframes led-breathe {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

/* ── 冗余动效降级 ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .fade-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .anim-char { opacity: 1 !important; }

  .magnet { transition: none !important; transform: none !important; }

  .led { animation: none !important; }

  .marquee-row,
  .stack-card { transform: none !important; }
}