/* style.css - Global Design Framework for VFL Engine Cracker */

/* 1. Viewport Core Resets */
body {
    background-color: #020617;
    color: #f8fafc;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 2. Smooth Element Fade-In Transitions */
@keyframes fadeInUp {
    from { 
        opacity: 0; 
        transform: translateY(12px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

.animate-fade-in {
    animation: fadeInUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* 3. Mobile Dropdown Layout Normalizer (Custom Arrow Vectors) */
select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://w3.org' viewBox='0 0 24 24' fill='none' stroke='%23f59e0b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 1rem center !important;
    background-size: 1.1rem !important;
    padding-right: 2.5rem !important;
}

/* 4. Global Hover Interaction Settings */
button, select, input {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 5. Custom Webkit List Element Scrollbar */
ul::-webkit-scrollbar {
    width: 6px;
}
ul::-webkit-scrollbar-track {
    background: #020617;
}
ul::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 99px;
}