/* Custom styles to complement Tailwind */
html {
    scroll-behavior: smooth;
}

body {
    background-color: #022c22; /* Fallback */
}

/* Animation Utilities */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 40px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.animate-fade-in-up {
    animation-name: fadeInUp;
    animation-duration: 1s;
    animation-fill-mode: both;
}

.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }

/* Scroll Reveal Classes (Progressive Enhancement) */
.reveal-up, .reveal-left, .reveal-right {
    opacity: 1; /* Default visible for no-JS */
    transform: none;
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.reveal-up { transform: translateY(0); }
.reveal-left { transform: translateX(0); }
.reveal-right { transform: translateX(0); }

/* JS will add these classes when scrolled into view */
.js-enabled .reveal-up { transform: translateY(30px); opacity: 0; }
.js-enabled .reveal-left { transform: translateX(-30px); opacity: 0; }
.js-enabled .reveal-right { transform: translateX(30px); opacity: 0; }

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

/* Focus styles for accessibility */
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible {
    outline: 2px solid #d4af37;
    outline-offset: 2px;
}