/* ========================================
   ENHANCED ICON STYLING
   Modern improvements for all SVG icons
   ======================================== */

/* Base Icon Enhancements */
.icon {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    stroke-width: 2;
}

/* Icon Hover Effects */
.nav-link:hover .icon,
.btn-primary:hover .icon,
.btn-secondary:hover .icon,
.btn-outline:hover .icon {
    transform: scale(1.1);
}

/* Skill Icon Enhancements */
.skill-icon {
    position: relative;
    overflow: visible;
}

.skill-icon .icon {
    filter: drop-shadow(0 2px 4px rgba(var(--accent-rgb), 0.2));
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.skill-card:hover .skill-icon .icon {
    transform: scale(1.15) rotate(5deg);
    filter: drop-shadow(0 4px 8px rgba(var(--accent-rgb), 0.4));
}

/* Timeline Marker Icon Enhancements */
.timeline-marker .icon {
    filter: drop-shadow(0 2px 6px rgba(255, 255, 255, 0.3));
}

/* Interest Icon Enhancements */
.interest-icon .icon {
    filter: drop-shadow(0 3px 6px rgba(255, 255, 255, 0.4));
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.interest-item:hover .interest-icon .icon {
    transform: scale(1.2) rotate(-5deg);
    filter: drop-shadow(0 6px 12px rgba(255, 255, 255, 0.6));
}

/* Contact Icon Enhancements */
.contact-icon {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.contact-method:hover .contact-icon {
    transform: scale(1.15) translateY(-2px);
    filter: drop-shadow(0 4px 8px rgba(255, 255, 255, 0.5));
}

/* Floating Element Icon Enhancements */
.floating-element .icon {
    filter: drop-shadow(0 4px 8px rgba(var(--accent-rgb), 0.3));
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.floating-element:hover .icon {
    transform: scale(1.2) rotate(15deg);
    filter: drop-shadow(0 8px 16px rgba(var(--accent-rgb), 0.5));
}

/* Achievement Icon Enhancements */
.achievement-icon .icon {
    filter: drop-shadow(0 4px 8px rgba(255, 255, 255, 0.4));
}

.achievement-card:hover .achievement-icon .icon {
    animation: iconPulse 0.6s ease-in-out;
}

@keyframes iconPulse {

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

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

/* Blog Card Icon Enhancements */
.blog-link .icon {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.blog-link:hover .icon {
    transform: translateX(4px);
}

/* Project Link Icon Enhancements */
.project-link .icon {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.project-link:hover .icon {
    transform: translateX(3px) translateY(-3px);
}

/* Navigation Icon Special Effects */
.mobile-menu-toggle .icon {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-menu-toggle:hover .icon {
    transform: rotate(90deg);
}

.theme-toggle {
    position: relative;
    overflow: hidden;
}

.theme-toggle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(var(--accent-rgb), 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.4s, height 0.4s;
}

.theme-toggle:hover::before {
    width: 100%;
    height: 100%;
}

/* Icon Color Variations */
.icon-primary {
    color: var(--accent);
}

.icon-secondary {
    color: var(--primary);
}

.icon-success {
    color: var(--success);
}

.icon-muted {
    color: var(--text-muted);
    opacity: 0.7;
}

/* Icon Size Variations */
.icon-xs {
    width: 1rem;
    height: 1rem;
}

.icon-sm {
    width: 1.25rem;
    height: 1.25rem;
}

.icon-md {
    width: 1.5rem;
    height: 1.5rem;
}

.icon-lg {
    width: 2rem;
    height: 2rem;
}

.icon-xl {
    width: 2.5rem;
    height: 2.5rem;
}

.icon-2xl {
    width: 3rem;
    height: 3rem;
}

/* Animated Icon Effects */
.icon-spin {
    animation: iconSpin 2s linear infinite;
}

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

    to {
        transform: rotate(360deg);
    }
}

.icon-bounce {
    animation: iconBounce 1s ease-in-out infinite;
}

@keyframes iconBounce {

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

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

.icon-pulse {
    animation: iconPulse 2s ease-in-out infinite;
}

/* Icon Glow Effect */
.icon-glow {
    filter: drop-shadow(0 0 8px currentColor);
}

/* Icon with Background Circle */
.icon-circle {
    background: var(--bg-secondary);
    border-radius: 50%;
    padding: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.icon-circle:hover {
    background: var(--accent);
    color: white;
    transform: scale(1.1);
}

/* Icon Gradient Effect */
.icon-gradient {
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Responsive Icon Sizing */
@media (max-width: 768px) {

    .skill-icon .icon,
    .interest-icon .icon {
        width: 1.75rem;
        height: 1.75rem;
    }

    .floating-element .icon {
        width: 1.5rem;
        height: 1.5rem;
    }
}

/* Dark Mode Icon Adjustments */
[data-theme="dark"] .icon {
    filter: brightness(1.1);
}

[data-theme="dark"] .skill-icon .icon,
[data-theme="dark"] .interest-icon .icon {
    filter: drop-shadow(0 2px 6px rgba(var(--accent-rgb), 0.4));
}

[data-theme="dark"] .skill-card:hover .skill-icon .icon,
[data-theme="dark"] .interest-item:hover .interest-icon .icon {
    filter: drop-shadow(0 4px 12px rgba(var(--accent-rgb), 0.6));
}

/* Icon Accessibility */
.icon[aria-hidden="true"] {
    pointer-events: none;
}

/* Print Styles for Icons */
@media print {
    .icon {
        filter: none !important;
        transform: none !important;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {

    .icon,
    .skill-icon .icon,
    .interest-icon .icon,
    .floating-element .icon {
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }
}