/* SemarNet ISP Animations */

/* 1. Pulsing Dot Badge Animation */
@keyframes ping {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    75%, 100% {
        transform: scale(2.2);
        opacity: 0;
    }
}

.animate-ping {
    animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* 2. Fiber Optic Light Lines Animations */
.fiber-line {
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
    height: 1px;
    width: 100%;
    position: absolute;
    opacity: 0.3;
    animation: pulseGlow 4s ease-in-out infinite;
}

@keyframes pulseGlow {
    0%, 100% {
        opacity: 0.2;
        filter: brightness(0.8);
    }
    50% {
        opacity: 0.6;
        filter: brightness(1.3);
    }
}

/* 3. Toast slide in animation */
@keyframes slideIn {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* 4. Pulse effect on button glows */
@keyframes buttonPulse {
    0%, 100% {
        box-shadow: 0 0 15px rgba(var(--primary-rgb), 0.3);
    }
    50% {
        box-shadow: 0 0 25px rgba(var(--primary-rgb), 0.6);
    }
}

.btn-primary.pulse-glow {
    animation: buttonPulse 3s infinite;
}

/* 5. Rotate animation for loading spinners */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}