/* ============================================================
 * components.css — 组件：唱片 / 唱针 / 文案 / 按钮 / 社交 / 作品 / 播放器 / 设置
 * 材质感来自分层与渐变，动画只用 transform/opacity。
 * ============================================================ */

/* ---------- 首屏信息 ---------- */
.eyebrow {
  font-family: var(--font-en); font-size: 0.78rem; letter-spacing: 0.32em;
  text-transform: uppercase; color: var(--accent-2); margin-bottom: 18px;
}
.name-title {
  font-size: clamp(3rem, 7vw, 7.5rem); font-weight: 800; line-height: 0.98;
  letter-spacing: -0.02em; color: var(--ink);
  background: linear-gradient(180deg, #ffffff 0%, #c7d2e6 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero-sub { font-size: clamp(1.05rem, 1.8vw, 1.4rem); color: var(--ink-2); margin-top: 18px; font-weight: 500; }

/* 动态文案（遮罩揭示，固定高度防抖动） */
.quote-wrap { margin-top: 26px; min-height: 4.4em; }
.quote { position: relative; min-height: 3.2em; }
.quote-line {
  position: absolute; left: 0; top: 0; right: 0;
  font-size: clamp(1.15rem, 2vw, 1.8rem); font-weight: 500; color: var(--ink);
  opacity: 0; transform: translateY(14px); filter: blur(4px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out), filter 0.8s var(--ease-out);
}
.quote-line.active { opacity: 1; transform: translateY(0); filter: blur(0); }
.quote-dots { display: flex; gap: 8px; margin-top: 16px; }
.quote-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); transition: background var(--t-fast), transform var(--t-fast); }
.quote-dot.active { background: var(--accent); transform: scale(1.4); }

.hero-desc { margin-top: 24px; color: var(--ink-2); max-width: 42ch; font-size: clamp(0.95rem, 1.2vw, 1.1rem); }
.hero-actions { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }

/* 按钮 */
.btn {
  display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 26px;
  border-radius: var(--r-pill); font-size: 0.98rem; font-weight: 600;
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), background var(--t-fast);
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn-primary {
  color: #06101f;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  box-shadow: 0 10px 30px -12px var(--glow);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -12px var(--glow); }
.btn-ghost { color: var(--ink); border: 1px solid var(--glass-border); background: rgba(255,255,255,0.03); }
.btn-ghost:hover { transform: translateY(-2px); border-color: var(--accent); background: rgba(91,143,214,0.10); }

/* 社交入口 */
.socials { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.social {
  position: relative; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; color: var(--ink-2);
  border: 1px solid var(--glass-border-soft); background: rgba(255,255,255,0.03);
  transition: transform var(--t-fast) var(--ease-out), color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.social-ico { width: 20px; height: 20px; display: grid; place-items: center; }
.social-ico svg { width: 100%; height: 100%; }
.social:hover { transform: translateY(-3px); color: var(--ink); border-color: var(--accent); box-shadow: 0 10px 24px -12px var(--glow); }
.social-name {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px);
  font-size: 0.75rem; white-space: nowrap; color: var(--ink); background: var(--panel-strong);
  padding: 4px 10px; border-radius: var(--r-sm); border: 1px solid var(--glass-border-soft);
  opacity: 0; pointer-events: none; transition: opacity var(--t-fast), transform var(--t-fast) var(--ease-out);
}
.social:hover .social-name { opacity: 1; transform: translateX(-50%) translateY(0); }
.socials-center { justify-content: center; }

/* ---------- 唱片舞台 ---------- */
.stage {
  position: relative;
  width: clamp(260px, 38vw, 440px);
  height: clamp(260px, 38vw, 440px);
  display: block;
}
.vinyl-glow {
  position: absolute; width: 160%; height: 160%; border-radius: 50%;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(91,143,214,0.50) 0%, rgba(107,95,158,0.22) 35%, transparent 60%);
  filter: blur(24px); z-index: 0;
}

/* 唱片倾斜容器：必须显式尺寸，不能用grid+place-items导致子元素width:100%循环依赖 */
.vinyl-tilt {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  /* 不用 perspective，不用 preserve-3d，避免 3D 渲染上下文异常 */
}

/* 唱片主体：必须有实体背景 + 可见边框 + 确定尺寸 */
.vinyl {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(100%, 440px);
  aspect-ratio: 1;
  border-radius: 50%;
  /* 实体深蓝底色（与页面背景 #070a12 有足够对比度） */
  background: #1a2d4e;
  /* 粗白边框确保可见 */
  border: 3.5px solid rgba(200, 218, 240, 0.65);
  box-shadow:
    0 0 0 1.5px rgba(130, 165, 210, 0.30),
    0 0 36px 5px rgba(91, 143, 214, 0.28),
    0 40px 70px -18px rgba(0, 0, 0, 0.72);
}
/* 唱片子层：统一绝对定位铺满，但各自保留特异性样式 */
.vinyl-disc,
.vinyl-grooves,
.vinyl-sheen { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; }

/* 唱片底色 —— 高对比渐变，必须比页面背景 #070a12 明显更亮 */
.vinyl-disc {
  background:
    radial-gradient(circle at 50% 50%, #3a5a88 0%, #264572 30%, #1a3560 60%, #102348 100%);
}

/* 沟槽纹理 */
.vinyl-grooves {
  background: repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,0.08) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay; opacity: 0.9;
  -webkit-mask: radial-gradient(circle, transparent 0 24%, #000 25% 100%);
          mask: radial-gradient(circle, transparent 0 24%, #000 25% 100%);
}

/* CD 彩色衍射反光层 */
.vinyl-sheen {
  background: conic-gradient(from 0deg,
    rgba(130,170,235,0.32), rgba(190,150,230,0.25), rgba(130,210,220,0.28),
    rgba(160,185,235,0.22), rgba(130,170,235,0.32));
  mix-blend-mode: screen; opacity: 0.70;
  -webkit-mask: radial-gradient(circle, transparent 0 24%, #000 25% 100%);
          mask: radial-gradient(circle, transparent 0 24%, #000 25% 100%);
}

/* 中心标签区（头像容器）—— 必须用 margin:auto 居中，不能依赖 inset:0 */
.vinyl-label {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 36%; aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(145deg, #385080, #1e3862);
  border: 2.5px solid rgba(200,218,240,0.28);
  box-shadow: 0 4px 14px rgba(0,0,0,0.50);
  /* 确保标签区始终可见 */
  display: block;
}
.vinyl-avatar {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  /* 防止图片加载失败时完全隐形 */
  min-height: 1px;
  background: #2a4070;
}
.vinyl-label.avatar-fallback { display: grid; place-items: center; color: var(--silver); font-weight: 700; font-size: 1.4rem; }

/* 内圈阴影 —— 轻微增加层次感，不得遮挡内容 */
.vinyl-inner-shadow {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  box-shadow: inset 0 0 18px rgba(0,0,0,0.20);
}

/* 唱针 */
.tonearm {
  position: absolute; top: 0; right: 4%; width: 140px; height: 140px;
  transform-origin: 90% 10%; transform: rotate(-30deg);
  transition: transform 1.1s var(--ease-soft); pointer-events: none; z-index: 2;
}
.tonearm.playing { transform: rotate(-8deg); }
.tonearm-base { position: absolute; top: 2%; right: 2%; width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #d7deec, #5b6781); box-shadow: 0 2px 6px rgba(0,0,0,0.6); }
.tonearm-arm { position: absolute; top: 9%; right: 10%; width: 3px; height: 92px;
  background: linear-gradient(180deg, #d7deec, #7d8aa3); transform-origin: top; transform: rotate(34deg); border-radius: 3px; }
.tonearm-head { position: absolute; bottom: 2%; left: 40%; width: 14px; height: 20px;
  background: linear-gradient(180deg, #aeb9d0, #6b768f); border-radius: 3px; box-shadow: 0 2px 5px rgba(0,0,0,0.5); }

.vinyl-reflection {
  position: absolute; bottom: -8%; left: 50%; transform: translateX(-50%);
  width: 70%; height: 44px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(91,143,214,0.26), transparent 70%);
  filter: blur(8px);
}
.now-playing {
  position: absolute; bottom: -14%; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; white-space: nowrap;
  font-size: 0.85rem; color: var(--ink-2);
}
.np-status { display: inline-flex; align-items: center; gap: 6px; }
.dot-online { width: 8px; height: 8px; border-radius: 50%; background: var(--online); box-shadow: 0 0 8px var(--online); }
.np-track { color: var(--ink); font-weight: 500; }

/* 滚动提示 */
.scroll-hint { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  font-size: 0.75rem; letter-spacing: 0.2em; color: var(--ink-3); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.scroll-hint span { width: 1px; height: 36px; background: linear-gradient(var(--ink-3), transparent); animation: hintPulse 2.4s var(--ease-soft) infinite; }

/* ---------- 关于我 ---------- */
.about-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(24px, 4vw, 60px); align-items: start; }
.about-text p { color: var(--ink-2); font-size: clamp(1rem, 1.4vw, 1.15rem); max-width: 52ch; }
.about-text p + p { margin-top: 16px; }
.info-list { display: grid; gap: 14px; }
.info-item { display: flex; justify-content: space-between; gap: 16px; padding: 14px 18px;
  border: 1px solid var(--glass-border-soft); border-radius: var(--r-md); background: var(--panel); }
.info-label { color: var(--ink-3); font-size: 0.85rem; }
.info-value { color: var(--ink); font-weight: 500; }
.tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.tag { padding: 6px 14px; border-radius: var(--r-pill); font-size: 0.85rem; color: var(--ink-2);
  background: rgba(255,255,255,0.04); border: 1px solid var(--glass-border-soft); }

/* ---------- 作品 ---------- */
.works-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: clamp(18px, 2.5vw, 28px); }
.project-card {
  border: 1px solid var(--glass-border-soft); border-radius: var(--r-lg); overflow: hidden;
  background: var(--panel); transition: transform var(--t-mid) var(--ease-out), border-color var(--t-mid), box-shadow var(--t-mid);
}
.project-card:hover { transform: translateY(-6px); border-color: var(--accent); box-shadow: var(--shadow-card); }
.project-cover { aspect-ratio: 16 / 10; transition: transform var(--t-slow) var(--ease-out); }
.project-card:hover .project-cover { transform: scale(1.05); }
.project-body { padding: 20px 22px 24px; }
.project-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.project-head h3 { font-size: 1.25rem; font-weight: 700; }
.project-type { font-size: 0.78rem; color: var(--accent-2); letter-spacing: 0.04em; }
.project-desc { margin-top: 8px; color: var(--ink-2); font-size: 0.95rem; }
.project-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

/* ---------- 音乐播放器 ---------- */
.player {
  display: grid; grid-template-columns: auto 1fr auto; gap: clamp(18px, 3vw, 40px); align-items: center;
  padding: 22px clamp(20px, 3vw, 34px); border-radius: var(--r-lg);
  background: var(--panel-strong); border: 1px solid var(--glass-border); box-shadow: var(--shadow-soft);
}
.player-info { display: flex; align-items: center; gap: 16px; }
.player-cover { width: 56px; height: 56px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--glass-border-soft); }
.player-title { font-weight: 700; font-size: 1.05rem; }
.player-artist { color: var(--ink-2); font-size: 0.85rem; }
.player-controls { display: flex; align-items: center; gap: 16px; min-width: 0; }
.pc-btn { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  color: #06101f; background: linear-gradient(135deg, var(--accent-2), var(--accent));
  box-shadow: 0 8px 22px -10px var(--glow); transition: transform var(--t-fast) var(--ease-out); flex: none; }
.pc-btn:hover { transform: translateY(-2px); }
.pc-btn svg { width: 22px; height: 22px; }
.pc-btn .ic-pause { display: none; }
.pc-btn .js-play-icon.is-playing .ic-play { display: none; }
.pc-btn .js-play-icon.is-playing .ic-pause { display: block; }
.progress { position: relative; flex: 1; height: 6px; border-radius: var(--r-pill); background: rgba(255,255,255,0.10); overflow: hidden; cursor: pointer; min-width: 80px; }
.progress-bar { position: absolute; left: 0; top: 0; height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.time { font-size: 0.8rem; color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.player-extra { display: flex; align-items: center; gap: 16px; }
.visual { width: 140px; height: 40px; opacity: 0.9; }
.volume { width: 90px; }
.volume input[type=range] { width: 100%; accent-color: var(--accent); }
.audio-tip { font-size: 0.78rem; color: var(--ink-3); grid-column: 1 / -1; min-height: 1em; }

/* ---------- 设置面板 ---------- */
.settings-btn {
  position: fixed; left: 18px; bottom: 18px; z-index: var(--z-settings);
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  color: var(--ink); background: var(--panel-strong); border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-soft); transition: transform var(--t-fast) var(--ease-out);
}
.settings-btn:hover { transform: rotate(30deg); }
.settings-btn svg { width: 22px; height: 22px; }
.settings-panel {
  position: fixed; left: 18px; bottom: 74px; z-index: var(--z-settings);
  width: 260px; padding: 20px; border-radius: var(--r-lg);
  background: var(--panel-strong); border: 1px solid var(--glass-border); box-shadow: var(--shadow-soft);
}
.settings-panel[hidden] { display: none; }
.settings-panel h3 { font-size: 1rem; margin-bottom: 14px; }
.set-group { margin-bottom: 16px; }
.set-label { display: block; font-size: 0.8rem; color: var(--ink-3); margin-bottom: 8px; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.seg button { padding: 8px; border-radius: var(--r-sm); font-size: 0.82rem; color: var(--ink-2);
  border: 1px solid var(--glass-border-soft); background: rgba(255,255,255,0.03); transition: all var(--t-fast); }
.seg button.active { color: #06101f; background: linear-gradient(135deg, var(--accent-2), var(--accent)); border-color: transparent; }
.switch { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--ink-2); margin-bottom: 8px; cursor: pointer; }
.switch input { accent-color: var(--accent); }
.set-note { font-size: 0.74rem; color: var(--ink-3); margin-top: 6px; }

/* 调试面板 */
.debug {
  position: fixed; right: 14px; bottom: 14px; z-index: var(--z-debug);
  padding: 10px 14px; border-radius: var(--r-sm); font-family: var(--font-en); font-size: 0.72rem;
  line-height: 1.5; color: var(--online); background: rgba(0,0,0,0.7); border: 1px solid var(--glass-border-soft);
}
.debug[hidden] { display: none; }