/* ========================================
   ENHANCED ANIMATIONS & NEON EFFECTS
   ======================================== */

/* Smooth Fade In Animations */
.fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

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

/* Staggered animation delays */
.fade-up:nth-child(1) { transition-delay: 0.1s; }
.fade-up:nth-child(2) { transition-delay: 0.2s; }
.fade-up:nth-child(3) { transition-delay: 0.3s; }
.fade-up:nth-child(4) { transition-delay: 0.4s; }
.fade-up:nth-child(5) { transition-delay: 0.5s; }
.fade-up:nth-child(6) { transition-delay: 0.6s; }

/* ========================================
   PORTFOLIO ITEMS - ENHANCED EFFECTS
   ======================================== */

.portfolio .portfolio-item {
    opacity: 0;
    transform: scale(0.8) rotateY(20deg);
    animation: portfolioFadeIn 0.8s ease-out forwards;
    box-shadow: 
        0 8px 25px rgba(0, 0, 0, 0.4),
        -5px 0 15px rgba(0, 0, 0, 0.2),
        5px 0 15px rgba(0, 0, 0, 0.2),
        0 0 0 rgba(255, 87, 34, 0);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    perspective: 1000px;
    transform-style: preserve-3d;
}

.portfolio .portfolio-item:nth-child(1) { animation-delay: 0.1s; }
.portfolio .portfolio-item:nth-child(2) { animation-delay: 0.2s; }
.portfolio .portfolio-item:nth-child(3) { animation-delay: 0.3s; }

@keyframes portfolioFadeIn {
    0% {
        opacity: 0;
        transform: scale(0.8) rotateY(20deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotateY(0deg);
    }
}

/* Wave Ripple Animation - تأثير التموج المتتابع */
.portfolio .portfolio-item.wave-ripple {
    animation: waveRipple 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    z-index: 50;
}

@keyframes waveRipple {
    0% {
        transform: scale(1) translateY(0);
        box-shadow: 
            0 8px 25px rgba(0, 0, 0, 0.4),
            0 0 0 0 rgba(255, 87, 34, 0.7);
    }
    25% {
        transform: scale(1.15) translateY(-15px);
        box-shadow: 
            0 20px 40px rgba(255, 87, 34, 0.6),
            0 0 0 10px rgba(255, 87, 34, 0.4);
    }
    50% {
        transform: scale(1.2) translateY(-20px);
        box-shadow: 
            0 25px 50px rgba(255, 87, 34, 0.7),
            0 0 0 20px rgba(255, 87, 34, 0.2);
    }
    75% {
        transform: scale(1.15) translateY(-15px);
        box-shadow: 
            0 20px 40px rgba(255, 87, 34, 0.6),
            0 0 0 30px rgba(255, 87, 34, 0);
    }
    100% {
        transform: scale(1) translateY(0);
        box-shadow: 
            0 8px 25px rgba(0, 0, 0, 0.4),
            0 0 0 40px rgba(255, 87, 34, 0);
    }
}

/* Glow Pulse Animation - تأثير النبض المضيء */
.portfolio .portfolio-item.glow-pulse {
    animation: glowPulse 1s ease-in-out forwards;
}

@keyframes glowPulse {
    0%, 100% {
        filter: brightness(1);
        box-shadow: 
            0 8px 25px rgba(0, 0, 0, 0.4),
            0 0 0 rgba(255, 87, 34, 0);
    }
    50% {
        filter: brightness(1.3);
        box-shadow: 
            0 15px 40px rgba(255, 87, 34, 0.8),
            0 0 40px rgba(255, 87, 34, 0.6),
            inset 0 0 30px rgba(255, 87, 34, 0.3);
    }
}

/* Rotate Scale Animation - تأثير الدوران والتكبير */
.portfolio .portfolio-item.rotate-scale {
    animation: rotateScale 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

@keyframes rotateScale {
    0% {
        transform: rotate(0deg) scale(1);
    }
    50% {
        transform: rotate(180deg) scale(1.2);
    }
    100% {
        transform: rotate(360deg) scale(1);
    }
}

/* Float Bounce Animation - تأثير الطفو والارتداد */
.portfolio .portfolio-item.float-bounce {
    animation: floatBounce 1s ease-in-out forwards;
}

@keyframes floatBounce {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    20% {
        transform: translateY(-25px) scale(1.05);
    }
    40% {
        transform: translateY(-35px) scale(1.1);
    }
    60% {
        transform: translateY(-30px) scale(1.08);
    }
    80% {
        transform: translateY(-20px) scale(1.03);
    }
}

.portfolio .portfolio-item:hover {
    transform: translateY(-15px) scale(1.08) !important;
    box-shadow: 
        0 20px 50px rgba(255, 87, 34, 0.6),
        -10px 0 30px rgba(255, 87, 34, 0.4),
        10px 0 30px rgba(255, 87, 34, 0.4),
        0 0 40px rgba(255, 87, 34, 0.8),
        inset 0 0 20px rgba(255, 87, 34, 0.2);
    filter: brightness(1.1);
}

.portfolio .portfolio-item::before {
    background: linear-gradient(135deg, 
        rgba(255, 87, 34, 0.4) 0%, 
        rgba(255, 152, 0, 0.4) 50%,
        rgba(255, 87, 34, 0.4) 100%);
    background-size: 200% 200%;
    animation: gradientShift 3s ease infinite;
}

@keyframes gradientShift {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

.portfolio .portfolio-item:hover img {
    transform: scale(1.15) rotate(2deg);
}

/* ========================================
   NEON EFFECTS FOR ICONS
   ======================================== */

/* Achievement Icons */
.achievement-icon i {
    filter: drop-shadow(0 0 8px rgba(255, 87, 34, 0.8))
            drop-shadow(0 0 15px rgba(255, 87, 34, 0.6));
    animation: iconPulse 2s ease-in-out infinite;
}

@keyframes iconPulse {
    0%, 100% {
        filter: drop-shadow(0 0 8px rgba(255, 87, 34, 0.8))
                drop-shadow(0 0 15px rgba(255, 87, 34, 0.6));
    }
    50% {
        filter: drop-shadow(0 0 12px rgba(255, 87, 34, 1))
                drop-shadow(0 0 25px rgba(255, 87, 34, 0.8));
    }
}

/* Service Icons */
.service-card i {
    filter: drop-shadow(0 0 10px rgba(255, 87, 34, 0.9))
            drop-shadow(0 0 20px rgba(255, 87, 34, 0.7));
    transition: all 0.3s ease;
}

.service-card:hover i {
    filter: drop-shadow(0 0 15px rgba(255, 87, 34, 1))
            drop-shadow(0 0 30px rgba(255, 87, 34, 0.9))
            drop-shadow(0 0 45px rgba(255, 87, 34, 0.7));
    transform: scale(1.1) rotateY(360deg);
}

/* Why Me Check Icons */
.why-me-content li i {
    filter: drop-shadow(0 0 8px rgba(255, 87, 34, 0.8))
            drop-shadow(0 0 15px rgba(255, 87, 34, 0.6));
    animation: checkPulse 3s ease-in-out infinite;
}

@keyframes checkPulse {
    0%, 100% {
        filter: drop-shadow(0 0 8px rgba(255, 87, 34, 0.8))
                drop-shadow(0 0 15px rgba(255, 87, 34, 0.6));
        transform: scale(1);
    }
    50% {
        filter: drop-shadow(0 0 12px rgba(255, 87, 34, 1))
                drop-shadow(0 0 25px rgba(255, 87, 34, 0.8));
        transform: scale(1.05);
    }
}

/* Contact Icons */
.contact-card i {
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.6))
            drop-shadow(0 0 15px rgba(255, 255, 255, 0.4));
    transition: all 0.3s ease;
}

.contact-card:hover i {
    filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.9))
            drop-shadow(0 0 25px rgba(255, 255, 255, 0.7));
    transform: scale(1.2) rotate(360deg);
}

/* Skill Icons */
.skill-icon img {
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.3))
            drop-shadow(0 0 15px rgba(255, 87, 34, 0.3)) !important;
    transition: all 0.4s ease !important;
}

.skill-card:hover .skill-icon img {
    transform: scale(1.15) rotateY(360deg) !important;
    filter: drop-shadow(0 6px 15px rgba(0, 0, 0, 0.4))
            drop-shadow(0 0 25px rgba(255, 87, 34, 0.7))
            drop-shadow(0 0 40px rgba(255, 87, 34, 0.5)) !important;
}

/* ========================================
   BUTTON GLOW EFFECT
   ======================================== */

.btn-primary {
    box-shadow: 
        0 8px 25px rgba(255, 87, 34, 0.5),
        0 4px 15px rgba(255, 87, 34, 0.3),
        0 0 20px rgba(255, 87, 34, 0.4),
        inset 0 -3px 0 rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    animation: buttonGlow 2s ease-in-out infinite;
}

@keyframes buttonGlow {
    0%, 100% {
        box-shadow: 
            0 8px 25px rgba(255, 87, 34, 0.5),
            0 4px 15px rgba(255, 87, 34, 0.3),
            0 0 20px rgba(255, 87, 34, 0.4),
            inset 0 -3px 0 rgba(0, 0, 0, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }
    50% {
        box-shadow: 
            0 8px 30px rgba(255, 87, 34, 0.7),
            0 4px 20px rgba(255, 87, 34, 0.5),
            0 0 30px rgba(255, 87, 34, 0.6),
            inset 0 -3px 0 rgba(0, 0, 0, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }
}

.btn-primary:hover {
    box-shadow: 
        0 12px 35px rgba(255, 87, 34, 0.7),
        0 8px 20px rgba(255, 87, 34, 0.5),
        0 0 40px rgba(255, 87, 34, 0.8),
        0 0 60px rgba(255, 87, 34, 0.6),
        inset 0 -3px 0 rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
    animation: none;
}

/* ========================================
   WHATSAPP FLOAT PULSE
   ======================================== */

.whatsapp-float {
    box-shadow: 
        0 4px 15px rgba(37, 211, 102, 0.4),
        0 0 20px rgba(37, 211, 102, 0.6) !important;
    animation: whatsappPulse 2s ease-in-out infinite;
    transition: all 0.3s ease !important;
}

@keyframes whatsappPulse {
    0%, 100% {
        box-shadow: 
            0 4px 15px rgba(37, 211, 102, 0.4),
            0 0 20px rgba(37, 211, 102, 0.6);
    }
    50% {
        box-shadow: 
            0 4px 20px rgba(37, 211, 102, 0.6),
            0 0 30px rgba(37, 211, 102, 0.8),
            0 0 40px rgba(37, 211, 102, 0.6);
    }
}

.whatsapp-float:hover {
    transform: scale(1.15) rotate(360deg) !important;
    box-shadow: 
        0 6px 25px rgba(37, 211, 102, 0.7),
        0 0 35px rgba(37, 211, 102, 0.9),
        0 0 50px rgba(37, 211, 102, 0.7) !important;
}

.whatsapp-float i {
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
}

/* ========================================
   FOOTER SOCIAL ICONS
   ======================================== */

.footer-social-icons a {
    filter: drop-shadow(0 0 5px rgba(255, 87, 34, 0.5));
    transition: all 0.3s ease !important;
}

.footer-social-icons a:hover {
    filter: drop-shadow(0 0 10px rgba(255, 87, 34, 0.9))
            drop-shadow(0 0 20px rgba(255, 87, 34, 0.7));
    transform: translateY(-3px) scale(1.2);
}