/* Pen-mark statement. Every number is a knob; defaults are the source's measured values. */
.pms {
  --pms-dur: 900ms;                                  /* each word's rise */
  --pms-stagger: 20ms;                               /* between words */
  --pms-rot: 6deg;                                   /* words start tipped */
  --pms-ease: cubic-bezier(.215, .61, .355, 1);      /* easeOutCubic */
  --pms-delay: 0ms;                                  /* the whole statement's start */
  --pms-indent: 3ch;                                 /* first word */
  --pms-circle-dur: 1100ms;                          /* oval draw */
  --pms-line-dur: 850ms;                             /* underline draw */
  --pms-mark-lag: 150ms;                             /* after the marked word's own rise starts */
  --pms-mark-ease: cubic-bezier(.455, .03, .515, .955);  /* easeInOutQuad */
  --pms-hover-k: 1.25;                               /* hover rewind-redraw = 1.25 x draw time */
  --pms-link-dur: 800ms;                             /* the link's line */
  --pms-link-lag: 450ms;                             /* after the last word's slot */
  --pms-accent: #fd835d;                             /* pen colour */
  --pms-stroke: max(1.5px, .044em);                /* the source's 3-unit stroke scaled with the word: 2.8px at 64px */
  line-height: 1;
}
.pms__w { display: inline-block; vertical-align: top; position: relative; }
.pms__clip { display: block; height: 1.25em; margin: -.125em 0; overflow: hidden; overflow: clip; }
.pms__wt { display: block; padding: .125em 0; line-height: 1; white-space: nowrap; }
.pms__w--first { margin-inline-start: var(--pms-indent); }

/* the pen marks */
.pms__mark { position: absolute; overflow: visible; pointer-events: none; color: var(--pms-accent); }
.pms__mark path { fill: none; stroke: currentColor; stroke-width: var(--pms-stroke); stroke-linecap: round; stroke-linejoin: round; }
.pms__w--circle { --pms-md: var(--pms-circle-dur); }
.pms__w--circle .pms__mark { left: -.2em; top: -.12em; width: calc(100% + .4em); height: calc(100% + .22em); }
.pms__w--line { --pms-md: var(--pms-line-dur); }
.pms__w--line .pms__mark, .pms__w--link .pms__mark { left: 0; width: 100%; bottom: -.06em; height: .16em; min-height: 6px; }

/* the trailing link: small, on the statement's last line, underlined by the same pen */
.pms__link { font-size: max(13px, .26em); text-decoration: none; color: inherit; margin-inline-start: .6ch; }
.pms__link .pms__w { vertical-align: baseline; }
.pms__link .pms__mark { bottom: .02em; height: 6px; }
.pms__link .pms__mark path { stroke-width: 1.5px; }
.pms__link:focus-visible { outline: 2px solid var(--pms-accent); outline-offset: 4px; }

/* armed: words below their line, marks undrawn (part.js adds .is-armed; without JS the statement sits at rest) */
.pms.is-armed .pms__wt { transform: translate3d(0, 110%, 0) rotate(var(--pms-rot)); }
/* one dash the path's length, then a gap a stroke-width longer (so no round cap peeks at either end while hidden);
   hidden = offset half a period, drawn = 0, hover = one full period */
.pms.is-armed .pms__mark path {
  --pms-cap: 4px;
  stroke-dasharray: var(--length) calc(var(--length) + 2 * var(--pms-cap));
  stroke-dashoffset: calc(var(--length) + var(--pms-cap));
}

/* play */
.pms.is-armed.is-in .pms__wt {
  transform: translateZ(0);
  transition: transform var(--pms-dur) var(--pms-ease) calc(var(--wi) * var(--pms-stagger) + var(--pms-delay));
}
.pms.is-armed.is-in .pms__w--mark .pms__mark path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--pms-md) var(--pms-mark-ease);
  transition-delay: calc(var(--wi) * var(--pms-stagger) + var(--pms-delay) + var(--pms-mark-lag));
}
.pms.is-armed.is-in .pms__w--link .pms__mark path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--pms-link-dur) var(--pms-mark-ease);
  transition-delay: calc(var(--word-total) * var(--pms-stagger) + var(--pms-delay) + var(--pms-link-lag));
}
/* hover: one more dash period (0 -> 2 x length, + the cap gap): rewinds into its start, re-pens from the far end */
.pms.is-armed.is-in .pms__w--mark:hover .pms__mark path,
.pms.is-armed.is-in .pms__w--mark.is-hover .pms__mark path {
  stroke-dashoffset: calc(2 * var(--length) + 2 * var(--pms-cap));
  transition: stroke-dashoffset calc(var(--pms-md) * var(--pms-hover-k)) var(--pms-mark-ease);
}
.pms.is-armed.is-in .pms__link:hover .pms__mark path,
.pms.is-armed.is-in .pms__link:focus-visible .pms__mark path {
  stroke-dashoffset: calc(2 * var(--length) + 2 * var(--pms-cap));
  transition: stroke-dashoffset var(--pms-link-dur) var(--pms-mark-ease);
}

@media (prefers-reduced-motion: reduce) {
  .pms.is-armed .pms__wt { transform: none; transition: none !important; }
  .pms.is-armed .pms__mark path { stroke-dashoffset: 0 !important; transition: none !important; }
}