/* TheVortex Custom Styles */

/* Scrollbar Styles */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #101622; }
::-webkit-scrollbar-thumb { background: #232f48; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #2b6cee; }

/* Animations */
.fade-in { animation: fadeIn 0.5s ease-in-out; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.slide-up {
    animation: slideUp 0.3s ease-out;
}
@keyframes slideUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Hide Scrollbar but allow scroll */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Play Button Overlay Animation */
.play-overlay {
    opacity: 0;
    transition: opacity 0.3s ease;
}
.group:hover .play-overlay {
    opacity: 1;
}

/* Toast Animations */
.toast-enter {
    animation: toastEnter 0.3s ease-out;
}
@keyframes toastEnter {
    from { opacity: 0; transform: translateX(100%); }
    to { opacity: 1; transform: translateX(0); }
}

.toast-exit {
    animation: toastExit 0.3s ease-in forwards;
}
@keyframes toastExit {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(100%); }
}

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

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Custom focus styles */
input:focus, select:focus, textarea:focus {
    outline: none;
}

/* Skeleton Loading */
.skeleton {
    background: linear-gradient(90deg, #1a2332 25%, #232f48 50%, #1a2332 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}
@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}