/* ===========================================================
   HERO · skills in orbit
   Scoped to .orbit — nothing here touches other sections.
   =========================================================== */
.hero-side { align-items: flex-start; }
.orbit { position: relative; width: 100%; max-width: 620px; margin-inline: auto; font-family: var(--font-mono); }
.orbit .pl-lbl { position: absolute; top: 0; font-size: 10px; letter-spacing: 0.08em; color: var(--ink-mute); z-index: 8; }
.orbit .pl-fig { left: 0; }
.orbit .pl-op { right: 0; color: var(--accent); }

/* ---- stage ---- */
.orbit-stage { position: relative; width: 100%; aspect-ratio: 1 / 1; margin-top: 22px; touch-action: pan-y; cursor: grab; }
.orbit-stage.is-dragging { cursor: grabbing; }
.orbit-stage canvas { display: block; width: 100%; height: 100%; position: relative; z-index: 2; }

/* ---- leader lines ---- */
.orbit-leaders { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; overflow: visible; }
.orbit-leaders .lead { fill: none; stroke: var(--accent); stroke-width: 1; opacity: 0.4; transition: opacity 180ms var(--ease), stroke-width 180ms var(--ease); }
.orbit-leaders .lead.is-on { opacity: 0.92; stroke-width: 1.3; }
.orbit-leaders .lead.is-off { opacity: 0.14; }

/* ---- fixed technical labels ---- */
.ol { position: absolute; left: 0; top: 0; z-index: 6; pointer-events: auto; opacity: 0; transition: opacity 400ms var(--ease); will-change: transform; }
.orbit.labels-ready .ol { opacity: 1; }
.ol b { display: block; font-weight: 400; font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; padding-bottom: 4px; border-bottom: 1px solid rgba(46, 91, 255, 0.32); transition: color 180ms var(--ease), border-color 180ms var(--ease), opacity 180ms var(--ease); }
.ol b .num { color: var(--accent); margin-right: 7px; opacity: 0.75; }
.ol.is-on b { color: var(--accent); border-bottom-color: var(--accent); }
.orbit.has-active .ol:not(.is-on) b { color: var(--ink-mute); opacity: 0.45; }
.ol i { position: absolute; top: calc(100% + 7px); width: 20ch; font-style: normal; font-size: 10.5px; line-height: 1.5; letter-spacing: 0; color: var(--ink-soft); opacity: 0; transition: opacity 180ms var(--ease); pointer-events: none; text-wrap: pretty; }
.ol.is-left i { right: 0; text-align: right; }
.ol.is-on i { opacity: 1; }
.ol-centre b { padding: 6px 10px; background: var(--surface); border: 1px solid var(--line-soft); box-shadow: var(--elev-floating); }
.ol-centre.is-on b { border-color: var(--accent); }

/* ---- hand · blueprint contour; replaced by a photo if one exists ---- */
.orbit-hand { position: absolute; right: -72%; bottom: -19%; width: 170%; z-index: 1; pointer-events: none; }
.orbit-hand svg, .orbit-hand img { display: block; width: 100%; height: auto; }
.orbit-hand img { -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%); mask-image: linear-gradient(to right, #000 88%, transparent 100%); }
.orbit-hand:has(img) .hand-draw { display: none; }
.hand-fill { fill: none; stroke: rgba(255, 255, 255, 0.72); stroke-linecap: round; stroke-linejoin: round; }
.hand-edge { fill: none; stroke: var(--accent); stroke-linecap: round; stroke-linejoin: round; opacity: 0.42; }
.hand-crease { fill: none; stroke: var(--accent); stroke-width: 1; stroke-linecap: round; opacity: 0.22; }
.hand-guide { fill: none; stroke: var(--accent); stroke-width: 1; stroke-dasharray: 4 5; opacity: 0.2; }

/* ---- microcopy + accessible skill list ---- */
.orbit-hint { position: relative; z-index: 7; margin: 0; padding-top: 10px; font-size: 10.5px; letter-spacing: 0.06em; color: var(--ink-mute); }
.orbit-a11y { position: relative; z-index: 7; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.orbit-a11y li { display: contents; }
.orbit-a11y button { position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; background: none; }
.orbit-a11y button:focus-visible,
.orbit.no-webgl .orbit-a11y button { position: static; width: auto; height: auto; clip-path: none; overflow: visible; padding: 5px 9px; margin-top: 8px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); background: var(--surface); border: 1px solid var(--line-soft); outline: 2px solid var(--accent); outline-offset: 1px; cursor: pointer; }
.orbit.no-webgl .orbit-a11y button { outline: 0; }
.orbit.no-webgl .orbit-stage, .orbit.no-webgl .orbit-hint { display: none; }

@media (max-width: 1100px) {
  .ol b { font-size: 9px; letter-spacing: 0.1em; }
  .ol i { width: 17ch; font-size: 10px; }
}
@media (max-width: 960px) {
  .orbit { max-width: 560px; }
  .orbit-hand { width: 190%; right: -62%; }
}
@media (max-width: 600px) {
  .orbit { overflow: hidden; }
  .orbit-stage { margin-top: 26px; }
  .orbit-hand { width: 200%; right: -56%; bottom: -28%; }
  .ol i { display: none; }
  .ol b { font-size: 8.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .orbit-leaders .lead, .ol b, .ol i { transition: none; }
}

/* forearm intentionally breaks the right margin — it runs off the page edge, clipped only by the viewport */
html, body { overflow-x: clip; }