/* nature-theme.css — Botanical design system for Golden Leaf
   Owns: earth-tone palette overrides, leaf/vine SVG decorations,
   floating particle system, scroll-reveal animations, organic shapes.
   Does NOT own: page-specific layouts or component logic. */

/* ── EARTH-TONE PALETTE ── */
:root {
    --gold: #c9a84c;
    --gold-light: #e8d48b;
    --gold-dark: #8b6914;
    --bg-deep: #080d08;
    --bg-card: #0f1610;
    --bg-surface: #151e16;
    --text-primary: #eae8df;
    --text-secondary: #9a9580;
    --text-muted: #5c5744;
    --accent-fire: #d4603a;
    --accent-water: #3a8ee8;
    --accent-earth: #4eb86c;
    --border: rgba(78, 120, 60, 0.12);
    --border-hover: rgba(201, 168, 76, 0.22);

    /* New nature tones */
    --forest: #1a3a1a;
    --forest-light: #244d24;
    --moss: #3d6b35;
    --terracotta: #c27044;
    --bark: #5c3d2e;
    --bark-light: #7a5540;
    --canopy: rgba(30, 60, 30, 0.3);
    --leaf-gold: #b8a040;
}

/* ── LEAF PARTICLE CANVAS ── */
.leaf-particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.leaf-particle {
    position: absolute;
    width: 12px;
    height: 12px;
    opacity: 0;
    will-change: transform, opacity;
    animation: leafFloat linear infinite;
}

.leaf-particle svg {
    width: 100%;
    height: 100%;
}

@keyframes leafFloat {
    0% {
        opacity: 0;
        transform: translateY(-20px) rotate(0deg) translateX(0);
    }
    8% {
        opacity: 0.35;
    }
    50% {
        transform: translateY(50vh) rotate(180deg) translateX(40px);
    }
    92% {
        opacity: 0.25;
    }
    100% {
        opacity: 0;
        transform: translateY(105vh) rotate(360deg) translateX(-20px);
    }
}

/* Variation sizes */
.leaf-particle.sm { width: 8px; height: 8px; }
.leaf-particle.lg { width: 18px; height: 18px; }

/* ── VINE DIVIDER ── */
.vine-divider {
    position: relative;
    height: 60px;
    width: 100%;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    z-index: 2;
}

.vine-divider svg {
    width: 100%;
    max-width: 700px;
    height: 60px;
}

.vine-path {
    fill: none;
    stroke: var(--moss);
    stroke-width: 1.5;
    stroke-linecap: round;
    opacity: 0.4;
    stroke-dasharray: 800;
    stroke-dashoffset: 800;
    transition: stroke-dashoffset 1.8s ease;
}

.vine-divider.revealed .vine-path {
    stroke-dashoffset: 0;
}

.vine-leaf-accent {
    fill: var(--gold);
    opacity: 0;
    transition: opacity 0.6s ease 1.2s;
}

.vine-divider.revealed .vine-leaf-accent {
    opacity: 0.35;
}

/* ── BOTANICAL WATERMARK ── */
.botanical-watermark {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    opacity: 0.03;
}

.botanical-watermark svg {
    width: 100%;
    height: 100%;
}

.botanical-watermark.hero-fern {
    top: 5%;
    right: -5%;
    width: 500px;
    height: 600px;
    transform: rotate(15deg);
}

.botanical-watermark.left-branch {
    top: 0;
    left: -8%;
    width: 350px;
    height: 500px;
    transform: rotate(-20deg) scaleX(-1);
}

/* ── SCROLL REVEAL ── */
.scroll-reveal {
    opacity: 0;
    transform: translateY(30px) scale(0.97);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Stagger children */
.scroll-reveal-stagger > * {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.scroll-reveal-stagger.revealed > *:nth-child(1) { transition-delay: 0.1s; opacity: 1; transform: translateY(0); }
.scroll-reveal-stagger.revealed > *:nth-child(2) { transition-delay: 0.25s; opacity: 1; transform: translateY(0); }
.scroll-reveal-stagger.revealed > *:nth-child(3) { transition-delay: 0.4s; opacity: 1; transform: translateY(0); }
.scroll-reveal-stagger.revealed > *:nth-child(4) { transition-delay: 0.55s; opacity: 1; transform: translateY(0); }

/* ── ORGANIC HOVER EFFECTS ── */
.organic-hover {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                border-color 0.3s ease,
                box-shadow 0.4s ease;
}

.organic-hover:hover {
    transform: translateY(-6px) scale(1.015);
    box-shadow: 0 12px 40px rgba(30, 60, 30, 0.25),
                0 0 0 1px rgba(78, 184, 108, 0.08);
}

/* ── BLOOM BUTTON EFFECT ── */
.btn-bloom {
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btn-bloom::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(201, 168, 76, 0.25) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.btn-bloom:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 6px 24px rgba(201, 168, 76, 0.2);
}

.btn-bloom:hover::after {
    opacity: 1;
}

/* ── EARTH TEXTURE OVERLAY ── */
.earth-texture::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(30, 60, 20, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(201, 168, 76, 0.03) 0%, transparent 40%),
        radial-gradient(ellipse at 50% 80%, rgba(90, 60, 30, 0.05) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

/* ── ORGANIC CARD BORDERS ── */
.organic-card {
    border-radius: 24px;
    border: 1px solid rgba(78, 120, 60, 0.12);
    background: var(--bg-card);
    position: relative;
    overflow: hidden;
}

.organic-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--moss), var(--gold), transparent);
    opacity: 0.5;
}

/* ── GOLDEN LEAF MOTIF ── */
.leaf-motif {
    display: inline-block;
    width: 20px;
    height: 20px;
    position: relative;
}

.leaf-motif svg {
    width: 100%;
    height: 100%;
}

/* ── SECTION NATURE BORDERS ── */
.nature-border-top {
    border-top: 1px solid rgba(78, 120, 60, 0.15);
    position: relative;
}

.nature-border-top::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201, 168, 76, 0.15), rgba(78, 184, 108, 0.1), transparent);
}

/* ── NAV NATURE STYLING ── */
nav {
    background: rgba(8, 13, 8, 0.92) !important;
    border-bottom: 1px solid rgba(78, 120, 60, 0.12) !important;
}

/* ── FOOTER NATURE STYLING ── */
.nature-footer {
    border-top: 1px solid rgba(78, 120, 60, 0.12);
    position: relative;
}

.nature-footer::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 20%;
    right: 20%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201, 168, 76, 0.2), transparent);
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
    .leaf-particles { display: none; }
    .botanical-watermark { display: none; }
    .vine-divider { height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
    .leaf-particle,
    .scroll-reveal,
    .scroll-reveal-stagger > *,
    .organic-hover,
    .btn-bloom {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}