/* ============================================================
   乐知 2.0 · 全局样式 main.css
   儿童友好设计系统：明亮糖果色 + 大圆角 + 大字号 + 趣味动效
   ============================================================ */

:root {
  /* 基底 */
  --ink:        #33291F;
  --ink-soft:   #6E6153;
  --paper:      #FFF9F0;            /* 暖奶油底 */
  --card:       #FFFFFF;
  --line:       #F0E4D2;

  /* 品牌 */
  --navy:       #2B3A67;            /* 乐谱蓝（品牌主色） */
  --navy-deep:  #1D2743;
  --gold:       #E9A83A;            /* 糖果金 */
  --gold-soft:  #FBE9C8;

  /* 类别糖果色（站位图/卡片/标签通用） */
  --c-strings:   #4A7BD6;   /* 弦乐 蓝 */
  --c-woodwinds: #3FA878;   /* 木管 绿 */
  --c-brass:     #E0A22E;   /* 铜管 金 */
  --c-percussion:#E2725B;   /* 打击 珊瑚橙 */
  --c-color:     #8B6FC7;   /* 色彩 紫 */
  --c-wind:      #6FAF5C;   /* 民乐吹管 竹绿 */
  --c-bowed:     #D05A4E;   /* 民乐拉弦 朱红 */
  --c-plucked:   #D9A23B;   /* 民乐弹拨 金 */
  --c-perc-cn:   #A9764F;   /* 民乐打击 棕 */

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

  /* 字阶（加大，儿童友好） */
  --fs-h1: 44px;
  --fs-h2: 32px;
  --fs-h3: 24px;
  --fs-body: 18px;
  --fs-small: 15px;

  /* 尺寸 */
  --max-w: 1100px;
  --radius: 20px;
  --radius-sm: 14px;
  --shadow: 0 4px 16px rgba(43, 58, 103, .08);
  --shadow-hover: 0 10px 28px rgba(43, 58, 103, .16);
  --header-h: 68px;
}

@media (max-width: 720px) {
  :root {
    --fs-h1: 32px;
    --fs-h2: 26px;
    --fs-h3: 21px;
    --fs-body: 17px;
    --fs-small: 14px;
    --header-h: 58px;
  }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.9;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 8%, rgba(233, 168, 58, .10) 0, transparent 260px),
    radial-gradient(circle at 88% 20%, rgba(74, 123, 214, .08) 0, transparent 300px),
    var(--paper);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
img, svg, video { max-width: 100%; height: auto; }
a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--gold); }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }
main { flex: 1 0 auto; }

/* ---------- 通用布局 ---------- */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 22px; }
.section { padding: 54px 0; }
.section-title {
  font-family: var(--font-serif);
  font-size: var(--fs-h2);
  color: var(--navy);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.section-title .clef { color: var(--gold); font-size: 1.05em; animation: clefWiggle 5s ease-in-out infinite; display: inline-block; }
@keyframes clefWiggle { 0%,100%{transform:rotate(-4deg);} 50%{transform:rotate(4deg);} }
.section-sub { color: var(--ink-soft); font-size: var(--fs-small); margin-bottom: 30px; }

/* 波浪分隔线 */
.wave-divider { display: block; width: 100%; height: 48px; margin: 8px 0; color: var(--paper); }
.wave-divider svg { width: 100%; height: 100%; display: block; }

/* ---------- 顶部导航（糖果渐变） ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: linear-gradient(90deg, #2B3A67 0%, #3D5194 55%, #8B6FC7 130%);
  box-shadow: 0 4px 18px rgba(29, 39, 67, .22);
}
.nav-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 22px;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.nav-logo {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: #fff;
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 5px;
  white-space: nowrap;
}
.nav-logo:hover { color: #FFE9B8; }
.nav-logo .logo-clef { color: #FFD77A; font-size: 24px; letter-spacing: 0; }
.nav-logo .logo-sub {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, .6);
  font-weight: 400;
}
.nav-menu { display: flex; align-items: center; gap: 2px; }
.nav-menu a {
  color: rgba(255, 255, 255, .88);
  font-size: 15.5px;
  padding: 10px 13px;
  border-radius: 12px;
  white-space: nowrap;
  transition: background .2s, color .2s, transform .2s;
}
.nav-menu a:hover { background: rgba(255, 255, 255, .14); color: #fff; transform: translateY(-1px); }
.nav-menu a.active {
  color: #FFD77A;
  font-weight: 700;
  position: relative;
  background: rgba(255, 215, 122, .12);
}
.nav-toggle {
  display: none;
  color: #fff;
  font-size: 24px;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
}
.nav-toggle:hover { background: rgba(255,255,255,.15); }

@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  .nav-menu {
    position: fixed;
    top: var(--header-h);
    right: 0;
    bottom: 0;
    width: min(300px, 80vw);
    background: linear-gradient(180deg, #2B3A67 0%, #1D2743 100%);
    flex-direction: column;
    align-items: stretch;
    padding: 22px 16px;
    gap: 8px;
    transform: translateX(100%);
    transition: transform .28s ease;
    box-shadow: -10px 0 30px rgba(0, 0, 0, .35);
    overflow-y: auto;
  }
  .nav-menu.open { transform: translateX(0); }
  .nav-menu a { padding: 15px 18px; font-size: 17px; border-radius: 14px; }
  .nav-mask {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    background: rgba(20, 28, 50, .5);
    opacity: 0;
    pointer-events: none;
    transition: opacity .28s;
    z-index: 899;
  }
  .nav-mask.show { opacity: 1; pointer-events: auto; }
}

/* ---------- 页脚（圆润活力） ---------- */
.site-footer {
  background: linear-gradient(180deg, #25315A 0%, #1D2743 100%);
  color: rgba(255, 255, 255, .72);
  margin-top: 70px;
  flex-shrink: 0;
  border-radius: 32px 32px 0 0;
}
.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 42px 24px 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  justify-content: space-between;
  align-items: flex-start;
}
.footer-brand { font-family: var(--font-serif); font-size: 24px; color: #fff; letter-spacing: 4px; }
.footer-brand .clef { color: #FFD77A; }
.footer-note { font-size: 14px; line-height: 2; max-width: 560px; }
.footer-links { display: flex; gap: 22px; font-size: 15px; flex-wrap: wrap; }
.footer-links a { color: rgba(255, 255, 255, .78); }
.footer-links a:hover { color: #FFD77A; }
.footer-copy {
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding: 16px 24px 22px;
  text-align: center;
  font-size: 13px;
  color: rgba(255, 255, 255, .45);
}

/* ---------- 页面头（内页通用，活力渐变） ---------- */
.page-hero {
  background: linear-gradient(135deg, #2B3A67 0%, #46579E 55%, #7B5FB8 115%);
  color: #fff;
  padding: 52px 0 56px;
  position: relative;
  overflow: hidden;
}
.page-hero::before, .page-hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 215, 122, .14);
}
.page-hero::before { width: 240px; height: 240px; right: -60px; top: -70px; }
.page-hero::after { width: 140px; height: 140px; left: -40px; bottom: -50px; background: rgba(139, 111, 199, .35); }
.page-hero .hero-kicker {
  color: #FFD77A;
  font-size: 13px;
  letter-spacing: 4px;
  margin-bottom: 12px;
  position: relative; z-index: 2;
}
.page-hero h1 { font-family: var(--font-serif); font-size: var(--fs-h1); letter-spacing: 3px; margin-bottom: 12px; position: relative; z-index: 2; }
.page-hero .hero-desc { color: rgba(255, 255, 255, .85); font-size: 16px; max-width: 680px; position: relative; z-index: 2; }
.page-hero .hero-note-float {
  position: absolute; color: rgba(255, 255, 255, .18);
  font-family: var(--font-serif); pointer-events: none;
  animation: noteFloat 8s ease-in-out infinite;
}
@keyframes noteFloat { 0%,100%{transform:translateY(0) rotate(-6deg);} 50%{transform:translateY(-16px) rotate(6deg);} }
.page-hero.cn-accent { background: linear-gradient(135deg, #7A2A23 0%, #A03B2F 55%, #C96A4B 120%); }

/* ---------- 面包屑 ---------- */
.breadcrumb { font-size: var(--fs-small); color: var(--ink-soft); padding: 18px 0 0; }
.breadcrumb a { color: var(--ink-soft); }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb .sep { margin: 0 9px; color: #D8C9A8; }

/* ---------- 吉祥物 ---------- */
.mascot { display: inline-block; }
.mascot svg { overflow: visible; }
.mascot .m-face { animation: mascotBlink 4.5s ease-in-out infinite; transform-origin: center; }
@keyframes mascotBlink {
  0%, 92%, 100% { transform: scaleY(1); }
  95% { transform: scaleY(.12); }
}
.mascot .m-body { animation: mascotBounce 3s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes mascotBounce { 0%,100%{transform:translateY(0) rotate(-2deg);} 50%{transform:translateY(-6px) rotate(2deg);} }

/* ---------- 工具类 ---------- */
.text-center { text-align: center; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.empty-state { text-align: center; padding: 70px 20px; color: var(--ink-soft); }
.empty-state .empty-icon { font-size: 56px; margin-bottom: 14px; }
.empty-state .mascot { margin-bottom: 10px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}