/* =========================================
   流体背景关键帧 (Fluid Gradient Keyframes)
   让色块跨越整个屏幕交融，同时缓慢改变圆角形状
========================================= */
@keyframes blob-flow-1 {
    0% { transform: translate(0, 0) scale(1) rotate(0deg); border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; }
    33% { transform: translate(25vw, 15vh) scale(1.1) rotate(90deg); border-radius: 60% 40% 30% 70% / 50% 40% 50% 60%; }
    66% { transform: translate(-10vw, 30vh) scale(0.9) rotate(180deg); border-radius: 30% 70% 60% 40% / 60% 30% 70% 40%; }
    100% { transform: translate(15vw, -10vh) scale(1.2) rotate(270deg); border-radius: 50% 50% 40% 60% / 40% 60% 50% 50%; }
}

@keyframes blob-flow-2 {
    0% { transform: translate(0, 0) scale(1) rotate(0deg); border-radius: 50% 50% 40% 60% / 60% 40% 50% 50%; }
    33% { transform: translate(-20vw, -20vh) scale(1.2) rotate(-90deg); border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; }
    66% { transform: translate(10vw, -40vh) scale(0.8) rotate(-180deg); border-radius: 60% 40% 30% 70% / 50% 40% 50% 60%; }
    100% { transform: translate(-15vw, 10vh) scale(1.1) rotate(-270deg); border-radius: 30% 70% 60% 40% / 60% 30% 70% 40%; }
}

@keyframes blob-flow-3 {
    0% { transform: translate(0, 0) scale(1) rotate(0deg); border-radius: 60% 40% 30% 70% / 50% 40% 50% 60%; }
    33% { transform: translate(-30vw, 20vh) scale(0.9) rotate(90deg); border-radius: 30% 70% 60% 40% / 60% 30% 70% 40%; }
    66% { transform: translate(-10vw, -10vh) scale(1.3) rotate(180deg); border-radius: 50% 50% 40% 60% / 40% 60% 50% 50%; }
    100% { transform: translate(20vw, 30vh) scale(1) rotate(270deg); border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; }
}

@keyframes blob-flow-4 {
    0% { transform: translate(0, 0) scale(1) rotate(0deg); border-radius: 30% 70% 60% 40% / 60% 30% 70% 40%; }
    33% { transform: translate(20vw, -30vh) scale(1.1) rotate(-90deg); border-radius: 50% 50% 40% 60% / 40% 60% 50% 50%; }
    66% { transform: translate(35vw, 15vh) scale(0.9) rotate(-180deg); border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; }
    100% { transform: translate(-10vw, -20vh) scale(1.2) rotate(-270deg); border-radius: 60% 40% 30% 70% / 50% 40% 50% 60%; }
}

/* =========================================
   组件常规动画 (Cards, Buttons, Steam Box)
========================================= */
@keyframes scan-loop { 0% { transform: translate3d(0, -100%, 0) scaleY(1); } 100% { transform: translate3d(0, 100%, 0) scaleY(-1); } }
@keyframes pulse-presence { to { box-shadow: 0 0 0 10px rgba(0, 184, 148, 0); } }
@keyframes marquee-seamless { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes pulse-badge { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(1.1); opacity: 1; } }
@keyframes pulse-skeleton { 0%, 100% { opacity: 0.6; } 50% { opacity: 0.2; } }
@keyframes ripple-anim { to { transform: scale(4); opacity: 0; } }

.skeleton { background: var(--glass-border) !important; color: transparent !important; animation: pulse-skeleton 1.5s infinite ease-in-out; pointer-events: none; }
