/* ============================================================
   footprint.markets - Geological Strata Design System
   ============================================================ */

/* --- CSS Custom Properties --- */
:root {
    --deep-loam: #0F1A14;
    --subsoil: #1B2B22;
    --moss-floor: #2C4A38;
    --lichen-gold: #B8960C;
    --thermal-amber: #D4882A;
    --parchment-bone: #E8DFC4;
    --weathered-stone: #C4BDA8;
    --eroded-gray: #8A8472;
    --spore-teal: #3A9E8C;
    --canopy-shadow: #5C6B56;
    --forest-mid: #1B3A2D;
    --forest-light: #234D3A;
    --forest-bright: #2C6049;
    --stratum-mid: #151F1A;

    --font-display: 'DM Serif Display', serif;
    --font-body: 'Source Sans 3', sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;

    --spring-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* --- Reset & Base --- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

body {
    background-color: var(--deep-loam);
    color: var(--parchment-bone);
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(1rem, 1.1vw, 1.15rem);
    line-height: 1.72;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- Film Grain Overlay --- */
#film-grain {
    position: fixed;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    pointer-events: none;
    z-index: 9999;
    mix-blend-mode: overlay;
    will-change: transform;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Crect width='1' height='1' x='0' y='0' fill='%23E8DFC4' opacity='0.04'/%3E%3Crect width='1' height='1' x='8' y='3' fill='%23E8DFC4' opacity='0.06'/%3E%3Crect width='1' height='1' x='16' y='7' fill='%23E8DFC4' opacity='0.03'/%3E%3Crect width='1' height='1' x='24' y='2' fill='%23E8DFC4' opacity='0.05'/%3E%3Crect width='1' height='1' x='32' y='11' fill='%23E8DFC4' opacity='0.07'/%3E%3Crect width='1' height='1' x='40' y='5' fill='%23E8DFC4' opacity='0.04'/%3E%3Crect width='1' height='1' x='48' y='14' fill='%23E8DFC4' opacity='0.06'/%3E%3Crect width='1' height='1' x='56' y='1' fill='%23E8DFC4' opacity='0.03'/%3E%3Crect width='1' height='1' x='4' y='16' fill='%23E8DFC4' opacity='0.05'/%3E%3Crect width='1' height='1' x='12' y='22' fill='%23E8DFC4' opacity='0.04'/%3E%3Crect width='1' height='1' x='20' y='18' fill='%23E8DFC4' opacity='0.07'/%3E%3Crect width='1' height='1' x='28' y='25' fill='%23E8DFC4' opacity='0.03'/%3E%3Crect width='1' height='1' x='36' y='20' fill='%23E8DFC4' opacity='0.06'/%3E%3Crect width='1' height='1' x='44' y='27' fill='%23E8DFC4' opacity='0.05'/%3E%3Crect width='1' height='1' x='52' y='19' fill='%23E8DFC4' opacity='0.04'/%3E%3Crect width='1' height='1' x='60' y='24' fill='%23E8DFC4' opacity='0.08'/%3E%3Crect width='1' height='1' x='2' y='32' fill='%23E8DFC4' opacity='0.06'/%3E%3Crect width='1' height='1' x='10' y='38' fill='%23E8DFC4' opacity='0.03'/%3E%3Crect width='1' height='1' x='18' y='34' fill='%23E8DFC4' opacity='0.05'/%3E%3Crect width='1' height='1' x='26' y='40' fill='%23E8DFC4' opacity='0.07'/%3E%3Crect width='1' height='1' x='34' y='36' fill='%23E8DFC4' opacity='0.04'/%3E%3Crect width='1' height='1' x='42' y='41' fill='%23E8DFC4' opacity='0.06'/%3E%3Crect width='1' height='1' x='50' y='33' fill='%23E8DFC4' opacity='0.03'/%3E%3Crect width='1' height='1' x='58' y='39' fill='%23E8DFC4' opacity='0.05'/%3E%3Crect width='1' height='1' x='6' y='48' fill='%23E8DFC4' opacity='0.04'/%3E%3Crect width='1' height='1' x='14' y='54' fill='%23E8DFC4' opacity='0.07'/%3E%3Crect width='1' height='1' x='22' y='50' fill='%23E8DFC4' opacity='0.05'/%3E%3Crect width='1' height='1' x='30' y='56' fill='%23E8DFC4' opacity='0.03'/%3E%3Crect width='1' height='1' x='38' y='52' fill='%23E8DFC4' opacity='0.06'/%3E%3Crect width='1' height='1' x='46' y='57' fill='%23E8DFC4' opacity='0.04'/%3E%3Crect width='1' height='1' x='54' y='49' fill='%23E8DFC4' opacity='0.08'/%3E%3Crect width='1' height='1' x='62' y='55' fill='%23E8DFC4' opacity='0.05'/%3E%3C/svg%3E");
    background-repeat: repeat;
    animation: grain-shift 0.48s steps(4) infinite;
}

@keyframes grain-shift {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(-5%, -5%); }
    50%  { transform: translate(5%, -3%); }
    75%  { transform: translate(-3%, 5%); }
    100% { transform: translate(0, 0); }
}

/* --- Depth Marker --- */
#depth-marker {
    position: fixed;
    left: 24px;
    top: 0;
    bottom: 0;
    width: 1px;
    z-index: 100;
    pointer-events: none;
}

.depth-line {
    width: 1px;
    height: 0%;
    background: var(--lichen-gold);
    opacity: 0.4;
    transition: height 0.1s linear;
}

/* --- Compass Rose Navigation --- */
#compass-rose {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 1000;
}

.compass-toggle {
    background: none;
    border: none;
    cursor: pointer;
    display: block;
    padding: 4px;
    opacity: 0;
    transform: scale(0);
    animation: compass-appear 0.6s var(--spring-bounce) 2s forwards;
}

@keyframes compass-appear {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.compass-nav {
    position: absolute;
    top: 50%;
    right: 50%;
    transform: translate(50%, -50%);
    width: 0;
    height: 0;
    clip-path: circle(0% at 50% 50%);
    background: rgba(15, 26, 20, 0.95);
    border: 1px solid rgba(184, 150, 12, 0.3);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transition: clip-path 0.5s ease-out, width 0.5s ease-out, height 0.5s ease-out;
    pointer-events: none;
}

#compass-rose.open .compass-nav {
    width: 220px;
    height: 220px;
    clip-path: circle(50% at 50% 50%);
    pointer-events: auto;
}

.compass-link {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lichen-gold);
    text-decoration: none;
    opacity: 0;
    transition: opacity 0.3s ease 0.2s, color 0.2s ease;
}

#compass-rose.open .compass-link {
    opacity: 1;
}

.compass-link:hover {
    color: var(--spore-teal);
}

/* --- Strata Sections --- */
.stratum {
    position: relative;
    overflow: hidden;
}

#hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--deep-loam);
}

/* Topographic ring backgrounds in hero */
#hero::before,
#hero::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(27, 58, 45, 0.4);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: terrain-breathe 8s ease-in-out infinite;
}

#hero::before {
    width: 40vw;
    height: 40vw;
    border-color: var(--forest-bright); /* #2C6049 */
    opacity: 0.3;
    animation-delay: 0s;
}

#hero::after {
    width: 55vw;
    height: 55vw;
    border-color: var(--forest-light); /* #234D3A */
    opacity: 0.25;
    animation-delay: 2s;
}

/* Third topographic ring using #1B3A2D */
#hero .contour-hero::before {
    content: '';
    position: absolute;
    border-radius: 50%;
    border: 1px solid var(--forest-mid); /* #1B3A2D */
    top: 50%;
    left: 50%;
    width: 70vw;
    height: 70vw;
    transform: translate(-50%, -50%);
    opacity: 0.2;
    animation: terrain-breathe 8s ease-in-out 4s infinite;
}

@keyframes terrain-breathe {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.05); }
}

/* Contour backgrounds */
.contour-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.contour-svg {
    width: 100%;
    height: 100%;
}

/* Hero content */
.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.hero-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(3rem, 7vw, 5.5rem);
    letter-spacing: 0.15em;
    line-height: 1.05;
    color: var(--parchment-bone);
    opacity: 0;
    animation: title-fade-in 1.2s ease-out 1.5s forwards;
}

.hero-subtitle {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: clamp(1rem, 1.8vw, 1.4rem);
    color: var(--weathered-stone);
    margin-top: 1rem;
    letter-spacing: 0.05em;
    opacity: 0;
    animation: title-fade-in 1s ease-out 2.1s forwards;
}

@keyframes title-fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Scroll chevron */
.scroll-chevron {
    position: absolute;
    bottom: 3rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    animation: chevron-pulse 2s ease-in-out infinite;
}

@keyframes chevron-pulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.8; }
}

/* Contour line drawing animation */
.contour-line {
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
}

.c1 { animation: draw-contour 2.5s ease-out 0.4s forwards; opacity: 0.5; }
.c2 { animation: draw-contour 2.5s ease-out 0.6s forwards; opacity: 0.45; }
.c3 { animation: draw-contour 2.5s ease-out 0.8s forwards; opacity: 0.4; }
.c4 { animation: draw-contour 2.5s ease-out 1.0s forwards; opacity: 0.35; }
.c5 { animation: draw-contour 2.5s ease-out 1.2s forwards; opacity: 0.3; }
.c6 { animation: draw-contour 2.5s ease-out 1.4s forwards; opacity: 0.25; }

@keyframes draw-contour {
    to { stroke-dashoffset: 0; }
}

/* Scroll-triggered contour drawing */
.scroll-draw {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    transition: stroke-dashoffset 2s ease-out;
}

.scroll-draw.drawn {
    stroke-dashoffset: 0;
}

/* --- Diagonal Dividers --- */
.diagonal-divider {
    position: relative;
    z-index: 5;
    margin-top: -1px;
    margin-bottom: -1px;
    line-height: 0;
}

.diagonal-divider svg {
    display: block;
    width: 100%;
    height: 80px;
}

.divider-1 { background: var(--deep-loam); }
.divider-2 { background: var(--subsoil); }
.divider-3 { background: var(--stratum-mid); }
.divider-4 { background: var(--deep-loam); }

/* --- Stratum Skew --- */
.stratum-skew-neg {
    background-color: var(--subsoil);
    transform: skewY(-3deg);
    padding: clamp(4rem, 8vh, 8rem) 0;
}

.stratum-skew-neg .stratum-inner {
    transform: skewY(3deg);
}

.stratum-skew-pos {
    background-color: var(--stratum-mid);
    transform: skewY(3deg);
    padding: clamp(4rem, 8vh, 8rem) 0;
}

.stratum-skew-pos .stratum-inner {
    transform: skewY(-3deg);
}

.stratum-deep {
    background-color: var(--deep-loam);
    padding: clamp(4rem, 8vh, 8rem) 0;
}

.stratum-roots {
    background-color: var(--deep-loam);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(4rem, 8vh, 8rem) 0;
}

.stratum-inner {
    position: relative;
    z-index: 1;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* --- Depth Labels --- */
.depth-label {
    position: absolute;
    left: -60px;
    top: 2rem;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 10;
}

.depth-tick {
    display: block;
    width: 16px;
    height: 1px;
    background: var(--lichen-gold);
    opacity: 0.4;
}

.depth-text {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--eroded-gray);
    white-space: nowrap;
}

/* --- Section Content --- */
.section-content {
    max-width: 680px;
    margin: 0 auto;
}

.section-heading {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2.4rem, 5.5vw, 4.8rem);
    letter-spacing: 0.01em;
    line-height: 1.05;
    color: var(--parchment-bone);
    margin-bottom: 2rem;
}

.body-text {
    color: var(--weathered-stone);
    margin-bottom: 1.5rem;
    font-weight: 400;
}

.section-intro {
    font-weight: 300;
    font-size: clamp(1.05rem, 1.2vw, 1.2rem);
    margin-bottom: 3rem;
}

/* --- Two Column Layout (Stratum II) --- */
.two-column {
    max-width: 960px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}

.two-column .section-heading {
    grid-column: 1 / -1;
}

.column-text {
    padding-right: 1rem;
}

.column-illustration {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

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

/* --- Fossil Fragment Masonry --- */
.fossil-masonry {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1.2rem;
    margin-top: 2rem;
}

.fossil-card {
    background: linear-gradient(135deg, var(--subsoil), var(--deep-loam));
    border: 1px solid var(--lichen-gold);
    padding: 1.5rem 1.2rem;
    position: relative;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.fossil-card:hover {
    transform: translateY(-2px);
    border-color: var(--spore-teal);
}

/* Unique clip-paths for each fossil card shape */
.fossil-shape-1  { clip-path: polygon(5% 0%, 95% 3%, 100% 92%, 8% 100%, 0% 12%); }
.fossil-shape-2  { clip-path: polygon(0% 5%, 92% 0%, 100% 8%, 97% 95%, 3% 100%); }
.fossil-shape-3  { clip-path: polygon(8% 0%, 100% 4%, 95% 100%, 0% 96%, 3% 8%); }
.fossil-shape-4  { clip-path: polygon(0% 0%, 97% 6%, 100% 90%, 6% 100%, 2% 4%); }
.fossil-shape-5  { clip-path: polygon(4% 2%, 100% 0%, 96% 97%, 0% 100%, 2% 7%); }
.fossil-shape-6  { clip-path: polygon(0% 3%, 94% 0%, 100% 5%, 98% 100%, 5% 95%); }
.fossil-shape-7  { clip-path: polygon(6% 0%, 100% 2%, 97% 94%, 2% 100%, 0% 6%); }
.fossil-shape-8  { clip-path: polygon(3% 0%, 98% 4%, 100% 96%, 4% 100%, 0% 3%); }
.fossil-shape-9  { clip-path: polygon(0% 4%, 96% 0%, 100% 8%, 95% 100%, 7% 96%); }
.fossil-shape-10 { clip-path: polygon(5% 0%, 100% 3%, 98% 92%, 0% 100%, 3% 10%); }

.fossil-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--eroded-gray);
    margin-bottom: 0.5rem;
}

.fossil-value {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    color: var(--parchment-bone);
    line-height: 1.1;
    margin-bottom: 0.3rem;
}

.fossil-unit {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.06em;
    color: var(--canopy-shadow);
}

/* Masonry span variations */
.fossil-masonry .fossil-card:nth-child(3) {
    grid-row: span 1;
}

.fossil-masonry .fossil-card:nth-child(5) {
    grid-column: span 2;
}

/* Deep stratum cards - thicker borders, larger type */
.deep-card {
    border-width: 2px;
}

.deep-card .fossil-value {
    font-size: clamp(2rem, 3.5vw, 3rem);
}

.deep-masonry {
    margin-top: 3rem;
}

/* Scroll reveal */
.scroll-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

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

/* --- Tree Ring Chart --- */
.tree-ring-container {
    text-align: center;
    margin: 3rem auto;
    max-width: 500px;
}

.tree-ring-chart {
    width: 100%;
    max-width: 400px;
    height: auto;
}

.ring {
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    transition: stroke-dashoffset 2s ease-out;
}

.ring.drawn {
    stroke-dashoffset: 0;
}

.chart-caption {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    color: var(--eroded-gray);
    margin-top: 1.5rem;
    line-height: 1.6;
}

/* --- Mycorrhizal Network --- */
#mycorrhizal-network {
    width: 100%;
    max-width: 1000px;
    height: auto;
    margin: 0 auto;
    display: block;
}

.hyphae {
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    transition: stroke-dashoffset 1.5s ease-out;
}

.hyphae.drawn {
    stroke-dashoffset: 0;
}

.hyphae.highlight {
    stroke: var(--spore-teal);
    stroke-width: 2;
    transition: stroke 0.3s ease, stroke-width 0.3s ease;
}

.network-node {
    cursor: pointer;
    transition: transform 0.3s var(--spring-bounce);
    transform-origin: center;
}

.network-node circle:first-child {
    transition: stroke-color 0.3s ease, r 0.3s ease;
}

.network-node:hover circle:first-child {
    stroke: var(--spore-teal);
}

.network-node circle {
    transform: scale(0);
    transition: transform 0.5s var(--spring-bounce);
}

.network-node.visible circle {
    transform: scale(1);
}

/* Network tooltip */
.network-tooltip {
    position: absolute;
    pointer-events: none;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lichen-gold);
    background: rgba(15, 26, 20, 0.9);
    border: 1px solid rgba(184, 150, 12, 0.4);
    padding: 6px 12px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 50;
}

.network-tooltip.visible {
    opacity: 1;
}

/* Hyphae pulse when network is fully drawn */
@keyframes hyphae-pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

.hyphae.pulsing {
    animation: hyphae-pulse 4s ease-in-out infinite;
}

/* Root closing text */
.root-closing {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    color: var(--parchment-bone);
    text-align: center;
    margin-top: 4rem;
    opacity: 0.8;
    letter-spacing: 0.02em;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .two-column {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .depth-label {
        position: relative;
        left: 0;
        top: 0;
        margin-bottom: 1.5rem;
    }

    .fossil-masonry {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }

    .fossil-masonry .fossil-card:nth-child(5) {
        grid-column: span 1;
    }

    #compass-rose {
        top: 12px;
        right: 12px;
    }

    #depth-marker {
        display: none;
    }

    .stratum-skew-neg,
    .stratum-skew-pos {
        transform: none;
    }

    .stratum-skew-neg .stratum-inner,
    .stratum-skew-pos .stratum-inner {
        transform: none;
    }

    .stratum-inner {
        padding: 0 1rem;
    }
}

@media (max-width: 480px) {
    .fossil-masonry {
        grid-template-columns: 1fr 1fr;
    }

    .hero-title {
        letter-spacing: 0.08em;
    }
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
    #film-grain {
        animation: none;
    }

    .contour-line {
        stroke-dashoffset: 0;
        animation: none;
    }

    .scroll-draw {
        stroke-dashoffset: 0;
        transition: none;
    }

    .ring {
        stroke-dashoffset: 0;
        transition: none;
    }

    .hyphae {
        stroke-dashoffset: 0;
        transition: none;
    }

    .hero-title,
    .hero-subtitle {
        opacity: 1;
        animation: none;
    }

    .compass-toggle {
        opacity: 1;
        transform: scale(1);
        animation: none;
    }

    .scroll-chevron {
        animation: none;
        opacity: 0.6;
    }

    .scroll-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .network-node circle {
        transform: scale(1);
        transition: none;
    }

    .hyphae.pulsing {
        animation: none;
        opacity: 0.8;
    }

    #hero::before,
    #hero::after {
        animation: none;
    }
}