/* footprint.market - Goblincore Environmental Marketplace */
/* Palette: Dark Humus #1e1a14, Dried Parchment #e8dcc8, Loam Brown #2c2416,
   Warm Umber #5a4e3c, Moss Verdigris #5e7a52, Spore Gold #b8943e,
   Bark Gray #7a6e5a, Mycelium White #f2ece2, Weathered Bone #c4b8a4 */

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

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #1e1a14;
    color: #c4b8a4;
}

body {
    font-family: 'Lora', Georgia, serif;
    font-size: clamp(0.95rem, 1.4vw, 1.15rem);
    line-height: 1.72;
}

.svg-filters {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* Scroll Container */
.scroll-container {
    width: 100vw;
    height: 100vh;
    overflow-x: scroll;
    overflow-y: hidden;
    scroll-behavior: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.scroll-container::-webkit-scrollbar {
    display: none;
}

.scroll-track {
    display: flex;
    height: 100vh;
    width: fit-content;
}

/* Zones */
.zone {
    height: 100vh;
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
}
.zone-content {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 2;
}

/* Zone 1: The Clearing */
.zone-clearing {
    width: 100vw;
    background: #e8dcc8;
}
.clearing-text {
    position: absolute;
    bottom: 30%;
    left: 8%;
    max-width: 70%;
}
.site-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: clamp(3rem, 7vw, 6rem);
    color: #2c2416;
    letter-spacing: -0.01em;
    opacity: 0;
    animation: fadeInTitle 1.2s ease-out 0.6s forwards;
}
.site-tagline {
    font-family: 'Lora', Georgia, serif;
    font-weight: 400;
    font-size: clamp(1rem, 1.8vw, 1.4rem);
    color: #5a4e3c;
    margin-top: 1rem;
    opacity: 0;
    animation: fadeInTitle 1s ease-out 1.2s forwards;
}
.zone-gradient-edge {
    position: absolute;
    right: 0;
    top: 0;
    width: 20%;
    height: 100%;
    background: linear-gradient(to right, transparent, #1e1a14);
    z-index: 3;
    pointer-events: none;
}
.scroll-cue {
    position: absolute;
    right: 8%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    animation: pulseArrow 2.5s ease-in-out infinite;
}
.scroll-arrow {
    width: 60px;
    height: 24px;
}
@keyframes pulseArrow {
    0%, 100% { opacity: 0.4; transform: translateY(-50%) translateX(0); }
    50% { opacity: 1; transform: translateY(-50%) translateX(10px); }
}
@keyframes fadeInTitle {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Zone 2: The Understory */
.zone-understory {
    width: 150vw;
    background: #1e1a14;
}
.lichen-patch {
    position: absolute;
    border-radius: 8px;
    background:
        radial-gradient(ellipse at 30% 40%, rgba(94,122,82,0.15) 0%, transparent 60%),
        radial-gradient(ellipse at 70% 60%, rgba(94,122,82,0.1) 0%, transparent 50%),
        rgba(30,26,20,0.6);
    z-index: 1;
}
.lichen-1 { width: 220px; height: 300px; top: 15%; left: 10%; transform: rotate(-3deg); }
.lichen-2 { width: 180px; height: 250px; top: 55%; left: 30%; transform: rotate(5deg); }
.lichen-3 { width: 260px; height: 200px; top: 25%; left: 55%; transform: rotate(-7deg); }
.lichen-4 { width: 200px; height: 280px; top: 50%; left: 75%; transform: rotate(2deg); }

.text-fragment {
    position: absolute;
    opacity: 0;
    transition: opacity 0.8s ease-out;
    z-index: 3;
}
.text-fragment.visible {
    opacity: 1;
}
.fragment-1 { top: 35%; left: 18%; }
.fragment-2 { top: 60%; left: 45%; }
.fragment-3 { top: 25%; left: 70%; }
.fragment-body {
    font-family: 'Lora', Georgia, serif;
    font-style: italic;
    font-weight: 400;
    color: #c4b8a4;
    font-size: clamp(1rem, 1.6vw, 1.3rem);
    max-width: 280px;
    line-height: 1.72;
}

/* Spore Particles */
.spore-field {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 4;
}
.spore {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    background: radial-gradient(circle, #b8943e, transparent);
    animation: floatDrift var(--dur) ease-in-out var(--delay) infinite;
    opacity: 0.3;
}
@keyframes floatDrift {
    0% { transform: translate(0, 0); opacity: 0.2; }
    25% { transform: translate(8px, -20px); opacity: 0.5; }
    50% { transform: translate(-5px, -40px); opacity: 0.7; }
    75% { transform: translate(12px, -25px); opacity: 0.4; }
    100% { transform: translate(0, 0); opacity: 0.2; }
}

/* Zone 3: The Exchange Floor */
.zone-exchange {
    width: 200vw;
    background: linear-gradient(to right, #1e1a14, #2c2416);
}
.exchange-title {
    position: absolute;
    top: 8%;
    left: 5%;
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: clamp(2.5rem, 6vw, 5.5rem);
    color: #e8dcc8;
    letter-spacing: -0.01em;
    opacity: 0.6;
}
.specimen-row {
    display: flex;
    align-items: center;
    gap: 120px;
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
}
.specimen-card {
    width: 320px;
    height: 480px;
    position: relative;
    flex-shrink: 0;
    background: rgba(30,26,20,0.85);
    border-radius: 4px;
    overflow: visible;
}
.card-border-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}
.card-border-rect {
    stroke-dasharray: 1592;
    stroke-dashoffset: 1592;
    transition: stroke-dashoffset 1.2s ease-out;
}
.specimen-card.border-animated .card-border-rect {
    stroke-dashoffset: 0;
}
.card-inner {
    position: relative;
    z-index: 1;
    padding: 24px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.card-illustration {
    width: 200px;
    height: 200px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.specimen-svg {
    width: 100%;
    height: 100%;
}
.card-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: 1.6rem;
    color: #e8dcc8;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
    text-align: center;
}
.card-data {
    font-family: 'DM Mono', monospace;
    font-size: clamp(0.75rem, 1vw, 0.9rem);
    letter-spacing: 0.06em;
    color: #7a6e5a;
    text-shadow: 0 0 8px rgba(94,122,82,0.3);
    margin-bottom: 16px;
    text-align: center;
}
.card-desc {
    font-family: 'Lora', Georgia, serif;
    font-weight: 400;
    font-size: 0.9rem;
    color: #c4b8a4;
    line-height: 1.72;
    text-align: center;
}

/* Zone 4: The Decomposition Layer */
.zone-decomposition {
    width: 150vw;
    background: #1e1a14;
}
.decomp-text {
    position: absolute;
    z-index: 3;
    transition: opacity 0.6s ease, letter-spacing 0.6s ease;
}
.decomp-fragment-1 { top: 20%; left: 10%; }
.decomp-fragment-2 { top: 50%; left: 35%; }
.decomp-fragment-3 { top: 75%; left: 60%; }
.decomp-body {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 400;
    font-size: clamp(2rem, 4vw, 3.5rem);
    color: #e8dcc8;
    max-width: 500px;
    line-height: 1.3;
    transition: opacity 0.3s ease, letter-spacing 0.3s ease, filter 0.3s ease;
}
.decomp-text.dissolving .decomp-body {
    opacity: 0.15;
    letter-spacing: 0.3em;
    filter: url(#turbulence-heavy);
}
.specimen-card.decomposed {
    position: absolute;
    top: 30%;
    right: 15%;
    opacity: 0.6;
}
.decomposed .card-inner {
    position: relative;
}
.lichen-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(ellipse at 40% 30%, rgba(94,122,82,0.3) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 70%, rgba(94,122,82,0.2) 0%, transparent 40%);
    z-index: 5;
    pointer-events: none;
}
.decomposed-border {
    stroke-dasharray: 40 20 10 20;
}
.decomposed-illustration {
    opacity: 0.4;
}

/* Zone 5: The Root Network */
.zone-roots {
    width: 100vw;
    background: linear-gradient(to right, #1e1a14, #e8dcc8 40%);
}
.roots-text {
    position: absolute;
    top: 30%;
    left: 15%;
    max-width: 60%;
}
.roots-statement {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 400;
    font-size: clamp(1.8rem, 3.5vw, 3rem);
    color: #2c2416;
    line-height: 1.4;
    letter-spacing: -0.01em;
}
.root-nodes {
    position: absolute;
    bottom: 25%;
    left: 15%;
    display: flex;
    gap: 80px;
}
.root-node {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    text-decoration: none;
    cursor: pointer;
}
.node-glow {
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #5e7a52;
    box-shadow: 0 0 12px rgba(94,122,82,0.27);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.root-node:hover .node-glow {
    box-shadow: 0 0 24px rgba(94,122,82,0.5);
    transform: scale(1.5);
}
.node-label {
    position: absolute;
    top: 28px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-family: 'DM Mono', monospace;
    font-size: 0.75rem;
    color: #5a4e3c;
    letter-spacing: 0.06em;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    padding: 4px 8px;
    border: 1px solid transparent;
}
.root-node:hover .node-label {
    opacity: 1;
    border-color: #5e7a52;
}

/* Mycelium SVG */
.mycelium-svg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 5;
    overflow: visible;
}
.mycelium-branch {
    fill: none;
    stroke-linecap: round;
}

/* Mushroom Navigation */
#mushroom-nav {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 100;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    transition: transform 0.3s ease;
}
#mushroom-nav:hover {
    transform: scale(1.15);
}

/* Nav Overlay */
.nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(30,26,20,0.92);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}
.nav-overlay.active {
    opacity: 1;
    pointer-events: auto;
}
.nav-overlay-content {
    position: relative;
    text-align: center;
}
.nav-close {
    position: absolute;
    top: -60px;
    right: -40px;
    background: none;
    border: none;
    color: #c4b8a4;
    font-size: 2rem;
    cursor: pointer;
    transition: color 0.3s ease;
}
.nav-close:hover {
    color: #5e7a52;
}
.nav-link {
    display: block;
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 400;
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    color: #c4b8a4;
    text-decoration: none;
    padding: 12px 0;
    transition: color 0.3s ease;
}
.nav-link:hover {
    color: #5e7a52;
}

/* Progress Bar */
.progress-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 12px;
    z-index: 50;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.strata {
    width: 100%;
    flex: 1;
}
.strata-1 { background: #2c2416; }
.strata-2 { background: #5a4e3c; }
.strata-3 { background: #7a6e5a; }
.progress-indicator {
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: #5e7a52;
    box-shadow: 0 0 8px rgba(94,122,82,0.5);
    transition: left 0.1s ease-out;
    z-index: 1;
}