/* Pulse beacon status animation */
.pulse-icon {
    width: 8px;
    height: 8px;
    background-color: var(--accent-green);
    border-radius: 50%;
    display: inline-block;
    position: relative;
}

.pulse-icon::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0; left: 0;
    background-color: var(--accent-green);
    border-radius: 50%;
    animation: beaconPulse 2s infinite ease-in-out;
}

.hpc-header:has(.system-status.fatal) .pulse-icon {
    background-color: var(--accent-magenta);
}

.hpc-header:has(.system-status.fatal) .pulse-icon::after {
    background-color: var(--accent-magenta);
}

@keyframes beaconPulse {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }
    100% {
        transform: scale(3);
        opacity: 0;
    }
}

/* Fluid flow animation inside liquid loops */
@keyframes fluidMovement {
    0% {
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dashoffset: -42;
    }
}

.animate-flow {
    animation: fluidMovement 1.5s linear infinite;
}

/* Event arrival animation flash */
@keyframes rowArrival {
    0% {
        background-color: rgba(88, 166, 255, 0.2);
    }
    100% {
        background-color: transparent;
    }
}

.row-new {
    animation: rowArrival 0.8s ease-out;
}