* {
    font-family: 'Bricolage Grotesque', sans-serif;
}

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

.animate-bounce-slow {
    animation: bounce-slow 2s ease-in-out infinite;
}

@keyframes banana-spin {
    0% {
        transform: rotate(0deg) scale(1);
    }
    25% {
        transform: rotate(90deg) scale(1.1);
    }
    50% {
        transform: rotate(180deg) scale(1);
    }
    75% {
        transform: rotate(270deg) scale(1.1);
    }
    100% {
        transform: rotate(360deg) scale(1);
    }
}

.banana-spinner {
    animation: banana-spin 1.5s ease-in-out infinite;
    display: inline-block;
}

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

::-webkit-scrollbar-track {
    background: #fef3c7;
    border-radius: 10px;
}

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

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, #f59e0b, #ea580c);
}

/* Input focus glow */
input:focus {
    box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.3);
}

/* Button press effect */
button:active {
    transform: scale(0.98);
}

/* Smooth image loading */
img {
    transition: opacity 0.3s ease;
}

/* Glass morphism effect enhancement */
.backdrop-blur-sm {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Selection color */
::selection {
    background: #fbbf24;
    color: #78350f;
}

/* Mobile touch improvements */
@media (hover: none) {
    button:hover {
        transform: none;
    }
    
    .group:hover .group-hover\:opacity-100 {
        opacity: 1;
    }
}

/* Subtle gradient animation for header */
@keyframes gradient-shift {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

h1 {
    background-size: 200% 200%;
    animation: gradient-shift 5s ease infinite;
}