@tailwind base;
@tailwind components;
@tailwind utilities;

.font-pacifico {
    font-family: 'Pacifico', cursive;
}

.hexagon {
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.honeycomb-pattern {
    background-image: 
        radial-gradient(circle, transparent 20%, #f59e0b 20%, #f59e0b 80%, transparent 80%, transparent),
        radial-gradient(circle, transparent 20%, #f59e0b 20%, #f59e0b 80%, transparent 80%, transparent);
    background-size: 60px 60px;
    background-position: 0 0, 30px 30px;
}

.bee {
    animation: fly 8s infinite ease-in-out;
}

@keyframes fly {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(20px, -15px) rotate(5deg);
    }
    50% {
        transform: translate(-15px, 10px) rotate(-5deg);
    }
    75% {
        transform: translate(10px, 5px) rotate(3deg);
    }
}

.bubbles {
    animation: bubble 3s infinite ease-in-out;
}

@keyframes bubble {
    0%, 100% {
        transform: translateY(0) translateX(-50%);
    }
    50% {
        transform: translateY(-5px) translateX(-50%);
    }
}