* {
    transition-property: background-color, border-color, color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in { animation: fadeIn 0.8s ease-out; }
.animate-slide-up { animation: slideUp 0.6s ease-out; }

.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.skill-tag {
    @apply bg-gray-200 dark:bg-gray-700 px-3 py-1 rounded-full text-sm font-medium;
}

.project-card {
    @apply bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-lg transition-all duration-300;
}

.project-card:hover {
    @apply transform -translate-y-2 shadow-2xl;
}

.filter-btn {
    @apply px-4 py-2 rounded-full border-2 border-gray-300 dark:border-gray-700 hover:bg-primary hover:text-white hover:border-primary transition-all;
}

.filter-btn.active {
    @apply bg-primary text-white border-primary;
}

.prose {
    max-width: none;
}

.prose h2 { @apply text-2xl font-bold mt-8 mb-4; }
.prose h3 { @apply text-xl font-semibold mt-6 mb-3; }
.prose p { @apply mb-4 leading-relaxed; }
.prose code { @apply bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded text-sm font-mono; }
.prose pre { @apply bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto my-4; }
.prose pre code { @apply bg-transparent text-inherit p-0; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { @apply bg-gray-100 dark:bg-gray-800; }
::-webkit-scrollbar-thumb { @apply bg-primary rounded-full; }
::-webkit-scrollbar-thumb:hover { @apply bg-blue-600; }