/* round 5: how the active pillar word is marked (kit/pillars-marks.js). The
   ring that hangs by default; the switch (?mark=1..4) also keeps the
   balance, a circle and a phone cord (kit/pillars-cords.*). Everything here
   hangs off #pillars.mk-balance, .mk-circle or .mk-hung, which the script
   sets once it runs, so the section stays as it was if it does not. */

/* the old pen line goes: the string or the ring is the mark */
#pillars.mk-on .pl5-ul { display: none; }

/* ── 1 · the balance: the row hangs from one blue string ─────────────── */
#pillars.mk-balance { position: relative; }
/* the script turns the row about its tie with rotate and translate, which
   leave the row's own arrival transform alone */
#pillars.mk-balance .pl5-tabs { transform-origin: 0 0; }
/* room under the row for its lean */
#pillars.mk-balance .pl5-line { margin-top: calc(clamp(10px, 1.3vw, 18px) + clamp(18px, 2vw, 28px)); }
/* the string runs up behind the line above the words */
#pillars.mk-balance .pl5-k { position: relative; z-index: 2; text-shadow: 0 0 2px var(--paper), 0 0 5px var(--paper), 0 0 9px var(--paper), 0 0 14px var(--paper); }
.mk-hang { position: absolute; z-index: 1; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
.mk-str { position: absolute; left: -0.8px; top: 0; width: 1.6px; height: 0; border-radius: 1px; background: linear-gradient(rgb(0 0 184 / 0), var(--blue) min(80px, 60%)); transform-origin: 50% 100%; }
.mk-knot { position: absolute; left: -3.5px; top: -3.5px; width: 7px; height: 7px; box-sizing: border-box; border: 1.6px solid var(--blue); border-radius: 50%; background: var(--paper); }
@media (max-width: 640px) {
  /* a beam is one row: on a phone the four words stand in one line */
  #pillars.mk-balance .pl5-tabs { --g: 9px; flex-wrap: nowrap; }
  #pillars.mk-balance .pl5-w { --s: calc((100cqw - 3 * var(--g)) / 1699); }
  #pillars.mk-balance .pl5-line { margin-top: 28px; }
}

/* ── 2 · a circle: a blue pen ring, a little more than once round ─────── */
#pillars.mk-circle .pl5-tabs { position: relative; }
.mk-svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
/* drawn in along its own path and rubbed out along it: the dash is the
   path's whole length (--L), moved by stroke-dashoffset (--w, the round cap
   it must clear) */
.mk-ring path { fill: none; stroke: var(--blue); stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: var(--L) var(--L); stroke-dashoffset: calc(var(--L) + var(--w, 0px)); }
.mk-ring .mk-bleed { opacity: 0.08; }
.mk-ring.is-on path { stroke-dashoffset: 0px; transition: stroke-dashoffset 980ms cubic-bezier(0.42, 0.08, 0.26, 1) 70ms; }
.mk-ring.is-out path { stroke-dashoffset: calc(var(--L) * -1); transition: stroke-dashoffset 540ms cubic-bezier(0.55, 0, 0.7, 0.55); }
.mk-ring.is-out { opacity: 0; transition: opacity 360ms ease 180ms; }
.mk-svg .is-now, .mk-svg .is-now path { transition: none; }
@media (max-width: 640px) {
  /* in the 2x2 a ring needs a little air round each word */
  #pillars.mk-circle .pl5-k { margin-bottom: 16px; }
  #pillars.mk-circle .pl5-tabs { --g: 26px; row-gap: 18px; }
  #pillars.mk-circle .pl5-w { --s: calc((100cqw - 27px) / 872); }
}

@media (prefers-reduced-motion: reduce) {
  .mk-svg *, .mk-svg path { transition: none !important; }
}

/* ── 4 · a ring that hangs, the default: a quick loose ring whose pen
   flicks up off the top, on way 1's swing (John, 17 Oct) ─────────────── */
#pillars.mk-hung { position: relative; }
#pillars.mk-hung .pl5-tabs { position: relative; transform-origin: 0 0; }
#pillars.mk-hung .pl5-line { margin-top: calc(clamp(10px, 1.3vw, 18px) + clamp(18px, 2vw, 28px)); }
/* room over the row for the flick */
#pillars.mk-hung .pl5-k { margin-bottom: calc(clamp(10px, 1.2vw, 16px) + 32px); }
/* a quick hand: the pen picks up speed and leaves the paper at speed, so
   the flick at the end is quick too (way 2 eases out, slow at the end) */
#pillars.mk-hung .mk-ring.is-on:not(.is-now) path { transition: stroke-dashoffset 900ms cubic-bezier(0.4, 0.02, 0.7, 0.72) 60ms; }
@media (max-width: 640px) {
  /* one beam, so one row of words, a little apart for their rings */
  #pillars.mk-hung .pl5-tabs { --g: 14px; flex-wrap: nowrap; width: 100%; }
  #pillars.mk-hung .pl5-w { --s: calc((100cqw - 3 * var(--g)) / 1699); }
  #pillars.mk-hung .pl5-line { margin-top: 28px; }
  #pillars.mk-hung .pl5-k { margin-bottom: 30px; }
}