/* Interactive hero mascot */
.ks-mascot {
  cursor: pointer; overflow: visible; outline: none;
  transform: rotate(var(--ks-tilt, 0deg));
  transform-origin: 50% 80%;
  transition: transform .35s ease-out;
  -webkit-tap-highlight-color: transparent;
}
.ks-mascot { touch-action: none; }
/* living blob, always in the brand orange */
.ks-mascot .ks-blob { fill: #ff6d3e; }
/* headphones + head bob while the music plays */
.ks-mascot .ks-phones { opacity: 0; transform: translateY(-90px) scale(.92); transform-box: view-box; transform-origin: 50% 0;
  transition: opacity .3s ease, transform .55s cubic-bezier(.3, 1.6, .5, 1); }
.ks-mascot.ks-listening .ks-phones { opacity: 1; transform: none; }
.ks-mascot.ks-listening { animation: ks-bob 1.6s ease-in-out infinite; }
@keyframes ks-bob { 0%, 100% { rotate: -2.5deg; } 50% { rotate: 2.5deg; } }
.ks-mascot .ks-note { opacity: 0; }
.ks-mascot.ks-listening .ks-note { animation: ks-note 2.4s ease-out infinite; }
.ks-mascot.ks-listening .ks-note-1 { animation-delay: 1.2s; }
@keyframes ks-note { 0% { opacity: 0; transform: translate(0, 30px); } 25% { opacity: .9; } 100% { opacity: 0; transform: translate(40px, -90px) rotate(15deg); } }
.ks-mascot.ks-dragging { cursor: grabbing; transition: none; }
.ks-mascot .ks-blush { opacity: 0; transition: opacity .35s ease; }
.ks-mascot:hover .ks-blush, .ks-mascot.ks-dragging .ks-blush { opacity: .55; }
.ks-mascot .ks-glint-bar { opacity: 0; }
.ks-mascot .ks-glint.ks-glint-go .ks-glint-bar { animation: ks-glint .7s ease-in-out; }
@keyframes ks-glint {
  0% { opacity: 0; transform: translateX(-70px); }
  20% { opacity: .85; }
  80% { opacity: .85; }
  100% { opacity: 0; transform: translateX(70px); }
}
.ks-mascot:focus-visible { outline: 2px solid #fe5621; outline-offset: 6px; border-radius: 40%; }
.ks-mascot .ks-lid {
  transform: scaleY(0.06); transform-box: fill-box; transform-origin: 50% 0;   /* animated per frame by mascot.js */
}
.ks-mascot .ks-shut { opacity: 0; transition: opacity .04s; }
.ks-mascot.ks-sleeping { animation: ks-breathe 3s ease-in-out infinite; }
.ks-mascot.ks-boing { animation: ks-boing .55s cubic-bezier(.3, 1.6, .5, 1); }
.ks-mascot.ks-dizzy { animation: ks-wobble 1.6s ease-in-out; }

@keyframes ks-boing {
  0% { transform: rotate(var(--ks-tilt, 0deg)) scale(1, 1); }
  25% { transform: rotate(var(--ks-tilt, 0deg)) scale(1.12, .86); }
  55% { transform: rotate(var(--ks-tilt, 0deg)) scale(.92, 1.1) translateY(-8%); }
  100% { transform: rotate(var(--ks-tilt, 0deg)) scale(1, 1); }
}
@keyframes ks-wobble {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(-14deg); } 30% { transform: rotate(12deg); }
  45% { transform: rotate(-9deg); } 60% { transform: rotate(7deg); }
  75% { transform: rotate(-4deg); } 90% { transform: rotate(2deg); }
}
@keyframes ks-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025, .985); } }

.ks-bubble {
  position: absolute; z-index: 50; pointer-events: none;
  transform: translate(-10%, -100%) scale(.6); opacity: 0;
  transform-origin: 10% 100%;
  background: #fff; color: #181b2e; border: 2px solid #181b2e; border-radius: 999px;
  padding: 8px 16px; white-space: nowrap;
  font-family: Outfit, sans-serif; font-size: 1rem; font-weight: 500; line-height: 1.2;
  transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), opacity .2s;
}
.ks-bubble::after {
  content: ''; position: absolute; left: 18px; bottom: -9px; width: 12px; height: 12px;
  background: #fff; border-right: 2px solid #181b2e; border-bottom: 2px solid #181b2e;
  transform: rotate(45deg);
}
.ks-bubble.ks-show { transform: translate(-10%, -100%) scale(1); opacity: 1; }
/* welcome card for hiring managers */
.ks-bubble.ks-card { white-space: normal; width: min(300px, 80vw); border-radius: 20px; padding: 16px 18px 14px; pointer-events: auto; }
.ks-bubble.ks-card p { margin: 0 18px 12px 0; font-size: .95rem; line-height: 1.45; }
.ks-card-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ks-card-btn { display: inline-block; padding: 8px 14px; border-radius: 99px; background: #181b2e; color: #fff; font: 500 .85rem Outfit, sans-serif; text-decoration: none; transition: background-color .2s, transform .2s; }
.ks-card-btn:hover { background: #fe5621; transform: translateY(-1px); }
.ks-card-btn.ks-ghost { background: transparent; color: #181b2e; box-shadow: inset 0 0 0 1.5px #181b2e; }
.ks-card-btn.ks-ghost:hover { background: #181b2e; color: #fff; }
.ks-card-btn:focus-visible, .ks-card-x:focus-visible { outline: 2px solid #fe5621; outline-offset: 2px; }
.ks-card-x { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border: 0; border-radius: 50%; background: transparent; color: #181b2e; font-size: 18px; line-height: 1; cursor: pointer; }
.ks-card-x:hover { background: rgba(24, 27, 46, .08); }
@media (max-width: 767px) { .ks-bubble.ks-card { transform: translate(-70%, -100%) scale(.6); } .ks-bubble.ks-card.ks-show { transform: translate(-70%, -100%) scale(1); } }

.ks-spark {
  position: absolute; z-index: 49; pointer-events: none; color: #fe5621; line-height: 1;
  transform: translate(-50%, -50%);
  animation: ks-spark .85s cubic-bezier(.2, .7, .3, 1) forwards;
}
@keyframes ks-spark {
  to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(160deg) scale(.4); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ks-mascot, .ks-mascot.ks-sleeping, .ks-mascot.ks-listening { transition: none; animation: none; }
  .ks-mascot.ks-listening .ks-note { animation: none; }
  .ks-bubble { transition: opacity .2s; }
}