/* ============================================================
   LITTLE KRISHNA COMPANION — self-contained roaming mascot
   Drop-in: include this file + krishna-widget.js + the markup
   block (search "KRISHNA COMPANION" in any page) to use it
   elsewhere; delete both to remove it completely.
   ============================================================ */

#kc-root{
  position:fixed;
  inset:0;
  pointer-events:none;   /* never blocks clicks on the real site */
  z-index:150;           /* above content, below nav (200) & modals (500) */
  overflow:hidden;
}

.kc-figure{
  position:absolute;
  left:0; top:0;
  width:74px;
  pointer-events:auto;
  cursor:pointer;
  touch-action:manipulation;
  transform:translate3d(0,0,0);
  will-change:transform;
}
.kc-figure:focus-visible .kc-img{ outline:3px solid var(--marigold, #E2661F); outline-offset:4px; border-radius:12px; }

.kc-shadow{
  position:absolute; left:50%; bottom:-6px; width:56%; height:10px;
  background:radial-gradient(ellipse at center, rgba(13,20,64,.38), transparent 72%);
  transform:translateX(-50%);
  border-radius:50%;
  transition:opacity .3s ease;
}

.kc-flip{ display:block; transition:transform .35s ease; }
.kc-figure.facing-left .kc-flip{ transform:scaleX(-1); }

.kc-img{
  display:block; width:100%;
  filter:drop-shadow(0 8px 10px rgba(13,20,64,.35));
  transform-origin:center 85%;
  transition:transform .25s ease;
}

/* -------- locomotion -------- */
.kc-figure.walking .kc-img{ animation:kc-bob .55s ease-in-out infinite; }
@keyframes kc-bob{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-6px) rotate(-2deg); }
}
.kc-figure.walking .kc-shadow{ animation:kc-shadow-pulse .55s ease-in-out infinite; }
@keyframes kc-shadow-pulse{
  0%,100%{ transform:translateX(-50%) scale(1); opacity:.55; }
  50%{ transform:translateX(-50%) scale(.82); opacity:.35; }
}

/* -------- idle breathing -------- */
.kc-figure.idle .kc-img{ animation:kc-breathe 2.6s ease-in-out infinite; }
@keyframes kc-breathe{
  0%,100%{ transform:scale(1) rotate(0deg); }
  50%{ transform:scale(1.035) rotate(1deg); }
}

/* -------- greeting on click/tap -------- */
.kc-figure.greet .kc-img{ animation:kc-greet .7s cubic-bezier(.34,1.56,.64,1); }
@keyframes kc-greet{
  0%{ transform:scale(1) rotate(0deg); }
  30%{ transform:scale(1.18) rotate(-8deg); }
  60%{ transform:scale(1.05) rotate(6deg); }
  100%{ transform:scale(1) rotate(0deg); }
}

/* -------- occasional behaviours -------- */
.kc-figure.wave .kc-img{ animation:kc-wave 1.1s ease-in-out; }
@keyframes kc-wave{
  0%,100%{ transform:rotate(0deg); }
  20%{ transform:rotate(-9deg); }
  40%{ transform:rotate(7deg); }
  60%{ transform:rotate(-7deg); }
  80%{ transform:rotate(5deg); }
}
.kc-figure.look .kc-img{ animation:kc-look 1.4s ease-in-out; }
@keyframes kc-look{
  0%,100%{ transform:rotate(0deg); }
  25%{ transform:rotate(-6deg) scaleX(1.02); }
  75%{ transform:rotate(6deg) scaleX(1.02); }
}
.kc-figure.sit .kc-img{ animation:kc-sit 1.6s ease; }
@keyframes kc-sit{
  0%{ transform:translateY(0) scale(1); }
  40%{ transform:translateY(6px) scale(.94); }
  100%{ transform:translateY(4px) scale(.96); }
}
.kc-figure.flute .kc-img{ animation:kc-flute 1.8s ease-in-out; }
@keyframes kc-flute{
  0%,100%{ transform:rotate(0deg); }
  50%{ transform:rotate(-3deg); }
}

/* musical note that floats up during the flute behaviour */
.kc-note{
  position:absolute; top:6%; left:78%; font-size:1rem;
  opacity:0; pointer-events:none;
}
.kc-figure.flute .kc-note{ animation:kc-note-float 1.8s ease-out; }
@keyframes kc-note-float{
  0%{ opacity:0; transform:translate(0,0) rotate(0deg); }
  15%{ opacity:1; }
  100%{ opacity:0; transform:translate(14px,-34px) rotate(18deg); }
}

/* -------- speech bubble -------- */
.kc-bubble{
  position:absolute; bottom:100%; left:50%;
  transform:translate(-50%,8px) scale(.9);
  margin-bottom:12px;
  background:var(--white,#fff); color:var(--indigo,#16215B);
  border:2px solid var(--gold,#E8A93A);
  border-radius:16px 16px 16px 4px;
  padding:9px 14px;
  font-family:'Baloo 2',cursive; font-size:.82rem; line-height:1.35;
  white-space:nowrap;
  box-shadow:0 10px 22px -10px rgba(13,20,64,.4);
  opacity:0; pointer-events:none;
  transition:opacity .22s ease, transform .22s ease;
}
.kc-figure.facing-left .kc-bubble{ transform:translate(-50%,8px) scale(.9); } /* bubble never flips */
.kc-bubble.show{ opacity:1; transform:translate(-50%,0) scale(1); }
.kc-bubble .kc-line2{ color:var(--marigold,#E2661F); }

/* -------- sparkles (special interactions only, kept minimal) -------- */
.kc-sparkle{
  position:absolute; top:20%; left:50%; font-size:.85rem;
  opacity:0; pointer-events:none;
  transform:translate(-50%,-50%);
}
.kc-sparkle.fly{ animation:kc-sparkle-rise 1s ease-out forwards; }
@keyframes kc-sparkle-rise{
  0%{ opacity:0; transform:translate(-50%,-50%) translate(0,0) scale(.6); }
  20%{ opacity:1; }
  100%{ opacity:0; transform:translate(-50%,-50%) translate(var(--sx,10px),-46px) scale(1); }
}

/* -------- responsive scale -------- */
@media (max-width:640px){
  .kc-figure{ width:56px; }
}

/* -------- reduced motion: keep the character, drop the choreography -------- */
@media (prefers-reduced-motion: reduce){
  .kc-figure, .kc-img, .kc-flip{ transition:none !important; }
  .kc-figure.walking .kc-img,
  .kc-figure.idle .kc-img,
  .kc-figure.greet .kc-img,
  .kc-figure.wave .kc-img,
  .kc-figure.look .kc-img,
  .kc-figure.sit .kc-img,
  .kc-figure.flute .kc-img,
  .kc-note, .kc-sparkle.fly{ animation:none !important; }
}