/* ===== Keyframe Animations ===== */

@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}

@keyframes bar-dance{to{height:8px;opacity:.3}}

@keyframes logoSwitch{0%{opacity:1;transform:scale(1)}40%{opacity:0;transform:scale(.65) rotate(-6deg)}60%{opacity:0;transform:scale(.65) rotate(6deg)}100%{opacity:1;transform:scale(1) rotate(0)}}

@keyframes info-slide{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)}}

@keyframes logo-switch-in{0%{opacity:0;transform:scale(.7) rotate(-8deg)}60%{opacity:1;transform:scale(1.1) rotate(2deg)}100%{opacity:1;transform:scale(1) rotate(0)}}

@keyframes vol-pop{0%{transform:scaleX(1)}50%{transform:scaleX(1.07)}100%{transform:scaleX(1)}}

@keyframes popup-in{from{opacity:0;transform:translateX(-50%) scale(.9) translateY(6px)}to{opacity:1;transform:translateX(-50%) scale(1) translateY(0)}}

@keyframes popup-in-top{from{opacity:0;transform:scale(.9) translateY(-6px)}to{opacity:1;transform:scale(1) translateY(0)}}

@keyframes icon-pop{0%{transform:scale(1)}40%{transform:scale(1.18)}70%{transform:scale(.95)}100%{transform:scale(1)}}

@keyframes glow-pulse-green{0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}50%{box-shadow:0 0 0 6px rgba(34,197,94,.18),0 0 16px rgba(34,197,94,.12)}}

@keyframes group-icon-active{0%,100%{box-shadow:0 0 0 1px rgba(192,132,252,.45),0 0 10px rgba(168,85,247,.22)}50%{box-shadow:0 0 0 2.5px rgba(192,132,252,.7),0 0 18px rgba(168,85,247,.4),0 0 28px rgba(124,58,237,.12)}}

@keyframes sidebar-tap{0%{transform:scale(1)}35%{transform:scale(.92)}80%{transform:scale(1.04)}100%{transform:scale(1)}}

@keyframes logo-shimmer{0%{background-position:200% center}100%{background-position:-200% center}}

@keyframes play-ripple{0%{box-shadow:0 0 0 0 rgba(168,85,247,.5)}100%{box-shadow:0 0 0 16px rgba(168,85,247,0)}}

@keyframes quality-live-pulse{0%,100%{opacity:.4;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}

@keyframes fav-star-pop{0%{opacity:0;transform:scale(.3) rotate(-25deg)}60%{opacity:1;transform:scale(1.28) rotate(8deg)}100%{opacity:1;transform:scale(1) rotate(0)}}

@keyframes group-icon-pop{0%{transform:scale(.82)}55%{transform:scale(1.18)}100%{transform:scale(1)}}

@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

@keyframes load-logo-pop{0%{transform:scale(0.6) rotate(-8deg);opacity:0}60%{transform:scale(1.12) rotate(2deg);opacity:1}100%{transform:scale(1) rotate(0);opacity:1}}

@keyframes load-ring-spin{to{transform:rotate(360deg)}}

@keyframes load-ring-spin-rev{to{transform:rotate(-360deg)}}

@keyframes load-bar{0%{width:0%;opacity:1}70%{width:80%;opacity:1}85%{width:85%;opacity:.8}100%{width:90%;opacity:.7}}

@keyframes load-bar-done{from{width:85%}to{width:100%;opacity:0}}

@keyframes load-text-in{0%{opacity:0;transform:translateY(5px)}100%{opacity:1;transform:translateY(0)}}

@keyframes load-shimmer-text{0%{background-position:200% center}100%{background-position:-200% center}}

@keyframes load-glow-pulse{0%,100%{box-shadow:0 0 0 0 rgba(124,58,237,.0)}50%{box-shadow:0 0 0 8px rgba(124,58,237,.15),0 0 30px rgba(168,85,247,.2)}}

@keyframes load-wave{0%,100%{transform:scaleY(1)}50%{transform:scaleY(2.2)}}

@keyframes err-shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}

@keyframes err-icon-in{0%{opacity:0;transform:scale(.5) rotate(-15deg)}60%{opacity:1;transform:scale(1.15) rotate(3deg)}100%{opacity:1;transform:scale(1) rotate(0)}}

@keyframes err-content-in{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:translateY(0)}}

@keyframes err-pulse-ring{0%{box-shadow:0 0 0 0 rgba(255,107,107,.4)}70%{box-shadow:0 0 0 14px rgba(255,107,107,0)}100%{box-shadow:0 0 0 0 rgba(255,107,107,0)}}

@keyframes empty-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

@keyframes splash-logo-in{0%{opacity:0;transform:scale(.45) rotate(-15deg)}60%{opacity:1;transform:scale(1.1) rotate(3deg)}80%{transform:scale(.97) rotate(-1deg)}100%{opacity:1;transform:scale(1) rotate(0)}}

@keyframes splash-logo-glow{0%,100%{box-shadow:0 0 0 3px rgba(124,58,237,.2),inset 0 1px 0 rgba(255,255,255,.15)}50%{box-shadow:0 0 0 4px rgba(124,58,237,.4),0 0 32px rgba(168,85,247,.55),inset 0 1px 0 rgba(255,255,255,.2)}}

@keyframes splash-title-in{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:translateY(0)}}

@keyframes splash-sub-in{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:translateY(0)}}

@keyframes splash-bar-fill{0%{transform:scaleX(0);opacity:1}60%{transform:scaleX(.72);opacity:1}80%{transform:scaleX(.88);opacity:.9}100%{transform:scaleX(1);opacity:1}}

@keyframes splash-bar-shimmer{0%{background-position:200% center}100%{background-position:-200% center}}

@keyframes splash-ring-spin{to{transform:rotate(360deg)}}

@keyframes splash-ring-rev{to{transform:rotate(-360deg)}}

@keyframes splash-dot-pulse{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.6);opacity:1}}

@keyframes splash-particle{0%{opacity:.8;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-55px) translateX(var(--spx,0px)) scale(0)}}

@keyframes splash-status-in{0%{opacity:0;transform:translateX(-4px)}100%{opacity:1;transform:translateX(0)}}

@keyframes splash-scanline{0%{transform:translateY(-100%)}100%{transform:translateY(100vh)}}

@keyframes card-in{0%{opacity:0;transform:translateY(16px) scale(.84)}45%{opacity:1}75%{transform:translateY(-3px) scale(1.02)}100%{opacity:1;transform:translateY(0) scale(1)}}

@keyframes card-glow{0%,100%{box-shadow:0 0 0 1.5px rgba(124,58,237,.38),0 4px 20px rgba(124,58,237,.18)}50%{box-shadow:0 0 0 2.5px rgba(168,85,247,.65),0 8px 32px rgba(168,85,247,.35)}}

@keyframes err-icon-pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,107,107,.0)}50%{box-shadow:0 0 0 10px rgba(255,107,107,.1),0 0 28px rgba(255,107,107,.15)}}

@keyframes toast-ic-pop{0%{transform:scale(.4) rotate(-10deg);opacity:0}60%{transform:scale(1.15) rotate(3deg);opacity:1}100%{transform:scale(1) rotate(0)}}

@keyframes ctrl-fade-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

@keyframes live-badge-shimmer{0%,100%{transform:translateX(-100%)}50%{transform:translateX(100%)}}

@keyframes btn-ripple{0%{box-shadow:0 0 0 0 rgba(168,85,247,.45)}100%{box-shadow:0 0 0 12px rgba(168,85,247,0)}}

@keyframes logo-glow{0%,100%{box-shadow:0 2px 10px rgba(192,132,252,.3)}50%{box-shadow:0 2px 18px rgba(192,132,252,.55),0 0 0 3px rgba(168,85,247,.12)}}