/* === BASE RESET & GLOBALS === */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --parchment: #f4ede4;
    --dark-umber: #3b3228;
    --warm-walnut: #6b5d4f;
    --deep-sapphire: #1a3a5c;
    --malachite: #2d6a4f;
    --carnelian: #9c3d2a;
    --amber: #b8860b;
    --warm-dark: #4a3f35;
    --midnight-soil: #1a1714;
    --panel-bg: rgba(244, 237, 228, 0.85);
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--parchment);
    color: var(--dark-umber);
    font-family: 'Source Serif 4', Georgia, serif;
    font-weight: 400;
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    line-height: 1.72;
    overflow-x: hidden;
}

/* === SVG FILTERS (hidden) === */
.svg-filters {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* === WASHI TEXTURE OVERLAY === */
.washi-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
    filter: url(#washi);
    opacity: 0.04;
}

/* === PLANE 1: SUBSTRATE === */
.substrate {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0.08;
    transition: opacity 1.5s ease;
}

.substrate-roots {
    width: 80vmin;
    height: 80vmin;
    animation: slowRotate 1800s linear infinite;
}

@keyframes slowRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* === PLANE 3: FLOATING MARKERS === */
.floating-markers {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 480vh;
    pointer-events: none;
    z-index: 50;
}

.marker {
    position: absolute;
    width: 40px;
    height: 40px;
    pointer-events: auto;
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation: gentleDrift 8s ease-in-out infinite alternate;
}

.marker:nth-child(2) { animation-delay: -2s; animation-duration: 10s; }
.marker:nth-child(3) { animation-delay: -4s; animation-duration: 7s; }
.marker:nth-child(4) { animation-delay: -1s; animation-duration: 9s; }
.marker:nth-child(5) { animation-delay: -3s; animation-duration: 11s; }

@keyframes gentleDrift {
    0% { transform: translate(0, 0) rotate(0deg); }
    100% { transform: translate(8px, -6px) rotate(5deg); }
}

.marker:hover {
    transform: rotate(15deg) scale(1.2) !important;
}

.marker::after {
    content: attr(data-tip);
    position: absolute;
    bottom: 110%;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.7rem;
    color: var(--warm-walnut);
    background: var(--parchment);
    padding: 4px 10px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    letter-spacing: 0.06em;
}

.marker:hover::after {
    opacity: 1;
}

/* === PROGRESS STEM === */
.progress-stem {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.stem-line {
    position: absolute;
    width: 1px;
    height: 100%;
    background: var(--amber);
    opacity: 0.3;
}

.leaf-node {
    width: 20px;
    height: 20px;
    position: relative;
    z-index: 1;
}

.leaf-node svg {
    width: 100%;
    height: 100%;
}

.leaf-path {
    transition: fill 0.6s ease, stroke 0.3s ease;
}

.leaf-node.active .leaf-path {
    fill: var(--amber);
    fill-opacity: 0.8;
}

/* === ZONES GENERAL === */
.zone {
    position: relative;
    z-index: 10;
}

/* === ZONE 1: ROOT === */
.zone-root {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.root-animation-container {
    position: relative;
    width: clamp(250px, 50vw, 400px);
    height: clamp(300px, 60vh, 500px);
}

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

.taproot-main,
.taproot-branch {
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
}

.taproot-main.animate {
    animation: drawLine 1.5s ease-out forwards;
    animation-delay: 1.2s;
}

.taproot-branch.animate {
    animation: drawLine 1s ease-out forwards;
}

.taproot-b1.animate { animation-delay: 1.8s; }
.taproot-b2.animate { animation-delay: 2.0s; }
.taproot-b3.animate { animation-delay: 2.2s; }
.taproot-b4.animate { animation-delay: 2.4s; }
.taproot-b5.animate { animation-delay: 2.6s; }
.taproot-b6.animate { animation-delay: 2.8s; }

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

.root-ring {
    opacity: 0;
}

.root-ring.animate {
    animation: ringPulse 1s ease-out forwards;
}

.ring-1.animate { animation-delay: 2.0s; }
.ring-2.animate { animation-delay: 2.3s; }
.ring-3.animate { animation-delay: 2.6s; }
.ring-4.animate { animation-delay: 2.9s; }

@keyframes ringPulse {
    0% { opacity: 0; transform-origin: center; }
    100% { opacity: 1; }
}

.domain-title {
    font-family: 'Zilla Slab', serif;
    font-weight: 700;
    font-size: clamp(3rem, 8vw, 6.5rem);
    color: var(--dark-umber);
    letter-spacing: 0.02em;
    opacity: 0;
    margin-top: -2rem;
    transition: opacity 0.8s ease;
}

.domain-title.visible {
    opacity: 1;
}

.domain-subtitle {
    font-family: 'Source Serif 4', Georgia, serif;
    font-weight: 400;
    color: var(--warm-walnut);
    font-size: clamp(1rem, 2vw, 1.4rem);
    opacity: 0;
    margin-top: 0.5rem;
    transition: opacity 0.8s ease;
}

.domain-subtitle.visible {
    opacity: 1;
}

/* === ZONE 2: MYCELIUM === */
.zone-mycelium {
    min-height: 120vh;
    padding: 10vh 5vw;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 4vh;
}

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

.myc-path {
    stroke-dasharray: 800;
    stroke-dashoffset: 800;
    transition: stroke-dashoffset 2s ease-out;
}

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

/* === CONTENT PANELS === */
.content-panel {
    background: var(--panel-bg);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: clamp(2rem, 4vw, 3rem);
    max-width: 28em;
    position: relative;
    z-index: 10;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.content-panel.visible {
    opacity: 1;
    transform: translateY(0);
}

.panel-left {
    margin-right: auto;
    margin-left: 5%;
}

.panel-right {
    margin-left: auto;
    margin-right: 5%;
}

.zone-title {
    font-family: 'Zilla Slab', serif;
    font-weight: 600;
    font-size: clamp(2rem, 5vw, 3.5rem);
    color: var(--dark-umber);
    letter-spacing: 0.02em;
    margin-bottom: 1rem;
}

.content-panel p {
    color: var(--warm-dark);
    max-width: 38em;
    margin-bottom: 1em;
}

.content-panel p:last-child {
    margin-bottom: 0;
}

/* === TECH TERMS === */
.tech-term {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.85em;
    letter-spacing: 0.06em;
    color: var(--warm-walnut);
    padding-bottom: 2px;
}

.tech-term.sapphire {
    border-bottom: 2px solid var(--deep-sapphire);
}

.tech-term.malachite {
    border-bottom: 2px solid var(--malachite);
}

.tech-term.amber {
    border-bottom: 2px solid var(--amber);
}

/* === ZONE 3: CANOPY === */
.zone-canopy {
    min-height: 120vh;
    padding: 10vh 5vw;
    position: relative;
    display: flex;
    align-items: flex-start;
}

.leaf-venation {
    position: absolute;
    left: 2vw;
    top: 5vh;
    width: 55vw;
    max-width: 500px;
    height: auto;
    z-index: 0;
    opacity: 0.7;
}

.vein-midrib,
.vein-secondary,
.vein-tertiary,
.leaf-outline {
    stroke-dasharray: 800;
    stroke-dashoffset: 800;
    transition: stroke-dashoffset 2.5s ease-out;
}

.vein-midrib.drawn,
.vein-secondary.drawn,
.vein-tertiary.drawn,
.leaf-outline.drawn {
    stroke-dashoffset: 0;
}

.canopy-content {
    margin-left: auto;
    margin-right: 5%;
    display: flex;
    flex-direction: column;
    gap: 6vh;
    position: relative;
    z-index: 10;
    max-width: 28em;
}

.hanko-section-marker {
    width: 30px;
    height: 30px;
    margin-bottom: 0.8rem;
}

.canopy-title {
    color: var(--malachite);
}

.reveal-p {
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

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

/* === ZONE 4: SEED === */
.zone-seed {
    min-height: 80vh;
    padding: 10vh 5vw;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.seed-title {
    color: var(--amber);
    margin-bottom: 4vh;
    text-align: center;
}

.seed-pod-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(1.5rem, 3vw, 3rem);
    max-width: 900px;
}

.seed-chamber {
    width: clamp(140px, 18vw, 180px);
    height: clamp(180px, 22vw, 220px);
    background: var(--panel-bg);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    transform: scale(0.2);
    opacity: 0;
    transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.6s ease;
}

.seed-chamber.visible {
    transform: scale(1);
    opacity: 1;
}

.chamber-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1rem;
}

.chamber-diagram {
    width: 60px;
    height: 60px;
    margin-bottom: 0.6rem;
}

.chamber-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.75rem;
    color: var(--deep-sapphire);
    letter-spacing: 0.06em;
    font-weight: 400;
}

.chamber-spec {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.65rem;
    color: var(--warm-walnut);
    letter-spacing: 0.04em;
    margin-top: 0.3rem;
}

/* === ZONE 5: SKY === */
.zone-sky {
    min-height: 60vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.sky-dark-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--midnight-soil);
    opacity: 0;
    transition: opacity 0.1s linear;
    z-index: 0;
}

.sky-content {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 8vh 5vw;
}

.reaching-branch {
    width: clamp(250px, 40vw, 500px);
    height: auto;
}

.branch-main,
.branch-side1,
.branch-side2,
.branch-side3,
.branch-side4 {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    transition: stroke-dashoffset 2s ease-out;
}

.branch-main.drawn,
.branch-side1.drawn,
.branch-side2.drawn,
.branch-side3.drawn,
.branch-side4.drawn {
    stroke-dashoffset: 0;
}

.bud {
    transform: scale(0);
    transform-origin: center;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bud.bloom {
    transform: scale(1);
}

.bud-1 { transition-delay: 0.3s; }
.bud-2 { transition-delay: 0.45s; }
.bud-3 { transition-delay: 0.6s; }
.bud-4 { transition-delay: 0.75s; }
.bud-5 { transition-delay: 0.9s; }

.sky-domain-name {
    font-family: 'Zilla Slab', serif;
    font-weight: 700;
    font-size: clamp(3rem, 12vw, 8rem);
    color: var(--parchment);
    mix-blend-mode: screen;
    margin-top: -4rem;
    letter-spacing: 0.02em;
    opacity: 0;
    transition: opacity 1s ease;
}

.sky-domain-name.visible {
    opacity: 1;
}

.sky-closing {
    font-family: 'Source Serif 4', Georgia, serif;
    font-weight: 400;
    font-style: italic;
    color: var(--amber);
    font-size: clamp(1rem, 2vw, 1.4rem);
    margin-top: 1.5rem;
    opacity: 0;
    transition: opacity 1s ease 0.5s;
}

.sky-closing.visible {
    opacity: 1;
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .zone-mycelium {
        flex-direction: column;
    }

    .panel-left, .panel-right {
        margin-left: 5%;
        margin-right: 5%;
        max-width: 90%;
    }

    .zone-canopy {
        flex-direction: column;
    }

    .leaf-venation {
        position: relative;
        width: 70vw;
        left: auto;
        top: auto;
        margin: 0 auto 4vh;
    }

    .canopy-content {
        margin-left: 5%;
        margin-right: 5%;
        max-width: 90%;
    }

    .progress-stem {
        right: 10px;
    }

    .floating-markers {
        display: none;
    }

    .sky-domain-name {
        margin-top: -2rem;
    }
}