/* Interactive physics-specific styles */
body {
    cursor: none;
}

/* Show default cursor on mobile/touch devices */
@media (hover: none) and (pointer: coarse) {
    body {
        cursor: auto;
    }
    
    .cursor {
        display: none !important;
    }
}

/* Additional mobile detection - max-width approach */
@media (max-width: 768px) {
    .cursor {
        display: none !important;
    }
    
    body {
        cursor: auto;
    }
}

.card-glow-wrapper.pushed::before {
    opacity: 0.7;
    filter: blur(50px);
    inset: -40px;
}

.card-glow-wrapper.pushed .card {
    box-shadow: 
        /* Enhanced depth during impact */
        0 0 25px rgba(255, 255, 255, 0.15),
        0 12px 40px rgba(0, 0, 0, 0.15),
        /* Inset highlights */
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(255, 255, 255, 0.05);
    transform: translateY(-2px);
}

.cursor {
    position: absolute;
    width: 32px;
    height: 32px;
    pointer-events: none;
    z-index: 1000;
    transition: transform 0.05s ease-out;
    background-image: url('../assets/pointer.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    display: block;
    opacity: 1;
}

.cursor.pushing {
    transform: scale(1.1);
    filter: brightness(1.1) drop-shadow(0 0 4px rgba(255,255,255,0.5));
}

/* Spark particles */
.spark {
    position: absolute;
    width: 3px;
    height: 3px;
    background: radial-gradient(circle, 
        var(--spark-center-color, rgba(255,255,255,1)) 0%, 
        var(--spark-edge-color, rgba(255,255,200,0.8)) 70%, 
        transparent 100%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 1001;
    transform: translate3d(-1.5px, -1.5px, 0);
    opacity: 1;
    will-change: transform, opacity, left, top, background;
    box-shadow: 0 0 var(--spark-glow-size, 2px) var(--spark-glow-color, rgba(255,255,255,0.8));
}

.spark.animate {
    animation: sparkFly var(--duration, 0.4s) ease-out forwards;
}

@keyframes sparkFly {
    0% {
        left: var(--start-x);
        top: var(--start-y);
        transform: translate3d(var(--half-size), var(--half-size), 0) scale(1.0);
        opacity: 1;
        --spark-center-color: var(--hot-color);
        --spark-edge-color: var(--hot-edge-color);
        --spark-glow-color: var(--hot-glow-color);
        --spark-glow-size: var(--hot-glow-size);
    }
    25% {
        left: calc(var(--start-x) + (var(--end-x) - var(--start-x)) * 0.25 + var(--gravity-x-20));
        top: calc(var(--start-y) + (var(--end-y) - var(--start-y)) * 0.25 + var(--gravity-y-20));
        transform: translate3d(var(--half-size), var(--half-size), 0) scale(1.0);
        opacity: calc(0.95 - var(--flicker-20));
        --spark-center-color: var(--warm-color);
        --spark-edge-color: var(--warm-edge-color);
        --spark-glow-color: var(--warm-glow-color);
        --spark-glow-size: var(--warm-glow-size);
    }
    40% {
        left: calc(var(--start-x) + (var(--end-x) - var(--start-x)) * 0.4 + var(--gravity-x-50));
        top: calc(var(--start-y) + (var(--end-y) - var(--start-y)) * 0.4 + var(--gravity-y-50));
        transform: translate3d(var(--half-size), var(--half-size), 0) scale(1.0);
        opacity: calc(0.95 - var(--flicker-50));
        --spark-center-color: var(--warm-color);
        --spark-edge-color: var(--warm-edge-color);
        --spark-glow-color: var(--warm-glow-color);
        --spark-glow-size: var(--warm-glow-size);
    }
    50% {
        left: calc(var(--start-x) + (var(--end-x) - var(--start-x)) * 0.5 + var(--gravity-x-50));
        top: calc(var(--start-y) + (var(--end-y) - var(--start-y)) * 0.5 + var(--gravity-y-50));
        transform: translate3d(var(--half-size), var(--half-size), 0) scale(0.8);
        opacity: calc(0.8 - var(--flicker-50));
        --spark-center-color: var(--cool-color);
        --spark-edge-color: var(--cool-edge-color);
        --spark-glow-color: var(--cool-glow-color);
        --spark-glow-size: var(--cool-glow-size);
    }
    80% {
        left: calc(var(--start-x) + (var(--end-x) - var(--start-x)) * 0.8 + var(--gravity-x-80));
        top: calc(var(--start-y) + (var(--end-y) - var(--start-y)) * 0.8 + var(--gravity-y-80));
        transform: translate3d(var(--half-size), var(--half-size), 0) scale(0.5);
        opacity: calc(0.5 - var(--flicker-80));
        --spark-center-color: var(--cold-color);
        --spark-edge-color: var(--cold-edge-color);
        --spark-glow-color: var(--cold-glow-color);
        --spark-glow-size: var(--cold-glow-size);
    }
    100% {
        left: calc(var(--end-x) + var(--gravity-x-100));
        top: calc(var(--end-y) + var(--gravity-y-100));
        transform: translate3d(var(--half-size), var(--half-size), 0) scale(0.1);
        opacity: 0;
        --spark-center-color: var(--cold-color);
        --spark-edge-color: transparent;
        --spark-glow-color: transparent;
        --spark-glow-size: 0px;
    }
}