/* 
 * Whiz.vc - Main Custom Stylesheet 
 * Handles custom animations, scrollbars, and specific component overrides 
 * working alongside the Tailwind CSS utility framework.
 */

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: #000000;
    color: #FAFAFA;
    -webkit-font-smoothing: antialiased;
}

/* Bento Grid Cards */
.bento-card {
    background: #0A0A0A;
    border: 1px solid #1A1A1A;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.bento-card:hover {
    border-color: #333333;
    transform: translateY(-4px);
    box-shadow: 0 10px 40px -10px rgba(255,255,255,0.03);
}

/* Custom Scrollbar for sleek UI */
::-webkit-scrollbar { 
    width: 8px; 
}
::-webkit-scrollbar-track { 
    background: #000; 
}
::-webkit-scrollbar-thumb { 
    background: #333; 
    border-radius: 4px; 
}
::-webkit-scrollbar-thumb:hover { 
    background: #555; 
}

/* Modal Entrance Animation */
.modal-enter { 
    animation: modalFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; 
}

@keyframes modalFadeIn {
    from { 
        opacity: 0; 
        transform: scale(0.95) translateY(10px); 
    }
    to { 
        opacity: 1; 
        transform: scale(1) translateY(0); 
    }
}

/* Drag and Drop classes */
.drag-over {
    background-color: #1a1a1a !important;
    border: 2px dashed #ffffff !important;
    opacity: 0.8;
}