/* ============================================================
   GS 俱乐部 · 设计系统
   提炼自首页设计图：藏青 × 暖金 × 米白 · 复古版画海港风格
   ============================================================ */

:root {
  /* ---- 色彩 ---- */
  --gs-cream:        #F6EFDC;   /* 主背景 · 米白纸面 */
  --gs-cream-2:      #FBF6E9;   /* 浅米白 · 卡片 */
  --gs-paper:        #FDFBF3;   /* 纸面高光 */
  --gs-navy:         #1B2C4E;   /* 主色 · 藏青（标题/实心按钮/插画深色） */
  --gs-navy-deep:    #111F3A;   /* 深藏青 · 页脚/过渡幕布 */
  --gs-navy-soft:    #33517E;   /* 海蓝 · 辅助 */
  --gs-gold:         #C9963F;   /* 暖金 · 强调 */
  --gs-gold-2:       #D9A94F;   /* 亮金 · 插画阳光 */
  --gs-gold-light:   #EBCD8F;   /* 淡金 · 装饰 */
  --gs-ink:          #2A3852;   /* 正文 */
  --gs-ink-soft:     #5B6A86;   /* 次要文字 */
  --gs-line:         rgba(27, 44, 78, .14);  /* 分隔线 */
  --gs-line-gold:    rgba(201, 150, 63, .35);

  /* ---- 字体 ---- */
  --font-serif: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --font-sans:  "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;

  /* ---- 字阶 ---- */
  --fs-display: clamp(44px, 7vw, 76px);   /* 首页大标题 */
  --fs-h1:      clamp(34px, 4.6vw, 52px); /* 页标题 */
  --fs-h2:      clamp(24px, 3vw, 32px);   /* 区块标题 */
  --fs-h3:      clamp(18px, 2vw, 22px);   /* 卡片标题 */
  --fs-body:    16px;
  --fs-small:   14px;

  /* ---- 空间 ---- */
  --nav-h: 64px;
  --container: 1180px;
  --radius-s: 8px;
  --radius-m: 16px;
  --radius-l: 24px;
  --radius-pill: 999px;

  /* ---- 动效曲线 ---- */
  --ease-out:   cubic-bezier(.22, 1, .36, 1);
  --ease-sail:  cubic-bezier(.65, 0, .35, 1); /* 帆船加速 */
  --t-fast:  .25s;
  --t-med:   .5s;
  --t-slow:  .9s;

  /* ---- 阴影 ---- */
  --shadow-card: 0 2px 6px rgba(27,44,78,.06), 0 12px 32px rgba(27,44,78,.08);
  --shadow-lift: 0 6px 14px rgba(27,44,78,.10), 0 24px 56px rgba(27,44,78,.16);
}

/* ---- 基础 ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--gs-ink);
  background: var(--gs-cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }

::selection { background: var(--gs-gold-2); color: var(--gs-navy-deep); }

h1, h2, h3, h4 { font-family: var(--font-serif); color: var(--gs-navy); line-height: 1.3; }

.container { width: min(var(--container), calc(100% - 48px)); margin-inline: auto; }

/* ---- 版面组件 ---- */

/*  eyebrow 小标签 */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--fs-small); letter-spacing: .35em; font-weight: 500;
  color: var(--gs-gold); text-transform: uppercase;
}
.eyebrow::before, .eyebrow::after {
  content: ""; width: 28px; height: 1px; background: var(--gs-line-gold);
}

/* 区块标题组合 */
.section-head { text-align: center; margin-bottom: 56px; }
.section-head h2 { font-size: var(--fs-h2); font-weight: 700; margin-top: 14px; }
.section-head p { color: var(--gs-ink-soft); max-width: 620px; margin: 14px auto 0; }

/* 按钮 · 设计图同款胶囊 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 34px; border-radius: var(--radius-pill);
  font-size: 15px; font-weight: 500; letter-spacing: .12em;
  position: relative; overflow: hidden; isolation: isolate;
  transition: color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out);
}
.btn::before {  /* hover 时金色扫过 */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(120deg, var(--gs-gold-2), var(--gs-gold));
  transform: translateX(-101%); transition: transform .38s var(--ease-out);
}
.btn:hover::before { transform: translateX(0); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(201,150,63,.35); }
.btn:active { transform: translateY(0); }

.btn--outline { border: 1.5px solid var(--gs-navy); color: var(--gs-navy); background: rgba(253,251,243,.55); backdrop-filter: blur(4px); }
.btn--outline:hover { color: var(--gs-navy-deep); border-color: var(--gs-gold); }

.btn--solid { background: var(--gs-navy); color: var(--gs-cream); border: 1.5px solid var(--gs-navy); }
.btn--solid:hover { color: var(--gs-navy-deep); border-color: var(--gs-gold); }

/* 卡片 */
.card {
  background: var(--gs-cream-2);
  border: 1px solid var(--gs-line);
  border-radius: var(--radius-m);
  padding: 32px 28px;
  box-shadow: var(--shadow-card);
  transition: transform var(--t-med) var(--ease-out),
              box-shadow var(--t-med) var(--ease-out),
              border-color var(--t-med) var(--ease-out);
  position: relative;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); border-color: var(--gs-line-gold); }

/* 卡片顶部金色锚点装饰 */
.card--anchor::before {
  content: "⚓"; position: absolute; top: 18px; right: 22px;
  font-size: 18px; color: var(--gs-gold); opacity: .55;
}

/* 徽章/标签 */
.tag {
  display: inline-block; padding: 4px 14px; border-radius: var(--radius-pill);
  font-size: 13px; letter-spacing: .08em;
  border: 1px solid var(--gs-line-gold); color: var(--gs-gold);
  background: rgba(217,169,79,.08);
}
.tag--navy { border-color: var(--gs-line); color: var(--gs-navy-soft); background: rgba(51,81,126,.07); }

/* 纸面纹理（版画颗粒感） */
.grain::after {
  content: ""; position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.16 0 0 0 0 0.3 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 滚动显现 */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .12s; }
.reveal[data-delay="2"] { transition-delay: .24s; }
.reveal[data-delay="3"] { transition-delay: .36s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}