/* footprint.market - Living Soil Cross-Section */
/* Palette: Pressed Linen #F5EDE0 | Humus Brown #5C4033 | Mycelium Tan #C4A875 | Peat Black #2C1810 | Canopy Moss #6B8F5E | Subsoil Clay #B8956A | Seedling Cream #EDE4D3 | Autumn Ember #C26B3F */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
    --linen:#F5EDE0;
    --humus:#5C4033;
    --mycelium:#C4A875;
    --peat:#2C1810;
    --moss:#6B8F5E;
    --clay:#B8956A;
    --cream:#EDE4D3;
    --ember:#C26B3F;
    --ease-root:cubic-bezier(0.25,0.46,0.45,0.94);
}

html{scroll-behavior:smooth}

body{
    background:var(--linen);
    color:var(--humus);
    font-family:'Lora',serif;
    font-weight:400;
    font-size:clamp(0.95rem,1.2vw,1.15rem);
    line-height:1.72;
    overflow-x:hidden;
}

/* Soil particle texture */
body::before{
    content:'';
    position:fixed;
    top:0;left:0;
    width:100%;height:100%;
    background:
        radial-gradient(circle 2px at 15% 25%,rgba(92,64,51,0.06),transparent 3px),
        radial-gradient(circle 1px at 45% 60%,rgba(196,168,117,0.05),transparent 2px),
        radial-gradient(circle 3px at 75% 35%,rgba(184,149,106,0.04),transparent 4px),
        radial-gradient(circle 1px at 30% 80%,rgba(92,64,51,0.05),transparent 2px),
        radial-gradient(circle 2px at 85% 70%,rgba(196,168,117,0.04),transparent 3px),
        radial-gradient(circle 1px at 55% 15%,rgba(107,143,94,0.03),transparent 2px);
    pointer-events:none;
    z-index:0;
}

/* Soil horizon scroll indicator */
.scroll-horizon{
    position:fixed;
    left:0;top:0;
    width:3px;
    height:100%;
    z-index:100;
    background:rgba(92,64,51,0.1);
}

.horizon-fill{
    width:100%;
    height:0%;
    background:linear-gradient(
        to bottom,
        #2C1810 0%,#2C1810 20%,
        #6B4F3A 20%,#6B4F3A 40%,
        #B8956A 40%,#B8956A 60%,
        #D4C5A9 60%,#D4C5A9 80%,
        #8A8274 80%,#8A8274 100%
    );
    transition:height 0.15s linear;
}

/* Section base */
.section{
    position:relative;
    z-index:2;
}

/* === CANOPY === */
.canopy{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--linen);
    overflow:hidden;
}

.leaf-scatter{
    position:absolute;
    top:0;left:0;
    width:100%;height:100%;
    pointer-events:none;
}

.leaf{
    position:absolute;
    width:80px;height:80px;
    opacity:0.06;
    transition:transform 0.3s var(--ease-root);
}

/* Japanese maple leaf clip-path */
.leaf-maple{
    background:var(--moss);
    clip-path:polygon(50% 0%,61% 15%,80% 10%,72% 28%,95% 35%,75% 45%,85% 65%,65% 55%,50% 80%,35% 55%,15% 65%,25% 45%,5% 35%,28% 28%,20% 10%,39% 15%);
}

/* Willow leaf clip-path */
.leaf-willow{
    background:var(--moss);
    clip-path:polygon(50% 0%,65% 20%,70% 45%,65% 70%,50% 100%,35% 70%,30% 45%,35% 20%);
    width:40px;height:90px;
}

/* Catalpa leaf clip-path */
.leaf-catalpa{
    background:var(--moss);
    clip-path:polygon(50% 0%,70% 15%,85% 35%,88% 55%,78% 75%,60% 88%,50% 95%,40% 88%,22% 75%,12% 55%,15% 35%,30% 15%);
    width:100px;height:100px;
}

.canopy-content{
    text-align:left;
    padding:0 5vw;
    max-width:800px;
    z-index:2;
}

.hero-title{
    font-family:'Nunito Sans',sans-serif;
    font-size:clamp(2.8rem,6vw,5.2rem);
    font-weight:700;
    letter-spacing:0.01em;
    line-height:1.15;
    color:var(--humus);
    margin-bottom:1rem;
}

.hero-tagline{
    font-family:'Lora',serif;
    font-style:italic;
    font-weight:400;
    font-size:clamp(1rem,1.5vw,1.2rem);
    color:var(--clay);
    max-width:32ch;
}

/* Root dividers */
.root-divider{
    width:100%;
    height:60px;
    position:relative;
    z-index:2;
    overflow:hidden;
}

.root-divider svg{
    width:100%;
    height:100%;
}

.draw-path{
    stroke-dasharray:1500;
    stroke-dashoffset:1500;
    transition:stroke-dashoffset 3s var(--ease-root);
}

.draw-path.visible{
    stroke-dashoffset:0;
}

/* === TOPSOIL === */
.topsoil{
    padding:5vw;
    background:var(--linen);
}

.bento-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:6px;
    max-width:1100px;
    margin:0 auto;
    background:
        repeating-conic-gradient(
            rgba(92,64,51,0.04) 0% 25%,
            transparent 0% 50%
        ) 0 0/8px 8px;
}

.bento-cell{
    background:var(--linen);
    border-radius:12px;
    padding:clamp(1rem,2vw,1.8rem);
    position:relative;
    overflow:hidden;
}

/* Reveal animation */
.reveal{
    opacity:0;
    transform:translateY(20px);
    transition:opacity 600ms var(--ease-root),transform 600ms var(--ease-root);
}

.reveal.visible{
    opacity:1;
    transform:translateY(0);
}

/* Stagger within visible row */
.reveal:nth-child(2){transition-delay:80ms}
.reveal:nth-child(3){transition-delay:160ms}
.reveal:nth-child(4){transition-delay:240ms}
.reveal:nth-child(5){transition-delay:320ms}
.reveal:nth-child(6){transition-delay:400ms}
.reveal:nth-child(7){transition-delay:480ms}
.reveal:nth-child(8){transition-delay:560ms}

.cell-cream{
    background:var(--cream);
}

.cell-root{
    background:var(--cream);
    display:flex;
    align-items:center;
    justify-content:center;
}

.root-illustration{
    width:100%;
    height:100%;
    max-height:300px;
}

.cell-data,.cell-stat{
    background:var(--cream);
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    gap:0.25rem;
}

.cell-accent{
    background:var(--peat);
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    gap:0.25rem;
}

.cell-accent .data-value,.cell-accent .data-unit,.cell-accent .data-label{
    color:var(--mycelium);
}

.data-value{
    font-family:'Nunito Sans',sans-serif;
    font-size:clamp(1.8rem,3vw,2.8rem);
    font-weight:700;
    color:var(--humus);
    line-height:1.1;
}

.data-unit{
    font-family:'Azeret Mono',monospace;
    font-size:0.7rem;
    font-weight:400;
    letter-spacing:0.08em;
    color:var(--mycelium);
    opacity:0.7;
}

.data-label{
    font-family:'Azeret Mono',monospace;
    font-size:0.7rem;
    font-weight:400;
    letter-spacing:0.08em;
    color:var(--mycelium);
    opacity:0.7;
    line-height:1.4;
}

.data-underline{
    width:80px;
    height:8px;
    margin-top:0.3rem;
}

.cell-body{
    font-family:'Lora',serif;
    font-size:clamp(0.95rem,1.2vw,1.15rem);
    line-height:1.72;
    color:var(--humus);
}

.cell-body.inverse{
    color:var(--cream);
}

.accent-text{
    font-weight:600;
    font-style:italic;
    color:var(--ember);
}

.section-heading{
    font-family:'Nunito Sans',sans-serif;
    font-size:clamp(1.2rem,2vw,1.8rem);
    font-weight:600;
    letter-spacing:0.01em;
    line-height:1.15;
    color:var(--humus);
    margin-bottom:0.75rem;
}

/* Leaf watermark behind text cells */
.leaf-watermark{
    position:absolute;
    top:50%;left:50%;
    transform:translate(-50%,-50%) rotate(-15deg);
    width:200px;height:200px;
    opacity:0.04;
    pointer-events:none;
}

.leaf-maple-bg{
    background:var(--moss);
    clip-path:polygon(50% 0%,61% 15%,80% 10%,72% 28%,95% 35%,75% 45%,85% 65%,65% 55%,50% 80%,35% 55%,15% 65%,25% 45%,5% 35%,28% 28%,20% 10%,39% 15%);
}

/* === SUBSOIL === */
.subsoil{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:5vw;
    background:linear-gradient(
        to bottom,
        var(--linen) 0%,
        var(--clay) 80%,
        var(--clay) 100%
    );
}

.subsoil-layout{
    display:flex;
    gap:clamp(2rem,4vw,4rem);
    align-items:center;
    max-width:1000px;
    flex-wrap:wrap;
}

.cross-section{
    flex:1 1 280px;
    max-width:500px;
    height:auto;
}

.horizon-layer{
    transition:opacity 600ms var(--ease-root);
}

.horizon-layer.visible{
    opacity:0.85 !important;
}

.subsoil-text{
    flex:1 1 280px;
    max-width:38ch;
}

/* === BEDROCK === */
.bedrock{
    background:var(--peat);
    padding:4rem 5vw;
    text-align:center;
    position:relative;
    overflow:hidden;
}

.root-inverted{
    width:100%;
    height:80px;
    display:block;
    margin-bottom:2rem;
}

.bedrock-content{
    position:relative;
    z-index:2;
}

.bedrock-domain{
    font-family:'Nunito Sans',sans-serif;
    font-size:clamp(1.4rem,3vw,2rem);
    font-weight:700;
    color:var(--mycelium);
    margin-bottom:0.5rem;
}

.bedrock-meta{
    font-family:'Lora',serif;
    font-size:clamp(0.85rem,1vw,1rem);
    color:var(--clay);
    line-height:1.6;
}

/* Responsive */
@media(max-width:768px){
    .bento-grid{
        grid-template-columns:repeat(2,1fr);
        padding:0;
    }
    .bento-cell[style*="span 3"]{
        grid-column:span 2 !important;
    }
    .topsoil{
        padding:3vw;
    }
    .subsoil-layout{
        flex-direction:column;
    }
    .cross-section{
        max-width:100%;
    }
    .leaf{
        width:50px;height:50px;
    }
    .leaf-willow{
        width:25px;height:55px;
    }
    .leaf-catalpa{
        width:60px;height:60px;
    }
}

@media(max-width:480px){
    .bento-grid{
        grid-template-columns:1fr;
    }
    .bento-cell[style*="span 2"],
    .bento-cell[style*="span 3"]{
        grid-column:span 1 !important;
        grid-row:span 1 !important;
    }
}