/* ===== Bay bổng có neo · MacBook · build 606 =====
   Chuyển động chỉ ở 3 vùng nhỏ, im lặng thì đứng yên, nên giao diện vẫn dễ quét mắt:
   1. Phím / chấm đàn nảy đàn hồi khi đổi hợp âm hoặc nối bè (keyframes tính từ phương trình lò xo tắt dần).
   2. Màn hình sóng kiểu CRT cạnh tên hợp âm: hình sóng = cộng các nốt của hợp âm (chuỗi Fourier).
   3. Dải lụa sóng Fourier lượn rất chậm ở đầu trang: hàm tuần hoàn nên lặp vô hạn không có chỗ nối.
   Chỉ dùng màu sẵn có của app. Bật "giảm chuyển động" thì mọi thứ đứng yên. */

/* ---- 1 · Lò xo tắt dần (ζ = 0.32, 2.4 Hz, 640 ms): phím lún 4px rồi bật lại, kèm chớp sáng tắt dần ----
   Viết bằng transform (không dùng translate / scale riêng lẻ) để trình duyệt chạy cả hoạt ảnh trên luồng ghép lớp, khỏi vẽ lại
   trang ở từng khung. Chấm đàn vốn có transform:translate(-50%,-50%); scale(x) đứng trước cho đúng hình cũ (scale riêng lẻ áp trước transform). */
@keyframes cocKeySpring{0%{transform:translateY(0);filter:brightness(1.380)}6.25%{transform:translateY(2.88px);filter:brightness(1.279)}12.5%{transform:translateY(4.00px);filter:brightness(1.205)}18.75%{transform:translateY(3.59px);filter:brightness(1.150)}25%{transform:translateY(2.26px);filter:brightness(1.110)}31.25%{transform:translateY(0.69px);filter:brightness(1.081)}37.5%{transform:translateY(-0.58px);filter:brightness(1.060)}43.75%{transform:translateY(-1.27px);filter:brightness(1.044)}50%{transform:translateY(-1.37px);filter:brightness(1.032)}56.25%{transform:translateY(-1.03px);filter:brightness(1.024)}62.5%{transform:translateY(-0.51px);filter:brightness(1.017)}68.75%{transform:translateY(0);filter:brightness(1.013)}75%{transform:translateY(0.35px);filter:brightness(1.009)}81.25%{transform:translateY(0.48px);filter:brightness(1.007)}87.5%{transform:translateY(0.43px);filter:brightness(1.005)}93.75%{transform:translateY(0.27px);filter:brightness(1.004)}100%{transform:translateY(0);filter:none}}
@keyframes cocDotPop{0%{transform:scale(.55) translate(-50%,-50%)}6.25%{transform:scale(.688) translate(-50%,-50%)}12.5%{transform:scale(.873) translate(-50%,-50%)}18.75%{transform:scale(1.036) translate(-50%,-50%)}25%{transform:scale(1.136) translate(-50%,-50%)}31.25%{transform:scale(1.165) translate(-50%,-50%)}37.5%{transform:scale(1.136) translate(-50%,-50%)}43.75%{transform:scale(1.076) translate(-50%,-50%)}50%{transform:scale(1.013) translate(-50%,-50%)}56.25%{transform:scale(.967) translate(-50%,-50%)}62.5%{transform:scale(.945) translate(-50%,-50%)}68.75%{transform:scale(.946) translate(-50%,-50%)}75%{transform:scale(.963) translate(-50%,-50%)}81.25%{transform:scale(.985) translate(-50%,-50%)}87.5%{transform:scale(1.004) translate(-50%,-50%)}93.75%{transform:scale(1.016) translate(-50%,-50%)}100%{transform:scale(1) translate(-50%,-50%)}}
body:not(.coc-compact) :is(#keyboard,#scaleKeyboard) .key.coc-spring:is(.active-lh,.active-rh,.active-sc,.playing-lh,.playing-rh,.playing-sc){animation:cocKeySpring 640ms linear both;animation-delay:var(--coc-delay,0ms)} /* chỉ phím đang sáng */
body:not(.coc-compact) .fretboard :is(.fb-dot,.fb-mark).coc-spring{animation:cocDotPop 640ms linear both;animation-delay:var(--coc-delay,0ms)}

/* ---- 2 · Màn hình sóng hợp âm (CRT) trong khung NOW ---- */
body:not(.coc-compact) .current-chord .symbol-row > .symbol{grid-row:1;grid-column:1}
body:not(.coc-compact) .current-chord .coc-scope{
  grid-row:1;grid-column:1;justify-self:end;align-self:center;
  display:block;flex:0 0 auto;width:176px;height:50px;margin:0 4px 0 14px;border-radius:10px;
  background:rgba(0,0,0,.22);box-shadow:inset 0 2px 6px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,245,217,.08);
}
.coc-scope canvas{display:block;position:relative;left:-8px;top:-8px;width:192px;height:66px;pointer-events:none} /* khung vẽ 176 × 50 + lề 8 px cho quầng sáng; màu và nét đặt trong dream.js */
body.coc-compact .coc-scope{display:none}

/* ---- 3 · Dải lụa ở đầu trang ---- */
body:not(.coc-compact) .app-masthead > .coc-ribbons{
  position:absolute;left:0;right:0;top:-8px;width:100%;height:240px;z-index:-1;pointer-events:none; /* nằm dưới mặt trời và mọi nút của đầu trang */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);
}
body:not(.coc-compact) .app-masthead > .coc-ribbons{overflow:hidden} /* b612 */
.coc-ribbons .rb{position:absolute;left:0;top:0;width:200%;height:100%;overflow:visible;animation:cocRibbon var(--dur,90s) linear infinite;will-change:transform} /* b612 · trượt cả thẻ svg (1 chu kỳ = 50% bề rộng) */
@keyframes cocRibbon{to{transform:translateX(-50%)}}
.coc-ribbons:not(.on) .rb{animation-play-state:paused} /* b613 · dải lụa chỉ chạy khi có tiếng */
body:not(.dark) .coc-ribbons .r1{fill:rgba(21,63,80,.05)}
body:not(.dark) .coc-ribbons .r2{fill:rgba(217,81,59,.07)}
body:not(.dark) .coc-ribbons .r3{fill:rgba(158,56,45,.045)}
body.dark .coc-ribbons .r1{fill:rgba(248,234,197,.055)}
body.dark .coc-ribbons .r2{fill:rgba(239,104,79,.08)}
body.dark .coc-ribbons .r3{fill:rgba(239,173,80,.05)}
body.coc-compact .coc-ribbons{display:none}

@media (prefers-reduced-motion:reduce){
  .coc-ribbons .rb,body:not(.coc-compact) :is(.key,.fb-dot,.fb-mark).coc-spring{animation:none}
}
@media print{.coc-ribbons,.coc-scope{display:none}}