/* ===== Drag & Drop States ===== */

/* Card being dragged */
.gizmo-card--dragging {
    opacity: 0.4;
    transform: rotate(2deg) scale(0.95) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3) !important;
    z-index: 100;
    border-color: var(--accent-primary) !important;
}

/* Card being hovered over as a drop target */
.gizmo-card--drag-over {
    border: 2px dashed var(--accent-primary) !important;
    box-shadow: 0 0 20px var(--glow-color, rgba(59, 130, 246, 0.3)),
                var(--shadow) !important;
    transform: scale(1.02) !important;
    background: var(--bg-card) !important;
}

/* Grid in dragging state - faster transitions for reordering feel */
.gizmo-grid--dragging .gizmo-card {
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Prevent text selection during drag */
.gizmo-grid--dragging {
    user-select: none;
    -webkit-user-select: none;
}

/* Drag handle animation on card hover */
.gizmo-card:hover .gizmo-card__drag-handle {
    opacity: 1;
}

/* Subtle pulse on drag handle hover */
.gizmo-card__drag-handle:hover {
    animation: dragHandlePulse 1.5s ease infinite;
}

@keyframes dragHandlePulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

/* Drop zone indicator at edges */
.gizmo-card--drag-before::before {
    content: '';
    position: absolute;
    left: -0.625rem;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--accent-primary);
    border-radius: 2px;
    box-shadow: 0 0 8px var(--glow-color, rgba(59, 130, 246, 0.5));
}

.gizmo-card--drag-after::after {
    content: '';
    position: absolute;
    right: -0.625rem;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--accent-primary);
    border-radius: 2px;
    box-shadow: 0 0 8px var(--glow-color, rgba(59, 130, 246, 0.5));
}