/* Enhanced Drag-Drop Styles - Supplements the main skills-drag-drop.css */

/* Enhanced dragging effects */
.dragging-active .skill-icon.holo:not(.dragging) {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Improved neon trail with better optimization */
.neon-trail {
    position: fixed;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 999;
    opacity: 0.8;
    animation: enhanced-trail-fade 0.4s forwards;
    mix-blend-mode: screen;
    will-change: transform, opacity;
    transform-origin: center;
}

@keyframes enhanced-trail-fade {
    0% { 
        transform: scale(1.2); 
        opacity: 0.8; 
    }
    50% { 
        transform: scale(0.7); 
        opacity: 0.5; 
    }
    100% { 
        transform: scale(0.1); 
        opacity: 0; 
    }
}

/* Reset button enhancement */
.skills-reset-icon {
    overflow: hidden; /* For the ripple effect */
    position: relative; /* For ripple positioning */
    animation: initial-attention 2s ease-in-out 1s; /* Initial attention grab */
}

@keyframes initial-attention {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); box-shadow: 0 0 25px rgba(255, 51, 102, 0.9); }
    75% { transform: scale(0.95); }
}

.skills-reset-icon.pulse-warning {
    animation: danger-warning-pulse 1.5s ease-in-out;
}

@keyframes danger-warning-pulse {
    0% { transform: scale(1); box-shadow: 0 0 10px rgba(255, 51, 102, 0.5); }
    10% { transform: scale(1.1); }
    20% { transform: scale(1); }
    30% { transform: scale(1.15); box-shadow: 0 0 20px rgba(255, 51, 102, 0.8); }
    100% { transform: scale(1); box-shadow: 0 0 10px rgba(255, 51, 102, 0.5); }
}

.skills-reset-icon.danger-flash {
    animation: danger-flash 0.5s ease-in-out;
}

@keyframes danger-flash {
    0% { background: rgba(0, 0, 0, 0.7); }
    50% { background: rgba(255, 51, 102, 0.7); }
    100% { background: rgba(0, 0, 0, 0.7); }
}

/* Ripple effect for reset button */
.reset-ripple {
    position: absolute;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    width: 100px;
    height: 100px;
    margin-top: -50px;
    margin-left: -50px;
    animation: reset-ripple 0.6s linear;
    transform: scale(0);
    opacity: 1;
    pointer-events: none;
}

@keyframes reset-ripple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* Reset shockwave effect */
.reset-shockwave {
    position: absolute;
    width: 20px;
    height: 20px;
    background: transparent;
    border-radius: 50%;
    border: 2px solid var(--cyber-neon-pink);
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 1000;
    opacity: 1;
    animation: shockwave 1s cubic-bezier(0, 0.5, 0.5, 1) forwards;
}

@keyframes shockwave {
    0% {
        width: 20px;
        height: 20px;
        opacity: 1;
        border-width: 2px;
    }
    70% {
        opacity: 0.5;
    }
    100% {
        width: 500px;
        height: 500px;
        opacity: 0;
        border-width: 1px;
    }
}

/* Reset preview effect */
.skill-icon.reset-preview {
    animation: reset-preview 1s infinite alternate;
    box-shadow: 0 0 15px rgba(255, 51, 102, 0.5);
    z-index: 500;
    position: relative;
}

@keyframes reset-preview {
    0% {
        transform: translateY(0);
        box-shadow: 0 0 5px rgba(255, 51, 102, 0.5);
    }
    100% {
        transform: translateY(-5px);
        box-shadow: 0 0 15px rgba(255, 51, 102, 0.7);
    }
}

/* Category highlight effect */
.skills-category h4.category-highlight {
    animation: category-flash 0.8s ease-in-out;
    position: relative;
    z-index: 300;
}

@keyframes category-flash {
    0% {
        text-shadow: 0 0 5px var(--holo-primary);
    }
    50% {
        text-shadow: 0 0 20px var(--cyber-neon-pink), 0 0 30px var(--cyber-neon-pink);
        color: var(--cyber-neon-pink);
    }
    100% {
        text-shadow: 0 0 5px var(--holo-primary);
    }
}

/* Snap-to-grid feedback */
.skill-icon.snapped {
    animation: snap-feedback 0.4s ease-out;
}

@keyframes snap-feedback {
    0% {
        box-shadow: 0 0 5px var(--cyber-neon-blue);
    }
    50% {
        box-shadow: 0 0 20px var(--cyber-neon-blue), 0 0 30px var(--cyber-neon-purple);
    }
    100% {
        box-shadow: 0 0 5px var(--cyber-neon-blue);
    }
}

/* Enhanced reset flash effect */
.skills-holographic-container.reset-flash {
    animation: container-reset-flash 0.5s ease-out;
}

@keyframes container-reset-flash {
    0% {
        box-shadow: inset 0 0 0px rgba(255, 51, 102, 0.1);
    }
    50% {
        box-shadow: inset 0 0 50px rgba(255, 51, 102, 0.3);
    }
    100% {
        box-shadow: inset 0 0 0px rgba(255, 51, 102, 0.1);
    }
}

/* Reset connection line */
.reset-connection-line {
    background: linear-gradient(to right, rgba(255, 51, 102, 0.8), rgba(255, 51, 102, 0.3));
    box-shadow: 0 0 8px rgba(255, 51, 102, 0.5);
    opacity: 0;
    animation: connection-appear 0.3s forwards;
}

@keyframes connection-appear {
    from { opacity: 0; }
    to { opacity: 0.8; }
}

/* Reset tracer particles */
.reset-tracer-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    z-index: 200;
    opacity: 0.9;
    pointer-events: none;
    filter: blur(1px);
}

/* Enhanced mobile and touch device optimizations */
@media (max-width: 768px) {
    .neon-trail {
        width: 6px;
        height: 6px;
        opacity: 0.6;
    }
    
    .reset-shockwave {
        animation-duration: 0.7s;
    }
    
    .skills-reset-icon {
        width: 45px;  /* Increased size for better touch target */
        height: 45px;
        font-size: 16px;
        top: 15px;
        right: 15px;
        border-width: 2px;
    }
    
    .reset-connection-line {
        height: 3px;  /* Thicker line for better visibility on mobile */
    }
    
    .reset-tracer-particle {
        width: 8px;
        height: 8px;
    }
    
    /* Improved touch feedback */
    .skills-reset-icon:active {
        transform: scale(0.9);
        background: rgba(255, 51, 102, 0.3);
    }
    
    /* Better position indicators for mobile */
    .skill-icon.reset-preview {
        box-shadow: 0 0 20px rgba(255, 51, 102, 0.7);
    }
}

/* Touch device optimization */
.touch-device .skill-icon.holo {
    /* Larger touch targets */
    min-width: 75px;
    height: 75px;
}

.touch-device .skills-reset-icon {
    width: 48px;
    height: 48px;
    border-width: 2px;
}

.skills-reset-icon.mobile-enhanced {
    background: rgba(20, 0, 5, 0.85);
    border: 2px solid #ff3366;
}

.skills-reset-icon.mobile-attention {
    animation: mobile-reset-attention 1s ease-in-out;
}

@keyframes mobile-reset-attention {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); box-shadow: 0 0 25px rgba(255, 51, 102, 1); }
    100% { transform: scale(1); }
}

.skill-icon.holo.touch-ready {
    transform: scale(1.15);
    box-shadow: 0 0 20px var(--holo-primary);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.skill-icon.holo.touch-tap {
    animation: touch-tap-feedback 0.5s ease;
}

@keyframes touch-tap-feedback {
    0% { transform: scale(1); }
    30% { transform: scale(1.2); box-shadow: 0 0 15px var(--holo-primary); }
    100% { transform: scale(1); }
}

/* Specific landscape orientation adjustments for touch devices */
@media (orientation: landscape) and (max-height: 500px) {
    .touch-device .skills-holographic-container {
        min-height: 250px;
    }
    
    .touch-device .skill-icon.holo {
        min-width: 60px;
        height: 60px;
    }
    
    .touch-device .skills-reset-icon {
        top: 5px;
        right: 5px;
        width: 38px;
        height: 38px;
    }
}

/* Better performance for low-end devices */
@media (max-width: 480px), (pointer: coarse) {
    .reset-shockwave {
        display: none; /* Disable on low-end devices */
    }
    
    @keyframes enhanced-trail-fade {
        0% { opacity: 0.6; }
        100% { opacity: 0; }
    }
    
    .skill-icon.reset-preview {
        animation-duration: 1.5s; /* Slower animation for better performance */
    }
    
    /* Simpler reset tracer for performance */
    .reset-tracer-particle {
        filter: none;
        box-shadow: none;
    }
}