/* Small moments of joy (js/celebrate.js; the owner's pick of mock-friendly). Moved by the script, which
   does nothing with reduced motion. */

/* a burst: confetti in Gia's colours, and round stickers */
.cb-burst { position: fixed; inset: 0; z-index: 4000; pointer-events: none; overflow: hidden; }
.cb-bit { position: absolute; left: 0; top: 0; width: 10px; height: 14px; border-radius: 2px; }
.cb-bit.is-dot { width: 10px; height: 10px; border-radius: 50%; }
.cb-bit.is-strip { width: 6px; height: 18px; border-radius: 3px; }
.cb-c1 { background: #a9a9fd; } .cb-c2 { background: #c4b0fc; } .cb-c3 { background: #f7bdee; } .cb-c4 { background: #967dfc; }
.cb-c5 { background: #6350ee; } .cb-c6 { background: #ffd36b; } .cb-c7 { background: #ffb4d0; }
.cb-sticker { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
  background: #fff; box-shadow: 0 4px 12px rgba(30, 26, 103, .25), inset 0 0 0 3px #c4b0fc; font-size: 24px; line-height: 1; }

/* a badge in the middle of the screen: pops up, stays a moment, goes */
.cb-badge { position: fixed; left: 50%; top: 42%; z-index: 4001; translate: -50% -50%; display: grid; justify-items: center; gap: 4px; padding: 20px 28px; border-radius: 26px;
  background: linear-gradient(135deg, #a9a9fd, #c4b0fc 50%, #f7bdee); color: #150e5e; box-shadow: 0 18px 40px rgba(30, 26, 103, .3); text-align: center;
  animation: cb-badge 2.8s cubic-bezier(.3, 1.4, .5, 1) forwards; pointer-events: none; }
.cb-badge i { font-style: normal; font-size: 44px; line-height: 1; }
.cb-badge b { font-size: 22px; }
.cb-badge small { font-size: 13px; font-weight: 700; opacity: .8; }
@keyframes cb-badge { 0% { scale: .3; opacity: 0; } 14% { scale: 1.06; opacity: 1; } 22%, 82% { scale: 1; opacity: 1; } 100% { scale: .9; opacity: 0; } }

/* little things that float up (a ❤️, ✨, ✦) */
.cb-float { position: fixed; z-index: 4000; left: 0; top: 0; pointer-events: none; font-size: 20px; line-height: 1;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.cb-float.is-spark { color: #ffcc00; font-size: 16px; }

/* a soft ring spreading from a card's edge */
.cb-glow { animation: cb-glow 1.6s ease-out; }
@keyframes cb-glow { 0% { box-shadow: 0 0 0 0 rgba(150, 125, 252, .55); } 100% { box-shadow: 0 0 0 26px rgba(150, 125, 252, 0); } }