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

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

@keyframes rainbow {
    0% { color: #ff0000; }
    14% { color: #ff7f00; }
    28% { color: #ffff00; }
    42% { color: #00ff00; }
    57% { color: #0000ff; }
    71% { color: #4b0082; }
    85% { color: #9400d3; }
    100% { color: #ff0000; }
}

@keyframes confetti {
    0% { transform: translateY(0) rotate(0deg); opacity: 1; }
    100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}
/* Base styles */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: #f8fafc;
}

/* Custom component styles */
.creator-card {
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.7);
}

.creator-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Animation classes */
.animate-fadein {
    animation: fadeIn 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
}

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

.animate-bounce {
    animation: bounce 1s infinite;
}

.animate-rainbow {
    animation: rainbow 3s linear infinite;
}

.animate-pulse {
    animation: pulse 1.5s ease-in-out infinite;
}

.confetti {
    position: fixed;
    width: 10px;
    height: 10px;
    background-color: #f00;
    opacity: 0;
    z-index: 9999;
    animation: confetti 3s linear forwards;
}
.delay-100 {
    animation-delay: 100ms;
}

.delay-200 {
    animation-delay: 200ms;
}

.delay-300 {
    animation-delay: 300ms;
}

/* Premium UI elements */
.glass-effect {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.premium-shadow {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
}

.text-gradient {
    background: linear-gradient(90deg, #d946ef 0%, #8b5cf6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.smooth-scroll {
    scroll-behavior: smooth;
}

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

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

::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #d946ef, #8b5cf6);
    border-radius: 10px;
}