/* ── Base & Reset ── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    overflow-x: hidden;
}

img {
    display: block;
    max-width: 100%;
}

::selection {
    background-color: #064e3b;
    color: #f5f0e8;
}

/* ── Scroll Reveal (progressive enhancement) ── */
@media (prefers-reduced-motion: no-preference) {
    .reveal-on-scroll {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .reveal-on-scroll.is-visible {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

.animate-fade-in {
    animation: fadeIn 0.8s ease-out both;
}

.animate-slide-up {
    animation: fadeInUp 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.animate-slide-up-delay {
    animation: fadeInUp 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s both;
}

.animate-slide-up-delay-2 {
    animation: fadeInUp 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s both;
}

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

/* ── Navbar Scroll State ── */
#site-header.scrolled {
    background-color: rgba(250, 248, 243, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 rgba(6, 78, 59, 0.08);
}

#site-header.scrolled .font-display {
    color: #064e3b;
}

/* ── Mobile Menu ── */
#mobile-menu.open {
    opacity: 1;
    pointer-events: all;
}

#mobile-menu.close {
    opacity: 0;
    pointer-events: none;
}

/* ── Decorative Line Accents ── */
.section-divider {
    width: 60px;
    height: 1px;
    background: linear-gradient(to right, transparent, #6ee7b7, transparent);
    margin: 0 auto;
}

/* ── Form Focus Styles ── */
input:focus, textarea:focus {
    outline: none;
    box-shadow: 0 0 0 1px rgba(110, 231, 183, 0.3);
}

/* ── Smooth Scroll Offset for Fixed Nav ── */
section[id] {
    scroll-margin-top: 80px;
}

/* ── Responsive Adjustments ── */
@media (max-width: 767px) {
    section[id] {
        scroll-margin-top: 60px;
    }
}