/* ==============================================
   namu.land - Forest-Organic Radial Tree Interface
   Palette: #F5F1ED, #EBE7E0, #E0DCD5, #F0EDE8,
            #2F5233, #6B9F7F, #8FAA8F, #5C4A42,
            #A68557, #2C2C24, #3D2817
   Fonts: Crimson Text, Source Serif 4, Inter,
          IBM Plex Mono, Playfair Display
   ============================================== */

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

html {
    font-size: 16px;
    overflow: hidden;
    height: 100%;
}

body {
    background: #F5F1ED;
    background-image:
        radial-gradient(circle at 50% 50%, #F5F1ED 0%, #EBE7E0 70%, #E0DCD5 100%);
    color: #2C2C24;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 0.005em;
    height: 100%;
    overflow: hidden;
    cursor: grab;
    position: relative;
}

body.is-panning {
    cursor: grabbing;
}

/* Wood Grain Texture Overlay */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(44, 44, 36, 0.02) 2px,
        rgba(44, 44, 36, 0.02) 4px
    );
    pointer-events: none;
    z-index: 0;
}

/* ============================================
   Breadcrumb Navigation
   ============================================ */

.breadcrumb {
    position: fixed;
    top: 24px;
    left: 28px;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.88rem;
    font-weight: 400;
    color: #5C4A42;
    line-height: 1.4;
    background: rgba(245, 241, 237, 0.85);
    padding: 8px 16px;
    border-radius: 6px;
    backdrop-filter: blur(6px);
}

.breadcrumb-item {
    cursor: pointer;
    transition: color 250ms ease-in-out;
    text-transform: capitalize;
}

.breadcrumb-item:hover {
    color: #2F5233;
}

.breadcrumb-item.active {
    color: #6B9F7F;
    font-weight: 500;
}

.breadcrumb-separator {
    color: #8FAA8F;
    opacity: 0.6;
    user-select: none;
}

/* ============================================
   Fractal Background
   ============================================ */

.fractal-bg {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* ============================================
   Root System Lines
   ============================================ */

.root-lines {
    position: fixed;
    top: 60px;
    left: 0;
    width: 100%;
    z-index: 1;
    pointer-events: none;
    opacity: 0.8;
}

/* ============================================
   Falling Leaves
   ============================================ */

.leaf-container {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
}

.falling-leaf {
    position: absolute;
    top: -40px;
    width: 20px;
    height: 28px;
    opacity: 0;
    animation: leafFall linear infinite;
    pointer-events: none;
}

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

@keyframes leafFall {
    0% {
        transform: translateY(0) translateX(0) rotate(0deg) scale(var(--leaf-scale, 1));
        opacity: 0;
    }
    5% {
        opacity: var(--leaf-opacity, 0.05);
    }
    95% {
        opacity: var(--leaf-opacity, 0.05);
    }
    100% {
        transform: translateY(110vh) translateX(var(--leaf-drift, 30px)) rotate(var(--leaf-rotate, 360deg)) scale(var(--leaf-scale, 1));
        opacity: 0;
    }
}

/* ============================================
   Tree Viewport & Canvas
   ============================================ */

.tree-viewport {
    position: fixed;
    inset: 0;
    overflow: hidden;
    z-index: 10;
}

.tree-canvas {
    position: absolute;
    width: 4000px;
    height: 4000px;
    left: 50%;
    top: 50%;
    transform-origin: 0 0;
    transform: translate(-50%, -50%) scale(1);
    transition: none;
}

.tree-canvas.smooth-transition {
    transition: transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ============================================
   Branch SVG Layer
   ============================================ */

.branch-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.branch-svg path {
    fill: none;
    stroke-linecap: round;
}

.branch-path-trunk {
    stroke: #2F5233;
    stroke-width: 3;
    opacity: 0.3;
    transition: opacity 250ms ease-in-out;
}

.branch-path-branch {
    stroke: #6B9F7F;
    stroke-width: 2;
    stroke-dasharray: 6 4;
    opacity: 0.3;
    transition: opacity 250ms ease-in-out;
}

.branch-path-leaf {
    stroke: #8FAA8F;
    stroke-width: 1;
    stroke-dasharray: 3 3;
    opacity: 0.25;
    transition: opacity 250ms ease-in-out;
}

.branch-path-trunk.path-highlighted,
.branch-path-branch.path-highlighted,
.branch-path-leaf.path-highlighted {
    opacity: 0.6;
    filter: url(#glow);
}

.branch-path-trunk.path-dimmed,
.branch-path-branch.path-dimmed,
.branch-path-leaf.path-dimmed {
    opacity: 0.08;
}

/* Branch Drawing Animation */
.branch-path-drawing {
    animation: drawBranch 1500ms cubic-bezier(0.42, 0, 0.58, 1) forwards;
}

@keyframes drawBranch {
    from { stroke-dashoffset: var(--path-length, 500); }
    to { stroke-dashoffset: 0; }
}

/* ============================================
   Node Base Styles
   ============================================ */

.node {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    cursor: pointer;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 300ms cubic-bezier(0.34, 1.56, 0.64, 1),
                transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 400ms ease-in-out;
}

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

.node.node-dimmed {
    opacity: 0.2;
    transform: scale(0.9);
    pointer-events: none;
}

.node.node-focused {
    z-index: 20;
}

/* ============================================
   Root Node
   ============================================ */

.node-root {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(ellipse at top-left, rgba(255,255,255,0.3) 0%, transparent 70%),
                radial-gradient(circle at center, #F5F1ED 0%, #EBE7E0 100%);
    border: 3px solid #2F5233;
    box-shadow: 0 4px 30px rgba(47, 82, 51, 0.12);
    text-align: center;
    animation: rootPulse 2.5s ease-in-out infinite;
    left: 50%;
    top: 50%;
    margin-left: -110px;
    margin-top: -110px;
    z-index: 15;
}

.node-root .node-rings {
    position: absolute;
    inset: -20px;
    pointer-events: none;
}

.node-root .growth-rings {
    width: 100%;
    height: 100%;
    animation: ringPulse 1200ms ease-in-out infinite alternate;
}

@keyframes ringPulse {
    from { opacity: 0.05; }
    to { opacity: 0.15; }
}

.node-root .node-content {
    position: relative;
    z-index: 2;
    padding: 20px;
}

.root-title {
    font-family: 'Crimson Text', serif;
    font-weight: 600;
    font-size: clamp(2.2rem, 7vw, 3.2rem);
    text-transform: uppercase;
    color: #2F5233;
    letter-spacing: 0.02em;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    line-height: 1.1;
}

.root-subtitle {
    font-family: 'Source Serif 4', 'Source Serif Pro', serif;
    font-weight: 400;
    font-size: clamp(0.8rem, 1.8vw, 1rem);
    color: #6B9F7F;
    letter-spacing: 0.01em;
    margin-top: 6px;
}

@keyframes rootPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(47, 82, 51, 0.4),
                    0 4px 30px rgba(47, 82, 51, 0.12);
    }
    50% {
        box-shadow: 0 0 20px 10px rgba(47, 82, 51, 0),
                    0 4px 30px rgba(47, 82, 51, 0.12);
    }
}

/* ============================================
   Trunk Nodes
   ============================================ */

.node-trunk {
    width: 150px;
    height: 90px;
    border-radius: 20px;
    background: radial-gradient(ellipse at top-left, rgba(255,255,255,0.3) 0%, transparent 70%),
                #F5F1ED;
    border: 3px solid #2F5233;
    box-shadow: 0 2px 16px rgba(47, 82, 51, 0.1);
    text-align: center;
}

.node-trunk:hover {
    box-shadow: 0 4px 24px rgba(47, 82, 51, 0.2);
}

.node-trunk .node-inner {
    padding: 12px 16px;
}

.trunk-title {
    font-family: 'Crimson Text', serif;
    font-weight: 600;
    font-size: clamp(1.1rem, 3vw, 1.4rem);
    text-transform: uppercase;
    color: #2F5233;
    letter-spacing: 0.02em;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    line-height: 1.2;
}

.trunk-desc {
    font-family: 'Source Serif 4', 'Source Serif Pro', serif;
    font-weight: 400;
    font-size: 0.78rem;
    color: #6B9F7F;
    letter-spacing: 0.01em;
    margin-top: 2px;
    line-height: 1.3;
}

/* ============================================
   Branch Nodes
   ============================================ */

.node-branch {
    width: 120px;
    height: 72px;
    border-radius: 14px;
    background: radial-gradient(ellipse at top-left, rgba(255,255,255,0.2) 0%, transparent 70%),
                #EBE7E0;
    border: 2px dashed #6B9F7F;
    box-shadow: 0 1px 10px rgba(107, 159, 127, 0.1);
    text-align: center;
}

.node-branch:hover {
    box-shadow: 0 3px 18px rgba(107, 159, 127, 0.2);
    border-color: #2F5233;
}

.node-branch .node-inner {
    padding: 8px 10px;
}

.branch-title {
    font-family: 'Source Serif 4', 'Source Serif Pro', serif;
    font-weight: 400;
    font-size: clamp(0.85rem, 2vw, 1.05rem);
    color: #6B9F7F;
    letter-spacing: 0.01em;
    line-height: 1.2;
}

.branch-desc {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 0.72rem;
    color: #5C4A42;
    margin-top: 2px;
    line-height: 1.3;
}

/* ============================================
   Leaf Nodes
   ============================================ */

.node-leaf {
    width: 70px;
    height: 36px;
    border-radius: 8px;
    background: #F0EDE8;
    border: 1px dotted #8FAA8F;
    box-shadow: 0 1px 6px rgba(143, 170, 143, 0.08);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.node-leaf:hover {
    background: #EBE7E0;
    border-color: #6B9F7F;
    box-shadow: 0 2px 12px rgba(107, 159, 127, 0.15);
}

.leaf-label {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 400;
    font-size: 0.65rem;
    color: #5C4A42;
    line-height: 1.2;
    letter-spacing: 0.01em;
}

/* ============================================
   Growth Placeholder Nodes
   ============================================ */

.node-growth-placeholder {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(166, 133, 87, 0.15);
    border: 1px solid rgba(166, 133, 87, 0.2);
    animation: growthPulse 3s ease-in-out infinite;
}

@keyframes growthPulse {
    0%, 100% { transform: scale(0.6); opacity: 0.1; }
    50% { transform: scale(1); opacity: 0.25; }
}

/* ============================================
   Leaf Tooltip
   ============================================ */

.leaf-tooltip {
    position: fixed;
    z-index: 200;
    pointer-events: none;
    transition: opacity 200ms ease-in-out, transform 200ms ease-in-out;
}

.leaf-tooltip.hidden {
    opacity: 0;
    transform: translateY(8px);
}

.leaf-tooltip.visible {
    opacity: 1;
    transform: translateY(0);
}

.tooltip-inner {
    background: rgba(245, 241, 237, 0.95);
    border: 1px solid #8FAA8F;
    border-radius: 8px;
    padding: 10px 14px;
    box-shadow: 0 4px 20px rgba(47, 82, 51, 0.12);
    backdrop-filter: blur(8px);
    max-width: 200px;
}

.tooltip-title {
    font-family: 'Crimson Text', serif;
    font-weight: 600;
    font-size: 1rem;
    color: #2F5233;
    margin-bottom: 4px;
}

.tooltip-desc {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 0.78rem;
    color: #5C4A42;
    line-height: 1.5;
}

/* ============================================
   Zoom Controls
   ============================================ */

.zoom-controls {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: rgba(245, 241, 237, 0.9);
    padding: 10px 8px;
    border-radius: 10px;
    border: 1px solid rgba(143, 170, 143, 0.3);
    backdrop-filter: blur(6px);
    box-shadow: 0 2px 12px rgba(47, 82, 51, 0.08);
}

.zoom-btn {
    width: 36px;
    height: 36px;
    border: 1px solid #8FAA8F;
    border-radius: 8px;
    background: #F5F1ED;
    color: #2F5233;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 1.1rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 200ms ease, border-color 200ms ease;
}

.zoom-btn:hover {
    background: #EBE7E0;
    border-color: #2F5233;
}

.zoom-level {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.72rem;
    color: #5C4A42;
    text-align: center;
    min-width: 36px;
}

.zoom-reset {
    font-size: 0.65rem;
    width: auto;
    padding: 0 10px;
    height: 28px;
    margin-top: 2px;
}

/* ============================================
   Epigraph
   ============================================ */

.epigraph {
    position: fixed;
    bottom: 28px;
    left: 28px;
    z-index: 100;
    max-width: 280px;
    opacity: 0.7;
}

.epigraph-text {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-style: italic;
    font-size: 0.95rem;
    color: #8FAA8F;
    opacity: 0.8;
    line-height: 1.5;
}

.epigraph-attr {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 400;
    font-size: 0.72rem;
    color: #5C4A42;
    opacity: 0.6;
    display: block;
    margin-top: 4px;
}

/* ============================================
   Leaf Venation Overlay on Branch Nodes
   ============================================ */

.node-branch::before {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 10px;
    background-image:
        linear-gradient(135deg, transparent 45%, rgba(107, 159, 127, 0.04) 45%, rgba(107, 159, 127, 0.04) 46%, transparent 46%),
        linear-gradient(45deg, transparent 45%, rgba(107, 159, 127, 0.03) 45%, rgba(107, 159, 127, 0.03) 46%, transparent 46%),
        linear-gradient(90deg, transparent 48%, rgba(107, 159, 127, 0.03) 48%, rgba(107, 159, 127, 0.03) 49%, transparent 49%);
    pointer-events: none;
    opacity: 0.6;
}

/* ============================================
   Branch Glow on Hover (Path Highlighting)
   ============================================ */

.branch-path-glow {
    stroke: #6B9F7F;
    stroke-width: 6;
    opacity: 0;
    filter: blur(4px);
    transition: opacity 250ms ease-in-out;
}

.branch-path-glow.glow-active {
    opacity: 0.25;
}

/* ============================================
   Growth Ring Background on Trunk Nodes
   ============================================ */

.node-trunk::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    background-image: conic-gradient(
        from 0deg,
        rgba(47, 82, 51, 0.03) 0deg,
        transparent 20deg,
        rgba(47, 82, 51, 0.02) 40deg,
        transparent 60deg,
        rgba(47, 82, 51, 0.04) 80deg,
        transparent 100deg,
        rgba(47, 82, 51, 0.02) 120deg,
        transparent 140deg,
        rgba(47, 82, 51, 0.03) 160deg,
        transparent 180deg,
        rgba(47, 82, 51, 0.02) 200deg,
        transparent 220deg,
        rgba(47, 82, 51, 0.04) 240deg,
        transparent 260deg,
        rgba(47, 82, 51, 0.02) 280deg,
        transparent 300deg,
        rgba(47, 82, 51, 0.03) 320deg,
        transparent 340deg,
        rgba(47, 82, 51, 0.03) 360deg
    );
    pointer-events: none;
}

/* ============================================
   Mobile Responsive
   ============================================ */

@media (max-width: 768px) {
    .breadcrumb {
        top: 12px;
        left: 12px;
        font-size: 0.75rem;
        padding: 6px 10px;
    }

    .zoom-controls {
        bottom: 16px;
        right: 16px;
        padding: 8px 6px;
    }

    .zoom-btn {
        width: 30px;
        height: 30px;
        font-size: 0.95rem;
    }

    .epigraph {
        display: none;
    }

    .node-root {
        width: 160px;
        height: 160px;
        margin-left: -80px;
        margin-top: -80px;
    }

    .root-title {
        font-size: 1.6rem;
    }

    .root-subtitle {
        font-size: 0.75rem;
    }

    .node-trunk {
        width: 120px;
        height: 72px;
    }

    .trunk-title {
        font-size: 0.95rem;
    }

    .node-branch {
        width: 96px;
        height: 58px;
    }

    .branch-title {
        font-size: 0.78rem;
    }

    .node-leaf {
        width: 60px;
        height: 30px;
    }

    .leaf-label {
        font-size: 0.55rem;
    }
}

/* Reduce motion for lower-performance devices */
@media (prefers-reduced-motion: reduce) {
    .falling-leaf {
        display: none;
    }

    .node-root {
        animation: none;
    }

    .growth-rings {
        animation: none;
    }

    .node-growth-placeholder {
        animation: none;
    }

    .branch-path-drawing {
        animation: none;
        stroke-dashoffset: 0;
    }
}