/* Enhanced animations */
@keyframes float {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.animate-float {
    animation: float 3s ease-in-out infinite;
}

.animate-slide-up {
    animation: slideInUp 0.8s ease-out forwards;
}

.animate-slide-left {
    animation: slideInLeft 0.8s ease-out forwards;
}

.animate-slide-right {
    animation: slideInRight 0.8s ease-out forwards;
}

.animate-fade-scale {
    animation: fadeInScale 0.6s ease-out forwards;
}

/* Custom gradient backgrounds (as defined in original) */
.bg-gradient-cyber {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.bg-gradient-security {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.bg-gradient-shield {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

/* Grid pattern */
.bg-grid-pattern {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* Threat indicator styles */
.threat-critical {
    background-color: #fee2e2;
    border-color: #fca5a5;
    color: #991b1b;
}

.threat-high {
    background-color: #ffedd5;
    border-color: #fdba74;
    color: #9a3412;
}

.threat-medium {
    background-color: #fef9c3;
    border-color: #fde047;
    color: #854d0e;
}

.threat-low {
    background-color: #dcfce7;
    border-color: #86efac;
    color: #166534;
}

/* Interactive hover effects */
.card-hover {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.card-hover:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* Security badge pulse */
@keyframes pulse-security {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
    }
}

.security-pulse {
    animation: pulse-security 2s infinite;
}

/* Initial hidden state for animated elements */
.animated-element {
    opacity: 0;
    transform: translateY(30px);
    /* Default for slide-up */
    transition: all 0.6s ease-out;
    /* Smooth transition for observer animations */
}