/* Premium UI Styles for OpenDida & Partners Team Portfolio */

:root {
    --brand-blue: #1e40af;
    --brand-light: #3b82f6;
    --brand-dark: #1e3a8a;
    --gradient-primary: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-light) 100%);
    --gradient-hero: linear-gradient(135deg, #0f172a 0%, var(--brand-blue) 50%, var(--brand-dark) 100%);
    --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --shadow-brand: 0 10px 30px rgba(30, 64, 175, 0.3);
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
    background: var(--brand-light);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--brand-blue);
}

/* Team Member Card Styles */
.team-card {
    @apply bg-white rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300 overflow-hidden;
    border: 1px solid rgba(226, 232, 240, 0.8);
}

.team-card:hover {
    border-color: rgba(59, 130, 246, 0.3);
}

.team-card .avatar {
    @apply w-24 h-24 rounded-full mx-auto mb-4 bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center text-white text-2xl font-bold;
}

.team-card .name {
    @apply text-xl font-bold text-gray-900 mb-2 text-center;
}

.team-card .position {
    @apply text-brand-blue font-semibold text-center mb-3;
}

.team-card .organization {
    @apply inline-block px-3 py-1 rounded-full text-xs font-medium mb-4;
}

.team-card .organization.leadership {
    @apply bg-purple-100 text-purple-800;
}

.team-card .organization.vanahom {
    @apply bg-green-100 text-green-800;
}

.team-card .organization.dida {
    @apply bg-blue-100 text-blue-800;
}

.team-card .bio {
    @apply text-gray-600 text-sm leading-relaxed mb-4;
}

.team-card .expertise {
    @apply flex flex-wrap gap-1 mb-4;
}

.team-card .expertise-tag {
    @apply px-2 py-1 bg-gray-100 text-gray-700 text-xs rounded-md;
}

.team-card .expertise-tag.more {
    @apply bg-brand-blue text-white cursor-pointer hover:bg-brand-dark;
}

.team-card .contact {
    @apply flex justify-center space-x-3 pt-4 border-t border-gray-100;
}

.team-card .contact-link {
    @apply w-8 h-8 rounded-full bg-gray-100 hover:bg-brand-blue hover:text-white transition-colors duration-200 flex items-center justify-center text-gray-600;
}

/* Advanced Animations */
.team-card.fade-in {
    animation: fadeInUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    opacity: 0;
    transform: translateY(40px) scale(0.95);
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Floating Animation */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

.float-animation {
    animation: float 6s ease-in-out infinite;
}

/* Gradient Animation */
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.gradient-animated {
    background-size: 200% 200%;
    animation: gradientShift 8s ease infinite;
}

/* Parallax Scroll Effect */
.parallax-element {
    transform: translateZ(0);
    will-change: transform;
}

/* Enhanced Loading States */
.loading-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 37%, #f0f0f0 63%);
    background-size: 400% 100%;
    animation: loading 1.4s ease infinite;
}

@keyframes loading {
    0% { background-position: 100% 50%; }
    100% { background-position: -100% 50%; }
}

/* Filter button animations */
.filter-btn {
    @apply transition-all duration-200 ease-in-out;
}

.filter-btn.active {
    @apply bg-brand-blue text-white shadow-md;
}

.filter-btn:not(.active):hover {
    @apply bg-gray-300;
}

/* Search input focus styles */
#search-input:focus {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Advanced Responsive Design */
@media (max-width: 1024px) {
    .team-card {
        @apply mx-auto;
    }
}

@media (max-width: 768px) {
    .team-card {
        @apply mx-auto max-w-sm;
        margin-bottom: 2rem;
    }
    
    .team-card .avatar {
        @apply w-24 h-24 text-xl;
    }
    
    .team-card .name {
        @apply text-lg;
    }
    
    /* Mobile navigation adjustments */
    nav .max-w-7xl {
        @apply px-4;
    }
    
    /* Hero section mobile */
    .hero-background {
        @apply py-16;
    }
    
    .hero-background h1 {
        @apply text-4xl leading-tight;
    }
    
    .hero-background p {
        @apply text-lg px-4;
    }
}

@media (max-width: 640px) {
    .team-card {
        @apply rounded-2xl p-4;
    }
    
    .team-card .avatar {
        @apply w-20 h-20 text-lg mb-4;
    }
    
    .team-card .name {
        @apply text-base;
    }
    
    .team-card .position {
        @apply text-sm;
    }
    
    .team-card .bio {
        @apply text-xs;
    }
    
    /* Mobile hero adjustments */
    .hero-background h1 {
        @apply text-3xl;
    }
    
    .hero-background .grid {
        @apply grid-cols-2 gap-4;
    }
}

/* Animation Classes */
.animate-in {
    animation: slideInUp 0.6s ease-out forwards;
}

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

/* Performance optimizations */
.team-card,
.hero-background,
nav {
    will-change: transform;
    transform: translateZ(0);
}

/* Loading state */
.loading {
    @apply animate-pulse;
}

.loading .team-card {
    @apply bg-gray-200;
}

/* No results state */
#no-results {
    @apply opacity-0 transition-opacity duration-300;
}

#no-results.show {
    @apply opacity-100;
}

/* Hero section enhancement */
.hero-gradient {
    background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-light) 50%, var(--brand-dark) 100%);
}

/* Statistics counter animation */
.stat-number {
    @apply transition-all duration-1000 ease-out;
}

/* Language toggle enhancement */
.lang-toggle button.active {
    @apply bg-white text-brand-blue shadow-sm;
}

.lang-toggle button:not(.active) {
    @apply text-gray-600 hover:text-brand-blue;
}

/* Mobile filter toggle */
@media (max-width: 768px) {
    #mobile-filters {
        @apply transition-all duration-300 ease-in-out max-h-0 overflow-hidden;
    }
    
    #mobile-filters.show {
        @apply max-h-40;
    }
}

/* Smooth transitions for all interactive elements */
* {
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

/* Enhanced Focus States */
button:focus,
input:focus {
    outline: 2px solid var(--brand-light);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

/* Glass Morphism Effects */
.glass-morphism {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Micro-interactions */
.micro-bounce {
    transition: transform 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.micro-bounce:active {
    transform: scale(0.95);
}

/* Enhanced Shadows */
.shadow-brand {
    box-shadow: var(--shadow-brand);
}

.shadow-glow {
    box-shadow: 0 0 40px rgba(59, 130, 246, 0.3);
}

/* Navigation Enhancements */
nav {
    transition: all 0.3s ease;
}

nav.scrolled {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* Hero Section Enhancements */
.hero-background {
    background: var(--gradient-hero);
    position: relative;
    overflow: hidden;
}

.hero-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="white" opacity="0.05"/></pattern></defs><rect width="100%" height="100%" fill="url(%23grain)"/></svg>');
    pointer-events: none;
}

/* Print styles */
@media print {
    .team-card {
        @apply shadow-none border border-gray-300;
        break-inside: avoid;
        page-break-inside: avoid;
    }
}