/* r15: drips that grow out of the stroke itself, and the stroke sprays on */

/* the drip layer has exactly the paint's box, so the spots from the stroke generator line up */
.tag__drips { position: absolute; inset: -12px -20px -6px; z-index: -1; pointer-events: none; filter: drop-shadow(5px 7px 0 rgba(0,0,0,.5)); opacity: 0; transition: opacity .2s .55s; }
.tag.sprayed .tag__drips { opacity: 1; }
.pd { position: absolute; width: var(--w); height: 0; transform: translateX(-50%); background: var(--c); border-radius: 0 0 999px 999px;
  animation: pdRun var(--d, 4s) cubic-bezier(.55,0,.85,.55) calc(var(--s, 0s) + .7s) infinite; animation-play-state: paused; }
.tag.sprayed .pd { animation-play-state: running; }
/* the bead at the tip: swells, then falls off */
.pd::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 170%; aspect-ratio: 1 / 1.15; transform: translate(-50%, 45%); border-radius: 50% 50% 50% 50% / 58% 58% 42% 42%; background: var(--c);
  animation: pdBead var(--d, 4s) cubic-bezier(.55,0,.85,.55) calc(var(--s, 0s) + .7s) infinite; animation-play-state: inherit; }
@keyframes pdRun { 0% { height: 0; opacity: 1; } 70% { height: var(--L); opacity: 1; } 92% { height: var(--L); opacity: 1; } 100% { height: var(--L); opacity: 0; } }
@keyframes pdBead { 0%, 60% { transform: translate(-50%, 45%) scale(1); opacity: 1; } 74% { transform: translate(-50%, 55%) scale(1.25); opacity: 1; } 90% { transform: translate(-50%, 380%) scale(.8); opacity: 0; } 100% { transform: translate(-50%, 380%) scale(.8); opacity: 0; } }
.tag.copied .pd, .tag.copied .pd::after { background: #1C8A3A; }

/* spray-on: the stroke (and its shadow) paints in from the reading side, then the words land */
.tag::before, .tag__paint { clip-path: inset(0 100% 0 0); transition: clip-path .75s cubic-bezier(.6,0,.2,1), filter .3s, transform .45s cubic-bezier(.2,1.4,.3,1); }
html[dir="rtl"] .tag::before, html[dir="rtl"] .tag__paint { clip-path: inset(0 0 0 100%); }
.tag.sprayed::before, .tag.sprayed .tag__paint { clip-path: inset(-20px -20px -20px -20px); }
.tag:not(.tag--sm) .tag__txt, .tag:not(.tag--sm) .tag__ico { opacity: 0; transform: translateY(6px); transition: opacity .35s ease .5s, transform .45s cubic-bezier(.2,1.4,.3,1) .5s; }
.tag.sprayed .tag__txt, .tag.sprayed .tag__ico { opacity: 1; transform: none; }
.tag.copied .tag__txt, .tag.copied .tag__ico { opacity: 0; }
.tag--sm .tag__paint, .tag--sm::before { transition-duration: .5s; }

@media (prefers-reduced-motion: reduce) {
  .pd { animation: none; height: var(--L); }
  .tag::before, .tag__paint { clip-path: none !important; }
  .tag .tag__txt, .tag .tag__ico { opacity: 1 !important; transform: none !important; }
}
.tag.sprayed:hover .tag__ico { transform: rotate(-14deg) scale(1.1); }
.tag--disc.sprayed:hover .tag__ico { transform: rotate(14deg) scale(1.1); }