/**
 * WebSocket Real-time Update Animations
 * Flash animations for price increases and decreases
 */

/* Flash animations for price changes */
@keyframes flash-increase {
    0% {
        box-shadow: 0 0 0 0 rgba(40, 167, 69, 0);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 20px 5px rgba(40, 167, 69, 0.4), inset 0 0 20px 5px rgba(40, 167, 69, 0.2);
        transform: scale(1.02);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(40, 167, 69, 0);
        transform: scale(1);
    }
}

@keyframes flash-decrease {
    0% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 20px 5px rgba(220, 53, 69, 0.4), inset 0 0 20px 5px rgba(220, 53, 69, 0.2);
        transform: scale(1.02);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
        transform: scale(1);
    }
}

/* Apply flash animations */
.flash-increase {
    animation: flash-increase 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.flash-decrease {
    animation: flash-decrease 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Pulse animation for real-time indicator */
@keyframes pulse-live {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

.live-indicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #28a745;
    border-radius: 50%;
    margin-right: 6px;
    animation: pulse-live 2s ease-in-out infinite;
}

/* Price update states */
.price-up {
    color: var(--success-color, #28a745) !important;
}

.price-down {
    color: var(--danger-color, #dc3545) !important;
}

/* Smooth transitions for price changes */
[data-price],
[data-change],
[data-bid-price],
[data-ask-price] {
    transition: color 0.3s ease, transform 0.3s ease;
}

/* Highlighting effect on update */
.ws-updated {
    position: relative;
}

.ws-updated::after {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    width: 6px;
    height: 6px;
    background-color: #ffc107;
    border-radius: 50%;
    animation: pulse-live 1.5s ease-in-out 3;
}

/* Loading state for WebSocket connection */
.ws-connecting {
    opacity: 0.6;
    pointer-events: none;
}

.ws-connecting::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.1) 50%,
        transparent 100%);
    animation: shimmer 1.5s infinite;
    z-index: 1;
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

/* Error state */
.ws-error {
    border: 1px solid rgba(220, 53, 69, 0.3);
}

/* Connected state - subtle glow */
.ws-connected {
    box-shadow: 0 0 0 1px rgba(40, 167, 69, 0.1);
}