/* Reign Wala: the small magic. Loaded after style.css; remove this file and magic.js and the page is as it was. */

:root { --ease-pen: cubic-bezier(0.65, 0, 0.35, 1); --stitch: repeating-linear-gradient(90deg, currentColor 0 4px, transparent 4px 7px); }

/* text links: the drawn line slips away as a stitch is sewn in */
.link, .wild-head a { background: linear-gradient(currentColor, currentColor) 100% 100% / 100% 1px no-repeat, var(--stitch) 0 100% / 0 1px no-repeat; transition: background-size 560ms var(--ease-pen); }
.link:hover, .wild-head a:hover { background-size: 0 1px, 100% 1px; background-position: 100% 100%, 0 100%; }

/* notes arrive as they were sent */
.mx-arr blockquote { position: relative; }
.mx-arr .thread blockquote p, .mx-arr .body blockquote p { opacity: 0; transform: translateY(6px) scale(0.97); transform-origin: 0 100%; transition: opacity 420ms var(--ease), transform 560ms var(--ease); }
.mx-arr blockquote p.is-in { opacity: 1; transform: none; }
.mx-typing { position: absolute; left: 0; display: flex; gap: 4px; align-items: center; padding: 12px 14px; border-radius: 19px; background: #e9e9eb; opacity: 0; transition: opacity 200ms; }
.dm .mx-typing { background: #efefef; border-radius: 22px; }
.mx-typing.is-on { opacity: 1; }
.mx-typing i { width: 7px; height: 7px; border-radius: 50%; background: #8e8e93; animation: mx-dot 1.1s ease-in-out infinite; }
.mx-typing i:nth-child(2) { animation-delay: 0.16s; }
.mx-typing i:nth-child(3) { animation-delay: 0.32s; }
@keyframes mx-dot { 0%, 60%, 100% { opacity: 0.35; transform: none; } 30% { opacity: 1; transform: translateY(-2px); } }

@media (prefers-reduced-motion: reduce) {
  .link, .wild-head a { transition-duration: 0ms !important; }
  .mx-typing i { animation: none !important; }
}