/* ── Base ── */
html {
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
}

::selection {
    background-color: rgba(16, 185, 129, 0.15);
    color: #064e3b;
}

/* ── Hero Gradient ── */
.hero-gradient {
    background: linear-gradient(
        135deg,
        #022c22 0%,
        #064e3b 25%,
        #065f46 50%,
        #047857 75%,
        #059669 100%
    );
}

/* ── Scroll Reveal (progressive enhancement) ── */
@media (prefers-reduced-motion: no-preference) {
    .reveal {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .reveal-left {
        opacity: 0;
        transform: translateX(-32px);
        transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .reveal-right {
        opacity: 0;
        transform: translateX(32px);
        transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    }

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

/* ── Hero Animation ── */
@media (prefers-reduced-motion: no-preference) {
    .hero-badge {
        animation: fadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
    }

    .hero-badge h1,
    .hero-badge + h1 {
        animation: fadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both;
    }

    .hero-badge ~ p {
        animation: fadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both;
    }

    .hero-badge ~ div {
        animation: fadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.65s both;
    }
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Navigation ── */
#header {
    background: transparent;
    transition: background-color 0.4s ease, box-shadow 0.4s ease;
}

#header.scrolled {
    background: rgba(253, 248, 245, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 rgba(5, 150, 105, 0.08);
}

/* ── Philosophy Pattern ── */
.philosophy-pattern {
    background-image: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
    background-size: 24px 24px;
}

/* ── Mobile Menu Transition ── */
#mobile-menu {
    transition: opacity 0.3s ease, pointer-events 0.3s ease;
}

#mobile-menu.open {
    opacity: 1;
    pointer-events: all;
}

/* ── Image hover subtle zoom ── */
.rounded-2xl.overflow-hidden img {
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.rounded-2xl.overflow-hidden:hover img {
    transform: scale(1.03);
}