/* ============================================================
   Binance 9th Anniversary — Timeline Microsite
   Palette: bg #0B0E11 · surface #181A20 · gold #F0B90B
   ============================================================ */

:root {
  --bg: #0B0E11;
  --surface: rgba(24, 26, 32, 0.72);
  --gold: #F0B90B;
  --gold-light: #F8D33A;
  --gold-deep: #C99400;
  --ink: #EAECEF;
  --ink-2: rgba(234, 236, 239, 0.68);
  --ink-3: rgba(234, 236, 239, 0.42);
  --line: rgba(240, 185, 11, 0.16);
  --head-h: 64px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: auto; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Noto Sans SC", sans-serif;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

:lang(zh-TW) body,
body:lang(zh-TW) {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "PingFang TC", "Hiragino Sans CNS",
    "Microsoft JhengHei", "Noto Sans TC", sans-serif;
}

body:lang(ja) {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    "Yu Gothic", Meiryo, "Noto Sans JP", sans-serif;
}

body:lang(ko) {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Apple SD Gothic Neo", "Malgun Gothic",
    "Noto Sans KR", sans-serif;
}

::selection { background: rgba(240, 185, 11, 0.85); color: #0B0E11; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #0B0E11; }
::-webkit-scrollbar-thumb { background: #2b2f36; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #3a3f47; }

/* ---------- 进度条 ---------- */
.progress-bar {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  z-index: 90; pointer-events: none;
}
.progress-bar span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-light));
  transform: scaleX(0); transform-origin: left center;
  box-shadow: 0 0 12px rgba(240, 185, 11, 0.55);
}

/* ---------- 页头 ---------- */
.site-head {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  height: var(--head-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(16px, 4vw, 48px);
  transition: background-color 0.35s ease, backdrop-filter 0.35s ease,
              border-color 0.35s ease;
  border-bottom: 1px solid transparent;
}
.site-head.scrolled {
  background: rgba(11, 14, 17, 0.78);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom-color: rgba(240, 185, 11, 0.10);
}

.brand { display: flex; align-items: baseline; gap: 8px; user-select: none; }
.brand-word {
  font-weight: 800; letter-spacing: 0.22em; font-size: 15px;
  color: var(--ink);
}
.brand-nine {
  font-weight: 800; font-size: 18px; line-height: 1;
  color: #0B0E11; background: var(--gold);
  padding: 3px 8px 4px; border-radius: 6px;
}

.lang-switch {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border: 1px solid rgba(240, 185, 11, 0.28); border-radius: 999px;
  background: rgba(11, 14, 17, 0.55);
  transition: border-color 0.25s ease;
}
.lang-switch:hover, .lang-switch:focus-within {
  border-color: rgba(240, 185, 11, 0.6);
}
.lang-globe { width: 15px; height: 15px; color: var(--gold); flex: none; }
.lang-switch select {
  appearance: none; -webkit-appearance: none;
  border: 0; background: transparent; outline: none;
  color: var(--ink); font-size: 13px; font-weight: 600;
  font-family: inherit; line-height: 1;
  padding-right: 16px; cursor: pointer;
}
.lang-switch select option { background: #181A20; color: #EAECEF; }
.lang-caret {
  position: absolute; right: 13px; top: 50%;
  width: 7px; height: 7px; margin-top: -5px;
  border-right: 1.6px solid var(--gold);
  border-bottom: 1.6px solid var(--gold);
  transform: rotate(45deg);
  pointer-events: none;
}

/* ---------- 右侧年份导航 ---------- */
.year-nav {
  position: fixed; right: clamp(10px, 2vw, 28px); top: 50%;
  transform: translateY(-50%); z-index: 70;
  display: flex; flex-direction: column; gap: 10px;
}
.year-nav a {
  position: relative; display: block;
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(234, 236, 239, 0.22);
  transition: background-color 0.3s ease, transform 0.3s ease;
}
.year-nav a:hover { background: rgba(240, 185, 11, 0.6); }
.year-nav a.active {
  background: var(--gold); transform: scale(1.35);
  box-shadow: 0 0 10px rgba(240, 185, 11, 0.7);
}
.year-nav a i {
  position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  font-style: normal; font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em; color: var(--gold);
  opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
  white-space: nowrap;
}
.year-nav a:hover i, .year-nav a.active i { opacity: 1; }

/* ---------- 开场 ---------- */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
#heroCanvas, #finaleCanvas, #fxCanvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block;
}
.hero-glow {
  position: absolute; inset: -6%; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 45% at 50% 42%, rgba(240, 185, 11, 0.13), transparent 70%),
    radial-gradient(ellipse 90% 60% at 50% 110%, rgba(240, 185, 11, 0.06), transparent 70%);
  animation: glow-breathe 14s ease-in-out infinite alternate;
}
@keyframes glow-breathe {
  from { transform: scale(1) translateY(0); opacity: 0.9; }
  to   { transform: scale(1.07) translateY(-1.5%); opacity: 1; }
}
.hero-inner {
  position: relative; text-align: center;
  padding: calc(var(--head-h) + 24px) 24px 48px;
  max-width: 900px;
}
.hero-kicker {
  font-size: clamp(13px, 1.6vw, 16px); letter-spacing: 0.35em;
  color: var(--ink-3); font-weight: 600;
  margin-bottom: clamp(12px, 2vh, 24px);
}
.hero-nine {
  position: relative; display: inline-flex;
  align-items: center; justify-content: center;
  width: min(92vw, clamp(250px, 47vh, 450px));
  aspect-ratio: 1 / 1;
  container-type: size;
  margin-bottom: clamp(8px, 2vh, 20px);
}
.nine-digit {
  font-size: clamp(150px, 29vh, 285px); font-size: 67cqw;
  font-weight: 800; line-height: 1;
  background: linear-gradient(160deg, var(--gold-light) 10%, var(--gold) 45%, var(--gold-deep) 90%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 0 34px rgba(240, 185, 11, 0.35));
  transition: opacity 0.5s ease;
}
.nine-digit.digit-hidden { opacity: 0; }
/* 粒子模式下保留一个“幽灵 9”增加体量感,透明度由 JS 随滚动衰减 */
.nine-digit.digit-ghost { opacity: 0.15; transition: none; }
.nine-canvas {
  position: absolute; left: -30%; top: -30%;
  width: 160%; height: 160%;
  pointer-events: none;
}
.hero-ring {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg,
    transparent 0turn, transparent 0.62turn,
    rgba(240, 185, 11, 0.95) 0.78turn, transparent 0.82turn, transparent 1turn);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 1.5px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 1.5px));
  animation: spin 12s linear infinite;
}
.hero-ring.ring-2 {
  inset: 9%;
  animation: spin-rev 18s linear infinite;
  background: conic-gradient(from 180deg,
    transparent 0turn, transparent 0.72turn,
    rgba(248, 211, 58, 0.55) 0.86turn, transparent 0.9turn, transparent 1turn);
}
@keyframes spin     { to { transform: rotate(360deg); } }
@keyframes spin-rev { to { transform: rotate(-360deg); } }

.hero-title {
  font-size: clamp(34px, 6vw, 64px); font-weight: 800;
  letter-spacing: 0.06em; line-height: 1.25;
}
.hero-sub {
  margin-top: 14px;
  font-size: clamp(15px, 2vw, 19px); color: var(--ink-2);
  letter-spacing: 0.04em;
}

.scroll-hint {
  margin-top: clamp(28px, 6vh, 64px);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  color: var(--ink-3); font-size: 13px; letter-spacing: 0.18em;
}
.chevron {
  width: 22px; height: 22px;
  border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold);
  transform: rotate(45deg);
  animation: bob 1.8s ease-in-out infinite;
}
@keyframes bob {
  0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: 0.9; }
  50%      { transform: rotate(45deg) translate(7px, 7px); opacity: 0.35; }
}

/* ---------- 时间线 ---------- */
.timeline {
  position: relative;
  padding: 10vh 0 6vh;
  max-width: 1160px; margin: 0 auto;
}
.tl-line {
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 2px; margin-left: -1px;
  background: rgba(240, 185, 11, 0.10);
}
.tl-line span {
  display: block; width: 100%; height: 100%;
  background: linear-gradient(180deg, var(--gold-light), var(--gold) 40%, var(--gold-deep));
  transform: scaleY(0); transform-origin: top center;
  box-shadow: 0 0 14px rgba(240, 185, 11, 0.4);
}
.tl-comet {
  position: absolute; left: 50%; top: 0;
  width: 12px; height: 12px; margin-left: -6px; margin-top: -6px;
  border-radius: 50%;
  background: radial-gradient(circle, #FFF3C4 0%, var(--gold-light) 35%, rgba(240, 185, 11, 0) 75%);
  box-shadow:
    0 0 10px 3px rgba(248, 211, 58, 0.85),
    0 0 34px 12px rgba(240, 185, 11, 0.35);
  opacity: 0; pointer-events: none;
}
.tl-comet::before {
  content: ""; position: absolute;
  left: 50%; bottom: 50%; width: 2px; height: 74px;
  transform: translateX(-50%);
  background: linear-gradient(0deg, rgba(248, 211, 58, 0.7), rgba(248, 211, 58, 0));
}

.chapter { position: relative; padding: 9vh 0 5vh; }

.chapter-head {
  position: relative; text-align: center;
  margin-bottom: clamp(24px, 5vh, 56px);
  pointer-events: none;
}
.year-big {
  display: block;
  font-size: clamp(92px, 17vw, 230px); font-weight: 800; line-height: 0.95;
  letter-spacing: 0.02em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(240, 185, 11, 0.20);
  user-select: none;
}
.year-tag {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  margin-top: clamp(-34px, -4vh, -18px);
  padding: 8px 18px; border-radius: 999px;
  background: rgba(24, 26, 32, 0.9);
  border: 1px solid rgba(240, 185, 11, 0.35);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}
.year-tag i {
  font-style: normal; font-weight: 800; font-size: 14px;
  color: var(--gold); letter-spacing: 0.12em;
}
.year-tag b {
  font-weight: 700; font-size: 15px; color: var(--ink);
  letter-spacing: 0.08em;
}

.events {
  display: flex; flex-direction: column;
  gap: clamp(28px, 5vh, 56px);
  padding: 0 clamp(16px, 3vw, 40px);
}
.event {
  position: relative; width: 50%;
}
.event.left  { align-self: flex-start; padding-right: clamp(32px, 5vw, 72px); }
.event.right { align-self: flex-end;   padding-left:  clamp(32px, 5vw, 72px); }

/* 时间轴节点 */
.event::before {
  content: ""; position: absolute; top: 30px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--bg);
  border: 2.5px solid var(--gold);
  box-shadow: 0 0 12px rgba(240, 185, 11, 0.65);
  z-index: 2;
}
.event.left::before  { right: -8px; }
.event.right::before { left: -8px; }

/* 节点连接线 */
.event::after {
  content: ""; position: absolute; top: 36px; height: 1.5px;
  width: clamp(20px, 4vw, 58px);
  background: linear-gradient(90deg, rgba(240, 185, 11, 0.55), rgba(240, 185, 11, 0.05));
}
.event.left::after  { right: 6px; transform: scaleX(-1); }
.event.right::after { left: 6px; }

.event-card {
  position: relative;
  background: var(--surface);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: clamp(20px, 2.6vw, 30px) clamp(20px, 2.8vw, 32px);
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.event-card:hover {
  border-color: rgba(240, 185, 11, 0.45);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(240, 185, 11, 0.12);
}
body:not(.tilt-enabled) .event-card:hover { transform: translateY(-5px); }
/* 鼠标跟随高光(JS 写入 --gx/--gy) */
.event-card::after {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit; pointer-events: none;
  background: radial-gradient(300px circle at var(--gx, 50%) var(--gy, 50%),
    rgba(255, 244, 200, 0.09), transparent 62%);
  opacity: 0; transition: opacity 0.35s ease;
}
.event-card:hover::after { opacity: 1; }
.event-card h3 {
  font-size: clamp(18px, 2.2vw, 22px); font-weight: 700;
  line-height: 1.45; margin: 10px 0 8px;
}
.event-card p {
  font-size: clamp(14px, 1.6vw, 15.5px); color: var(--ink-2);
}
.event-date {
  display: inline-block;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.14em;
  color: var(--gold);
  padding: 4px 10px; border-radius: 6px;
  background: rgba(240, 185, 11, 0.10);
  border: 1px solid rgba(240, 185, 11, 0.22);
}

/* 高亮里程碑卡片 */
.event-card.highlight {
  background: linear-gradient(150deg, rgba(240, 185, 11, 0.10), rgba(24, 26, 32, 0.85) 55%);
  border-color: rgba(240, 185, 11, 0.35);
}

/* 韧性时刻卡片 */
.event-card.resilience { border-left: 3px solid var(--gold); }
.event-card .badge {
  position: absolute; top: -12px;
  left: clamp(20px, 2.8vw, 32px);
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.16em;
  color: #0B0E11;
  background: linear-gradient(120deg, var(--gold-light), var(--gold));
  padding: 4px 12px; border-radius: 999px;
  box-shadow: 0 4px 14px rgba(240, 185, 11, 0.35);
}

.finale-card {
  background: linear-gradient(150deg, rgba(240, 185, 11, 0.16), rgba(24, 26, 32, 0.9) 60%);
  border-color: rgba(240, 185, 11, 0.5);
}

/* ---------- 数据成就 ---------- */
.stats {
  position: relative;
  padding: clamp(72px, 14vh, 140px) clamp(20px, 4vw, 48px);
  max-width: 1160px; margin: 0 auto;
}
.section-title {
  text-align: center;
  font-size: clamp(26px, 4.4vw, 42px); font-weight: 800;
  letter-spacing: 0.06em;
  margin-bottom: clamp(40px, 8vh, 72px);
}
.section-title::after {
  content: ""; display: block; width: 56px; height: 3px;
  margin: 18px auto 0; border-radius: 2px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-light));
}
.stats-grid {
  display: grid; gap: clamp(14px, 2vw, 22px);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.stat {
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: clamp(28px, 4vh, 44px) 18px;
  transition: transform 0.35s ease, border-color 0.35s ease;
}
.stat:hover { border-color: rgba(240, 185, 11, 0.4); }
body:not(.tilt-enabled) .stat:hover { transform: translateY(-4px); }
.stat-value {
  font-weight: 700; line-height: 1.1;
  font-size: clamp(32px, 4vw, 50px);
  color: var(--gold);
  white-space: nowrap;
}
.stat-prefix, .stat-suffix { font-size: 0.72em; font-weight: 700; }
.stat-label {
  margin-top: 12px;
  font-size: clamp(13.5px, 1.6vw, 15px);
  color: var(--ink-2); letter-spacing: 0.04em;
}

/* ---------- 尾声 ---------- */
.finale {
  position: relative; overflow: hidden;
  min-height: 78vh;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  background:
    radial-gradient(ellipse 70% 55% at 50% 60%, rgba(240, 185, 11, 0.10), transparent 70%);
}
.finale-inner { position: relative; padding: 64px 24px; max-width: 820px; }
.finale-kicker {
  font-size: 14px; letter-spacing: 0.35em; font-weight: 700;
  color: var(--gold); margin-bottom: 20px;
}
.finale-title {
  font-size: clamp(34px, 6.4vw, 66px); font-weight: 800;
  line-height: 1.25; letter-spacing: 0.04em;
  background: linear-gradient(100deg,
    #fff 12%, var(--gold-light) 38%, var(--gold) 52%, var(--gold-light) 66%, #fff 92%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: gold-pan 5.5s ease-in-out infinite alternate;
}
@keyframes gold-pan {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}
.finale-text {
  margin-top: 22px;
  font-size: clamp(15px, 2vw, 19px); color: var(--ink-2);
}
.finale-hint {
  margin-top: 34px;
  font-size: 12.5px; letter-spacing: 0.22em;
  color: var(--ink-3);
}
#fxCanvas { pointer-events: none; }
.finale { cursor: pointer; }

/* 滚动烟花层:覆盖全页,只在章节进入时短暂绘制 */
#scrollFx {
  position: fixed; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 65;
}

/* ---------- 页脚 ---------- */
.site-foot {
  padding: 34px 24px 42px; text-align: center;
  border-top: 1px solid rgba(240, 185, 11, 0.08);
}
.site-foot p { font-size: 12.5px; color: var(--ink-3); }

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 900px) {
  .tl-line { left: 22px; margin-left: 0; }
  .events { padding-left: 52px; padding-right: 18px; }
  .event, .event.left, .event.right {
    width: 100%; align-self: stretch;
    padding-left: 0; padding-right: 0;
  }
  .event.left::before, .event.right::before { left: -38px; right: auto; }
  .event.left::after,  .event.right::after  { left: -24px; right: auto; transform: none; width: 20px; }
  .chapter-head { text-align: left; padding-left: 52px; }
  .year-big { font-size: clamp(72px, 21vw, 130px); }
  .year-nav { display: none; }
  .brand-word { letter-spacing: 0.14em; }
}

@media (max-width: 480px) {
  .events { padding-left: 46px; }
  .event.left::before, .event.right::before { left: -32px; }
  .event.left::after,  .event.right::after  { left: -19px; width: 15px; }
  .chapter-head { padding-left: 46px; }
  .lang-switch button { padding: 6px 11px; }
}

/* ---------- 动效开关 ---------- */
.motion-toggle {
  position: fixed; left: 16px; bottom: 16px; z-index: 85;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: 999px;
  background: rgba(11, 14, 17, 0.75);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(240, 185, 11, 0.3);
  color: var(--ink-2); font-size: 12.5px; font-weight: 600;
  font-family: inherit; letter-spacing: 0.06em;
  cursor: pointer;
  transition: border-color 0.25s ease, color 0.25s ease;
}
.motion-toggle:hover { border-color: rgba(240, 185, 11, 0.6); color: var(--ink); }
.motion-toggle[hidden] { display: none; }
.motion-toggle .when-on { display: none; }
body.motion-on .motion-toggle .when-on { display: inline; }
body.motion-on .motion-toggle .when-off { display: none; }

/* ============================================================
   降低动态效果(body.motion-on 为访客主动解锁的覆盖开关)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  body:not(.motion-on) .hero-ring,
  body:not(.motion-on) .chevron,
  body:not(.motion-on) .finale-title,
  body:not(.motion-on) .hero-glow { animation: none; }
  body:not(.motion-on) .event-card,
  body:not(.motion-on) .stat { transition: none; }
}