@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    --tw-color-primary: #166534;
}

@keyframes float-slow {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-25px) rotate(15deg); }
}
@keyframes float-medium {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-40px) rotate(-12deg); }
}
@keyframes float-fast {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(25deg); }
}

.animate-float-slow { animation: float-slow 18s ease-in-out infinite; }
.animate-float-medium { animation: float-medium 14s ease-in-out infinite; }
.animate-float-fast { animation: float-fast 9s ease-in-out infinite; }

.group:hover {
    box-shadow: 0 25px 50px -12px rgb(16 185 129 / 0.25);
}

#navbar {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#home {
    background-attachment: fixed;
}

input:focus, textarea:focus {
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2);
}

#mobile-menu {
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.bg-white\/10 {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

footer {
    background-image: radial-gradient(circle at 25% 25%, rgba(16, 185, 129, 0.15) 1px, transparent 0);
    background-size: 60px 60px;
}