/* ==========================================================================
   samisee.design, SKILL TREE ("what i do" in read_me.md). Logic and the
   growth timing: js/skilltree.js. Content: copy/skills.md.
   Every node sits on its trunk's spine (left edge of the column); the SVG
   wires are drawn through the nodes' centres.
   ========================================================================== */

.tree { position: relative; margin: 4px 0 6px; }
.tree__wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }

.tree__root { display: flex; flex-direction: column; align-items: center; gap: 6px; font: 500 var(--text-caption)/1 var(--font-mono); letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--os-ink-dim); }
.tree__seed { position: relative; display: block; width: 9px; height: 9px; border-radius: 50%; background: var(--os-ink); box-shadow: 0 0 10px color-mix(in srgb, var(--os-ink) 60%, transparent); }
.tree__pulse { position: absolute; inset: -6px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--os-accent) 70%, transparent), transparent 70%); opacity: 0; }
.tree__root span { order: -1; }

/* each trunk as wide as its widest line (header or leaf, in any language), the spare room between them */
.tree__trunks { display: grid; grid-template-columns: repeat(3, max-content); justify-content: space-between; gap: 14px; margin-top: 34px; }

.tree__node { display: inline-block; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px var(--os-surface), 0 0 8px color-mix(in srgb, var(--c) 70%, transparent); }

.trunk__head { display: flex; align-items: baseline; gap: 7px; margin-bottom: 14px; }
.trunk__head .tree__node { width: 9px; height: 9px; margin-left: -1px; align-self: center; }
.trunk__head b { font: var(--weight-display) var(--text-lead)/1 var(--font-display); color: var(--os-ink); }
.trunk__head span { font: 400 var(--text-micro, 9px)/1 var(--font-mono); letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--c); }

.branch { margin: 0 0 12px; }
.branch:last-child { margin-bottom: 0; }
.branch__name { display: flex; align-items: center; gap: 9px; margin: 0 0 5px !important; font: 500 var(--text-caption)/1 var(--font-mono); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--c); }
.leaves { margin: 0; padding: 0 0 0 16px; list-style: none; }
.branch li { font: 400 var(--text-body)/1.5 var(--font-body); color: color-mix(in srgb, var(--os-ink) 82%, transparent); }

/* bonus + in the kit: two quiet mono lines under the tree */
/* the label column is as wide as its longest label, in any language ("im werkzeugkasten") */
.tree__extras { display: grid; grid-template-columns: max-content 1fr; gap: 7px 16px; align-items: baseline; margin: 26px 0 0; padding-top: 14px; border-top: 1px solid var(--os-border); }
.tree__extras div { display: contents; }
.tree__extras dt { font: 500 var(--text-caption)/1.5 var(--font-mono); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--os-accent); }
.tree__extras dd { margin: 0; font: 400 var(--text-caption)/1.5 var(--font-mono); color: color-mix(in srgb, var(--os-ink) 82%, transparent); }
.tree__extras i { font-style: normal; color: var(--os-ink-faint); }
.tree:not(.is-still) .tree__extras { opacity: 0; }
.tree.is-grown .tree__extras { opacity: 1; transition: opacity 500ms var(--ease-enter) 1800ms; }
.tree.is-settled .tree__extras { transition: none; }

.wire { fill: none; stroke: color-mix(in srgb, var(--c) 45%, transparent); stroke-width: 1; stroke-linecap: round; }
.wire--trunk { stroke-width: 1.2; }

/* ---- growth: wires draw themselves, branches fade in behind them ---- */
.tree:not(.is-still) .wire { stroke-dasharray: 1; stroke-dashoffset: 1; }
.tree.is-grown .wire { stroke-dashoffset: 0; transition: stroke-dashoffset 420ms var(--ease-standard) var(--d, 0ms), stroke .25s, opacity .25s; }
.tree:not(.is-still) .branch, .tree:not(.is-still) .trunk__head { opacity: 0; translate: 0 4px; }
.tree.is-grown .branch, .tree.is-grown .trunk__head { opacity: 1; translate: 0 0; transition: opacity 380ms var(--ease-enter) var(--d, 160ms), translate 380ms var(--ease-enter) var(--d, 160ms); }

.tree.is-settled .wire { transition: stroke .25s, opacity .25s; }
.tree.is-settled .branch, .tree.is-settled .trunk__head { transition: none; }

/* ---- hover: the path back to the root lights, the other trunks step back ---- */
.trunk, .wire { transition: opacity .25s; }
.tree[data-lit] .trunk:not(.is-lit), .tree[data-lit] .wire:not(.is-lit) { opacity: .32; }
.tree .wire.is-lit { stroke: var(--c); filter: drop-shadow(0 0 3px var(--c)); }
.branch.is-lit li { color: var(--os-ink); }
.branch.is-lit .tree__node { scale: 1.3; }