/* 中文首页：旋转唱片与外沿音符动画（与英文版一致的可视方案） */

/* 取消整体透明，避免子元素被叠乘变暗 */
.hero-background {
  opacity: 1;
}

/* 唱片主体 */
.vinyl-record {
  position: absolute;
  top: 20%;
  right: 10%;
  width: 300px;
  height: 300px;
  background:
    /* 隐藏旋转高光（原本的锥形高光改为透明层） */
    linear-gradient(transparent, transparent),
    /* 同心沟槽微纹理 */
    repeating-radial-gradient(circle at 50% 50%,
      rgba(255,255,255,0.05) 0 2px,
      rgba(0,0,0,0.05) 2px 4px),
    /* 唱片面与标签过渡 */
    radial-gradient(circle, #1a1a1a 32%, #2a2a2a 33%, #2a2a2a 42%, #121212 43%);
  border-radius: 50%;
  border: 2px solid var(--electric-blue);
  box-shadow: var(--shadow-neon);
  transform-origin: 50% 50%;
  will-change: transform;
  overflow: visible;
  /* 允许子元素绘制到外侧 */
  contain: layout style;
}

/* 中心小孔 */
.vinyl-record::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  background: radial-gradient(circle, #000 0 40%, #111 41% 100%);
  border-radius: 50%;
  border: 2px solid var(--electric-blue);
  z-index: 3;
}

/* 标签黑色渐变 */
.vinyl-record::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 45%, rgba(255,255,255,0.15), rgba(255,255,255,0) 60%),
    radial-gradient(circle at 50% 50%, #222 0, #111 55%, #000 100%);
  box-shadow: inset 0 0 12px rgba(0,0,0,0.5), 0 0 10px rgba(0,0,0,0.2);
  z-index: 2;
}

/* 外沿旋转音乐音符 */
.vinyl-record .note {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 5;
  font-size: 28px;
  color: #00e5ff;
  opacity: 0.5;
  text-shadow: 0 0 12px rgba(0,229,255,0.8), 0 0 24px rgba(0,229,255,0.3);
  pointer-events: none;
  transform: translate(-50%, -50%);
  will-change: transform;
}

/* 与英文版一致：隐藏 note-a，仅显示 note-b */
.vinyl-record .note-a {
  display: none;
  animation: orbitA 96s linear infinite;
}

.vinyl-record .note-b {
  animation: orbitB 128s linear infinite;
  opacity: 0.18;
}

/* 公转动画（保持字形正立） */
@keyframes orbitA {
  from { transform: rotate(210deg) translateX(155px) rotate(-210deg); }
  to   { transform: rotate(570deg) translateX(155px) rotate(-570deg); }
}

@keyframes orbitB {
  from { transform: rotate(120deg) translateX(160px) rotate(-120deg); }
  to   { transform: rotate(480deg) translateX(160px) rotate(-480deg); }
}

/* 唱片旋转动画（与英文版一致的较慢速度） */
.rotate {
  animation: spin 9s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}