/* ============================================================
   badge.bar — Forest Terminal Stylesheet
   ============================================================ */

/* --- CSS Custom Properties --- */
:root {
    --midnight-understory: #0B1A10;
    --deep-undergrowth: #0A1F14;
    --aurora-green: #00E89D;
    --phosphor-mint: #7BFFC9;
    --bioluminescent-teal: #00C9A7;
    --pale-lichen: #D4E8DC;
    --sage-mist: #B8E6C8;
    --amber-sap: #E8A44A;
    --aurora-magenta: #C850C0;
    --moss-shadow: #163B24;
    --moss-code: #4A8C6A;
}

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

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

body {
    background: var(--midnight-understory);
    background-image: linear-gradient(180deg, #0B1A10 0%, #0A1F14 50%, #163B24 100%);
    color: var(--pale-lichen);
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.75;
    overflow-x: hidden;
    min-height: 100vh;
}

::selection {
    background: rgba(0, 232, 157, 0.3);
    color: var(--phosphor-mint);
}

/* --- Aurora Container (Fixed Background) --- */
#aurora-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 40vh;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity 1.5s ease;
    overflow: hidden;
}

#aurora-container.active {
    opacity: 1;
}

.aurora-strip {
    position: absolute;
    width: 120%;
    left: -10%;
    border-radius: 50%;
    filter: blur(40px);
    mix-blend-mode: screen;
    opacity: 0;
    will-change: transform, opacity;
}

.aurora-strip-1 {
    top: 5%;
    height: 250px;
    background: linear-gradient(90deg, transparent 0%, rgba(0, 232, 157, 0.25) 30%, rgba(0, 201, 167, 0.2) 60%, transparent 100%);
    animation: aurora-wave-1 8s ease-in-out infinite;
}

.aurora-strip-2 {
    top: 12%;
    height: 300px;
    background: linear-gradient(90deg, transparent 0%, rgba(200, 80, 192, 0.15) 40%, rgba(0, 232, 157, 0.2) 70%, transparent 100%);
    animation: aurora-wave-2 13s ease-in-out infinite;
    mix-blend-mode: soft-light;
}

.aurora-strip-3 {
    top: 3%;
    height: 200px;
    background: linear-gradient(90deg, transparent 10%, rgba(123, 255, 201, 0.2) 50%, transparent 90%);
    animation: aurora-wave-3 21s ease-in-out infinite;
    mix-blend-mode: color-dodge;
}

.aurora-strip-4 {
    top: 18%;
    height: 280px;
    background: linear-gradient(90deg, transparent 5%, rgba(0, 201, 167, 0.18) 35%, rgba(200, 80, 192, 0.12) 65%, transparent 95%);
    animation: aurora-wave-4 8s ease-in-out infinite;
    animation-delay: 3s;
}

.aurora-strip-5 {
    top: 8%;
    height: 350px;
    background: linear-gradient(90deg, transparent 0%, rgba(0, 232, 157, 0.12) 25%, rgba(123, 255, 201, 0.15) 55%, rgba(200, 80, 192, 0.1) 80%, transparent 100%);
    animation: aurora-wave-5 13s ease-in-out infinite;
    animation-delay: 5s;
    mix-blend-mode: screen;
}

.aurora-strip-6 {
    top: 15%;
    height: 220px;
    background: linear-gradient(90deg, transparent 15%, rgba(200, 80, 192, 0.2) 45%, rgba(0, 201, 167, 0.15) 75%, transparent 100%);
    animation: aurora-wave-6 21s ease-in-out infinite;
    animation-delay: 2s;
    mix-blend-mode: soft-light;
}

.aurora-strip-7 {
    top: 1%;
    height: 180px;
    background: linear-gradient(90deg, transparent 20%, rgba(123, 255, 201, 0.18) 50%, transparent 80%);
    animation: aurora-wave-7 8s ease-in-out infinite;
    animation-delay: 7s;
    mix-blend-mode: color-dodge;
}

@keyframes aurora-wave-1 {
    0%, 100% { transform: translateX(-5%) scaleY(1); opacity: 0.6; }
    50% { transform: translateX(5%) scaleY(1.2); opacity: 0.9; }
}

@keyframes aurora-wave-2 {
    0%, 100% { transform: translateX(3%) scaleY(1.1); opacity: 0.5; }
    50% { transform: translateX(-4%) scaleY(0.9); opacity: 0.8; }
}

@keyframes aurora-wave-3 {
    0%, 100% { transform: translateX(-2%) scaleY(0.9); opacity: 0.4; }
    50% { transform: translateX(6%) scaleY(1.3); opacity: 0.7; }
}

@keyframes aurora-wave-4 {
    0%, 100% { transform: translateX(4%) scaleY(1); opacity: 0.5; }
    50% { transform: translateX(-3%) scaleY(1.15); opacity: 0.75; }
}

@keyframes aurora-wave-5 {
    0%, 100% { transform: translateX(-6%) scaleY(1.1); opacity: 0.35; }
    50% { transform: translateX(4%) scaleY(0.85); opacity: 0.65; }
}

@keyframes aurora-wave-6 {
    0%, 100% { transform: translateX(2%) scaleY(0.95); opacity: 0.45; }
    50% { transform: translateX(-5%) scaleY(1.2); opacity: 0.7; }
}

@keyframes aurora-wave-7 {
    0%, 100% { transform: translateX(-3%) scaleY(1.05); opacity: 0.3; }
    50% { transform: translateX(3%) scaleY(1.25); opacity: 0.55; }
}

/* --- Scan Line Overlay --- */
#scanline-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 100;
    background-image: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 232, 157, 0.03) 2px,
        rgba(0, 232, 157, 0.03) 3px
    );
}

/* --- Firefly Container --- */
#firefly-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
    overflow: hidden;
}

.firefly {
    position: absolute;
    border-radius: 50%;
    will-change: transform, opacity;
}

/* --- Zone Base Styles --- */
.zone {
    position: relative;
    z-index: 1;
    min-height: 100vh;
}

/* --- TRUNK ZONE --- */
#trunk-zone {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.trunk-terminal {
    position: relative;
    width: min(700px, 85vw);
    background: rgba(10, 31, 20, 0.92);
    border: 1px solid var(--moss-shadow);
    border-radius: 3px 12px 5px 18px;
    box-shadow:
        0 0 60px rgba(0, 232, 157, 0.08),
        inset 0 0 30px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    transition: box-shadow 0.5s ease;
}

.trunk-terminal:hover #scanline-overlay {
    opacity: 1;
}

.terminal-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(22, 59, 36, 0.6);
    border-bottom: 1px solid var(--moss-shadow);
}

.terminal-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.terminal-dot.red { background: #E85050; }
.terminal-dot.yellow { background: var(--amber-sap); }
.terminal-dot.green { background: var(--aurora-green); }

.terminal-title {
    font-family: 'Chakra Petch', sans-serif;
    font-weight: 500;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--moss-code);
    margin-left: 8px;
}

.terminal-body {
    padding: 24px;
    min-height: 200px;
}

.terminal-line {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 15px;
    line-height: 1.8;
    color: var(--pale-lichen);
}

.prompt {
    color: var(--aurora-green);
    margin-right: 8px;
}

.typed-output {
    color: var(--pale-lichen);
}

.cursor {
    color: var(--aurora-green);
    animation: blink 1s step-end infinite;
    font-weight: 500;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.response-line {
    opacity: 0;
    transform: translateY(5px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.response-line.visible {
    opacity: 1;
    transform: translateY(0);
}

.highlight-green {
    color: var(--aurora-green);
    font-weight: 500;
}

.highlight-magenta {
    color: var(--aurora-magenta);
    font-weight: 500;
}

/* Bark cracks */
.bark-crack {
    position: absolute;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(22, 59, 36, 0.4) 20%,
        rgba(11, 26, 16, 0.6) 50%,
        rgba(22, 59, 36, 0.4) 80%,
        transparent 100%
    );
    opacity: 0;
    transition: opacity 0.8s ease;
    pointer-events: none;
}

.bark-crack-1 {
    top: 20%;
    left: -5%;
    width: 110%;
    height: 3px;
    transform: rotate(-2deg);
}

.bark-crack-2 {
    top: 55%;
    left: -3%;
    width: 106%;
    height: 2px;
    transform: rotate(1.5deg);
}

.bark-crack-3 {
    top: 78%;
    left: -4%;
    width: 108%;
    height: 4px;
    transform: rotate(-1deg);
}

.bark-crack.visible {
    opacity: 1;
}

/* --- BRANCHING ZONE --- */
#branching-zone {
    position: relative;
    padding: 10vh 0;
    min-height: 250vh;
}

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

.mycelial-path {
    fill: none;
    stroke: var(--bioluminescent-teal);
    stroke-width: 1.5;
    opacity: 0.4;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    transition: stroke-dashoffset 2s ease;
}

.mycelial-path.drawn {
    stroke-dashoffset: 0;
}

.branch-container {
    position: relative;
    z-index: 1;
    margin-bottom: 8vh;
}

.branch-left {
    width: min(550px, 65vw);
    margin-left: 8vw;
}

.branch-right {
    width: min(500px, 60vw);
    margin-left: auto;
    margin-right: 10vw;
}

.branch-center {
    width: min(600px, 70vw);
    margin-left: auto;
    margin-right: auto;
}

/* --- Bark Panel (Content Container) --- */
.bark-panel {
    background: rgba(10, 31, 20, 0.85);
    border: 1px solid var(--moss-shadow);
    border-width: 1px 2px 3px 1px;
    border-radius: 3px 12px 5px 18px;
    padding: 32px;
    position: relative;
    backdrop-filter: blur(4px);
    box-shadow:
        0 4px 30px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(74, 140, 106, 0.1);
    transition: box-shadow 0.5s ease;
}

.bark-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background-image: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 232, 157, 0.02) 2px,
        rgba(0, 232, 157, 0.02) 3px
    );
    pointer-events: none;
}

.bark-panel.phosphor-bloom {
    box-shadow:
        0 0 40px rgba(0, 232, 157, 0.3),
        0 4px 30px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(74, 140, 106, 0.1);
}

.bark-panel.scan-flicker::before {
    background-image: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 232, 157, 0.15) 2px,
        rgba(0, 232, 157, 0.15) 3px
    );
}

/* --- Typography --- */
.section-heading {
    font-family: 'Righteous', cursive;
    font-weight: 400;
    font-size: clamp(36px, 5vw, 64px);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--aurora-green);
    background: linear-gradient(135deg, #00E89D 0%, #7BFFC9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
    margin-bottom: 24px;
    position: relative;
}

/* Phosphor glow via pseudo-element since text-fill is transparent */
.section-heading::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    font-family: 'Righteous', cursive;
    font-weight: 400;
    font-size: inherit;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--aurora-green);
    text-shadow: 0 0 20px rgba(0, 232, 157, 0.5), 0 0 60px rgba(0, 232, 157, 0.2);
    z-index: -1;
    opacity: 0.5;
}

.body-text {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.75;
    color: var(--pale-lichen);
    margin-bottom: 16px;
}

.body-text:last-child {
    margin-bottom: 0;
}

.body-text em {
    color: var(--sage-mist);
    font-style: italic;
}

.code-text {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 14px;
    color: var(--aurora-green);
}

.metadata-label {
    font-family: 'Chakra Petch', sans-serif;
    font-weight: 500;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--moss-code);
    display: block;
    margin-bottom: 12px;
}

.aurora-text {
    font-family: 'Righteous', cursive;
    font-weight: 400;
    background: linear-gradient(135deg, #00E89D 0%, #00C9A7 40%, #C850C0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.aurora-green-text {
    color: var(--aurora-green);
}

/* --- Terminal Excerpt --- */
.terminal-excerpt {
    background: rgba(10, 31, 20, 0.95);
    padding: 24px;
}

.terminal-excerpt .terminal-line {
    font-size: 14px;
    line-height: 1.9;
}

/* --- CANOPY ZONE --- */
#canopy-zone {
    position: relative;
    padding: 15vh 0 20vh;
    min-height: 200vh;
}

.canopy-content {
    position: relative;
    z-index: 1;
}

.canopy-heading {
    text-align: center;
    margin-bottom: 10vh;
}

.canopy-heading .aurora-text {
    font-size: clamp(48px, 8vw, 128px);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Leaf fragment text */
.leaf-text-cluster {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px 40px;
    padding: 5vh 10vw;
    margin-bottom: 10vh;
}

.leaf-fragment {
    font-family: 'Anybody', sans-serif;
    font-weight: 200;
    font-size: clamp(24px, 4vw, 48px);
    color: var(--sage-mist);
    opacity: 0;
    transform: translateY(var(--drift, 0));
    transition: opacity 0.8s ease var(--delay, 0s), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0s);
}

.leaf-text-cluster.revealed .leaf-fragment {
    opacity: 1;
    transform: translateY(0);
}

.canopy-panel {
    width: min(600px, 65vw);
    margin: 0 auto 8vh;
}

.canopy-panel-small {
    width: min(450px, 55vw);
    margin-left: 15vw;
}

/* --- ROOT ZONE --- */
#root-zone {
    position: relative;
    padding: 15vh 0 10vh;
    min-height: 100vh;
    background: linear-gradient(180deg, transparent 0%, rgba(11, 26, 16, 0.8) 30%, #0B1A10 100%);
}

.root-tendrils-svg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.root-tendril {
    fill: none;
    stroke: var(--bioluminescent-teal);
    opacity: 0.3;
    animation: tendril-pulse 4s ease-in-out infinite;
}

@keyframes tendril-pulse {
    0%, 100% { stroke-opacity: 0.2; }
    50% { stroke-opacity: 0.5; }
}

.root-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.root-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 400px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(0, 232, 157, 0.06) 0%, transparent 70%);
    pointer-events: none;
}

.root-panel {
    width: min(600px, 70vw);
    margin-bottom: 8vh;
}

.root-bark-panel {
    border-color: var(--moss-shadow);
}

.root-heading {
    text-align: center;
}

.root-terminal {
    width: min(550px, 65vw);
    margin-bottom: 10vh;
}

.root-terminal-panel {
    background: rgba(10, 31, 20, 0.95);
}

.root-final-message {
    text-align: center;
    padding: 5vh 0;
}

.final-text {
    font-size: clamp(48px, 8vw, 96px);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.root-final-message .metadata-label {
    font-size: 14px;
    letter-spacing: 0.2em;
    color: var(--moss-code);
    text-align: center;
}

/* --- Reveal / Progressive Disclosure --- */
.reveal-container {
    opacity: 0;
    transform: translateY(30px) scale(0.97);
    transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-container.revealed {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Staggered reveal for bark-panel children */
.reveal-container.revealed .bark-panel {
    animation: panel-bg-fade 0.4s ease forwards;
}

@keyframes panel-bg-fade {
    from { background-color: rgba(10, 31, 20, 0); }
    to { background-color: rgba(10, 31, 20, 0.85); }
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .branch-left,
    .branch-right,
    .branch-center {
        width: 90vw;
        margin-left: 5vw;
        margin-right: 5vw;
    }

    .canopy-panel,
    .canopy-panel-small {
        width: 90vw;
        margin-left: 5vw;
        margin-right: 5vw;
    }

    .root-panel,
    .root-terminal {
        width: 90vw;
    }

    .bark-panel {
        padding: 24px 20px;
    }

    .leaf-text-cluster {
        padding: 5vh 5vw;
        gap: 12px 24px;
    }

    .terminal-body {
        padding: 16px;
    }

    .trunk-terminal {
        width: 92vw;
    }
}