/* footprint.markets - Ecological Bazaar Design System */
/* Colors: Deep Loam #3d2b1f, Terracotta #c4956a, Sage Moss #7a8b6f, Parchment Cream #f5efe6, Warm Linen #ede4d4, Honeyed Amber #8b6914, Charcoal Bark #2a1f14, Burnt Sienna #a0522d, Warm Umber #5c4033 */

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

html{scroll-behavior:smooth;overflow-x:hidden}

body{
    background-color:#f5efe6;
    color:#5c4033;
    font-family:'Lora',Georgia,serif;
    font-size:clamp(1rem,1.1vw,1.15rem);
    line-height:1.72;
    overflow-x:hidden;
    position:relative;
}

/* Subtle noise grain overlay */
body::before{
    content:'';
    position:fixed;
    top:0;left:0;right:0;bottom:0;
    pointer-events:none;
    z-index:100;
    opacity:0.03;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat:repeat;
    background-size:256px 256px;
}

/* Navigation - Vine Trail */
#vine-nav{
    position:fixed;
    top:0;left:0;right:0;
    z-index:30;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0;
    padding:1.2rem 2rem;
    background:linear-gradient(to bottom,rgba(245,239,230,0.95),rgba(245,239,230,0));
    pointer-events:none;
}
.vine-line{
    position:absolute;
    top:50%;left:15%;right:15%;
    height:1px;
    background:#c4956a;
    transform:translateY(-50%);
}
.vine-node{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-decoration:none;
    pointer-events:all;
    flex:1;
    max-width:120px;
    z-index:1;
}
.node-dot{
    width:10px;height:10px;
    border-radius:50%;
    background:#f5efe6;
    border:1.5px solid #c4956a;
    transition:all 0.8s cubic-bezier(0.4,0,0.2,1);
}
.vine-node.active .node-dot{
    width:14px;height:14px;
    background:#c4956a;
    border-color:#a0522d;
}
.node-label{
    font-family:'Caveat',cursive;
    font-size:0.85rem;
    color:#8b6914;
    margin-top:0.3rem;
    opacity:0;
    transition:opacity 0.6s cubic-bezier(0.4,0,0.2,1);
}
.vine-node:hover .node-label,
.vine-node.active .node-label{
    opacity:1;
}

/* Vine SVG */
#vine-svg{
    position:fixed;
    top:0;left:0;
    width:100px;
    height:100%;
    z-index:20;
    pointer-events:none;
    opacity:0.6;
}

/* Zone base */
.zone{
    position:relative;
    min-height:100vh;
    overflow:hidden;
}

/* Zone 1: Threshold */
.zone-threshold{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:100vh;
    background:#f5efe6;
}
.blob{
    position:absolute;
    pointer-events:none;
}
.blob-1{
    width:clamp(200px,40vw,450px);
    top:10%;right:5%;
    z-index:0;
}
.blob-2{
    width:clamp(250px,45vw,500px);
    bottom:5%;left:-5%;
    z-index:0;
}
.blob-3{
    width:clamp(150px,30vw,350px);
    top:30%;left:20%;
    z-index:0;
}
.footprint-watermark{
    position:absolute;
    width:300px;height:400px;
    top:50%;left:50%;
    transform:translate(-50%,-50%);
    z-index:0;
    pointer-events:none;
}
.threshold-content{
    position:relative;
    z-index:10;
    text-align:center;
}
.brand-title{
    display:flex;
    flex-direction:column;
    align-items:center;
}
.brand-main{
    font-family:'Barlow Condensed',sans-serif;
    font-weight:600;
    font-size:clamp(4rem,8vw,7rem);
    color:#3d2b1f;
    text-transform:uppercase;
    letter-spacing:0.04em;
    line-height:1;
}
.brand-suffix{
    font-family:'Caveat',cursive;
    font-weight:400;
    font-size:clamp(2rem,4vw,3.5rem);
    color:#8b6914;
    margin-top:0.2rem;
    margin-left:2rem;
    line-height:1;
}
.footprint-icon{
    margin-top:2rem;
    display:flex;
    justify-content:center;
}
.footprint-icon svg{
    width:48px;height:auto;
    animation:footprint-breathe 4s cubic-bezier(0.4,0,0.2,1) infinite;
}
@keyframes footprint-breathe{
    0%,100%{transform:scale(1)}
    50%{transform:scale(1.06)}
}

/* Zone 2: First Clearing */
.zone-clearing-first{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:100vh;
    background:linear-gradient(to bottom,#f5efe6,#f2ebe1);
    padding:4rem 2rem;
}
.blob-clearing-left{
    width:clamp(200px,35vw,400px);
    left:-10%;top:20%;
    z-index:0;
}
.blob-clearing-right{
    width:clamp(180px,30vw,350px);
    right:-5%;bottom:15%;
    z-index:0;
}
.clearing-text{
    position:relative;
    z-index:10;
    max-width:520px;
    margin:0 auto;
}
.philosophy-text{
    font-family:'Lora',Georgia,serif;
    font-size:clamp(1rem,1.1vw,1.15rem);
    line-height:1.72;
    color:#5c4033;
}
.philosophy-text.revealed .line-wrap{
    display:inline-block;
    overflow:hidden;
}
.philosophy-text.revealed .line-inner{
    display:inline-block;
    transform:scaleY(0);
    transform-origin:bottom;
    animation:text-grow 0.6s cubic-bezier(0.4,0,0.2,1) forwards;
}
@keyframes text-grow{
    from{transform:scaleY(0);opacity:0}
    to{transform:scaleY(1);opacity:1}
}

/* Zone 3: Stalls */
.zone-stalls{
    padding:6rem 2rem;
    background:linear-gradient(to bottom,#f2ebe1,#ede4d4);
}
.stall{
    position:relative;
    max-width:900px;
    margin:0 auto 8rem;
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-areas:'illustration content';
    gap:2rem 3rem;
    align-items:center;
}
.stall:nth-child(even){
    grid-template-columns:1fr 1fr;
    grid-template-areas:'content illustration';
}
.stall-illustration{
    grid-area:illustration;
    position:relative;
    z-index:10;
}
.stall-svg{
    width:100%;
    max-width:300px;
    display:block;
    margin:0 auto;
}
.stall-content{
    grid-area:content;
    position:relative;
    z-index:10;
}
.stall-headline{
    font-family:'Barlow Condensed',sans-serif;
    font-weight:600;
    font-size:clamp(1.8rem,3.2vw,2.8rem);
    color:#3d2b1f;
    text-transform:uppercase;
    letter-spacing:0.04em;
    margin-bottom:1rem;
    line-height:1.1;
}
.stall-description{
    font-family:'Lora',Georgia,serif;
    font-size:clamp(0.95rem,1vw,1.1rem);
    line-height:1.72;
    color:#5c4033;
    margin-bottom:1.2rem;
}
.stall-tag{
    font-family:'Caveat',cursive;
    font-size:clamp(0.9rem,1.3vw,1.2rem);
    color:#8b6914;
    display:inline-block;
    transform:rotate(-2deg);
    padding:0.2rem 0.6rem;
    border-bottom:1.5px solid rgba(139,105,20,0.3);
}
.stall-blob{
    z-index:0;
    width:clamp(120px,25vw,250px);
}
.stall-1 .stall-blob{
    right:-10%;top:-15%;
}
.stall-2 .stall-blob{
    left:-10%;bottom:-10%;
}
.stall-3 .stall-blob{
    right:5%;top:10%;
}
.stall-4 .stall-blob{
    left:0;top:-20%;
}

/* Stall reveal animation */
.stall{
    opacity:0;
    transform:translateY(30px);
    transition:opacity 0.8s cubic-bezier(0.4,0,0.2,1),transform 0.8s cubic-bezier(0.4,0,0.2,1);
}
.stall.revealed{
    opacity:1;
    transform:translateY(0);
}
.stall.revealed .stall-detail{
    transition:opacity 0.6s cubic-bezier(0.4,0,0.2,1);
    opacity:1;
}
.stall.revealed .stall-morph{
    transition:d 1.2s cubic-bezier(0.4,0,0.2,1);
}

/* Zone 4: Clearing Rest */
.zone-clearing-rest{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:100vh;
    background:linear-gradient(to bottom,#ede4d4,#ebe1d2);
    padding:4rem 2rem;
}
.blob-rest-large{
    width:clamp(300px,60vw,700px);
    top:50%;left:50%;
    transform:translate(-50%,-50%);
    z-index:0;
}
.clearing-rest-content{
    position:relative;
    z-index:10;
    text-align:center;
    max-width:500px;
    opacity:0;
    transform:scale(0.95);
    transition:opacity 1s cubic-bezier(0.4,0,0.2,1),transform 1s cubic-bezier(0.4,0,0.2,1);
}
.clearing-rest-content.revealed{
    opacity:1;
    transform:scale(1);
}
.clearing-quote{
    font-family:'Caveat',cursive;
    font-size:clamp(1.4rem,2.5vw,2rem);
    color:#5c4033;
    line-height:1.5;
    font-style:italic;
}

/* Zone 5: Path Home */
.zone-path-home{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:100vh;
    background:linear-gradient(to bottom,#ebe1d2,#2a1f14);
    padding:4rem 2rem;
}
.vine-wreath{
    position:absolute;
    width:clamp(250px,40vw,400px);
    height:clamp(250px,40vw,400px);
    top:50%;left:50%;
    transform:translate(-50%,-50%);
    z-index:0;
}
.path-home-content{
    position:relative;
    z-index:10;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:1.5rem;
    opacity:0;
    transition:opacity 1.2s cubic-bezier(0.4,0,0.2,1);
}
.path-home-content.revealed{
    opacity:1;
}
.footprint-icon-large svg{
    width:72px;height:auto;
}
.footprint-icon-large ellipse{
    fill:#f5efe6;
}
.domain-name{
    font-family:'Barlow Condensed',sans-serif;
    font-weight:600;
    font-size:clamp(1.4rem,2.5vw,2rem);
    color:#f5efe6;
    text-transform:uppercase;
    letter-spacing:0.06em;
}
.step-inside-link{
    font-family:'Caveat',cursive;
    font-size:1.3rem;
    color:#c4956a;
    text-decoration:none;
    position:relative;
    padding-bottom:4px;
}
.step-inside-link::after{
    content:'';
    position:absolute;
    bottom:0;left:0;
    width:0;
    height:1.5px;
    background:#c4956a;
    transition:width 0.4s cubic-bezier(0.4,0,0.2,1);
}
.step-inside-link:hover::after{
    width:100%;
}

/* Cursor Trail */
#cursor-trail{
    position:fixed;
    top:0;left:0;
    width:100%;height:100%;
    pointer-events:none;
    z-index:25;
}
.cursor-footprint{
    position:absolute;
    width:16px;height:22px;
    opacity:0;
    animation:cursor-fade 0.8s cubic-bezier(0.4,0,0.2,1) forwards;
    pointer-events:none;
}
@keyframes cursor-fade{
    0%{opacity:0.4;transform:scale(0.8)}
    30%{opacity:0.3;transform:scale(1)}
    100%{opacity:0;transform:scale(1.1)}
}

/* Card depth shadows */
.stall-content{
    background:rgba(245,239,230,0.6);
    padding:2rem;
    border-radius:8px;
    box-shadow:0 4px 24px rgba(139,90,43,0.08);
}

/* Mobile Responsive */
@media(max-width:768px){
    .stall,.stall:nth-child(even){
        grid-template-columns:1fr;
        grid-template-areas:'illustration' 'content';
        gap:1.5rem;
        margin-bottom:5rem;
    }
    .stall-svg{max-width:220px}
    #vine-svg{display:none}
    .blob-1{width:180px}
    .blob-2{width:200px}
    .blob-3{width:140px}
    #vine-nav{
        padding:0.8rem 1rem;
    }
    .vine-line{left:10%;right:10%}
    .node-label{font-size:0.75rem}
    .brand-suffix{margin-left:1rem}
    .vine-wreath{width:220px;height:220px}
}

@media(max-width:480px){
    #vine-nav{
        position:fixed;
        top:auto;bottom:0;
        left:0;right:0;
        background:rgba(245,239,230,0.98);
        padding:0.6rem 0.5rem;
        border-top:1px solid rgba(196,149,106,0.2);
    }
    .vine-line{display:none}
    .node-label{
        opacity:1;
        font-size:0.7rem;
    }
    .zone-stalls{padding:3rem 1rem}
    .stall-content{padding:1.2rem}
}