/* Custom Animations */ @keyframes float { 0%, 100% { transform: translateY(0px) rotate(0deg); } 25% { transform: translateY(-20px) rotate(2deg); } 50% { transform: translateY(-10px) rotate(-2deg); } 75% { transform: translateY(-30px) rotate(1deg); } } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } @keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 20px rgba(99, 102, 241, 0.3); } 50% { box-shadow: 0 0 40px rgba(99, 102, 241, 0.6); } } @keyframes slide-up { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes gradient-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* Animation Classes */ .animate-fade-in { animation: slide-up 0.8s ease-out forwards; } .animate-fade-in-up { opacity: 0; animation: slide-up 0.8s ease-out forwards; } .floating-orb { animation: float 8s ease-in-out infinite; } /* Company Card Styles */ .company-card { background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%); border: 1px solid rgba(255,255,255,0.06); border-radius: 24px; overflow: hidden; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; } .company-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); } .company-card:hover { transform: translateY(-4px); border-color: rgba(99, 102, 241, 0.3); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 40px rgba(99, 102, 241, 0.15); } /* Rank Badge */ .rank-badge { background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); box-shadow: 0 0 20px rgba(99, 102, 241, 0.4); } .rank-badge.top { background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); box-shadow: 0 0 30px rgba(251, 191, 36, 0.5); animation: pulse-glow 2s ease-in-out infinite; } /* Filter Buttons */ .filter-btn { color: rgba(255, 255, 255, 0.6); border: 1px solid rgba(255, 255, 255, 0.1); background: transparent; } .filter-btn.active { background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); color: white; border-color: transparent; } .filter-btn:hover:not(.active) { background: rgba(255, 255, 255, 0.05); } /* Stats Grid */ .stat-item { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05); transition: all 0.3s ease; } .stat-item:hover { background: rgba(99, 102, 241, 0.05); border-color: rgba(99, 102, 241, 0.2); } /* Feature Tags */ .feature-tag { background: rgba(99, 102, 241, 0.1); border: 1px solid rgba(99, 102, 241, 0.2); color: #818cf8; transition: all 0.3s ease; } .feature-tag:hover { background: rgba(99, 102, 241, 0.2); transform: translateY(-2px); } /* Specialization Badge */ .spec-badge { background: linear-gradient(90deg, rgba(139, 92, 246, 0.15), rgba(99, 102, 241, 0.15)); border-left: 3px solid #8b5cf6; } /* Rating Stars */ .star-filled { color: #fbbf24; } .star-empty { color: rgba(255, 255, 255, 0.2); } /* Visit Website Button */ .btn-website { background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%); background-size: 200% 100%; transition: all 0.3s ease; } .btn-website:hover { background-position: 100% 0; transform: translateX(4px); } /* Expand/Collapse */ .company-details { max-height: 0; overflow: hidden; transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .company-details.expanded { max-height: 2000px; } .expand-btn { transition: transform 0.3s ease; } .expand-btn.rotated { transform: rotate(180deg); } /* Progress Bar Animation */ .progress-bar { background: linear-gradient(90deg, #6366f1, #8b5cf6, #ec4899); background-size: 200% 100%; animation: gradient-shift 3s ease infinite; } /* Country Flag Indicator */ .country-indicator { position: absolute; top: 16px; right: 16px; font-size: 24px; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3)); z-index: 10; } /* Responsive Typography */ @media (max-width: 640px) { .company-card h2 { font-size: 1.125rem; } .stat-value { font-size: 1.25rem; } } /* Loading Skeleton */ .skeleton { background: linear-gradient(90deg, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.05) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; } /* Scrollbar Styling */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: #0f172a; } ::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #475569; } /* Selection Color */ ::selection { background: rgba(99, 102, 241, 0.3); color: white; } /* Focus Visible */ *:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; } /* Reduced Motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }