/* index.css — 歌单页（杂志式：全幅 hero + 重叠内容卡 + 右侧信息栏） */

@layer page {
  #page-content[data-page="songs"] { display: block; }

  /* ══ Hero ══════════════════════════════════════════ */
  .hero {
    position: relative;
    /* 只裁左右：光斑向左右会溢出，纵向必须放出去，
       否则会被 hero 的下边界切成一条硬边（overflow:hidden 的老问题）。 */
    overflow-x: clip;
    overflow-y: visible;
    padding: 3.4rem 1.25rem 8.5rem;
  }

  /* 顶部渐隐：光斑被 hero 的上边界裁切，用一层底色渐变把接缝糊掉 */
  .hero::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 140px;
    background: linear-gradient(180deg, var(--bg) 0%, transparent 100%);
    pointer-events: none;
    z-index: 1;
  }

  /* 光斑在 hero 边界处会被 overflow:hidden 裁成一条硬边：
     给背景层自己加一个上下渐隐的遮罩，让颜色在边界前先淡出。 */
  .hero__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0,
      #000 150px,
      #000 calc(100% - 260px),
      transparent 100%);
    mask-image: linear-gradient(
      to bottom,
      transparent 0,
      #000 150px,
      #000 calc(100% - 260px),
      transparent 100%);
  }
  /* 不叠 filter: blur()——渐变本身就有柔边，再模糊只是让 GPU 多算一张大图 */
  .hero__bg .blob {
    position: absolute;
    border-radius: 50%;
    opacity: 0.62;
    will-change: transform;
  }
  .hero__bg .blob--1 {
    width: 520px; height: 520px; left: -140px; top: -180px;
    background: radial-gradient(circle at 35% 35%, #f6dca6 0%, transparent 66%);
  }
  .hero__bg .blob--2 {
    width: 620px; height: 620px; right: -180px; top: -240px;
    background: radial-gradient(circle at 60% 40%, #bdd7a2 0%, transparent 66%);
  }
  /* translate 与滚动视差用的 transform 是两套属性，可以叠加 */
  .hero__bg .blob--1 { translate: calc(var(--px, 0) * -14px) calc(var(--py, 0) * -10px); }
  .hero__bg .blob--2 { translate: calc(var(--px, 0) * 18px) calc(var(--py, 0) * 12px); }
  .hero__bg .blob--3 { translate: calc(var(--px, 0) * -10px) calc(var(--py, 0) * 14px); }

  .hero__bg .blob--3 {
    width: 460px; height: 460px; right: 24%; bottom: -240px;
    background: radial-gradient(circle at 50% 50%, #efb3a9 0%, transparent 66%);
    opacity: 0.4;
  }

  /* 手绘感装饰：左上角的弧线 + 星点 */
  .hero__ornament {
    position: absolute;
    left: 2%;
    top: 6%;
    width: 260px;
    height: 260px;
    opacity: 0.5;
    color: color-mix(in srgb, var(--gold-600) 60%, transparent);
  }
  /* 跟随鼠标的柔光：整块 hero 都"活"起来（纯 CSS 变量，rAF 写在 motion.js） */
  .hero__spot {
    position: absolute;
    inset: 0;
    background: radial-gradient(
      520px circle at var(--mx, 50%) var(--my, 38%),
      color-mix(in srgb, var(--gold-500) 24%, transparent),
      transparent 62%);
    opacity: 0;
    transition: opacity 0.5s var(--ease);
    pointer-events: none;
  }
  .hero:hover .hero__spot { opacity: 1; }

  .hero__sparkles span {
    position: absolute;
    color: color-mix(in srgb, var(--gold-500) 80%, var(--panel));
    animation: floaty 8s var(--ease) infinite;
  }
  .hero__sparkles span:nth-child(1) { left: 46%; top: 18%; font-size: 15px; }
  .hero__sparkles span:nth-child(2) { left: 62%; top: 62%; font-size: 10px; animation-delay: 1.8s; }
  .hero__sparkles span:nth-child(3) { left: 30%; top: 74%; font-size: 12px; animation-delay: 3.2s; }

  .hero__inner {
    position: relative;
    max-width: 1160px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 352px;
    align-items: center;
    gap: 2.5rem;
  }

  .hero__copy > * { animation: fadeUp 0.9s var(--ease-out) both; }
  .hero__copy > *:nth-child(2) { animation-delay: 0.06s; }
  .hero__copy > *:nth-child(3) { animation-delay: 0.12s; }
  .hero__copy > *:nth-child(4) { animation-delay: 0.18s; }
  .hero__copy > *:nth-child(5) { animation-delay: 0.24s; }
  .hero__copy > *:nth-child(6) { animation-delay: 0.3s; }

  .eyebrow {
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--sage-700);
  }

  .hero__title {
    margin-top: 0.6rem;
    font-family: var(--font-serif);
    font-size: clamp(2.3rem, 4.6vw, 3.4rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--ink-900);
  }
  .hero__title em {
    display: block;
    margin-top: 0.4rem;
    font-family: var(--font-sans);
    font-style: normal;
    font-size: clamp(0.95rem, 1.5vw, 1.05rem);
    font-weight: 400;
    letter-spacing: 0.24em;
    color: var(--text-mute);
  }
  /* 名字用实色，底部叠一条"荧光笔"高亮：比整段渐变清晰，也更像手写笔记 */
  .hero__title .accent {
    position: relative;
    color: var(--ink-900);
    background-image: linear-gradient(
      transparent 64%,
      color-mix(in srgb, var(--gold-300) 70%, transparent) 64%,
      color-mix(in srgb, var(--gold-300) 70%, transparent) 92%,
      transparent 92%
    );
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 0 0.06em;
  }

  .hero__room {
    margin-top: 1rem;
    max-width: 34ch;
    font-size: 0.95rem;
    color: var(--text-dim);
    min-height: 1.7em;
  }

  .hero__meta { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 1.3rem; }

  .hero__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.7rem; }

  .hero__links {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 0.4rem 1rem;
    margin-top: 1.3rem;
    font-size: 0.82rem;
    color: var(--text-mute);
  }
  .hero__links a, .hero__link-btn {
    color: var(--text-dim);
    border-bottom: 1px dashed transparent;
    padding-bottom: 1px;
    transition: all var(--dur) var(--ease);
  }
  .hero__links a:hover, .hero__link-btn:hover { color: var(--sage-700); border-color: var(--sage-300); }
  .hero__link-btn { font-size: inherit; background: none; }

  /* ── 头像 ─────────────────────────────────────────── */
  /* 头像区域：拖拽时不选中文字、不出现"拖图片"的原生行为 */
  .hero__portrait {
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    touch-action: manipulation;
  }
  .hero__portrait img,
  .hero__portrait .pill,
  .hero__portrait .portrait-bubble {
    -webkit-user-drag: none;
    user-select: none;
  }

  .hero__portrait {
    position: relative;
    justify-self: center;
    width: 320px;
    height: 320px;
    display: grid;
    place-items: center;
    animation: fadeUp 1s var(--ease-out) both;
    transition: transform 0.35s var(--ease-out);
  }
  .hero__portrait::before {
    content: "";
    position: absolute;
    inset: -30px;
    border-radius: 50%;
    background: radial-gradient(circle at calc(50% + var(--px, 0) * 16%) calc(46% + var(--py, 0) * 16%),
      color-mix(in srgb, var(--gold-500) 42%, transparent) 0%,
      color-mix(in srgb, var(--sage-500) 34%, transparent) 46%,
      transparent 72%);
    opacity: 0.85;
    pointer-events: none;
  }
  .hero__portrait::after {
    /* 虚线圈，缓慢旋转 */
    content: "";
    position: absolute;
    inset: -14px;
    border-radius: 50%;
    border: 1px dashed color-mix(in srgb, var(--sage-500) 45%, transparent);
    animation: spinSlow 46s linear infinite;
    pointer-events: none;
  }
  /* 头像：跟着鼠标做 3D 倾斜；图片本身再往指针方向偏一点，"像在看你" */
  .portrait-card {
    position: relative;
    display: grid;
    place-items: center;
    transform: perspective(1000px)
      rotateX(calc(var(--py, 0) * -12deg * var(--tilt-scale, 1)))
      rotateY(calc(var(--px, 0) * 14deg * var(--tilt-scale, 1)));
    transition: transform 0.28s var(--ease-out);
    will-change: transform;
  }

  .portrait {
    position: relative;
    width: 272px;
    height: 272px;
    border-radius: 50%;
    object-fit: cover;
    border: 6px solid color-mix(in srgb, var(--panel) 90%, transparent);
    box-shadow: 0 30px 60px -32px rgba(74, 60, 36, 0.65);
    background: var(--panel);
    transform: translate3d(calc(var(--px, 0) * 14px * var(--tilt-scale, 1)), calc(var(--py, 0) * 14px * var(--tilt-scale, 1)), 0) scale(1.02);
    /* 弹簧放在图片上（不缩放带 3D 变换的父层，避免合成层出现黑块） */
    scale: var(--pop, 1);
    transition: transform 0.28s var(--ease-out);
  }


  .portrait__live {
    position: absolute;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    z-index: 2;
  }

  /* ══ 内容卡（压住 hero 底部） ══════════════════════ */
  .sheet {
    position: relative;
    z-index: 2;
    max-width: 1160px;
    margin: -6rem auto 0;
    padding: 1.45rem 1.5rem 1.6rem;
    background: color-mix(in srgb, var(--panel) 96%, transparent);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-lg);
  }

  .sheet__toolbar {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 1.1rem;
  }

  .search {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    height: 50px;
    padding: 0 1rem;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-xs);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  }
  .search:focus-within {
    border-color: var(--sage-500);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--sage-500) 14%, transparent);
  }
  .search__icon { color: var(--text-mute); display: grid; place-items: center; }
  .search input {
    border: 0; background: transparent; padding: 0; height: 100%;
    box-shadow: none; font-size: 0.95rem;
  }
  .search input:focus { box-shadow: none; border: 0; }
  .search__kbd {
    font-family: var(--font-mono); font-size: 0.7rem;
    color: var(--text-mute);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0 0.34rem;
  }

  .sort {
    height: 50px;
    width: auto;
    padding: 0 0.9rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--text-dim);
    font-size: 0.85rem;
    box-shadow: var(--shadow-xs);
  }

  .sheet__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 292px;
    gap: 1.5rem;
    align-items: start;
  }

  .catalog__filters {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.85rem;
  }
  .catalog__count {
    flex: 0 0 auto;
    font-family: var(--font-display);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: var(--text-mute);
    white-space: nowrap;
  }

  /* ── 歌曲列表 ─────────────────────────────────────── */
  .songlist {
    background: var(--panel);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
  }

  .song {
    display: grid;
    grid-template-columns: 2.4rem minmax(0, 1fr) auto 3.4rem;
    align-items: center;
    gap: 0.85rem;
    padding: 0.78rem 1.05rem;
    border-bottom: 1px solid var(--border-soft);
    cursor: var(--cur-hand);
    transition: background var(--dur) var(--ease), transform var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease);
    animation: fadeUp 0.5s var(--ease-out) both;
  }
  .song:nth-child(1) { animation-delay: 0.02s; }
  .song:nth-child(2) { animation-delay: 0.045s; }
  .song:nth-child(3) { animation-delay: 0.07s; }
  .song:nth-child(4) { animation-delay: 0.095s; }
  .song:nth-child(5) { animation-delay: 0.12s; }
  .song:nth-child(6) { animation-delay: 0.145s; }
  .song:nth-child(7) { animation-delay: 0.17s; }
  .song:nth-child(8) { animation-delay: 0.195s; }
  .song:nth-child(n + 9) { animation-delay: 0.22s; }

  .song:last-child { border-bottom: 0; }
  .song:hover {
    background: linear-gradient(90deg,
      color-mix(in srgb, var(--sage-100) 80%, transparent),
      color-mix(in srgb, var(--gold-100) 30%, transparent) 60%,
      transparent);
    transform: translateX(2px);
    box-shadow: inset 3px 0 0 var(--sage-500);
  }

  .song__index {
    width: 26px; height: 26px;
    display: grid; place-items: center;
    border-radius: 9px;
    background: var(--panel-2);
    font-family: var(--font-display);
    font-size: 0.76rem;
    color: var(--text-mute);
    transition: all var(--dur) var(--ease);
  }
  .song:hover .song__index {
    background: var(--panel);
    color: var(--sage-700);
    box-shadow: var(--shadow-xs);
  }

  .song__title {
    font-family: var(--font-serif);
    font-size: 1.01rem;
    font-weight: 700;
    letter-spacing: 0.005em;
  }
  .song__meta {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 0.1rem;
    margin-top: 0.1rem;
    font-size: 0.76rem;
    color: var(--text-dim);
  }
  .song__artists { margin-right: 0.1rem; }

  .song__count {
    padding: 0.1rem 0.55rem;
    font-family: var(--font-display);
    font-size: 0.72rem;
    color: var(--text-mute);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-pill);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    transition: all var(--dur) var(--ease);
  }
  .song__count.is-hot {
    color: var(--sage-700);
    background: var(--sage-100);
    border-color: var(--sage-300);
  }

  .song__copy {
    padding: 0.2rem 0.55rem;
    font-size: 0.74rem;
    color: var(--sage-700);
    background: var(--panel);
    border: 1px solid var(--sage-300);
    border-radius: var(--radius-pill);
    opacity: 0.45;
    transform: translateX(3px);
    transition: all var(--dur) var(--ease);
  }
  .song:hover .song__copy, .song__copy:focus-visible { opacity: 1; transform: translateX(0); }

  .song.is-copied {
    background: linear-gradient(90deg,
      color-mix(in srgb, var(--sage-500) 18%, transparent), transparent 80%);
  }

  .songlist__empty, .songlist__foot {
    padding: 1.1rem;
    font-size: 0.82rem;
    color: var(--text-mute);
    text-align: center;
  }
  .songlist__foot { border-top: 1px dashed var(--border-soft); }

  /* ── 右侧信息栏 ───────────────────────────────────── */
  .rail {
    display: grid;
    gap: 0.85rem;
    position: sticky;
    top: 6.4rem;
  }

  .rail-card {
    position: relative;
    padding: 1rem 1.1rem;
    background: var(--panel);
    border: 1px solid var(--border-soft);
    border-radius: 18px;
    box-shadow: var(--shadow-xs);
    overflow: hidden;
  }
  .rail-card::after {
    content: "";
    position: absolute;
    right: -40px; top: -50px;
    width: 120px; height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle,
      color-mix(in srgb, var(--gold-500) 22%, transparent), transparent 70%);
    pointer-events: none;
  }
  .rail-card h3 {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-mute);
    margin-bottom: 0.5rem;
  }
  .rail-card p { font-size: 0.86rem; color: var(--text-dim); }
  .rail-card .rail-strong {
    font-family: var(--font-display);
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--ink-900);
  }
  .rail-card .rail-row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
  .rail-card .rail-links { display: grid; gap: 0.2rem; margin-top: 0.35rem; }
  .rail-card .rail-links a {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.34rem 0;
    font-size: 0.86rem;
    color: var(--text-dim);
    border-bottom: 1px dashed var(--border-soft);
    transition: color var(--dur) var(--ease);
  }
  .rail-card .rail-links a:last-child { border-bottom: 0; }
  .rail-card .rail-links a:hover { color: var(--sage-700); }
  .rail-card .rail-links a span { color: var(--text-mute); font-size: 0.8rem; }
  .rail-card .mono { font-family: var(--font-display); font-size: 1.04rem; letter-spacing: 0.02em; }

  .rail-card--live .rail-strong { color: var(--danger); }

  /* ══ 响应式 ══════════════════════════════════════ */
  @media (max-width: 1080px) {
    .hero__inner { grid-template-columns: minmax(0, 1fr) 280px; gap: 1.5rem; }
    .hero__portrait { width: 270px; height: 270px; }
    .portrait { width: 228px; height: 228px; }
    .sheet__body { grid-template-columns: minmax(0, 1fr); }
    .rail { position: static; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  }

  @media (max-width: 760px) {
    .hero { padding: 2.2rem 1rem 7rem; }
    .hero__inner { grid-template-columns: minmax(0, 1fr); text-align: center; }
    .hero__portrait { order: -1; width: 210px; height: 210px; margin: 0 auto 0.5rem; }
    .portrait { width: 178px; height: 178px; }
    .hero__room { margin-left: auto; margin-right: auto; }
    .hero__meta, .hero__actions, .hero__links { justify-content: center; }
    .hero__title em { letter-spacing: 0.14em; }
    .sheet { margin-top: -5rem; padding: 1.1rem 0.9rem 1.2rem; border-radius: 24px; }
    .sheet__toolbar { flex-wrap: wrap; }
    .search { flex: 1 1 100%; }
    .sort { flex: 1; }
    .song { grid-template-columns: 2.1rem minmax(0, 1fr) auto; padding: 0.7rem 0.85rem; }
    .song__copy { display: none; }
  }
}

  /* ── 点击飘出的气泡 ─────────────────────────────────
   *
   * 元素 fixed 在点击坐标，位移/淡出由 Web Animations 驱动（见 motion.js），
   * 这里只负责长相。速度、漂移、时长每次随机。
   */
  .float-bubble {
    position: fixed;
    z-index: 70;
    padding: 0.5rem 0.95rem;
    background: var(--panel);
    color: var(--ink-900);
    border: 1.5px solid var(--ink-900);
    border-radius: var(--radius-pill);
    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: var(--shadow-sm);
    transform: translate(-50%, -50%);
    will-change: transform, opacity;
  }
  .float-bubble[data-tone="gold"] { background: var(--gold-100); }
  .float-bubble[data-tone="sage"] { background: var(--sage-100); }
  .float-bubble[data-tone="blush"] { background: var(--blush-100); }