/* Keyframes dùng chung cho mọi trang.

   Vì sao ở đây chứ không nằm trong <style> của từng trang: spa.js chuyển trang bằng cách thay
   nội dung #cf-app, KHÔNG chép <style> của trang đích sang. Nên keyframes định nghĩa riêng
   trong head một trang sẽ VẮNG MẶT khi người dùng điều hướng SPA từ trang khác tới — phần tử
   vẫn có thuộc tính animation trỏ vào một tên không tồn tại, và nó đứng im.

   Triệu chứng đã gặp (10/09): đĩa xoay ở /dynamic-lyrics đứng yên khi vào từ /widgets, nhưng
   chạy đúng khi tải thẳng URL đó. Cùng lỗi ảnh hưởng eqBar, glowBreath, throb, bloom*, wave*.

   16 keyframes gom từ 4 trang, đã đối chiếu: mọi bản trùng tên đều GIỐNG HỆT nhau, không có
   xung đột nào. Thêm animation mới thì đặt ở đây, đừng đặt trong <style> của trang. */

@keyframes auroraA{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-4%,3%,0) scale(1.09)}}
@keyframes auroraB{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(5%,-4%,0) scale(1.12)}}
@keyframes bloomBreath{0%,100%{transform:translate(-50%,-50%) scale(.94);opacity:.55}50%{transform:translate(-50%,-50%) scale(1.12);opacity:1}}
@keyframes bloomDrift{0%,100%{transform:translate(-58%,-50%) scale(1)}50%{transform:translate(-42%,-50%) scale(1.14)}}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -11px}}
@keyframes eqBar{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
@keyframes flipDeck{0%,38%{transform:rotateY(0deg)}50%,88%{transform:rotateY(180deg)}100%{transform:rotateY(360deg)}}
@keyframes glowBreath{0%,100%{opacity:.5;transform:scale(.96)}50%{opacity:1;transform:scale(1.08)}}
@keyframes playNudgeC{0%{box-shadow:0 0 0 0 rgba(53,200,216,.5);transform:scale(1)}55%{box-shadow:0 0 0 9px rgba(53,200,216,0);transform:scale(1.08)}100%{box-shadow:0 0 0 0 rgba(53,200,216,0);transform:scale(1)}}
@keyframes playNudgeG{0%{box-shadow:0 0 0 0 rgba(0,194,47,.5);transform:scale(1)}55%{box-shadow:0 0 0 9px rgba(0,194,47,0);transform:scale(1.08)}100%{box-shadow:0 0 0 0 rgba(0,194,47,0);transform:scale(1)}}
@keyframes ringPulse{0%,100%{opacity:.5}50%{opacity:.16}}
@keyframes screenPulse{0%,100%{opacity:1}50%{opacity:.72}}
@keyframes spinDisc{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes throb{0%,100%{transform:scale(1);opacity:.75}50%{transform:scale(1.18);opacity:1}}
@keyframes waveLoop{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes wv{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}

/* Tôn trọng lựa chọn giảm chuyển động của hệ điều hành. Một dòng thay cho các khối per-selector
   rải rác trong từng trang. */
@media (prefers-reduced-motion:reduce){*{animation:none!important}}