/* Custom styles — overrides and additions beyond Tailwind */

:root {
    --color-emerald-900: #064e3b;
    --color-emerald-950: #022c22;
    --color-cream-100: #faf8f0;
    --color-gold-400: #d4a853;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--color-emerald-900);
    color: var(--color-cream-100);
}

/* Subtle text shadow for hero headline readability */
#hero-headline {
    text-shadow: 0 2px 40px rgba(2, 44, 34, 0.6);
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #022c22;
}
::-webkit-scrollbar-thumb {
    background: #d4a853;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #e8c97a;
}

/* Scroll reveal base states — always visible by default (progressive enhancement) */
.reveal-up,
.reveal-left,
.reveal-right {
    opacity: 1;
    transform: none;
    transition: opacity 0.8s ease, transform 0.8s ease;
}

/* When JS enables reveal, add hidden state via .reveal-active class */
.reveal-active.reveal-up {
    opacity: 0;
    transform: translateY(40px);
}
.reveal-active.reveal-left {
    opacity: 0;
    transform: translateX(-40px);
}
.reveal-active.reveal-right {
    opacity: 0;
    transform: translateX(40px);
}

/* Only animate when JS is active (prefers-reduced-motion check is in JS) */
@media (prefers-reduced-motion: no-preference) {
    .js-enabled .reveal-active.reveal-up {
        opacity: 0;
        transform: translateY(40px);
    }
    .js-enabled .reveal-active.reveal-left {
        opacity: 0;
        transform: translateX(-40px);
    }
    .js-enabled .reveal-active.reveal-right {
        opacity: 0;
        transform: translateX(40px);
    }
}

/* Fallback: if JS is blocked, content is still visible */
.no-js .reveal-up,
.no-js .reveal-left,
.no-js .reveal-right {
    opacity: 1;
    transform: none;
}

/* Navbar glass effect when scrolled */
.navbar-scrolled {
    background: rgba(2, 44, 34, 0.92) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(212, 168, 83, 0.15);
}

/* Gold accent line animation on hover for links */
a {
    position: relative;
}

/* Focus styles for accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--color-gold-400);
    outline-offset: 2px;
}

/* Mobile menu transition */
#mobile-menu {
    animation: slideDown 0.3s ease forwards;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hero entrance animations — only when JS is enabled */
@media (prefers-reduced-motion: no-preference) {
    .js-enabled #hero-tagline {
        animation: fadeUp 0.8s ease 0.3s forwards;
    }
    .js-enabled #hero-headline {
        animation: fadeUp 0.8s ease 0.5s forwards;
    }
    .js-enabled #hero-sub {
        animation: fadeUp 0.8s ease 0.7s forwards;
    }
    .js-enabled #hero-cta {
        animation: fadeUp 0.8s ease 0.9s forwards;
    }
    .js-enabled #scroll-indicator {
        animation: fadeIn 0.8s ease 1.3s forwards;
    }
}

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

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

/* Image loading placeholder */
img {
    background: linear-gradient(135deg, #064e3b 0%, #022c22 100%);
}

/* Form input autofill styling */
input:-webkit-autofill,
textarea:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px #064e3b inset !important;
    -webkit-text-fill-color: #faf8f0 !important;
    caret-color: #d4a853;
}