/* Fortune 500-style Custom Icons and Line Art */

/* Custom Icon Base Styles */
.custom-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: var(--border-radius-md);
    background: linear-gradient(135deg, var(--accent-blue), rgba(255, 255, 255, 0.1));
    position: relative;
    overflow: hidden;
}

.custom-icon::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transform: translateX(-100%);
    transition: transform var(--transition-slow);
}

.custom-icon:hover::before {
    transform: translateX(100%);
}

/* Matrix Icon */
.icon-matrix {
    position: relative;
}

.icon-matrix::after {
    content: '';
    position: absolute;
    width: 30px;
    height: 30px;
    background: 
        linear-gradient(90deg, currentColor 2px, transparent 2px),
        linear-gradient(0deg, currentColor 2px, transparent 2px);
    background-size: 8px 8px;
    background-position: 0 0, 0 0;
    opacity: 0.8;
}

/* Process Flow Icon */
.icon-process-flow {
    position: relative;
}

.icon-process-flow::after {
    content: '';
    position: absolute;
    width: 32px;
    height: 20px;
    border: 2px solid currentColor;
    border-radius: 4px;
    background: 
        linear-gradient(90deg, transparent 8px, currentColor 8px, currentColor 10px, transparent 10px),
        linear-gradient(90deg, transparent 18px, currentColor 18px, currentColor 20px, transparent 20px);
    background-size: 32px 2px;
    background-position: 0 6px, 0 12px;
}

/* Analytics Icon */
.icon-analytics {
    position: relative;
}

.icon-analytics::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    background: 
        linear-gradient(45deg, transparent 40%, currentColor 40%, currentColor 60%, transparent 60%),
        linear-gradient(-45deg, transparent 40%, currentColor 40%, currentColor 60%, transparent 60%);
    border-radius: 50%;
    opacity: 0.7;
}

/* Integration Icon */
.icon-integration {
    position: relative;
}

.icon-integration::after {
    content: '';
    position: absolute;
    width: 28px;
    height: 28px;
    border: 3px solid currentColor;
    border-radius: 50%;
    background: 
        radial-gradient(circle at center, transparent 6px, currentColor 6px, currentColor 8px, transparent 8px),
        radial-gradient(circle at 8px 8px, currentColor 2px, transparent 2px),
        radial-gradient(circle at 20px 8px, currentColor 2px, transparent 2px),
        radial-gradient(circle at 8px 20px, currentColor 2px, transparent 2px),
        radial-gradient(circle at 20px 20px, currentColor 2px, transparent 2px);
}

/* Governance Icon */
.icon-governance {
    position: relative;
}

.icon-governance::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 20px solid currentColor;
    transform: translateY(-2px);
}

.icon-governance::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 8px;
    background: currentColor;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
}

/* Decorative Line Art Elements */
.line-art-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath d='M100 200 Q 500 100 900 200 Q 700 400 500 300 Q 300 500 100 400 Z' fill='none' stroke='%23007AFF' stroke-width='2'/%3E%3Cpath d='M200 600 Q 600 500 800 700 Q 600 800 400 700 Q 200 800 100 700 Z' fill='none' stroke='%23007AFF' stroke-width='2'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/* Geometric Patterns */
.geometric-pattern {
    position: relative;
    overflow: hidden;
}

.geometric-pattern::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: 
        conic-gradient(from 0deg, transparent, rgba(0, 122, 255, 0.05), transparent),
        radial-gradient(circle at 30% 70%, rgba(191, 90, 242, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 70% 30%, rgba(48, 209, 88, 0.03) 0%, transparent 50%);
    animation: geometricRotate 60s linear infinite;
    pointer-events: none;
}

@keyframes geometricRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Enterprise-grade Visual Elements */
.enterprise-visual {
    position: relative;
    background: 
        radial-gradient(circle at 20% 20%, rgba(0, 122, 255, 0.1) 0%, transparent 30%),
        radial-gradient(circle at 80% 80%, rgba(191, 90, 242, 0.08) 0%, transparent 30%),
        linear-gradient(135deg, transparent 0%, rgba(48, 209, 88, 0.05) 50%, transparent 100%);
}

/* Data Flow Visualization */
.data-flow {
    position: relative;
    overflow: hidden;
}

.data-flow::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3Cpattern id='dataflow' patternUnits='userSpaceOnUse' width='20' height='20'%3E%3Cpath d='M 0,10 Q 10,0 20,10' stroke='%23007AFF' stroke-width='0.5' fill='none' opacity='0.3'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100' height='100' fill='url(%23dataflow)'/%3E%3C/svg%3E") repeat;
    opacity: 0.1;
    animation: dataFlowMove 20s linear infinite;
    pointer-events: none;
}

@keyframes dataFlowMove {
    0% { transform: translateX(0) translateY(0); }
    100% { transform: translateX(20px) translateY(20px); }
}

/* Neural Network Pattern */
.neural-network {
    position: relative;
}

.neural-network::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg stroke='%23007AFF' stroke-width='0.5' fill='none' opacity='0.2'%3E%3Ccircle cx='50' cy='50' r='3'/%3E%3Ccircle cx='150' cy='50' r='3'/%3E%3Ccircle cx='50' cy='150' r='3'/%3E%3Ccircle cx='150' cy='150' r='3'/%3E%3Ccircle cx='100' cy='100' r='4'/%3E%3Cline x1='50' y1='50' x2='100' y2='100'/%3E%3Cline x1='150' y1='50' x2='100' y2='100'/%3E%3Cline x1='50' y1='150' x2='100' y2='100'/%3E%3Cline x1='150' y1='150' x2='100' y2='100'/%3E%3C/g%3E%3C/svg%3E") repeat;
    background-size: 200px 200px;
    animation: neuralPulse 4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes neuralPulse {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 0.4; }
}

/* Circuit Board Pattern */
.circuit-pattern {
    position: relative;
}

.circuit-pattern::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23007AFF' stroke-width='0.5' opacity='0.15'%3E%3Cpath d='M10 10 L50 10 L50 20 L40 20 L40 40 L20 40 L20 50 L10 50 Z'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3Ccircle cx='50' cy='20' r='2'/%3E%3Ccircle cx='20' cy='40' r='2'/%3E%3Ccircle cx='10' cy='50' r='2'/%3E%3C/g%3E%3C/svg%3E") repeat;
    background-size: 60px 60px;
    pointer-events: none;
}

/* Hexagonal Grid */
.hex-grid {
    position: relative;
}

.hex-grid::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 100'%3E%3Cg fill='none' stroke='%23007AFF' stroke-width='0.5' opacity='0.1'%3E%3Cpath d='m28,35l12.124,7v14l-12.124,7l-12.124-7v-14z'/%3E%3Cpath d='m28,1l12.124,7v14l-12.124,7l-12.124-7v-14z'/%3E%3Cpath d='m28,69l12.124,7v14l-12.124,7l-12.124-7v-14z'/%3E%3C/g%3E%3C/svg%3E") repeat;
    background-size: 56px 100px;
    pointer-events: none;
}

/* Animated Border Lines */
.animated-border {
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.animated-border::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid transparent;
    border-image: linear-gradient(45deg, transparent, var(--accent-blue), transparent) 1;
    border-image-slice: 1;
    animation: borderGlow 3s ease-in-out infinite;
    pointer-events: none;
}

@keyframes borderGlow {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.8; }
}

/* Fortune 500 Logo-style Elements */
.corporate-emblem {
    position: relative;
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 
        0 0 0 4px rgba(0, 122, 255, 0.1),
        0 0 0 8px rgba(0, 122, 255, 0.05),
        var(--shadow-lg);
    animation: emblemPulse 4s ease-in-out infinite;
}

.corporate-emblem::before {
    content: '';
    position: absolute;
    width: 40px;
    height: 40px;
    border: 3px solid var(--primary-text);
    border-radius: 50%;
    background: 
        linear-gradient(45deg, transparent 40%, var(--primary-text) 40%, var(--primary-text) 60%, transparent 60%),
        linear-gradient(-45deg, transparent 40%, var(--primary-text) 40%, var(--primary-text) 60%, transparent 60%);
}

@keyframes emblemPulse {
    0%, 100% { 
        transform: scale(1);
        box-shadow: 
            0 0 0 4px rgba(0, 122, 255, 0.1),
            0 0 0 8px rgba(0, 122, 255, 0.05),
            var(--shadow-lg);
    }
    50% { 
        transform: scale(1.05);
        box-shadow: 
            0 0 0 8px rgba(0, 122, 255, 0.15),
            0 0 0 16px rgba(0, 122, 255, 0.1),
            var(--shadow-xl);
    }
}

/* Performance Graph Lines */
.performance-graph {
    position: relative;
    width: 100%;
    height: 60px;
    overflow: hidden;
}

.performance-graph::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 60'%3E%3Cpath d='M0 50 Q100 30 200 35 T400 25' stroke='%2330D158' stroke-width='2' fill='none' opacity='0.6'/%3E%3Cpath d='M0 45 Q100 25 200 30 T400 20' stroke='%23007AFF' stroke-width='2' fill='none' opacity='0.4'/%3E%3C/svg%3E");
    background-size: 400px 60px;
    animation: graphFlow 8s ease-in-out infinite;
}

@keyframes graphFlow {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-10px); }
}

/* Applying patterns to existing elements */
.hero::before {
    background: 
        radial-gradient(circle at 20% 80%, rgba(0, 122, 255, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(191, 90, 242, 0.06) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(48, 209, 88, 0.04) 0%, transparent 50%);
}

/* Enhance existing cards with patterns */
.overview-card,
.build-card,
.metric-card {
    background: 
        var(--surface-bg),
        radial-gradient(circle at 90% 10%, rgba(0, 122, 255, 0.05) 0%, transparent 50%);
}

/* Add subtle patterns to sections */
.library-integration {
    background: 
        var(--secondary-bg),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23007AFF' opacity='0.02'%3E%3Cpolygon points='50,0 60,35 100,35 70,57 80,91 50,70 20,91 30,57 0,35 40,35'/%3E%3C/g%3E%3C/svg%3E") repeat,
        linear-gradient(180deg, var(--secondary-bg) 0%, var(--primary-bg) 100%);
    background-size: auto, 100px 100px, auto;
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    .custom-icon {
        width: 50px;
        height: 50px;
    }
    
    .corporate-emblem {
        width: 60px;
        height: 60px;
    }
    
    .corporate-emblem::before {
        width: 30px;
        height: 30px;
    }
    
    /* Reduce animation intensity on mobile */
    .geometric-pattern::before,
    .neural-network::before,
    .data-flow::after {
        animation-duration: 30s;
    }
}