/* footprint.bar - Forest Floor Soil Core */
/* Palette: Canopy Midnight #0D1F0D | Understory Green #1E3A1E | Moss Mantle #2E5E3A | Lichen Silver #8FBC8F | Mycelium Gold #C4A265 | Field Note Cream #F5F0E8 | Humus Dark #1A1A14 | Birch Bark #E8E4DC */

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

:root{
    --midnight:#0D1F0D;
    --understory:#1E3A1E;
    --moss:#2E5E3A;
    --lichen:#8FBC8F;
    --gold:#C4A265;
    --cream:#F5F0E8;
    --humus:#1A1A14;
    --bark:#E8E4DC;
    --ease-geo:cubic-bezier(0.25,0.1,0.25,1);
}

html{scroll-behavior:smooth}

body{
    background:var(--midnight);
    color:var(--bark);
    font-family:'Nunito Sans',sans-serif;
    font-weight:400;
    font-size:clamp(0.95rem,1.2vw,1.1rem);
    line-height:1.72;
    letter-spacing:0.005em;
    overflow-x:hidden;
}

/* Earth texture on sides */
body::before,body::after{
    content:'';
    position:fixed;
    top:0;
    width:calc((100% - 720px) / 2);
    height:100%;
    background:repeating-linear-gradient(90deg,#2C3E2C 0px,#2C3E2C 1px,#1E2D1E 1px,#1E2D1E 2px);
    opacity:0.15;
    pointer-events:none;
    z-index:0;
}

body::before{left:0}
body::after{right:0}

/* Root network */
.root-network{
    position:fixed;
    left:calc((100% - 720px) / 2 - 30px);
    top:0;
    width:60px;
    height:100%;
    z-index:1;
    pointer-events:none;
}

/* Depth gauge */
.depth-gauge{
    position:fixed;
    bottom:2rem;
    right:2rem;
    width:24px;
    height:120px;
    z-index:100;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:0.3rem;
}

.gauge-track{
    width:6px;
    height:100px;
    background:rgba(30,45,30,0.85);
    border:1px solid #4A6741;
    border-radius:3px;
    position:relative;
}

.gauge-marker{
    width:10px;
    height:4px;
    background:var(--lichen);
    border-radius:2px;
    position:absolute;
    left:-3px;
    top:0;
    transition:top 0.3s var(--ease-geo);
}

.gauge-label{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.55rem;
    letter-spacing:0.1em;
    color:var(--lichen);
    text-transform:uppercase;
}

/* Horizon base */
.horizon{
    min-height:100vh;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:2;
}

.horizon-content{
    max-width:720px;
    width:90%;
    margin:0 auto;
    padding:6vh 2rem;
}

.depth-marker{
    position:absolute;
    left:max(1rem,calc((100% - 720px) / 2 - 100px));
    bottom:1rem;
    font-family:'IBM Plex Mono',monospace;
    font-size:clamp(0.65rem,0.85vw,0.8rem);
    letter-spacing:0.06em;
    color:var(--lichen);
    white-space:nowrap;
}

/* Horizon lines */
.horizon-line{
    height:6px;
    width:100%;
    position:relative;
    z-index:2;
}

/* === LAYER 1: O HORIZON === */
.horizon-o{
    background:
        radial-gradient(ellipse at 20% 30%,rgba(46,94,58,0.3),transparent 50%),
        radial-gradient(ellipse at 80% 60%,rgba(196,162,101,0.08),transparent 40%),
        radial-gradient(ellipse at 50% 80%,rgba(30,58,30,0.4),transparent 60%),
        radial-gradient(ellipse at 70% 20%,rgba(46,94,58,0.2),transparent 45%),
        var(--understory);
    animation:meshDrift 30s ease-in-out infinite;
}

@keyframes meshDrift{
    0%,100%{background-position:0 0,0 0,0 0,0 0}
    50%{background-position:3px -2px,-2px 3px,1px -1px,-3px 2px}
}

.hero-title{
    font-family:'Nunito',sans-serif;
    font-size:clamp(2.8rem,7vw,7.5rem);
    font-weight:700;
    letter-spacing:0.02em;
    line-height:1.15;
    color:var(--bark);
    text-align:center;
    margin-bottom:1rem;
}

.hero-subtitle{
    font-family:'IBM Plex Mono',monospace;
    font-size:clamp(0.65rem,0.85vw,0.8rem);
    letter-spacing:0.06em;
    color:var(--lichen);
    text-align:center;
}

/* === LAYER 2: A HORIZON === */
.horizon-a{
    background:
        radial-gradient(ellipse at 30% 40%,rgba(30,58,30,0.5),transparent 50%),
        radial-gradient(ellipse at 70% 70%,rgba(13,31,13,0.4),transparent 50%),
        radial-gradient(ellipse at 50% 20%,rgba(30,58,30,0.3),transparent 45%),
        var(--understory);
}

/* === LAYER 3: B HORIZON === */
.horizon-b{
    background:
        radial-gradient(ellipse at 40% 50%,rgba(30,58,30,0.3),transparent 50%),
        radial-gradient(ellipse at 60% 30%,rgba(13,31,13,0.5),transparent 50%),
        radial-gradient(ellipse at 20% 70%,rgba(13,31,13,0.4),transparent 45%),
        var(--midnight);
}

/* === LAYER 4: C HORIZON === */
.horizon-c{
    background:
        radial-gradient(ellipse at 50% 40%,rgba(46,94,58,0.2),transparent 50%),
        radial-gradient(ellipse at 30% 60%,rgba(30,58,30,0.3),transparent 50%),
        radial-gradient(ellipse at 70% 80%,rgba(13,31,13,0.3),transparent 45%),
        var(--understory);
}

/* === LAYER 5: BEDROCK === */
.horizon-bedrock{
    background:linear-gradient(to bottom,var(--midnight),#000000);
}

.bedrock-content{
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:0.5rem;
}

.bedrock-domain{
    font-family:'IBM Plex Mono',monospace;
    font-size:clamp(0.8rem,1.5vw,1.2rem);
    color:var(--lichen);
    opacity:0.5;
    letter-spacing:0.06em;
}

.specimen-complete{
    letter-spacing:0.2em;
    margin-top:1rem;
}

/* Specimen cards */
.specimen-card{
    transition:all 1.5s var(--ease-geo);
}

.note-card{
    background:var(--cream);
    padding:clamp(1.5rem,3vw,2.5rem);
    box-shadow:inset 0 0 20px rgba(0,0,0,0.06);
    color:var(--humus);
}

.glass-card{
    background:rgba(143,188,143,0.08);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    padding:clamp(1.5rem,3vw,2.5rem);
    border:1px solid rgba(143,188,143,0.15);
}

.section-heading{
    font-family:'Nunito',sans-serif;
    font-size:clamp(1.3rem,2.5vw,2.4rem);
    font-weight:600;
    letter-spacing:0.02em;
    line-height:1.15;
    margin-bottom:1rem;
    color:var(--humus);
}

.body-text{
    margin-bottom:1rem;
}

.body-text.inverse{color:var(--bark)}
.body-text.accent{color:var(--gold);font-weight:600}

.specimen-label{
    font-family:'IBM Plex Mono',monospace;
    font-size:clamp(0.65rem,0.85vw,0.8rem);
    letter-spacing:0.06em;
    color:var(--lichen);
    margin-top:0.5rem;
}

/* Bar chart */
.chart-title{
    font-family:'Nunito',sans-serif;
    font-size:clamp(1.1rem,2vw,1.6rem);
    font-weight:600;
    color:var(--bark);
    margin-bottom:1.5rem;
}

.bar-chart{display:flex;flex-direction:column;gap:1rem}

.bar-row{display:flex;flex-direction:column;gap:0.3rem}

.bar-label{
    font-family:'IBM Plex Mono',monospace;
    font-size:clamp(0.65rem,0.85vw,0.8rem);
    letter-spacing:0.06em;
    color:var(--lichen);
}

.bar{
    height:24px;
    background:var(--moss);
    width:var(--width);
    display:flex;
    align-items:center;
    justify-content:flex-end;
    padding-right:0.5rem;
    transition:width 1.5s var(--ease-geo);
}

.bar-value{
    font-family:'IBM Plex Mono',monospace;
    font-size:clamp(0.65rem,0.85vw,0.8rem);
    color:var(--lichen);
}

/* Footprint SVGs */
.footprint-svg{
    position:absolute;
    width:24px;height:24px;
    transition:opacity 0.8s var(--ease-geo);
}

.footprint-svg:hover{opacity:0.8 !important}

.fp-deer{right:15%;top:25%}
.fp-bird{right:10%;top:65%}
.fp-fox{left:8%;top:40%}

/* Responsive */
@media(max-width:768px){
    body::before,body::after{display:none}
    .root-network{display:none}
    .horizon-content{width:95%;padding:4vh 1rem}
    .depth-marker{left:1rem}
}