/* ========== BASE & RESET ========== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* ========== ANIMATIONS ========== */
@keyframes float-slow {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(5deg); }
}
@keyframes float-medium {
    0%, 100% { transform: translateY(0) rotate(45deg); }
    50% { transform: translateY(-15px) rotate(50deg); }
}
@keyframes float-fast {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.animate-float-slow { animation: float-slow 6s ease-in-out infinite; }
.animate-float-medium { animation: float-medium 4s ease-in-out infinite; }
.animate-float-fast { animation: float-fast 3s ease-in-out infinite; }

/* ========== REVEAL ANIMATIONS (Progressive Enhancement) ========== */
.reveal,
.reveal-left,
.reveal-right {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Non-JS default: all content is visible */
/* JS-enhanced: elements start hidden and animate in */
.js .reveal { opacity: 0; transform: translateY(30px); }
.js .reveal-left { opacity: 0; transform: translateX(-40px); }
.js .reveal-right { opacity: 0; transform: translateX(40px); }

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .reveal, .reveal-left, .reveal-right {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .animate-float-slow, .animate-float-medium, .animate-float-fast {
        animation: none;
    }
}

/* ========== NAVBAR SCROLL STATE ========== */
#navbar.scrolled {
    box-shadow: 0 4px 20px rgba(4, 78, 59, 0.1);
}

/* ========== MOBILE MENU ========== */
#mobileMenu.open {
    max-height: 500px;
}

#bar1.open { transform: rotate(45deg) translate(5px, 5px); }
#bar2.open { opacity: 0; }
#bar3.open { transform: rotate(-45deg) translate(5px, -5px); width: 1.5rem; }

/* ========== UTILITY ========== */
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;
}

/* ========== SCROLLBAR ========== */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #FDF8F0; }
::-webkit-scrollbar-thumb { background: #047857; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #065F46; }