@keyframes fadeIn {

    from { opacity: 0; transform: translateY(20px); }

    to { opacity: 1; transform: translateY(0); }

}

@keyframes slideUp {

    from { transform: translateY(50px); opacity: 0; }

    to { transform: translateY(0); opacity: 1; }

}

@keyframes float {

    0%, 100% { transform: translateY(0px); }

    50% { transform: translateY(-15px); }

}

@keyframes glow {

    from { text-shadow: 0 0 20px rgba(255, 255, 255, 0.2); }

    to { text-shadow: 0 0 30px rgba(255, 255, 255, 0.4); }

}

@keyframes blurIn {

    from { filter: blur(10px); opacity: 0; }

    to { filter: blur(0); opacity: 1; }

}

@keyframes scaleIn {

    from { transform: scale(0.8); opacity: 0; }

    to { transform: scale(1); opacity: 1; }

}



.glass-morphism {

    background: rgba(255, 255, 255, 0.05);

    backdrop-filter: blur(20px);

    border: 1px solid rgba(255, 255, 255, 0.1);

}



.glass-dark {

    background: rgba(0, 0, 0, 0.4);

    backdrop-filter: blur(20px);

    border: 1px solid rgba(255, 255, 255, 0.1);

}
#mobile-menu.glass-dark {
    background: rgba(0, 0, 0, 0.85);
}


.neo-button {

    background: linear-gradient(145deg, #f59e0b, #d97706);

    box-shadow:

            0 4px 15px rgba(245, 158, 11, 0.4),

            inset 0 1px 0 rgba(255, 255, 255, 0.2);

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}



.neo-button:hover {

    transform: translateY(-2px);

    box-shadow:

            0 6px 20px rgba(245, 158, 11, 0.6),

            inset 0 1px 0 rgba(255, 255, 255, 0.3);

}



.card-modern {

    background: linear-gradient(145deg, rgba(31, 41, 55, 0.8), rgba(17, 24, 39, 0.9));

    backdrop-filter: blur(20px);

    border: 1px solid rgba(255, 255, 255, 0.1);

    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

}



.card-modern:hover {

    transform: translateY(-12px) scale(1.02);

    box-shadow:

            0 25px 50px rgba(0, 0, 0, 0.5),

            0 0 0 1px rgba(245, 158, 11, 0.2);

}



.text-gradient {

    background: linear-gradient(135deg, #fbbf24, #f59e0b, #d97706, #92400e);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}



.hero-gradient {

    background:

            radial-gradient(circle at 20% 80%, rgba(245, 158, 11, 0.15) 0%, transparent 50%),

            radial-gradient(circle at 80% 20%, rgba(217, 119, 6, 0.15) 0%, transparent 50%),

            radial-gradient(circle at 40% 40%, rgba(146, 64, 14, 0.1) 0%, transparent 50%);

}



.floating-elements::before {

    content: '';

    position: absolute;

    top: 10%;

    left: 10%;

    width: 100px;

    height: 100px;

    background: radial-gradient(circle, rgba(245, 158, 11, 0.1) 0%, transparent 70%);

    border-radius: 50%;

    animation: float 6s ease-in-out infinite;

}



.floating-elements::after {

    content: '';

    position: absolute;

    bottom: 10%;

    right: 10%;

    width: 150px;

    height: 150px;

    background: radial-gradient(circle, rgba(217, 119, 6, 0.08) 0%, transparent 70%);

    border-radius: 50%;

    animation: float 8s ease-in-out infinite reverse;

}



.menu-item-image {

    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(217, 119, 6, 0.1));

    backdrop-filter: blur(10px);

}



.section-divider {

    background: linear-gradient(90deg, transparent, rgba(245, 158, 11, 0.5), transparent);

    height: 1px;

}

/* Modal specific styles to complement your existing CSS */
.step-content {
    animation: fadeIn 0.3s ease-in-out;
}

.modal-content {
    animation: scaleIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.meal-option {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.meal-option:hover {
    transform: translateY(-4px);
}

.form-input {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.form-input:focus {
    transform: translateY(-1px);
    box-shadow: 0 8px 25px rgba(245, 158, 11, 0.15);
}