/* The turning headline (shared/alchemy.js). Typography comes from the page;
   this file only lays the verse layers over each other and draws the three
   rhyme decorations: --stitch (a running stitch sewn under the word),
   --marker (the app's neon highlighter swipe), --sweep (a spectrum sweep). */

.alc { cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
.alc:focus-visible { outline: 2px dashed currentColor; outline-offset: 8px; border-radius: 6px; }
.alc__lead { margin: 0; }
.alc__stage { position: relative; }
.alc__verse { margin: 0; position: absolute; inset: 0 0 auto 0; }
.alc__stage > .alc__verse:first-child { position: relative; }
.alc__stage > .alc__verse ~ .alc__verse { position: absolute; }
.alc .is-churn { opacity: .55; }
.alc__tail { white-space: nowrap; }
.alc__rhyme { position: relative; white-space: nowrap; display: inline-block; }

/* ── stitch: a running stitch in --thread, sewn left to right ─────────────── */
.alc--stitch .alc__rhyme::after {
  content: ""; position: absolute; left: -.04em; right: -.04em; bottom: -.08em; height: .085em;
  background: repeating-linear-gradient(90deg, var(--thread, #c9252c) 0 .34em, transparent .34em .52em);
  border-radius: 1em;
  clip-path: inset(0 100% 0 0);
  transition: clip-path .9s cubic-bezier(.45, 0, .1, 1);
}
.alc--stitch .alc__rhyme.is-in::after { clip-path: inset(0 0 0 0); }

/* ── marker: a chisel-tipped highlighter swipe behind the word ────────────── */
.alc--marker .alc__rhyme { z-index: 0; }
.alc--marker .alc__rhyme::before {
  content: ""; position: absolute; z-index: -1; left: -.1em; right: -.12em; top: .28em; bottom: .02em;
  background: var(--marker, #fdfd7b);
  border-radius: .12em .2em .14em .22em;
  transform: skewX(-8deg) rotate(-.8deg);
  clip-path: polygon(0 0, 0 0, -10% 100%, -10% 100%);
  transition: clip-path .5s cubic-bezier(.3, 0, .1, 1);
}
.alc--marker .alc__rhyme.is-in::before { clip-path: polygon(0 0, 110% 0, 100% 100%, -10% 100%); }

/* ── sweep: the word fills with the icon's spectrum, left to right ────────── */
.alc--sweep .alc__rhyme-word {
  background: linear-gradient(90deg, currentColor 0 45%, #ff9f6e 52%, #ff7ab8 60%, #b48cff 68%, #6ec3ff 76%, #6ef0c2 84%, #f6f37a 92%, #ff9f6e 100%);
  background-size: 260% 100%; background-position: 0 0;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: background-position 1.4s cubic-bezier(.4, 0, .2, 1);
}
.alc--sweep .alc__rhyme.is-in .alc__rhyme-word { background-position: 100% 0; }
/* While a verse is still arriving its letters animate one by one; a gradient
   clipped to the whole word would show the word before its letters do. */
.alc--sweep .is-arriving .alc__rhyme-word { background: none; -webkit-text-fill-color: currentColor; }

@media (prefers-reduced-motion: reduce) {
  .alc--stitch .alc__rhyme::after, .alc--marker .alc__rhyme::before, .alc--sweep .alc__rhyme-word { transition-duration: .01s; }
}