/* round 5: the active pillar word, the switch's third way (?mark=3,
   kit/pillars-cords.js): a coiled telephone cord, in ink, from the word on
   show to the top of the phone. Two svg layers the size of the section: the
   cord behind the words, the line and the phone (.mkc-back), and its boot
   on the phone in front of it (.mkc-front). Sizes go with --u, the words'
   own scale (1 at 1440 wide). Nothing here applies without the script's
   .mkc on the section. */
#pillars.mkc { position: relative; }
#pillars.mkc .pl5-ul { display: none; }
.mkc-svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; opacity: 0; transition: opacity 600ms ease 260ms; }
#pillars.mkc.in .mkc-svg { opacity: 1; }
.mkc-front { z-index: 1; }
/* the line under the words sits over the cord, with the paper round its
   letters, so a cord passing behind it never runs through them */
#pillars.mkc .pl5-k, #pillars.mkc .pl5-line { position: relative; }
#pillars.mkc .pl5-line { text-shadow: 0 0 1px var(--paper), 0 0 3px var(--paper), 0 0 6px var(--paper), 0 0 10px var(--paper); }

/* the near half of each turn in full ink, the far half lighter; a small
   tack under the word, a black boot on the phone it runs into */
.mkc-coil { fill: none; stroke: var(--ink); stroke-width: calc(var(--u, 1) * 1.4px); stroke-linecap: round; stroke-linejoin: round; }
.mkc-coil--b { stroke-opacity: 0.38; stroke-width: calc(var(--u, 1) * 1.15px); }
.mkc-tack, .mkc-boot { fill: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .mkc-svg { transition: none; }
}