/* Custom utility styles and animations not fully covered by Tailwind */
@layer utilities {
    .btn-primary {
        @apply inline-block bg-wood text-white px-8 py-3 rounded-full font-semibold transition-all duration-300 hover:bg-wood-dark hover:-translate-y-1 hover:shadow-lg hover:shadow-wood/30;
    }

    .btn-outline {
        @apply inline-block bg-transparent text-white border-2 border-white px-8 py-3 rounded-full font-semibold transition-all duration-300 hover:bg-white hover:text-bg-dark hover:-translate-y-1;
    }
}

/* Custom Animations */
.animate-bounce-slow {
    animation: bounce 3s infinite;
}

@keyframes bounce {

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

    50% {
        transform: translateY(5%);
    }
}

/* Scroll Revel Effects */
.reveal-up {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s ease-out;
}

.reveal-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: all 0.8s ease-out;
}

.reveal-right {
    opacity: 0;
    transform: translateX(40px);
    transition: all 0.8s ease-out;
}

.reveal-up.active,
.reveal-left.active,
.reveal-right.active {
    opacity: 1;
    transform: translate(0);
}

/* Initial fade in */
.animate-fade-in-up {
    animation: fadeInUp 1s ease-out forwards;
}

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

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