/*
============================================================
HUB FINANCEIRO — DASHBOARD VIVO 1.0
============================================================
*/

.hub-live-reveal {
    opacity: 0;
    transform: translateY(14px);

    transition:
        opacity 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
        transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hub-live-reveal.hub-live-visible {
    opacity: 1;
    transform: translateY(0);
}

.hub-live-value {
    font-variant-numeric: tabular-nums;
}

.hub-live-pulse {
    animation: hub-live-pulse 0.65s ease;
}

@keyframes hub-live-pulse {
    0% {
        transform: scale(1);
    }

    45% {
        transform: scale(1.025);
    }

    100% {
        transform: scale(1);
    }
}

.hub-live-highlight {
    position: relative;
}

.hub-live-highlight::after {
    content: "";

    position: absolute;
    inset: -2px;

    pointer-events: none;

    border: 1px solid rgba(34, 211, 238, 0);
    border-radius: inherit;

    transition:
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.hub-live-highlight.hub-live-updated::after {
    border-color: rgba(34, 211, 238, 0.28);

    box-shadow:
        0 0 0 4px rgba(34, 211, 238, 0.045),
        0 12px 38px rgba(34, 211, 238, 0.07);
}

.hub-live-progress {
    transform-origin: left center;
    will-change: width;
}

@media (prefers-reduced-motion: reduce) {
    .hub-live-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .hub-live-pulse {
        animation: none;
    }

    .hub-live-progress {
        transition: none !important;
    }
}