/* Custom animations to replace framer-motion */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

@keyframes modalIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
}

.animate-fade-in-right {
    animation: fadeInRight 0.8s ease-out forwards;
}

.delay-200 {
    animation-delay: 0.2s;
}

.floating {
    animation: float 4s ease-in-out infinite;
}

.animate-modal-in {
    animation: modalIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Scroll Reveal classes */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Prose for Modals */
.prose-veg h3 {
    color: #111827;
    font-size: 1.25rem;
    font-weight: 700;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}
.prose-veg p {
    color: #4b5563;
    line-height: 1.75;
    margin-bottom: 1rem;
}
.prose-veg ul {
    list-style-type: disc;
    padding-left: 1.5rem;
    color: #4b5563;
    margin-bottom: 1rem;
}
.prose-veg li {
    margin-bottom: 0.5rem;
}
.prose-veg strong {
    color: #111827;
    font-weight: 600;
}