/**
 * Project Container Button Effect Styles
 * Version: 3.0.7
 * 
 * Cursor replacement button with animated gradient
 * Button follows mouse cursor when hovering containers
 * 80% transparent background, positioned left of cursor
 * Hides cursor when hovering container
 */

/* Cursor button styling (replaces cursor on hover) */
.project-cursor-button {
    position: fixed;
    pointer-events: none;
    z-index: 10000;
    
    /* Button content styling */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 36px;
    border: none;
    border-radius: 15px;
    font-size: 12px;
    text-decoration: none;
    overflow: hidden;
    
    /* Animated gradient background - 80% transparent (20% opacity) */
    background: linear-gradient(135deg, rgba(42, 172, 226, 0.5) 0%, rgba(128, 98, 170, 0.5) 50%, rgba(69, 85, 165, 0.5) 100%);
    background-size: 200% 200%;
    background-position: 0% 0%;
    
    color: white;
    box-shadow: 0 4px 20px rgba(42, 172, 226, 0.2);
    
    /* Transform to position button to the left of cursor */
    /* translate(-100%, -50%) moves it left (100% of width) and centers vertically */
    transform: translate(-100%, -50%);
    
    /* Smooth transitions */
    transition: opacity 0.2s ease-out, box-shadow 0.3s ease;
    
    /* Gradient animation */
    animation: buttonGradientShift 6s ease-in-out infinite;
}

/* Gradient shift animation */
@keyframes buttonGradientShift {
    0% {
        background-position: 0% 0%;
        box-shadow: 0 4px 15px rgba(42, 172, 226, 0.3);
    }
    25% {
        background-position: 50% 50%;
        box-shadow: 0 6px 20px rgba(128, 98, 170, 0.4);
    }
    50% {
        background-position: 100% 100%;
        box-shadow: 0 8px 25px rgba(69, 85, 165, 0.4);
    }
    75% {
        background-position: 50% 50%;
        box-shadow: 0 6px 20px rgba(128, 98, 170, 0.4);
    }
    100% {
        background-position: 0% 0%;
        box-shadow: 0 4px 15px rgba(42, 172, 226, 0.3);
    }
}

/* Mobile optimizations */
@media (max-width: 768px) {
    .project-cursor-button {
        padding: 12px 28px;
        font-size: 13px;
    }
}

/* Project container base styles */
.project-container,
#project-container {
    position: relative;
    transition: all 0.3s ease;
    overflow: visible !important;
}