/* Furrsati round 6 · shared motion vocabulary. Transform + opacity only.
   Looping classes run only inside an .is-live section (FOS.live). One-shot classes run when added.
   Reduced motion: nothing loops, nothing bursts; every piece sits in its final frame. */

/* ── loops (gated by .is-live) ── */
.m-float { will-change: transform; }
.is-live .m-float { animation: m-float 7.2s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -1.7s); }
.is-live .m-float:nth-child(3n + 1) { animation-duration: 6.2s; }
.is-live .m-float:nth-child(3n + 2) { animation-duration: 8.6s; }
@keyframes m-float {
  0%, 100% { transform: translate3d(0, 6px, 0) rotate(-1.2deg); }
  50% { transform: translate3d(0, -6px, 0) rotate(1.2deg); }
}

.m-dots { display: inline-flex; align-items: center; gap: 4px; height: 1em; }
.m-dots i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .35; }
.is-live .m-dots i { animation: m-dot 1.1s ease-in-out infinite; }
.is-live .m-dots i:nth-child(2) { animation-delay: .16s; }
.is-live .m-dots i:nth-child(3) { animation-delay: .32s; }
@keyframes m-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .35; } 30% { transform: translateY(-5px); opacity: 1; } }

/* ── one-shots (add the class to play; remove + reflow to replay) ── */
.m-pop { animation: m-pop 520ms cubic-bezier(.2, .8, .2, 1) both; }
@keyframes m-pop { 0% { transform: scale(.6); opacity: 0; } 62% { transform: scale(1.06); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }

.m-slap { animation: m-slap 480ms cubic-bezier(.3, .7, .2, 1.2) both; }
@keyframes m-slap {
  0% { transform: scale(1.5) rotate(calc(var(--rot, 0deg) - 14deg)); opacity: 0; }
  55% { transform: scale(.95) rotate(calc(var(--rot, 0deg) + 3deg)); opacity: 1; }
  100% { transform: scale(1) rotate(var(--rot, 0deg)); opacity: 1; }
}

.m-stamp { animation: m-stamp 420ms cubic-bezier(.5, 0, .3, 1.3) both; }
@keyframes m-stamp { 0% { transform: scale(2.2) rotate(var(--rot, -12deg)); opacity: 0; } 100% { transform: scale(1) rotate(var(--rot, -12deg)); opacity: .92; } }

.m-shake { animation: m-shake 300ms linear both; }
@keyframes m-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-3px); } 40% { transform: translateX(3px); } 60% { transform: translateX(-2px); } 80% { transform: translateX(2px); } }

/* svg circle drawn once: set --len to the circumference, --dur to the draw time */
.m-ring { stroke-dasharray: var(--len, 151); stroke-dashoffset: var(--len, 151); animation: m-ring var(--dur, 1.6s) cubic-bezier(.4, 0, .2, 1) forwards; }
@keyframes m-ring { to { stroke-dashoffset: 0; } }

/* ── split titles: words rise in when the title (or its parent) gets .is-in ── */
.split .w { display: inline-block; }
.js .split .w { opacity: 0; transform: translateY(.6em); transition: opacity .6s ease, transform .9s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i, 0) * 60ms); }
.js .split.is-in .w, .js .is-in .split .w { opacity: 1; transform: none; }

/* ── confetti ── */
.confetti { position: absolute; z-index: 30; width: 0; height: 0; pointer-events: none; }
.confetti i { position: absolute; left: -4px; top: -6px; width: 8px; height: 12px; border-radius: 2px; background: var(--c, #FFD23F); transform: scale(var(--s, 1)); opacity: 0; animation: m-conf 1.25s cubic-bezier(.15, .7, .3, 1) forwards; }
.confetti i.is-dot { width: 9px; height: 9px; border-radius: 50%; }
@keyframes m-conf {
  0% { transform: translate(0, 0) rotate(0) scale(var(--s, 1)); opacity: 1; }
  45% { transform: translate(var(--dx), var(--dy)) rotate(calc(var(--r) * .5)) scale(var(--s, 1)); opacity: 1; }
  100% { transform: translate(calc(var(--dx) * 1.2), calc(var(--dy) + var(--fall))) rotate(var(--r)) scale(var(--s, 1)); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .m-float, .m-dots i, .m-pop, .m-slap, .m-stamp, .m-shake, .confetti i { animation: none !important; }
  .m-pop, .m-slap { opacity: 1; transform: rotate(var(--rot, 0deg)); }
  .m-stamp { opacity: .92; transform: rotate(var(--rot, -12deg)); }
  .m-ring { animation: none !important; stroke-dashoffset: 0; }
  .confetti { display: none; }
  .js .split .w { opacity: 1; transform: none; }
}