/* Checkerboard background for transparency preview */
.checkerboard {
    background-image: 
        linear-gradient(45deg, #f0f0f0 25%, transparent 25%), 
        linear-gradient(-45deg, #f0f0f0 25%, transparent 25%), 
        linear-gradient(45deg, transparent 75%, #f0f0f0 75%), 
        linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
    animation: fadeIn 0.4s ease-out forwards;
}

/* Custom Scrollbar */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #cbd5e1;
}

/* Thumbnail Styles */
.frame-item {
    position: relative;
    cursor: grab;
    transition: transform 0.2s, box-shadow 0.2s;
}

.frame-item:active {
    cursor: grabbing;
}

.frame-item.sortable-ghost {
    opacity: 0.3;
    transform: scale(0.9);
}

.frame-item:hover .delete-btn {
    opacity: 1;
}

.delete-btn {
    opacity: 0;
    transition: opacity 0.2s;
}

/* Preview Canvas sizing */
#preview-canvas {
    image-rendering: pixelated; /* Optional: Keep sharp edges for smaller previews */
}