/* Matrix Background Styles for AI Project Pages */

/* Matrix Background Container */
.matrix-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    background: linear-gradient(180deg, #050508 0%, #0a0a12 50%, #0f0f1a 100%);
}

/* Matrix Canvas */
#matrix-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0.45;
}

/* Mesh Gradient Overlay */
.mesh-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 0% 0%, rgba(99, 102, 241, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse at 100% 0%, rgba(139, 92, 246, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 100%, rgba(6, 182, 212, 0.08) 0%, transparent 50%);
    animation: meshShift 10s ease-in-out infinite alternate;
}

@keyframes meshShift {
    0% {
        filter: hue-rotate(0deg);
    }

    100% {
        filter: hue-rotate(30deg);
    }
}

/* Override section backgrounds to be transparent */
.matrix-page .section {
    background: transparent !important;
}

.matrix-page .section-alt {
    background: rgba(15, 23, 42, 0.3) !important;
}

/* Enhance card visibility on matrix background */
.matrix-page .service-card,
.matrix-page .feature-item,
.matrix-page .api-card,
.matrix-page .pipeline-step,
.matrix-page .use-case-card {
    background: rgba(15, 23, 42, 0.85) !important;
    backdrop-filter: blur(10px);
    border-color: rgba(99, 102, 241, 0.2) !important;
}

.matrix-page .service-card:hover,
.matrix-page .feature-item:hover,
.matrix-page .api-card:hover,
.matrix-page .pipeline-step:hover,
.matrix-page .use-case-card:hover {
    border-color: rgba(99, 102, 241, 0.4) !important;
    box-shadow: 0 10px 40px rgba(99, 102, 241, 0.15) !important;
}

/* Footer enhancement */
.matrix-page .footer {
    background: rgba(15, 23, 42, 0.9) !important;
    backdrop-filter: blur(10px);
}

/* Text visibility enhancements */
.matrix-page .section-title {
    color: #ffffff !important;
    text-shadow: 0 0 30px rgba(99, 102, 241, 0.6), 0 2px 4px rgba(0, 0, 0, 0.8);
}

.matrix-page .section-subtitle {
    color: rgba(255, 255, 255, 0.9) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.matrix-page h2,
.matrix-page h3,
.matrix-page h4 {
    color: #f1f5f9 !important;
}

.matrix-page p {
    color: rgba(226, 232, 240, 0.95);
}

/* Badge visibility */
.matrix-page .badge {
    background: rgba(99, 102, 241, 0.35) !important;
    border: 1px solid rgba(99, 102, 241, 0.6) !important;
    color: #e0e7ff !important;
}

/* Navbar visibility */
.matrix-page .navbar {
    background: rgba(15, 23, 42, 0.95) !important;
    backdrop-filter: blur(10px);
}

/* Nav links */
.matrix-page .nav-link {
    color: rgba(255, 255, 255, 0.85) !important;
}

.matrix-page .nav-link:hover {
    color: #818cf8 !important;
}