/* 🚀 COOL ICON SYSTEM - Modern Animated Unicode Icons */

/* Navigation Icons - Cool & Modern */
.nav-link[href="#home"] i::before,
.fa-home::before {
    content: "🚀";
    font-family: inherit !important;
    animation: pulse 1s infinite;
}

.nav-link[href="#about"] i::before,
.fa-user::before,
.fa-user-circle::before {
    content: "🎯";
    font-family: inherit !important;
    animation: bounce 1s infinite;
}

.nav-link[href="#skills"] i::before,
.fa-star::before {
    content: "💎";
    font-family: inherit !important;
    animation: sparkle 0.8s infinite;
}

.nav-link[href="#tools"] i::before,
.fa-tools::before {
    content: "⚡";
    font-family: inherit !important;
    animation: flash 0.6s infinite;
}

.nav-link[href="#projects"] i::before,
.fa-folder-open::before {
    content: "🎨";
    font-family: inherit !important;
    animation: rotate 1.5s infinite;
}

.nav-link[href="#contact"] i::before,
.fa-envelope::before {
    content: "📬";
    font-family: inherit !important;
    animation: shake 1s infinite;
}

/* Hero Button Icons - Super Cool */
.btn .fa-eye::before {
    content: "🔥";
    font-family: inherit !important;
    animation: flame 0.6s infinite;
}

.btn .fa-paper-plane::before {
    content: "⚡";
    font-family: inherit !important;
    animation: lightning 0.4s infinite;
}

/* Project Button Icons - Trendy */
.btn .fa-external-link-alt::before {
    content: "🌟";
    font-family: inherit !important;
    animation: glow 0.8s infinite;
}

.btn .fa-github::before,
.fab.fa-github::before {
    content: "🚀";
    font-family: inherit !important;
    animation: launch 1s infinite;
}

/* Contact Icons - Modern & Animated */
.fa-phone::before {
    content: "📱";
    font-family: inherit !important;
    animation: ring 1s infinite;
}

.fab.fa-linkedin::before,
.fa-linkedin::before {
    content: "🔗";
    font-family: inherit !important;
    animation: connect 0.8s infinite;
}

/* Footer Icons - Elegant */
.fa-copyright::before {
    content: "©";
    font-family: inherit !important;
    color: #64ffda;
    text-shadow: 0 0 10px #64ffda;
}

/* Scroll to Top - Epic */
.fa-arrow-up::before {
    content: "🚀";
    font-family: inherit !important;
    animation: fly 1s infinite;
}

/* Section Header Icons - Dynamic */
.section-icon .fa-envelope::before {
    content: "📬";
    font-family: inherit !important;
    animation: shake 0.8s infinite;
}

.fa-code::before {
    content: "⚡";
    font-family: inherit !important;
    animation: code-pulse 0.8s infinite;
}

/* Skills Section - Normal Icon */

.fa-chart-line::before {
    content: "📊";
    font-family: inherit !important;
    animation: chart-grow 1s infinite;
}

.fa-project-diagram::before {
    content: "🎯";
    font-family: inherit !important;
    animation: target-hit 1s infinite;
}

.fa-laptop-code::before {
    content: "💻";
    font-family: inherit !important;
    animation: type 1s infinite;
}

/* Additional Tool Icons */
.fa-cog::before {
    content: "⚙️";
    font-family: inherit !important;
    animation: spin 1s linear infinite;
}

/* Remove Font Awesome font family */
.fa,
.fas,
.far,
.fab {
    font-family: inherit !important;
    font-weight: normal !important;
    font-style: normal !important;
}

/* Icon spacing */
i.fa,
i.fas,
i.far,
i.fab {
    margin-right: 0.5rem;
    display: inline-block;
    width: auto;
}

/* Size Classes */
.fa-2x {
    font-size: 2em !important;
    line-height: 1 !important;
}

.fa-3x {
    font-size: 3em !important;
    line-height: 1 !important;
}

/* Margin Classes */
.me-1 {
    margin-right: 0.25rem !important;
}

.me-2 {
    margin-right: 0.5rem !important;
}

/* Override any Font Awesome CSS that might interfere */
.fa::before,
.fas::before,
.far::before,
.fab::before {
    font-family: inherit !important;
    font-weight: inherit !important;
}

/* 🎭 COOL ANIMATIONS */
@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-10px);
    }

    60% {
        transform: translateY(-5px);
    }
}

@keyframes sparkle {

    0%,
    100% {
        transform: rotate(0deg) scale(1);
    }

    25% {
        transform: rotate(90deg) scale(1.1);
    }

    50% {
        transform: rotate(180deg) scale(1.2);
    }

    75% {
        transform: rotate(270deg) scale(1.1);
    }
}

@keyframes flash {

    0%,
    50% {
        opacity: 1;
    }

    25% {
        opacity: 0.3;
    }

    75% {
        opacity: 0.8;
    }
}

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

    100% {
        transform: rotate(360deg);
    }
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-5px);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(5px);
    }
}

@keyframes flame {

    0%,
    100% {
        transform: scale(1) rotate(0deg);
    }

    25% {
        transform: scale(1.1) rotate(-5deg);
    }

    50% {
        transform: scale(1.2) rotate(5deg);
    }

    75% {
        transform: scale(1.1) rotate(-3deg);
    }
}

@keyframes rocket {
    0% {
        transform: translateY(0) rotate(0deg);
    }

    25% {
        transform: translateY(-10px) rotate(10deg);
    }

    50% {
        transform: translateY(-5px) rotate(-5deg);
    }

    75% {
        transform: translateY(-15px) rotate(5deg);
    }

    100% {
        transform: translateY(0) rotate(0deg);
    }
}

@keyframes glow {

    0%,
    100% {
        transform: scale(1);
        text-shadow: 0 0 5px #ffd700;
    }

    50% {
        transform: scale(1.2);
        text-shadow: 0 0 20px #ffd700, 0 0 30px #ffd700;
    }
}

@keyframes launch {
    0% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-20px) scale(1.3);
    }

    100% {
        transform: translateY(0) scale(1);
    }
}

@keyframes ring {

    0%,
    100% {
        transform: rotate(0deg);
    }

    10%,
    30% {
        transform: rotate(-10deg);
    }

    20% {
        transform: rotate(10deg);
    }
}

@keyframes connect {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.15);
    }
}

@keyframes fly {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes code-pulse {

    0%,
    100% {
        transform: scale(1);
        text-shadow: 0 0 5px #00ff00;
    }

    50% {
        transform: scale(1.1);
        text-shadow: 0 0 15px #00ff00, 0 0 25px #00ff00;
    }
}

@keyframes chart-grow {
    0% {
        transform: scaleY(0.8);
    }

    50% {
        transform: scaleY(1.2);
    }

    100% {
        transform: scaleY(1);
    }
}

@keyframes target-hit {

    0%,
    100% {
        transform: scale(1);
    }

    10% {
        transform: scale(1.3);
    }

    20% {
        transform: scale(1);
    }
}

@keyframes type {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

@keyframes lightning {

    0%,
    100% {
        transform: scale(1) rotate(0deg);
        text-shadow: 0 0 5px #ffff00;
    }

    25% {
        transform: scale(1.3) rotate(-10deg);
        text-shadow: 0 0 15px #ffff00, 0 0 25px #ffff00;
    }

    50% {
        transform: scale(0.9) rotate(10deg);
        text-shadow: 0 0 20px #ffff00, 0 0 35px #ffff00, 0 0 40px #ffff00;
    }

    75% {
        transform: scale(1.2) rotate(-5deg);
        text-shadow: 0 0 10px #ffff00, 0 0 20px #ffff00;
    }
}

/* Hypnotic animation removed */

/* Hover effects for extra coolness */
.nav-link:hover i,
.btn:hover i {
    animation-duration: 0.2s !important;
    transform: scale(1.2);
}

/* Glow effect on hover */
.btn:hover .fa-eye::before,
.btn:hover .fa-paper-plane::before,
.btn:hover .fa-external-link-alt::before,
.btn:hover .fa-github::before {
    text-shadow: 0 0 15px currentColor;
}

/* 📱 MOBILE PERFORMANCE OPTIMIZATION */
@media (max-width: 768px) {

    /* Reduce animation intensity on mobile */
    .nav-link[href="#home"] i::before,
    .fa-home::before {
        animation: pulse 2s infinite;
    }

    .nav-link[href="#about"] i::before,
    .fa-user::before,
    .fa-user-circle::before {
        animation: bounce 2s infinite;
    }

    .nav-link[href="#skills"] i::before,
    .fa-star::before {
        animation: sparkle 1.5s infinite;
    }

    .nav-link[href="#tools"] i::before,
    .fa-tools::before {
        animation: flash 1.2s infinite;
    }

    .nav-link[href="#projects"] i::before,
    .fa-folder-open::before {
        animation: rotate 3s infinite;
    }

    .nav-link[href="#contact"] i::before,
    .fa-envelope::before {
        animation: shake 2s infinite;
    }

    .section-icon .fa-envelope::before {
        animation: shake 2s infinite;
    }

    .btn .fa-eye::before {
        animation: flame 1.2s infinite;
    }

    .btn .fa-paper-plane::before {
        animation: lightning 0.8s infinite;
    }

    .btn .fa-external-link-alt::before {
        animation: glow 1.5s infinite;
    }

    .btn .fa-github::before,
    .fab.fa-github::before {
        animation: launch 2s infinite;
    }

    /* Keep hypnotic animation even on mobile - it's the special one! */
    #skills .section-icon .fa-chart-line::before {
        animation: hypnotic-spin 3s linear infinite;
    }
}

/* ⚡ PERFORMANCE BOOST */
@media (prefers-reduced-motion: reduce) {

    /* Disable animations for users who prefer reduced motion */
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* 🔋 BATTERY SAVER MODE */
@media (max-width: 576px) {

    /* Ultra minimal animations for small screens */
    .nav-link i::before,
    .btn i::before,
    .fa::before,
    .fas::before,
    .far::before,
    .fab::before {
        animation: none !important;
        transform: none !important;
    }

    /* Keep hypnotic animation - it's too cool to remove! */
    #skills .section-icon .fa-chart-line::before {
        animation: hypnotic-spin 4s linear infinite !important;
    }

    /* Only keep subtle hover effects */
    .nav-link:hover i,
    .btn:hover i {
        transform: scale(1.05) !important;
        transition: transform 0.2s ease !important;
    }
}

/* 🚀 HARDWARE ACCELERATION */
.nav-link i::before,
.btn i::before,
.section-icon i::before {
    will-change: transform, opacity;
    backface-visibility: hidden;
    transform-style: preserve-3d;
}

/* 🎯 SMOOTH SCROLLING OPTIMIZATION */
html {
    scroll-behavior: smooth;
}

/* 📱 TOUCH OPTIMIZATION */
@media (pointer: coarse) {

    .btn,
    .nav-link {
        touch-action: manipulation;
    }
}