/**
 * notes-animation.css — 音符动画模块
 * ─────────────────────────────────────
 * 使用方式：
 *   1. 在目标容器 (position:relative) 内加入音符元素：
 *      <span class="note note-1" aria-hidden="true">♪</span>
 *      <span class="note note-2" aria-hidden="true">♫</span>
 *      <span class="note note-3" aria-hidden="true">♩</span>
 *      <span class="note note-4" aria-hidden="true">♬</span>
 *   2. 给容器添加 class="notes-active" 即可激活动画
 *
 * 彩蛋钩子：给任意 position:relative 元素加 .notes-active 即可触发
 */

/* ── 基础音符样式 ── */
.note {
  position: absolute;
  font-size: 12px;
  font-weight: bold;
  z-index: 20;
  pointer-events: none;
  opacity: 0;
  color: #22c55e;           /* 默认绿色，可被主题覆盖 */
  user-select: none;
  will-change: transform, opacity;
}

/* ── 激活后才播放动画 ── */
.notes-active .note-1 { animation: noteFloat1 3s ease-in-out infinite 0s; }
.notes-active .note-2 { animation: noteFloat2 3s ease-in-out infinite 0.75s; }
.notes-active .note-3 { animation: noteFloat1 3s ease-in-out infinite 1.5s; }
.notes-active .note-4 { animation: noteFloat2 3s ease-in-out infinite 2.25s; }

/* ── 音符初始位置（未激活时不可见） ── */
.note-1 { top: -4px;  left: 50%;   transform: translateX(-50%); }
.note-2 { top: 20%;   right: -14px; }
.note-3 { bottom: 0px; left: -14px; }
.note-4 { top: 50%;   right: -14px; transform: translateY(-50%); }

/* ── 两组关键帧：左飘 / 右飘 ── */
@keyframes noteFloat1 {
  0%   { opacity: 0;   transform: translate(0,    0)    scale(0.5); }
  20%  { opacity: 1;   transform: translate(-4px, -14px) scale(1); }
  45%  { opacity: 1;   transform: translate(4px,  -26px) scale(1.1); }
  70%  { opacity: 0.6; transform: translate(-3px, -38px) scale(0.95); }
  100% { opacity: 0;   transform: translate(0,    -52px) scale(0.7); }
}

@keyframes noteFloat2 {
  0%   { opacity: 0;   transform: translate(0,    0)    scale(0.5); }
  20%  { opacity: 1;   transform: translate(4px,  -14px) scale(1); }
  45%  { opacity: 1;   transform: translate(-4px, -26px) scale(1.1); }
  70%  { opacity: 0.6; transform: translate(3px,  -38px) scale(0.95); }
  100% { opacity: 0;   transform: translate(0,    -52px) scale(0.7); }
}

/* ── 主题色覆盖 ── */
[data-theme="songlive"]   .note { color: #92d841; }
[data-theme="imessage"]   .note { color: #007aff; }
[data-theme="adiumychat"] .note { color: #3498db; }
[data-theme="ichat"]      .note { color: #5ab0f0; }
[data-theme="lighty"]     .note { color: #aaa; }
[data-theme="ruler"]      .note { color: #b8973a; }
[data-theme="iphone-sms"] .note { color: #5cb85c; }

/* ── 响应式缩小 ── */
@media (max-width: 480px) {
  .note { font-size: 10px; }
}

/* ── 减少动画模式：完全禁用 ── */
@media (prefers-reduced-motion: reduce) {
  .notes-active .note-1,
  .notes-active .note-2,
  .notes-active .note-3,
  .notes-active .note-4 { animation: none; opacity: 0; }
}