/* ============================================
   footprint.broker - Styles
   A geological descent through biome layers
   Palette references:
     Deep Loam:        #1a1810
     Canopy Green:     #2d5016
     Understory Moss:  #5a7247
     Bleached Coral:   #c4a882
     Tidal Sediment:   #8b7355
     Permafrost Blue:  #9eaab4
     Thaw Water:       #6d8a96
     Mangrove Root:    #3d2b1a
     Silt Cream:       #e8e2d4
     Ash White:        #f5f2ec
     Signal Red:       #a83228
     Charcoal Vein:    #2e2e2c
   ============================================ */

:root {
    --deep-loam: #1a1810;
    --canopy-green: #2d5016;
    --understory-moss: #5a7247;
    --bleached-coral: #c4a882;
    --tidal-sediment: #8b7355;
    --permafrost-blue: #9eaab4;
    --thaw-water: #6d8a96;
    --mangrove-root: #3d2b1a;
    --silt-cream: #e8e2d4;
    --ash-white: #f5f2ec;
    --signal-red: #a83228;
    --charcoal-vein: #2e2e2c;
}

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

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

body {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 300;
    background-color: #1a1810;
    color: #d4d0c8;
    line-height: 1.65;
    overflow-x: hidden;
    transition: background-color 800ms ease;
}

/* ---------- Typography ---------- */
.section-title {
    font-family: 'DM Serif Display', serif;
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.section-body {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 300;
    font-size: clamp(0.875rem, 1.2vw, 1.125rem);
    line-height: 1.65;
    max-width: 55ch;
}

.section-annotation {
    font-family: 'Caveat', cursive;
    font-weight: 400;
    font-size: clamp(0.8rem, 1vw, 1rem);
    color: #6b7c5e;
    opacity: 0.7;
}

.data-label {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ---------- Progress Bar (Soil Core) ---------- */
#progress-bar {
    position: fixed;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 200px;
    z-index: 100;
    display: flex;
    flex-direction: column;
    border-radius: 3px;
    overflow: hidden;
    opacity: 0;
    transition: opacity 600ms ease;
}

#progress-bar.visible {
    opacity: 1;
}

.progress-band {
    flex: 1;
    transition: opacity 300ms ease;
}

.progress-band.active {
    opacity: 1;
}

.progress-band:not(.active) {
    opacity: 0.3;
}

#progress-marker {
    position: absolute;
    left: -2px;
    width: 10px;
    height: 3px;
    background: #e8e2d4;
    border-radius: 1px;
    transition: top 300ms ease;
    top: 0;
}

/* ---------- Background Contour SVG ---------- */
#contour-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.section-contours {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* ---------- Biome Sections (shared) ---------- */
.biome-section {
    position: relative;
    min-height: 120vh;
    width: 100%;
    overflow: hidden;
}

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

.diagonal-divider svg {
    display: block;
    width: 100%;
    height: clamp(60px, 8vw, 120px);
}

/* ============================
   CANOPY LAYER (Hero)
   ============================ */
#canopy {
    background-color: #1a1810;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

/* Hero contour animation */
#hero-contours {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(80vw, 600px);
    height: min(80vw, 600px);
    z-index: 1;
    opacity: 0;
    animation: fadeInContours 800ms 600ms ease forwards;
}

@keyframes fadeInContours {
    to { opacity: 1; }
}

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

.contour-line {
    opacity: 0.15;
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
}

.contour-line.c1 {
    animation: drawContour 2500ms 600ms ease-in-out forwards;
}
.contour-line.c2 {
    animation: drawContour 2500ms 800ms ease-in-out forwards;
}
.contour-line.c3 {
    animation: drawContour 2500ms 1000ms ease-in-out forwards;
}
.contour-line.c4 {
    animation: drawContour 2500ms 1200ms ease-in-out forwards;
}

@keyframes drawContour {
    to {
        stroke-dashoffset: 0;
    }
}

/* Hero text */
#hero-text {
    position: relative;
    z-index: 2;
    text-align: center;
    opacity: 0;
    transform: translateY(-10px);
    animation: heroFadeIn 800ms 1800ms ease forwards;
}

@keyframes heroFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#hero-title {
    font-family: 'DM Serif Display', serif;
    font-weight: 400;
    font-size: clamp(5rem, 12vw, 14rem);
    color: #e8e2d4;
    letter-spacing: -0.02em;
    line-height: 1;
}

#hero-subtitle {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 300;
    font-size: 1rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #e8e2d4;
    opacity: 0;
    animation: subtitleFadeIn 600ms 2200ms ease forwards;
}

@keyframes subtitleFadeIn {
    to { opacity: 0.5; }
}

/* Tree illustration */
#tree-illustration {
    position: absolute;
    right: 5%;
    top: 10%;
    width: clamp(200px, 30vw, 400px);
    height: 80%;
    z-index: 1;
    opacity: 0;
    animation: treeFadeIn 1200ms 2600ms ease forwards;
}

@keyframes treeFadeIn {
    to { opacity: 0.7; }
}

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

.tree-trunk, .tree-branch {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: drawBranch 3000ms 2800ms ease-in-out forwards;
}

.tree-branch.b1 { animation-delay: 3000ms; }
.tree-branch.b2 { animation-delay: 3200ms; }
.tree-branch.b3 { animation-delay: 3400ms; }
.tree-branch.b4 { animation-delay: 3600ms; }
.tree-branch.b5 { animation-delay: 3800ms; }
.tree-branch.b6 { animation-delay: 4000ms; }
.tree-branch.b7 { animation-delay: 4200ms; }

@keyframes drawBranch {
    to { stroke-dashoffset: 0; }
}

/* Tree labels with sway */
.tree-label {
    font-family: 'Caveat', cursive;
    font-size: 14px;
    opacity: 0;
    animation: labelAppear 600ms 4500ms ease forwards;
}

@keyframes labelAppear {
    to { opacity: 0.8; }
}

.sway-label {
    animation: labelAppear 600ms 4500ms ease forwards, sway 6s 5s ease-in-out infinite;
}

@keyframes sway {
    0%, 100% { transform: translateX(0) translateY(0); }
    25% { transform: translateX(3px) translateY(-2px); }
    50% { transform: translateX(-2px) translateY(1px); }
    75% { transform: translateX(2px) translateY(-1px); }
}

/* Trunk annotation - vertical text */
.trunk-annotation {
    position: absolute;
    right: 48%;
    top: 30%;
    writing-mode: vertical-rl;
    font-family: 'Caveat', cursive;
    font-size: clamp(0.8rem, 1vw, 1rem);
    color: #6b7c5e;
    opacity: 0;
    animation: labelAppear 600ms 4800ms ease forwards;
    letter-spacing: 0.05em;
}

/* Scroll prompt */
#scroll-prompt {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 3;
    opacity: 0;
    animation: scrollPromptIn 600ms 3000ms ease forwards;
}

@keyframes scrollPromptIn {
    to { opacity: 1; }
}

.scroll-line {
    width: 1px;
    height: 40px;
    background: #e8e2d4;
    opacity: 0.3;
    margin-bottom: 8px;
}

.scroll-chevron {
    animation: pulseDown 2s ease-in-out infinite;
}

@keyframes pulseDown {
    0%, 100% { transform: translateY(0); opacity: 0.6; }
    50% { transform: translateY(8px); opacity: 1; }
}

/* ============================
   REEF LAYER
   ============================ */
#reef {
    background-color: #e8e2d4;
    padding: 8vh 0 4vh;
    min-height: 120vh;
}

.reef-header {
    padding: 0 8vw;
    margin-bottom: 6vh;
}

.reef-title {
    font-size: clamp(2.5rem, 5vw, 5rem);
    color: #c4a882;
    margin-bottom: 1.5rem;
}

.reef-intro {
    color: #3a3a3a;
    max-width: 60ch;
}

/* Caustic water overlay */
.caustic-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    opacity: 0.4;
}

/* Horizontal scroll track */
.reef-scroll-track {
    position: relative;
    z-index: 2;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4vh 0;
}

.reef-scroll-track::-webkit-scrollbar {
    display: none;
}

.reef-scroll-inner {
    display: flex;
    width: max-content;
    gap: 4vw;
    padding: 0 8vw;
}

.coral-cluster {
    flex-shrink: 0;
    width: clamp(280px, 40vw, 450px);
    scroll-snap-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.coral-svg {
    width: 100%;
    height: clamp(250px, 35vh, 400px);
}

.coral-data {
    text-align: center;
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.coral-data .data-label {
    color: #8b7355;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
}

.coral-data .data-value {
    font-family: 'DM Serif Display', serif;
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    color: #3d2b1a;
    letter-spacing: -0.02em;
}

.coral-data .data-year {
    font-family: 'Caveat', cursive;
    font-size: 0.9rem;
    color: #8b7355;
    opacity: 0.7;
}

/* ============================
   TUNDRA LAYER
   ============================ */
#tundra {
    background-color: #d4d0c8;
    padding: 10vh 6vw;
    min-height: 120vh;
    display: flex;
    flex-direction: column;
}

.tundra-title {
    font-size: clamp(2.5rem, 5vw, 5rem);
    color: #9eaab4;
    margin-bottom: 8vh;
    text-align: center;
}

.tundra-field {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: clamp(1.5rem, 3vw, 3rem);
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
}

.ice-card {
    --drift-x: 0;
    --drift-y: 0;
    transform: translate(calc(var(--drift-x) * 1px), calc(var(--drift-y) * 1px));
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    backdrop-filter: blur(12px);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid #9eaab4;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    box-shadow: 20px 30px 60px rgba(0, 0, 0, 0.15);
    will-change: transform;
}

.ice-stat {
    font-family: 'DM Serif Display', serif;
    font-size: clamp(2rem, 4vw, 3.5rem);
    color: #9eaab4;
    letter-spacing: -0.02em;
    line-height: 1;
}

.ice-stat.signal-red {
    color: #a83228;
}

.ice-unit {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 500;
    font-size: 0.85rem;
    color: #3a3a3a;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ice-detail {
    font-family: 'Caveat', cursive;
    font-size: 0.95rem;
    color: #6d8a96;
    opacity: 0.8;
}

/* ============================
   MANGROVE LAYER
   ============================ */
#mangrove {
    background-color: #1a1810;
    padding: 10vh 6vw;
    min-height: 120vh;
    display: flex;
    align-items: center;
}

.mangrove-content {
    display: flex;
    gap: 6vw;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    align-items: center;
}

.mangrove-roots-container {
    position: relative;
    flex: 0 0 40%;
}

.mangrove-svg {
    width: 100%;
    height: auto;
}

.root-path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    transition: stroke-dashoffset 4000ms ease-in-out;
}

.root-path.drawing {
    stroke-dashoffset: 0;
}

.root-path.r1 { transition-delay: 0ms; }
.root-path.r2 { transition-delay: 200ms; }
.root-path.r3 { transition-delay: 400ms; }
.root-path.r4 { transition-delay: 600ms; }
.root-path.r5 { transition-delay: 800ms; }
.root-path.r6 { transition-delay: 1000ms; }
.root-path.r7 { transition-delay: 1200ms; }
.root-path.r8 { transition-delay: 1400ms; }
.root-path.r9 { transition-delay: 1600ms; }
.root-path.r10 { transition-delay: 1800ms; }

.leader-line {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    transition: stroke-dashoffset 800ms ease 4200ms;
}

.leader-line.drawing {
    stroke-dashoffset: 0;
}

.root-annotation {
    position: absolute;
    font-family: 'Caveat', cursive;
    font-size: clamp(0.75rem, 1vw, 0.95rem);
    color: #6b7c5e;
    opacity: 0;
    transition: opacity 600ms ease;
    white-space: nowrap;
}

.root-annotation.visible {
    opacity: 0.7;
}

.mangrove-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.mangrove-title {
    font-size: clamp(2.5rem, 5vw, 5rem);
    color: #3d2b1a;
    /* Light color on dark bg */
    color: #c4a882;
}

.mangrove-text .section-body {
    color: #d4d0c8;
}

.mangrove-text .section-annotation {
    margin-top: 1rem;
    font-style: italic;
}

/* ============================
   BEDROCK LAYER (Footer)
   ============================ */
#bedrock {
    background-color: #1a1810;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10vh 6vw;
}

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

.bedrock-label {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 500;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #d4d0c8;
    opacity: 0.5;
}

.bedrock-number {
    font-family: 'DM Serif Display', serif;
    font-weight: 400;
    font-size: clamp(8rem, 20vw, 28rem);
    color: #e8e2d4;
    letter-spacing: -0.02em;
    line-height: 0.85;
}

.bedrock-unit {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 300;
    font-size: clamp(1rem, 2vw, 1.5rem);
    color: #d4d0c8;
    opacity: 0.6;
}

.bedrock-year {
    font-family: 'Caveat', cursive;
    font-size: 1.2rem;
    color: #6b7c5e;
    opacity: 0.5;
    margin-top: 0.5rem;
}

/* Seismograph */
.seismograph-container {
    width: 100%;
    max-width: 1000px;
    margin-top: 8vh;
    overflow: hidden;
}

.seismograph-svg {
    width: 100%;
    height: 60px;
}

.seismo-line {
    animation: seismoShift 4s linear infinite;
}

@keyframes seismoShift {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50px); }
}

.bedrock-footnote {
    font-family: 'Caveat', cursive;
    font-size: 0.9rem;
    color: #6b7c5e;
    opacity: 0.4;
    margin-top: 2rem;
    letter-spacing: 0.1em;
}

/* ============================
   Responsive
   ============================ */
@media (max-width: 768px) {
    #tree-illustration {
        display: none;
    }

    .tundra-field {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .mangrove-content {
        flex-direction: column;
    }

    .mangrove-roots-container {
        flex: 0 0 auto;
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
    }

    #progress-bar {
        display: none;
    }

    .reef-scroll-inner {
        padding: 0 4vw;
    }
}

@media (max-width: 480px) {
    .tundra-field {
        gap: 1rem;
    }

    .ice-card {
        padding: 1.2rem;
    }

    .coral-cluster {
        width: 85vw;
    }
}