/* Custom Styles for Exbyte Portfolio */

/* Base Styles */
* {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Navigation */
.nav-link {
    @apply text-gray-300 hover:text-white transition-colors duration-200 relative;
}

.nav-link::after {
    content: '';
    @apply absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-primary to-secondary transition-all duration-300;
}

.nav-link:hover::after {
    @apply w-full;
}

.nav-link-mobile {
    @apply text-gray-300 hover:text-primary hover:bg-gray-800 transition-all duration-200 px-4 py-3 rounded-lg;
}

/* Buttons */
.btn-primary {
    @apply bg-gradient-to-r from-primary to-secondary text-white px-6 py-3 rounded-lg font-semibold
           hover:shadow-lg hover:shadow-primary/50 transition-all duration-300 transform hover:-translate-y-0.5;
}

.btn-secondary {
    @apply bg-gray-800 text-white px-6 py-3 rounded-lg font-semibold border border-gray-700
           hover:border-primary hover:bg-gray-700 transition-all duration-300;
}

.btn-outline {
    @apply border-2 border-gray-700 text-gray-300 px-6 py-3 rounded-lg font-semibold
           hover:border-primary hover:text-primary hover:bg-gray-800 transition-all duration-300;
}

/* Terminal Effect */
.terminal-window {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.typing-effect {
    overflow: hidden;
    border-right: 0.15em solid #4F46E5;
    white-space: nowrap;
    animation: typing 2s steps(40, end), blink-caret 0.75s step-end infinite;
}

@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}

@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: #4F46E5 }
}

/* Stat Cards */
.stat-card {
    @apply bg-gray-800/50 backdrop-blur p-6 rounded-lg border border-gray-700
           hover:border-primary transition-all duration-300 text-center
           transform hover:-translate-y-1 hover:shadow-lg hover:shadow-primary/20;
}

/* Service Cards */
.service-card {
    @apply bg-gray-800/50 backdrop-blur p-6 rounded-lg border border-gray-700
           hover:border-primary transition-all duration-300
           transform hover:-translate-y-2 hover:shadow-xl hover:shadow-primary/20;
}

.service-icon {
    @apply w-16 h-16 rounded-xl flex items-center justify-center mb-4
           transition-all duration-300;
}

/* Project Cards */
.project-card {
    @apply bg-gray-800/50 backdrop-blur rounded-lg border border-gray-700 overflow-hidden
           hover:border-primary transition-all duration-300
           transform hover:-translate-y-2 hover:shadow-xl hover:shadow-primary/20;
}

.category-badge {
    @apply px-3 py-1 rounded-full text-xs font-semibold uppercase tracking-wide;
}

.category-discord {
    @apply bg-indigo-500/20 text-indigo-300 border border-indigo-500/30;
}

.category-telegram {
    @apply bg-blue-500/20 text-blue-300 border border-blue-500/30;
}

.category-trading {
    @apply bg-green-500/20 text-green-300 border border-green-500/30;
}

.category-api {
    @apply bg-purple-500/20 text-purple-300 border border-purple-500/30;
}

.category-automation {
    @apply bg-red-500/20 text-red-300 border border-red-500/30;
}

.category-crypto {
    @apply bg-yellow-500/20 text-yellow-300 border border-yellow-500/30;
}

.category-web {
    @apply bg-pink-500/20 text-pink-300 border border-pink-500/30;
}

.category-other {
    @apply bg-gray-500/20 text-gray-300 border border-gray-500/30;
}

.tech-badge {
    @apply px-3 py-1 bg-gray-700/50 text-gray-300 rounded-full text-xs font-medium
           border border-gray-600 hover:border-primary transition-colors;
}

/* Skills */
.skill-category-card {
    @apply bg-gray-800/50 backdrop-blur p-6 rounded-lg border border-gray-700
           hover:border-primary transition-all duration-300;
}

.skill-badge {
    @apply px-3 py-2 bg-gray-700/50 text-gray-300 rounded-lg text-sm font-medium
           border border-gray-600 hover:border-primary transition-colors;
}

.skill-bar {
    @apply w-full bg-gray-700 rounded-full h-2 overflow-hidden;
}

.skill-bar-fill {
    @apply h-full rounded-full transition-all duration-1000 ease-out;
}

/* Forms */
.form-input {
    @apply w-full bg-gray-700/50 text-white border border-gray-600 rounded-lg px-4 py-3
           focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20
           transition-all duration-200 placeholder-gray-400;
}

.form-input:focus {
    @apply bg-gray-700;
}

select.form-input {
    @apply cursor-pointer;
}

/* Social Icons */
.social-icon {
    @apply w-10 h-10 rounded-lg bg-gray-700/50 flex items-center justify-center
           text-gray-400 hover:text-white hover:bg-primary transition-all duration-300
           transform hover:-translate-y-1;
}

.social-card {
    @apply bg-gray-700/30 rounded-lg p-6 text-center text-gray-400
           hover:bg-gray-700/50 transition-all duration-300
           transform hover:-translate-y-1 flex flex-col items-center justify-center;
}

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

.fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

/* Loading Spinner */
.spinner {
    @apply inline-block w-5 h-5 border-2 border-gray-300 border-t-primary rounded-full;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    @apply bg-gray-900;
}

::-webkit-scrollbar-thumb {
    @apply bg-gray-700 rounded-lg;
}

::-webkit-scrollbar-thumb:hover {
    @apply bg-primary;
}

/* Utility Classes */
.gradient-text {
    @apply bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent;
}

.glass {
    @apply bg-gray-800/50 backdrop-blur border border-gray-700;
}

/* Responsive */
@media (max-width: 768px) {
    .terminal-body {
        font-size: 12px;
        padding: 1rem;
    }

    h1 {
        font-size: 1.875rem !important;
    }

    h2 {
        font-size: 1.5rem !important;
    }
}

/* HTMX Loading States */
.htmx-request .spinner {
    display: inline-block;
}

.htmx-request.htmx-indicator {
    display: inline-block;
}