/* ========== BASE & RESET ========== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { min-height: 100vh; }
img { max-width: 100%; height: auto; display: block; }
button { cursor: pointer; }

/* ========== SCROLL REVEAL ========== */
.scroll-reveal {
    opacity: 1;
    transform: none;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: no-preference) {
    .scroll-reveal {
        opacity: 0;
        transform: translateY(24px);
    }
    .scroll-reveal.revealed {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Staggered delays */
.scroll-reveal:nth-child(1) { transition-delay: 0.05s; }
.scroll-reveal:nth-child(2) { transition-delay: 0.1s; }
.scroll-reveal:nth-child(3) { transition-delay: 0.15s; }
.scroll-reveal:nth-child(4) { transition-delay: 0.2s; }
.scroll-reveal:nth-child(5) { transition-delay: 0.25s; }
.scroll-reveal:nth-child(6) { transition-delay: 0.3s; }

/* ========== MOBILE MENU ========== */
.mobile-menu-backdrop {
    opacity: 0;
    transition: opacity 0.3s ease;
}
.mobile-menu-backdrop.active {
    opacity: 1;
}
#mobile-menu:not(.hidden) {
    display: block;
}
#mobile-menu.hidden {
    display: none;
}
.mobile-menu-link {
    transform: translateX(20px);
    opacity: 0;
    transition: transform 0.25s ease, opacity 0.25s ease, background-color 0.15s ease, color 0.15s ease;
}
.mobile-menu-link.active {
    transform: translateX(0);
    opacity: 1;
}

/* ========== NAV SCROLL STATE ========== */
#site-header.scrolled nav > div {
    box-shadow: 0 4px 24px rgba(0,0,0,0.08);
}

/* ========== SELECTION ========== */
::selection {
    background-color: #99f6e4;
    color: #042f2e;
}