/*
 * Base style D pen (bases/d/thread.ts): the coral rope over the whole of <main> as a shaded tube (like the
 * toy box's pump tube), its drawing head, the beads it ties, the bow at the end, the bead it drops in from
 * and the toys riding it. Everything that moves plays only with full motion.
 */
.skl-d-nit {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 2;
}
.skl-d-nit__rim,
.skl-d-nit__body,
.skl-d-nit__shine {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.skl-d-nit__rim {
  stroke: color-mix(in oklab, var(--color-coral-strong) 85%, var(--color-coral));
  stroke-width: 5;
}
.skl-d-nit__body {
  stroke: var(--color-coral);
  stroke-width: 3.2;
}
.skl-d-nit__shine {
  stroke: color-mix(in oklab, var(--color-surface) 65%, var(--color-coral));
  stroke-width: 1;
  opacity: 0.7;
}
/* A stretch crossing over the rope joins it end to end (no caps showing over the strand below). */
.skl-d-nit__layer--over path {
  stroke-linecap: butt;
}
.skl-d-nit__head {
  fill: var(--color-coral-strong);
  stroke: var(--color-surface);
  stroke-width: 1.5;
  opacity: 0;
  transition: opacity 300ms var(--ease-standard);
}
.skl-d-nit[data-drawing='true'] .skl-d-nit__head {
  opacity: 1;
}
html[data-motion='reduced'] .skl-d-nit__head {
  display: none;
}

/* The overhand loop pulls tight once the rope has come round it. */
@keyframes skl-d-cinch {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(0.84);
  }
  72% {
    transform: scale(1.06);
  }
  100% {
    transform: scale(1);
  }
}
html[data-motion='full'] .skl-d-nit__rope path[data-cinch='on'] {
  transform-box: view-box;
  animation: skl-d-cinch 640ms var(--ease-out-soft) both;
}

/* A bead for a head that has none of its own: D's eyebrow bead (10 px, a halo of the section's ground and a
   soft coral ring), hollow until the rope ties it, then filled with the same pop. */
.skl-d-nit__bead {
  --skl-d-halo: var(--color-paper);
}
.skl-d-nit__pop {
  transform-box: fill-box;
  transform-origin: center;
}
.skl-d-nit__halo {
  fill: var(--skl-d-halo);
  stroke: color-mix(in oklab, var(--color-coral) 40%, transparent);
  stroke-width: 1;
}
.skl-d-nit__dot {
  fill: var(--color-coral);
  stroke: var(--color-coral-strong);
  stroke-width: 2;
}
html[data-motion='full'] .skl-d-nit__bead[data-knot='off'] .skl-d-nit__halo {
  stroke: none;
}
html[data-motion='full'] .skl-d-nit__bead[data-knot='off'] .skl-d-nit__dot {
  fill: var(--skl-d-halo);
}
@keyframes skl-d-knot {
  0% {
    transform: scale(0.6);
  }
  55% {
    transform: scale(1.35);
  }
  100% {
    transform: scale(1);
  }
}
html[data-motion='full'] .skl-d-nit__bead[data-knot='on'] .skl-d-nit__pop {
  animation: skl-d-knot 560ms var(--ease-out-soft) both;
}

/* The end bead ties a bow (D's contact traces its own ink loop instead). */
.skl-d-nit__bow {
  fill: none;
  stroke: var(--color-coral-strong);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
html[data-motion='full'] .skl-d-nit__bow {
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 900ms var(--ease-out-soft) 180ms;
}
html[data-motion='full'] .skl-d-nit__bead[data-knot='on'] .skl-d-nit__bow {
  stroke-dashoffset: 0;
}

/* The bead the rope hangs from when it does not come out of the pump: it drops in and bounces. */
.skl-d-nit__start-bead {
  fill: var(--color-coral-strong);
  stroke: var(--color-surface);
  stroke-width: 2.5;
}
@keyframes skl-d-drop {
  0% {
    opacity: 0;
    transform: translateY(-56px);
  }
  45% {
    opacity: 1;
    transform: translateY(0) scale(1.25, 0.75);
  }
  62% {
    transform: translateY(-14px) scale(0.92, 1.08);
  }
  80% {
    transform: translateY(0) scale(1.1, 0.9);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}
html[data-motion='full'] .skl-d-nit__start .skl-d-nit__pop {
  animation: skl-d-drop 900ms var(--ease-standard) 200ms both;
}

/* Toys riding the rope: D's rocket (with its toy-box shadow) or a big bead; they land with a squash. */
.skl-d-nit__toy {
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 240ms var(--ease-standard);
}
.skl-d-nit__token--rocket .skl-d-nit__toy {
  filter: drop-shadow(0 6px 8px color-mix(in oklab, var(--color-ink) 16%, transparent));
}
.skl-d-nit__token-bead {
  fill: var(--color-coral);
  stroke: var(--color-coral-strong);
  stroke-width: 2.5;
}
.skl-d-nit__token[data-state='waiting'] .skl-d-nit__toy {
  opacity: 0;
}
@keyframes skl-d-land {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.3, 0.78);
  }
  65% {
    transform: scale(0.9, 1.1);
  }
  100% {
    transform: scale(1);
  }
}
html[data-motion='full'] .skl-d-nit__token[data-state='landed'] .skl-d-nit__toy {
  animation: skl-d-land 520ms var(--ease-out-soft) both;
}