/* Enhanced Freely Draggable Skills Styling */

/* Base styles for draggable skill icons */
.skill-icon.holo {
    cursor: grab;
    user-select: none;
    transition: transform 0.2s ease, box-shadow 0.3s ease;
    will-change: auto; /* Only enable when needed */
    backface-visibility: hidden;
    perspective: 1000px;
    position: relative;
    z-index: 10;
}

/* Style during active dragging */
.skill-icon.holo.dragging {
    cursor: grabbing !important;
    box-shadow: 0 0 25px var(--cyber-neon-blue), 0 0 40px rgba(0, 243, 255, 0.5) !important;
    transform: scale(1.15) !important;
    z-index: 1000 !important;
    pointer-events: none; /* Allow dragging over other elements */
    transition: box-shadow 0.2s ease;
    will-change: transform, left, top; /* Optimize during drag */
    opacity: 0.9;
}

/* Enhanced hover effect for draggable items */
.skill-icon.holo.drag-hover {
    transform: scale(1.1);
    box-shadow: 0 0 18px var(--cyber-neon-blue), 0 0 35px rgba(0, 243, 255, 0.4);
}

/* Grid snapping styles */
.skills-holographic-container.show-grid {
    background-image: linear-gradient(to right, rgba(0, 195, 255, 0.05) 1px, transparent 1px),
                     linear-gradient(to bottom, rgba(0, 195, 255, 0.05) 1px, transparent 1px);
    background-size: 20px 20px;
}

/* Color variations for different skill categories */
.skills-category:nth-child(1) .skill-icon.holo.dragging {
    box-shadow: 0 0 25px var(--cyber-neon-blue), 0 0 40px rgba(0, 243, 255, 0.5) !important;
}

.skills-category:nth-child(2) .skill-icon.holo.dragging {
    box-shadow: 0 0 25px var(--cyber-neon-purple), 0 0 40px rgba(188, 19, 254, 0.5) !important;
}

.skills-category:nth-child(3) .skill-icon.holo.dragging {
    box-shadow: 0 0 25px var(--cyber-neon-pink), 0 0 40px rgba(255, 0, 170, 0.5) !important;
}

/* Neon trail effect - optimized for performance */
.neon-trail {
    position: fixed;
    width: 8px;  /* Reduced size */
    height: 8px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 999;
    opacity: 0.8; /* Reduced opacity */
    animation: trail-fade 0.4s forwards; /* Faster animation */
    mix-blend-mode: screen;
    will-change: transform, opacity; /* Optimize for animation */
}

@keyframes trail-fade {
    0% { 
        transform: scale(1); 
        opacity: 0.8; 
    }
    50% { 
        transform: scale(0.6); 
        opacity: 0.4; 
    }
    100% { 
        transform: scale(0.1); 
        opacity: 0; 
    }
}

/* Reset icon styling */
.skills-reset-container {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 50;
}

.skills-reset-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid #ff3366;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ff3366;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(255, 51, 102, 0.5);
    transition: all 0.3s;
    font-size: 18px;
}

.skills-reset-icon:hover {
    background: rgba(20, 0, 10, 0.8);
    box-shadow: 0 0 15px rgba(255, 51, 102, 0.7);
    transform: scale(1.1);
}

.skills-reset-icon.pulse-hover {
    animation: danger-pulse 1.2s infinite;
}

.skills-reset-icon.rotating {
    animation: danger-rotate 0.8s ease-in-out;
}

@keyframes danger-pulse {
    0% { box-shadow: 0 0 10px rgba(255, 51, 102, 0.5); }
    50% { box-shadow: 0 0 20px rgba(255, 51, 102, 0.8); }
    100% { box-shadow: 0 0 10px rgba(255, 51, 102, 0.5); }
}

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

/* Container adjustments for drag area */
.skills-holographic-container {
    position: relative;
    min-height: 600px; /* Ensure enough space for free positioning */
    overflow: visible !important; /* Allow elements to be visible outside container */
    padding: 20px; /* Add padding to prevent edge clipping */
}

/* Ensure skills categories maintain proper layout when icons are moved */
.skills-category {
    position: relative;
    z-index: 1;
}

.skills-category .skills-icons-row {
    position: relative;
    z-index: 2;
}

/* Animation for reset */
.skill-icon.holo.reset-pulse {
    animation: reset-pulse 0.8s ease-in-out;
}

@keyframes reset-pulse {
    0% { transform: scale(1); opacity: 0.4; }
    50% { transform: scale(1.15); opacity: 1; box-shadow: 0 0 15px var(--cyber-neon-blue); }
    100% { transform: scale(1); opacity: 1; }
}

/* Success animation when skill is positioned */
.skill-icon.holo.positioned {
    animation: position-success 0.6s ease-in-out;
}

@keyframes position-success {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); box-shadow: 0 0 12px var(--cyber-neon-blue); }
    100% { transform: scale(1); }
}

/* Enhanced skill glow effects */
.skill-glow {
    pointer-events: none;
    z-index: -1;
}

.hover-glow {
    pointer-events: none;
    z-index: -1;
}

/* Grid snap indicator styling */
.grid-snap-indicator {
    animation: pulse-indicator 2s infinite ease-in-out;
    box-shadow: 0 0 10px rgba(0, 195, 255, 0.7);
}

@keyframes pulse-indicator {
    0% { opacity: 0.9; }
    50% { opacity: 0.6; }
    100% { opacity: 0.9; }
}

/* Tooltip styles */
.drag-tooltip {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: rgba(0, 10, 20, 0.9);
    border: 1px solid var(--cyber-neon-blue);
    color: var(--cyber-neon-blue);
    padding: 5px 10px;
    border-radius: 5px;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1001;
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s, opacity 0.3s;
}

.drag-tooltip:after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--cyber-neon-blue);
}

.tooltip-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Attention-grabbing pulse animation */
.pulse-attention {
    animation: attention-pulse 2s ease-in-out;
}

@keyframes attention-pulse {
    0% { transform: scale(1); box-shadow: 0 0 10px var(--holo-primary); }
    20% { transform: scale(1.15); box-shadow: 0 0 20px var(--holo-primary); }
    40% { transform: scale(1); box-shadow: 0 0 10px var(--holo-primary); }
    60% { transform: scale(1.1); box-shadow: 0 0 15px var(--holo-primary); }
    100% { transform: scale(1); box-shadow: 0 0 10px var(--holo-primary); }
}

/* Mobile and Touch Device Optimizations */
@media (max-width: 768px) {
    .skills-holographic-container {
        padding: 15px;
        min-height: 400px;
    }
    
    .skills-reset-icon {
        top: 10px;
        right: 10px;
        width: 35px;
        height: 35px;
        font-size: 14px;
    }
    
    .skills-category {
        margin-bottom: 20px;
    }
    
    .skills-category h4 {
        font-size: 1.1rem;
        margin-bottom: 10px;
    }
    
    .skills-icons-row {
        gap: 10px;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .skill-icon.holo {
        min-width: 70px;
        width: 70px;
        height: 70px;
        font-size: 1.2rem;
        padding: 8px;
    }
    
    .skill-icon.holo span {
        font-size: 0.7rem;
        margin-top: 3px;
    }
    
    .skill-proficiency {
        height: 3px;
        margin-top: 3px;
    }
    
    /* Touch-friendly dragging */
    .skill-icon.holo.dragging {
        transform: scale(1.2);
        z-index: 1001;
        opacity: 0.9;
    }
    
    /* Reduced trail effects on mobile for better performance */
    .drag-trail {
        width: 6px;
        height: 6px;
        opacity: 0.4;
    }
    
    /* Success animation adjustments for mobile */
    .skill-icon.positioned {
        animation: mobilePositionSuccess 0.3s ease-out;
    }
    
    @keyframes mobilePositionSuccess {
        0% { 
            transform: scale(1.2);
            box-shadow: 0 0 15px var(--primary-color);
        }
        50% { 
            transform: scale(1.35);
            box-shadow: 0 0 25px var(--primary-color);
        }
        100% { 
            transform: scale(1);
            box-shadow: 0 0 10px rgba(var(--primary-color-rgb), 0.3);
        }
    }
}

@media (max-width: 480px) {
    .skills-holographic-container {
        padding: 10px;
        min-height: 350px;
    }
    
    .skills-reset-icon {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }
    
    .skill-icon.holo {
        min-width: 60px;
        width: 60px;
        height: 60px;
        font-size: 1rem;
        padding: 6px;
    }
    
    .skill-icon.holo span {
        font-size: 0.6rem;
    }
    
    .skills-icons-row {
        gap: 8px;
    }
    
    /* Disable trails on very small screens for performance */
    .drag-trail {
        display: none;
    }
}

/* High DPI / Retina Display Optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .skill-icon.holo {
        border-width: 1px;
    }
    
    .drag-trail {
        border-width: 1px;
    }
}

/* Touch device specific optimizations */
@media (hover: none) and (pointer: coarse) {
    .skill-icon.holo {
        /* Larger touch targets */
        min-width: 75px;
        width: 75px;
        height: 75px;
        
        /* Remove hover effects that don't work on touch */
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    
    .skill-icon.holo:hover {
        transform: none;
        box-shadow: 0 0 10px rgba(var(--primary-color-rgb), 0.3);
    }
    
    /* Better feedback for touch interactions */
    .skill-icon.holo:active {
        transform: scale(0.95);
        transition: transform 0.1s ease;
    }
    
    .skills-reset-icon:hover {
        transform: none;
        animation: none;
    }
    
    .skills-reset-icon:active {
        transform: scale(0.9);
        background: rgba(220, 53, 69, 0.3);
    }
}

/* Landscape orientation adjustments for mobile */
@media (max-width: 768px) and (orientation: landscape) {
    .skills-holographic-container {
        min-height: 300px;
        padding: 10px 15px;
    }
    
    .skills-category {
        margin-bottom: 15px;
    }
    
    .skill-icon.holo {
        width: 65px;
        height: 65px;
    }
}