/* CSS variables and base setup */
:root {
    --color-green-900: #0E3B24;
    --color-green-700: #14613A;
    --color-gold-500: #F2C230;
    --color-cream-100: #FBF7E8;
    --color-ink-900: #1A1A17;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Hide scrollbar but allow scrolling */
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Scroll Animations */
.scroll-fade {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

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

@media (prefers-reduced-motion: reduce) {
    .scroll-fade {
        transition: none;
        transform: none;
        opacity: 1;
    }
}

/* Typography Details */
.text-stroke-gold {
    -webkit-text-stroke: 2px var(--color-gold-500);
    color: transparent;
}

/* Custom brush stroke rule */
.brush-rule {
    display: block;
    width: 140px;
    height: 12px;
    margin-top: 0.5rem;
    background-image: url('data:image/svg+xml;utf8,<svg preserveAspectRatio="none" viewBox="0 0 140 12" xmlns="http://www.w3.org/2000/svg"><path d="M2 6c25-3 50 2 75-1s45-2 60 1" stroke="%23F2C230" stroke-width="4" stroke-linecap="round" fill="none"/></svg>');
    background-repeat: no-repeat;
    background-position: left center;
}
.rtl .brush-rule {
    background-position: right center;
    transform: scaleX(-1);
}

/* Background Leaf Silhouette */
.bg-leaf-pattern {
    position: relative;
}
.bg-leaf-pattern::before {
    content: '';
    position: absolute;
    top: -10%;
    right: -10%;
    width: 60%;
    height: 80%;
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M50 0C60 20 80 40 100 50C80 60 60 80 50 100C40 80 20 60 0 50C20 40 40 20 50 0Z"/></svg>');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    opacity: 0.06;
    pointer-events: none;
    z-index: 0;
}
.bg-leaf-pattern.leaf-left::before {
    right: auto;
    left: -10%;
    transform: scaleX(-1);
}

/* RTL layout helpers for positioning */
.rtl .text-left {
    text-align: right;
}
.rtl .ml-auto {
    margin-left: 0;
    margin-right: auto;
}