/* nx-kit Tier C · motion: text entrances, slot text, loaders */
.nx-tin:not(.nx-tin-keep) { cursor: pointer; font-size: 1.05rem; line-height: 1.55; max-width: 22rem; }
.nx-tin .nx-tin-w { display: inline-block; white-space: pre; }
/* data-html headings (.nx-tin-keep) keep their own size and lines. */
.nx-tin.is-in .nx-tin-w { animation: .7s calc(var(--i) * 45ms) both cubic-bezier(.2, .8, .2, 1); }
.nx-tin-fade.is-in .nx-tin-w { animation-name: nx-tin-fade; }
.nx-tin-rise.is-in .nx-tin-w { animation-name: nx-tin-rise; }
.nx-tin-blur.is-in .nx-tin-w { animation-name: nx-tin-blur; }
.nx-tin:not(.is-in) .nx-tin-w { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .nx-tin.is-in .nx-tin-w { animation: none; } .nx-tin .nx-tin-w { opacity: 1 !important; } }
@keyframes nx-tin-fade { from { opacity: 0; } }
@keyframes nx-tin-rise { from { opacity: 0; transform: translateY(.7em); } }
@keyframes nx-tin-blur { from { opacity: 0; filter: blur(10px); transform: translateY(.2em); } }

.nx-slot { display: inline-flex; font: 800 2rem/1 Inter, system-ui, sans-serif; letter-spacing: -.01em; cursor: pointer; color: var(--text); }
.nx-slot-col { position: relative; display: inline-flex; flex-direction: column; height: 1.15em; overflow: hidden; }
.nx-slot-col i { font-style: normal; height: 1.15em; line-height: 1.15em; text-align: center; }
.nx-slot-col.is-rolling i { animation: nx-slot .5s calc(var(--k) * 45ms) both cubic-bezier(.3, 1.3, .5, 1); }
@keyframes nx-slot { from { transform: translateY(0); } to { transform: translateY(-100%); } }

/* Wave: four bars rising and falling in a wave */
.nx-ld-wave { grid-auto-flow: column; align-items: center; gap: 4px; height: 2rem; }
.nx-ld-wave::before, .nx-ld-wave::after, .nx-ld-wave i { content: ""; width: 5px; height: 40%; border-radius: 4px; background: currentColor; animation: nx-ld-wave 1s ease-in-out infinite; }
.nx-ld-wave i:nth-of-type(1) { animation-delay: -.85s; } .nx-ld-wave i:nth-of-type(2) { animation-delay: -.7s; } .nx-ld-wave::after { animation-delay: -.55s; }
@keyframes nx-ld-wave { 50% { height: 100%; } }
/* Bounce: three dots hopping, giving a little where they land */
.nx-ld-bounce { grid-auto-flow: column; align-items: end; gap: 6px; height: 2rem; }
.nx-ld-bounce i { width: 9px; height: 9px; border-radius: 999px; background: currentColor; animation: nx-ld-hop 1s cubic-bezier(.3, 0, .3, 1) infinite; transform-origin: 50% 100%; }
.nx-ld-bounce i:nth-child(2) { animation-delay: .14s; } .nx-ld-bounce i:nth-child(3) { animation-delay: .28s; }
@keyframes nx-ld-hop { 0%, 60%, 100% { transform: translateY(0) scale(1.25, .75); } 30% { transform: translateY(-1.1rem) scale(.9, 1.1); } 45% { transform: translateY(0) scale(1, 1); } }
/* Trace: a dash running round its own faint track, its length breathing */
/* Morph: a square that rounds into a circle as it turns */
/* Dots: 4x4 grid, four patterns (press to change) */
/* Pixel: mini pixels in a circle rippling out from the middle */
.nx-ld-pixel { grid-template-columns: repeat(7, 4px); gap: 3px; }
.nx-ld-pixel i { width: 4px; height: 4px; background: currentColor; opacity: .15; animation: nx-ld-on 1.6s calc(var(--d) * 140ms) infinite ease-in-out; }
/* Blocks: a grid that dips corner to corner */
.nx-ld-blocks { grid-template-columns: repeat(3, 10px); gap: 3px; }
.nx-ld-blocks i { width: 10px; height: 10px; border-radius: 3px; background: currentColor; animation: nx-ld-dip 1.4s calc(var(--d) * 110ms) infinite cubic-bezier(.5, 0, .5, 1); }
@keyframes nx-ld-dip { 0%, 60%, 100% { transform: none; opacity: 1; } 30% { transform: scale(.4); opacity: .3; } }