/* Project Hub Custom Styles */

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #475569; }

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

.project-card {
    animation: fadeInUp 0.3s ease-out both;
}
.project-card:nth-child(1) { animation-delay: 0.02s; }
.project-card:nth-child(2) { animation-delay: 0.04s; }
.project-card:nth-child(3) { animation-delay: 0.06s; }
.project-card:nth-child(4) { animation-delay: 0.08s; }
.project-card:nth-child(5) { animation-delay: 0.10s; }
.project-card:nth-child(6) { animation-delay: 0.12s; }
.project-card:nth-child(7) { animation-delay: 0.14s; }
.project-card:nth-child(8) { animation-delay: 0.16s; }
.project-card:nth-child(9) { animation-delay: 0.18s; }
.project-card:nth-child(10){ animation-delay: 0.20s; }

/* Form focus ring */
input:focus, textarea:focus, select:focus {
    outline: none;
    ring: 2px solid #6366f1;
}

/* Line clamp utility */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Modal transition */
#projectModal {
    animation: fadeIn 0.2s ease-out;
}
#projectModal > div:first-child {
    animation: fadeIn 0.2s ease-out;
}
#projectModal > div:last-child > div {
    animation: scaleIn 0.2s ease-out;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}

/* Gradient text */
.gradient-text {
    background: linear-gradient(135deg, #818cf8, #c084fc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}