@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Rubik:wght@300;400;500;600;700;800&display=swap');

html { scroll-behavior: smooth; }

@layer utilities {
    .bg-food-primary { background-color: #E11D48; } /* Crimson Red */
    .bg-food-secondary { background-color: #F59E0B; } /* Amber Yellow */
    .bg-food-dark { background-color: #1F2937; }
    .bg-food-light { background-color: #FFFBEB; } /* Very Light Yellow */
    
    .text-food-primary { color: #E11D48; }
    .text-food-secondary { color: #F59E0B; }
    .text-food-dark { color: #1F2937; }
    
    .font-bebas { font-family: 'Bebas Neue', cursive; }
    .font-rubik { font-family: 'Rubik', sans-serif; }
}

body {
    font-family: 'Rubik', sans-serif;
    color: #4B5563;
    background-color: #FFFBEB;
}

.food-btn {
    @apply inline-flex items-center justify-center px-10 py-4 bg-[#E11D48] text-white font-bebas text-2xl tracking-widest rounded-full hover:bg-[#BE123C] hover:scale-105 transition-all duration-300 shadow-[0_10px_20px_rgba(225,29,72,0.3)];
}

.food-btn-outline {
    @apply inline-flex items-center justify-center px-10 py-4 border-2 border-[#E11D48] text-[#E11D48] font-bebas text-2xl tracking-widest rounded-full hover:bg-[#E11D48] hover:text-white hover:scale-105 transition-all duration-300;
}

/* Wavy Background */
.wavy-bg {
    background-color: #FFFBEB;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M54.627 0l.83.83-54.628 54.628-.83-.829L54.627 0zm-5.656 0l.828.828-48.971 48.972-.829-.829L48.971 0zm-5.657 0l.829.828-43.314 43.315-.828-.829L43.314 0zm-5.657 0l.829.828-37.657 37.658-.829-.829L37.657 0zm-5.657 0l.828.828-32 32-.828-.828L32 0zm-5.657 0l.829.828-26.343 26.344-.828-.829L26.343 0zm-5.657 0l.829.828-20.686 20.687-.829-.829L20.686 0zm-5.657 0l.828.828-15.029 15.03-.828-.829L15.029 0zm-5.657 0l.829.828-9.372 9.373-.829-.829L9.372 0z' fill='%23F59E0B' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
}

/* Menu Item Hover */
.menu-card {
    @apply bg-white rounded-3xl p-6 shadow-md transition-all duration-300 border-2 border-transparent relative overflow-hidden;
}

.menu-card:hover {
    @apply border-[#F59E0B] shadow-2xl transform -translate-y-2;
}

.menu-card img {
    @apply transition-transform duration-500;
}

.menu-card:hover img {
    @apply scale-110 rotate-3;
}

/* Floating Ingredients Animation */
.float-anim {
    animation: floating 6s ease-in-out infinite;
}

.float-anim-delay {
    animation: floating 6s ease-in-out 3s infinite;
}

@keyframes floating {
    0% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(10deg); }
    100% { transform: translateY(0px) rotate(0deg); }
}