/* ══════════════════════════════════════════════════════════════════
   NHẠC NỀN — giao diện
   Đi kèm tcdt-music.js. Xem SPEC-NHAC-NEN.md để biết lý do từng lựa chọn.

   Ý tưởng icon: cả tấm thiệp lấy vòng sóng nước làm ngôn ngữ hình ảnh.
   Âm thanh cũng là sóng. Nên nút nhạc là một điểm phát ra ba vòng sóng
   lan dần — cùng nhịp lệch với gợn nước khi chạm màn hình.
   Không dùng cột equalizer: nó là hình ảnh của máy móc, không phải nước.
   ══════════════════════════════════════════════════════════════════ */

/* Chi tao hinh cho nut do CHINH module dung ra (.tcdt-auto).
   Mau nao da co nut rieng (#mus, #npBtn) thi giu nguyen thiet ke cua mau:
   truoc day khoi nay ghi de len ca nhung nut do, lam nut cua mau Man
   thanh tron trang va chui xuong duoi thanh day. */
.music.tcdt-auto{
  position:fixed; right:16px; bottom:16px; z-index:20;
  width:46px; height:46px; border-radius:50%;
  border:1px solid var(--line);
  background:rgba(239,246,245,.94);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  cursor:pointer; display:grid; place-items:center; padding:0;
}
.music{transition:opacity .4s ease, transform .4s ease}
.music:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.music:active{transform:scale(.94)}

/* Chưa mở thiệp thì chưa có nút. Hiện ra cùng lúc với tên hai người. */
.music[hidden]{display:none}
.music:not(.ready){opacity:0; transform:scale(.8); pointer-events:none}

.music.tcdt-auto svg{width:22px; height:22px; overflow:visible}
.music.tcdt-auto .dot{fill:var(--ink)}
.music.tcdt-auto .a{fill:none; stroke:var(--ink); stroke-width:1.5; stroke-linecap:round}

/* ĐANG PHÁT: ba vòng sóng lan ra, lệch nhịp như một giọt rơi. */
.music.tcdt-auto[aria-pressed="true"] .a{
  opacity:0;
  animation:mwave 2.6s var(--e-rev) infinite;
}
.music.tcdt-auto[aria-pressed="true"] .a2{animation-delay:.38s}
.music.tcdt-auto[aria-pressed="true"] .a3{animation-delay:.76s}
.music.tcdt-auto[aria-pressed="true"] .dot{animation:mdot 2.6s ease-in-out infinite}

@keyframes mwave{
  0%   {opacity:0;   transform:translateX(-1.2px)}
  22%  {opacity:.62}
  72%  {opacity:0;   transform:translateX(1.6px)}
  100% {opacity:0;   transform:translateX(1.6px)}
}
@keyframes mdot{
  0%,100%{opacity:.9}
  22%    {opacity:.45}
}

/* ĐANG TẮT: vòng sóng đứng yên, rất nhạt. Vẫn đọc ra là "âm thanh",
   nhưng khác trạng thái rõ ràng mà không cần vẽ thêm dấu gạch chéo —
   gạch chéo là ký hiệu của sự cấm đoán, không hợp một tấm thiệp mời. */
.music.tcdt-auto[aria-pressed="false"] .a{opacity:.17}
.music.tcdt-auto[aria-pressed="false"] .dot{opacity:.4}

/* ĐANG TẢI: chấm giữa nhấp nháy chậm, chưa lan sóng. */
.music.tcdt-auto.loading .a{opacity:.17; animation:none}
.music.tcdt-auto.loading .dot{animation:mdot 1.1s ease-in-out infinite}

@media (prefers-reduced-motion:reduce){
  .music.tcdt-auto .a,.music.tcdt-auto .dot{animation:none !important}
  .music.tcdt-auto[aria-pressed="true"] .a{opacity:.55}
  .music.tcdt-auto[aria-pressed="true"] .dot{opacity:.9}
}

/* ─────────────────────────────────────────────────────────────
   Nút của các mẫu cũ dùng ba thanh <i> và trông chờ lớp .on.
   Module này không đặt .on mà đặt aria-pressed, nên nút không
   bao giờ đổi hình: bật hay tắt nhìn giống đúc nhau.
   Ánh xạ lại ở đây, một lần cho mọi mẫu.
   Keyframes "eq" do từng mẫu tự khai; mẫu nào không có thì
   quy tắc này không có tác dụng gì, vô hại.
   ───────────────────────────────────────────────────────────── */
.music[aria-pressed="true"] i{animation:eq .9s ease-in-out infinite}
.music[aria-pressed="true"] i:nth-child(2){animation-delay:.15s}
.music[aria-pressed="true"] i:nth-child(3){animation-delay:.3s}
.music[aria-pressed="false"] i{animation:none}