feat: 添加视频声音切换按钮 — 点击取消静音播放配音和音乐

浏览器要求 autoplay 视频必须 muted，添加 Apple 风格毛玻璃按钮
让用户点击开启声音。点击后视频从头播放，按钮变蓝色确认状态。

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: kevinten10

content/zh/_index.html

@@ -52,9 +52,13 @@ <h2 class="capa-section-title">眼见为实。</h2>
     </p>
   </div>
   <div class="capa-video__player capa-reveal capa-reveal-delay-1">
-    <video autoplay muted loop playsinline preload="metadata">
+    <video id="capaVideo" autoplay muted loop playsinline preload="metadata">
       <source src="/videos/capa-demo-final.mp4" type="video/mp4">
     </video>
+    <button class="capa-video__sound" id="soundToggle" aria-label="开启声音">
+      <i class="fas fa-volume-mute" id="soundIcon"></i>
+      <span id="soundLabel">点击开启声音</span>
+    </button>
   </div>
 </section>
 
@@ -205,4 +209,27 @@ <h4>联系我们</h4>
   }, { threshold: 0.1, rootMargin: '0px 0px -60px 0px' });
   els.forEach(function(el) { observer.observe(el); });
 })();
+
+// Video sound toggle
+(function() {
+  var video = document.getElementById('capaVideo');
+  var btn = document.getElementById('soundToggle');
+  var icon = document.getElementById('soundIcon');
+  var label = document.getElementById('soundLabel');
+  if (!video || !btn) return;
+  btn.addEventListener('click', function() {
+    if (video.muted) {
+      video.muted = false;
+      video.currentTime = 0;
+      icon.className = 'fas fa-volume-up';
+      label.textContent = '声音已开启';
+      btn.classList.add('is-unmuted');
+    } else {
+      video.muted = true;
+      icon.className = 'fas fa-volume-mute';
+      label.textContent = '点击开启声音';
+      btn.classList.remove('is-unmuted');
+    }
+  });
+})();
 </script>

layouts/partials/hooks/head-end.html

@@ -353,6 +353,7 @@
   background: #000;
   box-shadow: 0 20px 60px rgba(0,0,0,0.12), 0 0 0 0.5px rgba(0,0,0,0.06);
   transition: transform 0.6s var(--apple-ease), box-shadow 0.6s var(--apple-ease);
+  position: relative;
 }
 .capa-video__player:hover {
   transform: scale(1.01);
@@ -365,6 +366,39 @@
   display: block;
 }
 
+.capa-video__sound {
+  position: absolute;
+  bottom: 20px;
+  right: 20px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  background: rgba(0,0,0,0.6);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid rgba(255,255,255,0.15);
+  border-radius: 980px;
+  color: rgba(255,255,255,0.9);
+  font-family: var(--apple-font);
+  font-size: 0.78rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s var(--apple-ease);
+  z-index: 3;
+}
+.capa-video__sound:hover {
+  background: rgba(0,0,0,0.8);
+  border-color: rgba(255,255,255,0.25);
+}
+.capa-video__sound i {
+  font-size: 0.9rem;
+}
+.capa-video__sound.is-unmuted {
+  background: rgba(0,113,227,0.7);
+  border-color: rgba(0,113,227,0.5);
+}
+
 /* ---------- Features ---------- */
 .capa-features {
   padding: 40px 24px 100px;