/* ========================================
   KORTEX & PRODEX - ANIMATIONS & EFFECTS
   ======================================== */

/* ========== KEYFRAME ANIMATIONS ========== */
@keyframes gradientShift {
    0%, 100% { 
        opacity: 1; 
        transform: rotate(0deg) scale(1);
    }
    25% { 
        opacity: 0.8; 
        transform: rotate(2deg) scale(1.05);
    }
    50% { 
        opacity: 0.9; 
        transform: rotate(-1deg) scale(0.98);
    }
    75% { 
        opacity: 0.85; 
        transform: rotate(1deg) scale(1.02);
    }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes footerGlow {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.6; }
}

@keyframes securityGradientShift {
    0%, 100% { 
        opacity: 1; 
        transform: rotate(0deg) scale(1); 
    }
    25% { 
        opacity: 0.8; 
        transform: rotate(5deg) scale(1.1); 
    }
    50% { 
        opacity: 0.9; 
        transform: rotate(-3deg) scale(0.95); 
    }
    75% { 
        opacity: 0.85; 
        transform: rotate(3deg) scale(1.05); 
    }
}

@keyframes shieldPulse {
    0%, 100% { 
        transform: translate(-50%, -50%) scale(1); 
        box-shadow: 0 10px 30px rgba(52, 152, 219, 0.3); 
    }
    50% { 
        transform: translate(-50%, -50%) scale(1.05); 
        box-shadow: 0 15px 40px rgba(52, 152, 219, 0.5); 
    }
}

@keyframes featureFloat {
    0%, 100% { 
        transform: translateY(0) scale(1); 
    }
    50% { 
        transform: translateY(-10px) scale(1.02); 
    }
}

@keyframes linePulse {
    0%, 100% { 
        stroke-opacity: 0.3; 
    }
    50% { 
        stroke-opacity: 0.8; 
    }
}

@keyframes securityPulseEffect {
    0% { 
        transform: translate(-50%, -50%) scale(1); 
        opacity: 1; 
    }
    100% { 
        transform: translate(-50%, -50%) scale(2.5); 
        opacity: 0; 
    }
}

@keyframes centralPulse {
    0%, 100% { 
        transform: translate(-50%, -50%) scale(1); 
    }
    50% { 
        transform: translate(-50%, -50%) scale(1.05); 
    }
}

@keyframes connectionFlow {
    0% { 
        stroke-dashoffset: 0; 
    }
    100% { 
        stroke-dashoffset: 20; 
    }
}

@keyframes crossFlow {
    0% { 
        stroke-dashoffset: 0; 
    }
    100% { 
        stroke-dashoffset: 12; 
    }
}

@keyframes pulseRing {
    0% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
    }
}

/* ========== FADE IN ANIMATIONS ========== */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: var(--transition-slow);
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

.slide-in-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: var(--transition-slow);
}

.slide-in-left.visible {
    opacity: 1;
    transform: translateX(0);
}

.slide-in-right {
    opacity: 0;
    transform: translateX(50px);
    transition: var(--transition-slow);
}

.slide-in-right.visible {
    opacity: 1;
    transform: translateX(0);
}

/* ========== LOADING ANIMATIONS ========== */
.loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #ffffff;
    animation: spin 0.8s ease-in-out infinite;
}

/* ========== GRADIENT BACKGROUNDS ========== */
.bg-gradient-kortex {
    background: var(--kortex-gradient);
    position: relative;
}

.bg-gradient-kortex::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 30% 20%, rgba(66, 153, 225, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 70% 80%, rgba(26, 54, 93, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(45, 70, 99, 0.1) 0%, transparent 50%);
    animation: gradientShift 40s ease-in-out infinite;
    z-index: 0;
}

.bg-gradient-prodex {
    background: var(--prodex-gradient);
    position: relative;
}

.bg-gradient-prodex::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 30% 20%, rgba(39, 174, 96, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 70% 80%, rgba(22, 160, 133, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(16, 185, 129, 0.1) 0%, transparent 50%);
    animation: gradientShift 40s ease-in-out infinite;
    z-index: 0;
}

.bg-gradient-integration {
    background: var(--integration-gradient);
    position: relative;
}

.bg-gradient-integration::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 30% 20%, rgba(243, 156, 18, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 70% 80%, rgba(241, 143, 1, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(245, 166, 35, 0.1) 0%, transparent 50%);
    animation: gradientShift 40s ease-in-out infinite;
    z-index: 0;
}

.bg-gradient-security {
    background: linear-gradient(135deg, 
        rgba(220, 53, 69, 0.15) 0%, 
        rgba(255, 193, 7, 0.1) 25%,
        rgba(40, 167, 69, 0.1) 50%,
        rgba(0, 123, 255, 0.15) 100%);
    position: relative;
    overflow: hidden;
}

.bg-gradient-security::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 20%, rgba(220, 53, 69, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(255, 193, 7, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 40% 80%, rgba(40, 167, 69, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(0, 123, 255, 0.15) 0%, transparent 50%);
    animation: securityGradientShift 40s ease-in-out infinite;
    z-index: 1;
}

/* Ensure content is above gradient backgrounds */
.bg-gradient-kortex .container,
.bg-gradient-prodex .container,
.bg-gradient-integration .container,
.bg-gradient-security .container {
    position: relative;
    z-index: 1;
}

/* ========== INTEGRATION ECOSYSTEM ANIMATIONS ========== */
.integration-ecosystem {
    position: relative;
    width: 400px;
    height: 400px;
    margin: 0 auto;
    padding: 20px;
}

.system-hub {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #ff6b6b, #ee5a24);
    color: white;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(52, 152, 219, 0.3);
    z-index: 10;
    animation: centralPulse 3s ease-in-out infinite;
}

.system-node {
    position: absolute;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 8px 25px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
    cursor: pointer;
}

.system-node:hover {
    transform: scale(1.1);
    box-shadow: 0 12px 35px rgba(0,0,0,0.3);
}

.connection-line {
    stroke: #ddd;
    stroke-width: 2;
    stroke-dasharray: 5,5;
    animation: connectionFlow 4s linear infinite;
    opacity: 0.7;
}

.pulse-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 120px;
    border: 3px solid rgba(255, 107, 107, 0.3);
    border-radius: 50%;
    animation: pulseRing 3s ease-out infinite;
    pointer-events: none;
}

/* ========== SECURITY ANIMATIONS ========== */
.security-shield-display {
    position: relative;
    width: 400px;
    height: 400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.central-shield {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 120px;
    background: linear-gradient(135deg, #3498db, #2c3e50);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    box-shadow: 0 10px 30px rgba(52, 152, 219, 0.3);
    animation: shieldPulse 3s ease-in-out infinite;
    z-index: 10;
}

.security-feature {
    position: absolute;
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    border: 2px solid #e3f2fd;
    animation: featureFloat 4s ease-in-out infinite;
    cursor: pointer;
    transition: all 0.3s ease;
}

.security-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 120px;
    border: 2px solid rgba(52, 152, 219, 0.3);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    animation: securityPulseEffect 3s ease-in-out infinite;
    z-index: 8;
}

.security-line {
    stroke: #bdc3c7;
    stroke-width: 2;
    stroke-dasharray: 5, 5;
    animation: linePulse 3s ease-in-out infinite;
}

/* ========== HOVER EFFECTS ========== */
.feature-card:hover {
    transform: translateY(-15px) scale(1.02);
    box-shadow: 0 15px 60px rgba(26, 54, 93, 0.15);
    background: rgba(255, 255, 255, 0.9);
}

.hero-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.12);
}

.footer-section:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.95);
    border-color: #cbd5e1;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.mobile-menu-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg) scale(1.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* ========== MOBILE ANIMATIONS ========== */
@media (max-width: 768px) {
    .integration-ecosystem {
        width: 300px;
        height: 300px;
    }
    
    .security-shield-display {
        width: 300px;
        height: 300px;
    }
    
    .central-shield {
        width: 90px;
        height: 90px;
    }
    
    .security-feature {
        width: 60px;
        height: 60px;
    }
    
    .security-pulse {
        width: 90px;
        height: 90px;
    }
}

/* ========== DISABLE PROBLEMATIC ANIMATIONS ========== */
/* Disable liquid shapes to prevent visual artifacts */
.liquid-shape {
    display: none !important;
}

/* Disable rotating conic gradient that causes squares */
.feature-card::after {
    display: none !important;
}