/**
 * Animated SVG Icons
 * رموز SVG متحركة لكل خدمة
 */

/* AI Content Writing - Animated Pen */
.service-card:nth-child(1) .service-icon::before {
    content: '';
    position: absolute;
    width: 40px;
    height: 40px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="rgba(168,85,247,1)" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" class="pen-stroke"/></svg>') no-repeat center;
    background-size: contain;
    animation: penWrite 3s ease-in-out infinite;
}

@keyframes penWrite {
    0% { transform: rotate(-45deg) scale(0.8); }
    50% { transform: rotate(0deg) scale(1); }
    100% { transform: rotate(45deg) scale(0.8); }
}

/* AI Image Generation - Pixel Shimmer */
.service-card:nth-child(2) .service-icon::before {
    content: '';
    position: absolute;
    width: 40px;
    height: 40px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="rgba(236,72,153,1)" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/></svg>') no-repeat center;
    background-size: contain;
    animation: pixelShimmer 2.5s ease-in-out infinite;
}

@keyframes pixelShimmer {
    0%, 100% { filter: drop-shadow(0 0 0px rgba(236,72,153,0.5)); }
    50% { filter: drop-shadow(0 0 15px rgba(236,72,153,1)); }
}

/* AI Chatbots - Bouncing Bubbles */
.service-card:nth-child(3) .service-icon::before {
    content: '';
    position: absolute;
    width: 40px;
    height: 40px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="rgba(59,130,246,1)" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/><circle cx="9" cy="10" r="1"/><circle cx="12" cy="10" r="1"/><circle cx="15" cy="10" r="1"/></svg>') no-repeat center;
    background-size: contain;
    animation: chatBounce 2s ease-in-out infinite;
}

@keyframes chatBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* Data Analytics - Chart Bars */
.service-card:nth-child(4) .service-icon::before {
    content: '';
    position: absolute;
    width: 40px;
    height: 40px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="rgba(34,197,94,1)" stroke-width="2"><line x1="12" y1="2" x2="12" y2="22"/><path d="M17 5H9.5a1.5 1.5 0 0 0-1.5 1.5v12a1.5 1.5 0 0 0 1.5 1.5H17"/><path d="M6 15h3M6 9h4"/></svg>') no-repeat center;
    background-size: contain;
    animation: chartRise 3s ease-in-out infinite;
}

@keyframes chartRise {
    0%, 100% { transform: scaleY(0.8); }
    50% { transform: scaleY(1.1); }
}

/* AI Video - Film Frames */
.service-card:nth-child(5) .service-icon::before {
    content: '';
    position: absolute;
    width: 40px;
    height: 40px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="rgba(239,68,68,1)" stroke-width="2"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/></svg>') no-repeat center;
    background-size: contain;
    animation: filmPlay 2.5s ease-in-out infinite;
}

@keyframes filmPlay {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(10deg); }
}

/* Custom AI Solutions - Orbit */
.service-card:nth-child(6) .service-icon::before {
    content: '';
    position: absolute;
    width: 40px;
    height: 40px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="rgba(139,92,246,1)" stroke-width="2"><circle cx="12" cy="12" r="1"/><path d="M12 1a11 11 0 1 0 0 22 11 11 0 0 0 0-22"/><path d="M12 5v14M19 12H5"/></svg>') no-repeat center;
    background-size: contain;
    animation: orbitSpin 3s linear infinite;
}

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

/* Additional Icon Glow */
.service-icon::after {
    content: '';
    position: absolute;
    inset: -10px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.2), transparent);
    border-radius: 50%;
    animation: iconGlow 2s ease-in-out infinite;
}

@keyframes iconGlow {
    0%, 100% { 
        transform: scale(1);
        opacity: 0.5;
    }
    50% { 
        transform: scale(1.2);
        opacity: 0.8;
    }
}

/* Z-index Fix */
.service-icon::before {
    z-index: 1;
}

.service-icon i,
.service-icon svg {
    z-index: 2;
    position: relative;
}