/* The skills tree, the principles, the palette menu, and the ink-spread
 * palette change. Tokens come from brana.css. */

/* ---------- The tree ---------- */
.skilltree { margin: 22px 0 10px; padding-top: 6px; border-top: 1px solid var(--line) }
.st-head h3 { font-family: var(--serif); font-size: 26px; margin: 10px 0 2px }
.st-head p { margin: 0 0 10px; font-size: 12px; color: var(--ink-soft) }
.st-filter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px }
.st-filter button { font-size: 11px; padding: 3px 10px; border: 1px solid color-mix(in srgb, var(--c, var(--fg)) 60%, transparent); color: var(--c, var(--fg)); transition: background .15s, color .15s }
.st-filter button.on, .st-filter button:hover { background: var(--c, var(--fg)); color: var(--panel) }

/* the panel that answers a hover */
.st-info {
  position: sticky; top: 0; z-index: 4; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  min-height: 52px; padding: 8px 12px; margin-bottom: 12px;
  background: color-mix(in srgb, var(--panel) 92%, transparent); border: 1px solid var(--line); border-left: 4px solid var(--c, var(--rubric));
}
.st-info b { font-family: var(--serif); font-size: 19px }
.st-in { font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--c, var(--ink-soft)) }
.st-used { font-size: 12px; flex-basis: 100% }
.st-note { font-size: 12px; flex-basis: 100%; color: var(--ink-soft) }
.st-p { display: inline-block; margin: 2px 4px 0 0; padding: 0 8px; font-size: 11px; border: 1px solid var(--line) }
button.st-p:hover { background: var(--fg); color: var(--bg) }

/* the canopy: branches alternate either side of the trunk */
.st-canopy { position: relative; padding: 10px 0 0 }
.st-trunk {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 16px; translate: -50% 0; border-radius: 6px 6px 0 0;
  background:
    repeating-linear-gradient(176deg, transparent 0 7px, color-mix(in srgb, var(--fg) 30%, transparent) 7px 8px),
    linear-gradient(90deg, color-mix(in srgb, var(--fg) 75%, var(--rubric)), var(--fg) 60%, color-mix(in srgb, var(--fg) 80%, transparent));
  transform-origin: bottom; transform: scaleY(0); transition: transform 1.1s cubic-bezier(.3, .7, .2, 1);
}
.st-trunk span { position: absolute; left: 50%; bottom: 12px; translate: -50% 0; writing-mode: vertical-rl; color: var(--panel); font-size: 13px; opacity: 0; transition: opacity .6s .9s }
.grown .st-trunk { transform: none }
.grown .st-trunk span { opacity: 1 }

.st-bough { position: relative; width: calc(50% - 26px); margin-bottom: 14px; opacity: 0; transition: opacity .6s ease, transform .7s cubic-bezier(.2, .8, .3, 1), filter .3s }
.st-bough.left { margin-right: auto; transform: translateX(26px) }
.st-bough.right { margin-left: auto; transform: translateX(-26px) }
.grown .st-bough { opacity: 1; transform: none; transition-delay: calc(.9s + var(--i) * .16s) }
.st-bough.dim { opacity: .22 !important; filter: grayscale(.6) }
/* the limb that joins the branch to the trunk, drawn out from the trunk */
.st-limb { position: absolute; top: 22px; width: 26px; height: 3px; background: var(--fg); transform: scaleX(0); transition: transform .5s ease }
.left .st-limb { right: -26px; transform-origin: right }
.right .st-limb { left: -26px; transform-origin: left }
.grown .st-limb { transform: none; transition-delay: calc(.8s + var(--i) * .16s) }
.st-node { position: absolute; top: 8px; width: 30px; height: 30px; display: grid; place-items: center; background: var(--c); color: var(--panel); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); font-size: 14px; z-index: 1 }
.left .st-node { right: -14px }
.right .st-node { left: -14px }
.st-body { padding: 10px 20px 12px; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); background: color-mix(in srgb, var(--c) 7%, var(--panel)) }
.left .st-body { padding-right: 26px }
.right .st-body { padding-left: 26px }
.st-name b { font-family: var(--serif); font-size: 20px }
.st-name .geez { color: var(--c); font-size: 14px; margin-left: 6px }
.st-body p { margin: 2px 0 8px; font-size: 11.5px; color: var(--ink-soft) }
.st-leaves { display: flex; flex-wrap: wrap; gap: 6px }

/* a leaf: a chip cut like a leaf, opening along the branch, swaying a little */
.leaf {
  font-size: 11px; padding: 3px 10px; border-radius: 12px 2px 12px 2px;
  color: var(--fg); background: color-mix(in srgb, var(--c) 16%, transparent); border: 1px solid color-mix(in srgb, var(--c) 55%, transparent);
  opacity: 0; transform: scale(.4) rotate(-12deg); transform-origin: left center;
  transition: opacity .4s ease, transform .45s cubic-bezier(.3, 1.5, .5, 1), background .15s, color .15s;
}
.grown .leaf { opacity: 1; transform: none; transition-delay: calc(1.1s + var(--d) * 40ms), calc(1.1s + var(--d) * 40ms), 0s, 0s }
.grown .leaf { animation: sway 5s ease-in-out infinite; animation-delay: calc(var(--d) * -.37s) }
@keyframes sway { 50% { rotate: 1.5deg } }
.leaf:hover, .leaf.hot { background: var(--c); color: var(--panel); rotate: -4deg; scale: 1.08; animation-play-state: paused }

/* the roots: where it started */
.st-roots { position: relative; margin-top: -2px }
.st-roots svg { display: block; width: 100%; height: 70px; overflow: visible }
.st-roots path { fill: none; stroke: var(--fg); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s ease }
.grown .st-roots path { stroke-dashoffset: 0 }
.st-rootlabels { display: flex; justify-content: space-between; gap: 6px; margin-top: 2px }
.root { flex: 1; font-size: 10.5px; line-height: 1.3; padding: 4px 4px; color: var(--ink-soft); border-top: 2px solid var(--fg); text-align: center }
.root:hover { color: var(--rubric) }

/* ---------- How I work ---------- */
.principles { margin: 18px 0 6px }
.principles h3 { font-family: var(--serif); font-size: 26px; margin: 8px 0 10px }
.pr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px }
.pr {
  position: relative; text-align: left; padding: 12px 14px 14px; min-height: 120px; overflow: hidden;
  border: 1px solid var(--line); background: color-mix(in srgb, var(--fg) 4%, transparent);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.pr-n { position: absolute; right: 10px; top: 4px; font-size: 34px; color: color-mix(in srgb, var(--rubric) 22%, transparent); transition: color .3s, transform .4s }
.pr b { display: block; font-family: var(--serif); font-size: 20px; line-height: 1.15; max-width: 85%; position: relative }
.pr b::after { content: ""; position: absolute; left: 0; bottom: -3px; height: 2px; width: 100%; background: var(--rubric); transform: scaleX(0); transform-origin: left; transition: transform .35s ease }
.pr-proof { display: block; margin-top: 10px; font-size: 11.5px; line-height: 1.5; color: var(--ink-soft); opacity: .45; transform: translateY(3px); transition: opacity .35s ease, transform .35s ease }
.pr:hover, .pr:focus-visible { border-color: var(--fg); box-shadow: 4px 4px 0 var(--rubric); transform: translate(-2px, -2px) }
.pr:hover b::after, .pr:focus-visible b::after { transform: none }
.pr:hover .pr-proof, .pr:focus-visible .pr-proof, .pr.open .pr-proof { opacity: 1; transform: none }
.pr:hover .pr-n { color: var(--rubric); transform: rotate(-8deg) scale(1.1) }

/* ---------- A new palette soaks in like ink ---------- */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal }

/* ---------- Small flourishes elsewhere ---------- */
/* a light sweep across a screenshot plate on hover */
.plate.shot::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .35) 50%, transparent 65%); transform: translateX(-120%) }
.card:hover .plate.shot::before { transform: translateX(120%); transition: transform .9s ease }

@media (max-width: 760px) {
  .st-trunk { left: 14px }
  .st-bough, .st-bough.left, .st-bough.right { width: auto; margin-left: 40px; margin-right: 0; transform: translateX(-14px) }
  .left .st-limb, .right .st-limb { left: -26px; right: auto; transform-origin: left }
  .left .st-node, .right .st-node { left: -14px; right: auto }
  .left .st-body, .right .st-body { padding-left: 26px; padding-right: 14px }
  .st-rootlabels { flex-wrap: wrap }
  .root { flex: 1 1 30% }
  .pr-grid { grid-template-columns: 1fr }
  .pr-proof { opacity: 1; transform: none }
  .pr { min-height: 0 }
}
@media (prefers-reduced-motion: reduce) {
  .st-trunk, .st-bough, .st-limb, .leaf { transform: none !important; opacity: 1 !important }
  .st-roots path { stroke-dashoffset: 0 }
}

/* ---------- The seasons ---------- */
.st-season { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 8px }
.st-season button { font-size: 11px; padding: 3px 9px; border: 1px solid var(--line); transition: background .15s, color .15s }
.st-season button b { font-weight: 400; color: var(--rubric) }
.st-season button.on { background: var(--fg); color: var(--bg) }
.st-season button em { font-style: normal; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--ochre); margin-left: 2px }
.st-season-note { flex-basis: 100%; font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--ink-soft) }
.leaf { position: relative }
.st-leaves, .st-body { transition: background .6s ease }

/* ፀደይ: the አደይ blossoms after the rains */
[data-season="tsedey"] .leaf:nth-child(3n+1)::after {
  content: ""; position: absolute; top: -6px; right: -5px; width: 11px; height: 11px; pointer-events: none;
  background: radial-gradient(circle, #6b3d06 0 20%, #f2c200 24% 58%, transparent 62%);
  animation: bloom .6s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(1.6s + var(--d) * 60ms);
}
@keyframes bloom { from { transform: scale(0) rotate(-40deg) } }
/* በጋ: dry, golden, some leaves already loose */
[data-season="bega"] .leaf { filter: sepia(.65) saturate(1.15) }
[data-season="bega"] .st-body { background: color-mix(in srgb, var(--ochre) 9%, var(--panel)) }
[data-season="bega"] .leaf:nth-child(6n+4) { rotate: 9deg; translate: 0 3px }
/* በልግ: the small rains, and new buds */
[data-season="belg"] .leaf:nth-child(4n+2)::after {
  content: ""; position: absolute; top: -5px; left: 6px; width: 6px; height: 9px; border-radius: 50% 50% 45% 45%;
  background: #6fa83a; box-shadow: inset -1px -2px 0 #3d6a3a; animation: bloom .5s ease both; animation-delay: calc(1.6s + var(--d) * 60ms);
}
/* ክረምት: the long rains, everything deep green */
[data-season="kiremt"] .leaf { filter: saturate(1.35) }
[data-season="kiremt"] .st-body { background: color-mix(in srgb, var(--green) 10%, var(--panel)) }

/* the weather over the canopy */
.st-weather { position: absolute; inset: 0; z-index: 5; overflow: hidden; pointer-events: none }
.st-weather span { position: absolute; top: -4%; left: calc(var(--x) * 1%); opacity: 0 }
.grown .st-weather span { opacity: 1 }
[data-season="tsedey"] .st-weather span { width: 7px; height: 5px; border-radius: 50%; background: #f2c200; box-shadow: inset -1px -1px 0 #c79a00;
  animation: drift calc(11s * var(--s)) linear infinite; animation-delay: calc(var(--d) * -2s) }
[data-season="bega"] .st-weather span:nth-child(2n) { width: 10px; height: 6px; border-radius: 0 80% 0 80%; background: #b9802e;
  animation: drift calc(13s * var(--s)) linear infinite; animation-delay: calc(var(--d) * -2.2s) }
[data-season="belg"] .st-weather span:nth-child(3n) { width: 1.5px; height: 10px; background: color-mix(in srgb, var(--blue) 55%, transparent);
  animation: rain calc(2.2s * var(--s)) linear infinite; animation-delay: calc(var(--d) * -.4s) }
[data-season="kiremt"] .st-weather span { width: 1.5px; height: 18px; background: color-mix(in srgb, var(--blue) 60%, transparent);
  animation: rain calc(1.1s * var(--s)) linear infinite; animation-delay: calc(var(--d) * -.2s) }
@keyframes drift { 0% { top: -4%; transform: translateX(0) rotate(0) } 50% { transform: translateX(26px) rotate(160deg) } 100% { top: 104%; transform: translateX(-10px) rotate(340deg) } }
@keyframes rain { from { top: -4%; transform: rotate(12deg) } to { top: 104%; transform: translateX(-30px) rotate(12deg) } }

/* ---------- The journey's thread, winding up the trunk ---------- */
.st-thread { position: absolute; left: 50%; top: 0; width: 44px; height: 100%; translate: -50% 0; z-index: 2; overflow: visible; pointer-events: none }
.st-thread path { fill: none; stroke: var(--rubric); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.6s ease .5s }
.grown .st-thread path { stroke-dashoffset: 0 }
.st-roots path.thread-in { stroke: var(--rubric); stroke-width: 2.2 }
.st-knots { position: absolute; left: 50%; top: 0; bottom: 0; width: 0; z-index: 3 }
.knot { position: absolute; left: 0; width: 18px; height: 18px; padding: 0; translate: calc(-50% + var(--dx, 0px)) -50%; opacity: 0; transition: opacity .4s ease; transition-delay: calc(1.6s + var(--f) * 1.4s) }
.grown .knot { opacity: 1 }
.knot::before { content: ""; position: absolute; inset: 2px; background: var(--rubric); border: 2px solid var(--panel); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); transition: transform .2s }
.knot span { position: absolute; left: 22px; top: 50%; translate: 0 -50%; white-space: nowrap; font-family: var(--geez); font-size: 10px; color: var(--rubric); background: var(--panel); border: 1px solid var(--rubric); padding: 0 5px; opacity: 0; transition: opacity .2s }
.knot:hover::before, .knot:focus-visible::before { transform: scale(1.35) }
.knot:hover span, .knot:focus-visible span { opacity: 1 }

/* the journey, pointed at from the tree */
.jp.found .jp-inner { box-shadow: 0 0 0 3px var(--rubric), 6px 6px 0 var(--shadow) }
.cta.ghost { background: transparent; color: var(--fg); margin-left: 6px }

@media (max-width: 760px) {
  .st-thread { left: 14px }
  .st-knots { left: 14px }
}
@media (prefers-reduced-motion: reduce) {
  .st-weather { display: none }
  .st-thread path { stroke-dashoffset: 0 }
  .knot { opacity: 1 }
}