/* ── 手绘墨水鼠标（配合纸感主题） ── */
html,
body {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26"><path d="M4.5 2.5 L4.5 20 L9.4 15.6 L12.8 22.8 L15.6 21.4 L12.2 14.4 L19 13.8 Z" fill="%23f5f0e6" stroke="%233a3228" stroke-width="1.7" stroke-linejoin="round"/></svg>') 4 2,
    auto;
}

a,
button,
[role='link'],
[role='button'],
.card,
.sidebar-item,
.hero-subtitle,
.gallery-thumb,
.sound-toggle,
.scroll-top,
label,
input[type='checkbox'],
select,
summary {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"><circle cx="15" cy="15" r="9.5" fill="rgba(180,201,168,0.30)" stroke="%235f7355" stroke-width="1.8" stroke-dasharray="3 2.4"/><circle cx="15" cy="15" r="2.7" fill="%233a3228"/></svg>') 15 15,
    pointer;
}

input[type='text'],
input[type='search'],
textarea {
  cursor: text;
}

/* ── 光标特效图层 ── */
.cursor-layer {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  overflow: hidden;
  contain: layout paint style;
}

.cursor-layer .spore {
  position: fixed;
  left: 0;
  top: 0;
  border-radius: 50%;
  opacity: 0.75;
  transform: translate(-50%, -50%);
  animation: sporeFly 0.65s ease-out forwards;
  will-change: transform, opacity;
}

@keyframes sporeFly {
  from {
    opacity: 0.75;
    transform: translate(-50%, -50%) scale(1);
  }
  to {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.3);
  }
}

.cursor-layer .ink-ripple {
  position: fixed;
  left: 0;
  top: 0;
  width: 10px;
  height: 10px;
  border: 1.6px solid rgba(58, 50, 40, 0.55);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: inkRipple 0.6s ease-out forwards;
}

@keyframes inkRipple {
  from {
    opacity: 0.65;
    width: 10px;
    height: 10px;
  }
  to {
    opacity: 0;
    width: 58px;
    height: 58px;
  }
}

/* ── 卡片 3D 倾斜 + 封面缩放 ── */
.card {
  perspective: 900px;
}
.card .card-inner {
  transition: transform 0.25s ease, border-color 0.3s;
  will-change: auto;
}
.card:hover .card-inner {
  will-change: transform;
}
.card-cover .cover-img,
.card-cover svg {
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.card:hover .cover-img,
.card:hover .card-cover svg {
  transform: scale(1.045);
}

/* ── 音乐播放中的呼吸提示 ── */
.sound-toggle:not(.muted) {
  animation: soundPulse 3s ease-in-out infinite;
}
@keyframes soundPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(180, 201, 168, 0.4);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(180, 201, 168, 0);
  }
}

/* ── 音乐选择器 ── */
.music-picker-btn {
  position: fixed;
  bottom: 98px;
  right: 32px;
  z-index: 10010;
  min-width: 96px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  color: #3a3228;
  background: #f5f0e6;
  border: 1.5px solid rgba(60, 48, 36, 0.55);
  box-shadow: 0 3px 12px rgba(60, 48, 36, 0.12);
  filter: none;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.music-picker-btn:hover {
  background: #fffcf6;
  border-color: #3a3228;
  transform: translateY(-2px);
}
.music-picker-btn svg {
  width: 18px;
  height: 18px;
  opacity: 0.85;
  pointer-events: none;
}
.music-picker-btn:hover svg {
  opacity: 1;
}
.music-picker-label {
  font-family: var(--font-serif, Georgia, serif);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
}

.music-picker-panel {
  position: fixed;
  bottom: 98px;
  right: 136px;
  z-index: 10011;
  min-width: 172px;
  padding: 10px 8px;
  background: rgba(245, 240, 230, 0.97);
  border: 1.3px solid rgba(60, 48, 36, 0.25);
  filter: url(#sketch-border);
  box-shadow: 0 6px 20px rgba(60, 48, 36, 0.1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.25s, transform 0.25s, visibility 0.25s;
}
.music-picker-panel.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.music-picker-title {
  padding: 2px 12px 8px;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: #5a4e3e;
  opacity: 0.55;
}
.music-picker-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  border-radius: 3px;
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  letter-spacing: 0.05em;
  color: #3a3228;
  text-align: left;
  transition: background 0.2s, color 0.2s, padding-left 0.2s;
}
.music-picker-item:hover {
  background: rgba(178, 204, 190, 0.14);
  color: #1a1510;
  padding-left: 16px;
}
.music-picker-item .mp-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1.2px solid rgba(58, 50, 40, 0.3);
  background: rgba(245, 240, 230, 0.6);
  filter: url(#sketch-border);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s;
}
.music-picker-item.active {
  color: #1a1510;
  background: rgba(178, 204, 190, 0.16);
}
.music-picker-item.active .mp-dot {
  background: #b4c9a8;
  border-color: #8a9e7e;
  transform: scale(1.4);
}

/* ── 隐藏原站个人页脚（备案/联系方式） ── */
.site-footer {
  display: none !important;
}

/* ── 细节打磨 ── */
::selection {
  background: rgba(180, 201, 168, 0.5);
  color: #1a1510;
}

::-webkit-scrollbar {
  width: 11px;
}
::-webkit-scrollbar-track {
  background: #efe8da;
}
::-webkit-scrollbar-thumb {
  background: #c9bfa8;
  border: 2.5px solid #efe8da;
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
  background: #a89a7e;
}

body {
  text-rendering: optimizeLegibility;
}

.top-nav a,
.sidebar-item,
.hero-subtitle {
  transition: color 0.2s, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.top-nav a:hover {
  transform: translateY(-1px);
}
.hero-subtitle:hover {
  transform: translateY(-2px) !important;
}

.scroll-top:hover {
  transform: translateY(-3px) !important;
}

@media (width <= 640px) {
  .music-picker-btn {
    right: 16px;
    bottom: 78px;
    min-width: 82px;
    height: 38px;
    padding: 0 10px;
  }
  .music-picker-label {
    font-size: 13px;
  }
  .music-picker-panel {
    right: 104px;
    bottom: 78px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cursor-layer {
    display: none;
  }
  .card .card-inner {
    transition: border-color 0.3s;
  }
}