/* Custom specific CSS enhancements to complement Tailwind */

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

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

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

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

.animate-bounce-slow {
    animation: bounceSlow 3s ease-in-out infinite;
}

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

/* Scroll reveal classes set up via JavaScript */
.reveal-up, .reveal-left, .reveal-right {
    opacity: 0;
    transition: all 0.8s ease-out;
}

.reveal-up { transform: translateY(30px); }
.reveal-left { transform: translateX(-30px); }
.reveal-right { transform: translateX(30px); }

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

/* Navigation Sticky Styles applied by JS */
.nav-scrolled {
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    border-bottom-color: #f1f5f9; /* Tailwind gray-100 */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* Image wrappers styling */
.hero-image-wrapper {
    perspective: 1000px;
}

.hero-image {
    transition: transform 0.5s ease-out, filter 0.5s ease-out;
}

.hero-image:hover {
    transform: scale(1.02) rotateX(2deg);
    filter: drop-shadow(0 20px 25px rgba(16, 185, 129, 0.1));
}