/* ===== Little delights (js/fun-fx.js). All short, transform/opacity only. ===== */
.hk-fx { position: fixed; z-index: 9000; pointer-events: none; font: 900 18px system-ui, sans-serif; color: #7d5bd0; transform: translate(-50%, -50%); opacity: 0; will-change: transform, opacity; }
.hk-fx-note { color: #c9921f; text-shadow: 0 1px 0 #fff; animation: hk-fx-float 0.8s ease-out forwards; }
.hk-fx-sparkle { font-size: 16px; color: #f2c94c; animation: hk-fx-pop 0.9s cubic-bezier(.2,.7,.3,1) forwards; }
.hk-fx-sparkle:nth-child(3n) { color: #ff7aa8; }
@keyframes hk-fx-float { 0% { opacity: 0; transform: translate(-50%, 0) scale(0.6); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), var(--dy)) rotate(12deg) scale(1); } }
@keyframes hk-fx-pop { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.1); } }

/* Streak: a gentle bounce once when it shows up */
@media (prefers-reduced-motion: no-preference) {
  .hk-streak, .hk-hero-meta { animation: hk-fx-bounce 0.7s cubic-bezier(.3,1.6,.5,1) 0.3s 1 both; }
}
@keyframes hk-fx-bounce { 0% { transform: translateY(0); } 40% { transform: translateY(-5px) scale(1.04); } 100% { transform: none; } }

/* The cat buddy, perched at the keyboard's top-right corner */
.hk-buddy { position: absolute; right: 4px; bottom: 100%; width: 46px; height: 51px; pointer-events: none; z-index: 2; }
.hk-buddy svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hk-buddy .hk-buddy-awake { transform-origin: 50% 100%; }
.hk-buddy .hk-buddy-zz, .hk-buddy .hk-buddy-z, .hk-buddy .hk-buddy-paw { opacity: 0; }
.hk-buddy .hk-buddy-z, .hk-buddy .hk-buddy-paw { position: absolute; font: 800 11px system-ui, sans-serif; color: #7d5bd0; }
.hk-buddy .hk-buddy-z { right: -4px; top: 0; }
.hk-buddy .hk-buddy-paw { left: -10px; top: 6px; font-size: 13px; }
.hk-buddy.hk-buddy-sleep .hk-buddy-awake { opacity: 0; }
.hk-buddy.hk-buddy-sleep .hk-buddy-zz { opacity: 1; transform: scaleY(0.86); transform-origin: 50% 100%; }
@media (prefers-reduced-motion: no-preference) {
  .hk-buddy .hk-buddy-awake, .hk-buddy .hk-buddy-zz { transition: opacity 0.4s; }
  .hk-buddy.hk-buddy-sleep .hk-buddy-z { animation: hk-z 2.4s ease-out infinite; }
  .hk-buddy[data-act="swish"] .hc-tail { animation: hk-swish 0.45s ease-in-out 1; }
  .hk-buddy[data-act="bat"] .hk-buddy-awake { animation: hk-bat 0.5s ease-in-out 1; }
  .hk-buddy[data-act="pounce"] .hk-buddy-awake { animation: hk-pounce 0.8s cubic-bezier(.3,.7,.4,1) 1; }
  .hk-buddy[data-act="hop"] .hk-buddy-awake { animation: hk-hop 0.55s cubic-bezier(.3,1.5,.5,1) 1; }
  .hk-buddy[data-act="stretch"] .hk-buddy-awake { animation: hk-stretch 1s ease-in-out 1; }
  .hk-buddy[data-act="five"] .hk-buddy-awake { animation: hk-hop 0.6s cubic-bezier(.3,1.5,.5,1) 1; }
  .hk-buddy[data-act="five"] .hk-buddy-paw { animation: hk-five 0.9s ease-out 1; }
}
.hk-buddy .hc-tail { transform-box: fill-box; transform-origin: 0% 100%; }
@keyframes hk-swish { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-16deg); } }
@keyframes hk-bat { 0%, 100% { transform: rotate(0); } 35% { transform: rotate(-9deg) translateX(-3px); } 60% { transform: rotate(4deg); } }
@keyframes hk-pounce { 0% { transform: none; } 25% { transform: scale(1.05, 0.85); } 55% { transform: translate(-14px, -12px) rotate(-12deg); } 80% { transform: translate(-6px, 0) scale(1.06, 0.92); } 100% { transform: none; } }
@keyframes hk-hop { 0%, 100% { transform: none; } 40% { transform: translateY(-10px) scale(0.95, 1.08); } 70% { transform: scale(1.05, 0.94); } }
@keyframes hk-stretch { 0%, 100% { transform: none; } 45%, 60% { transform: scale(1.12, 0.82); } }
@keyframes hk-five { 0% { opacity: 0; transform: translate(6px, 8px) scale(0.6); } 30% { opacity: 1; transform: translate(-2px, -4px) scale(1.2) rotate(-15deg); } 100% { opacity: 0; transform: translate(-4px, -10px) scale(1); } }
@keyframes hk-z { 0% { opacity: 0; transform: translate(0, 4px) scale(0.7); } 30% { opacity: 0.9; } 100% { opacity: 0; transform: translate(6px, -12px) scale(1.1); } }