/* Custom Styles for CodeKidz v2 */
/* Extends Tailwind setup */

:root {
    --brand-yellow: #ffe600;
    --brand-purple: #d7a0fe;
    --brand-dark: #1f2937;
}

/* Base custom utilities */
.font-poppins {
    font-family: 'Poppins', sans-serif;
}

/* Reusable Mario Block Button from v1, converted to classes for v2 */
.mario-btn {
    position: relative;
    background-color: #ffcc00;
    border: 3px solid #e6b800;
    border-radius: 6px;
    box-shadow: inset 3px 3px #fff176, inset -3px -3px #c28f00, 0 4px #b8860b;
    image-rendering: pixelated;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
    cursor: pointer;
}

.mario-btn:hover {
    background-color: #ffe066;
}

.mario-btn:active {
    transform: translateY(4px);
    box-shadow: inset 3px 3px #fff176, inset -3px -3px #c28f00, 0 0px #b8860b;
}

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

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

/* Pattern Backgrounds */
.bg-pattern-dots {
    background-color: #ffffff;
    background-image: radial-gradient(#d1d5db 2px, transparent 2px);
    background-size: 32px 32px;
}

/* Text Stroke / Outline for Hero Title */
.text-outline {
    -webkit-text-stroke: 3px #000;
    text-shadow: 6px 6px 0 #000; /* Deep drop shadow */
}

@media (max-width: 768px) {
    .text-outline {
        -webkit-text-stroke: 2px #000;
        text-shadow: 4px 4px 0 #000;
    }
}

/* Flying Bee Animation */
@keyframes fly-bounce {
    0%, 100% { transform: translateY(-10px); }
    50% { transform: translateY(10px); }
}
.animate-fly-bounce {
    animation: fly-bounce 1.5s ease-in-out infinite;
}