/* ═══════════════════════════════════════════════════════════
   SPRITE — chibi bunny, pure CSS
   ═══════════════════════════════════════════════════════════ */

:root {
  --bunny-body:       #EDE4FF;   /* soft lavender */
  --bunny-shadow:     #C8BAEE;   /* slightly darker, for box-shadow */
  --bunny-ear-inner:  #FFB3C6;   /* pink */
  --bunny-eye:        #2d2d3a;
  --bunny-nose:       #FF8FAB;
  --bunny-mouth:      #C47090;
  --bunny-arm:        #D8CEFF;
  --bunny-tail:       #F8F4FF;
}

/* ── Root container ─────────────────────────────────────── */
.sprite {
  position: relative;
  width: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ── Shadow ─────────────────────────────────────────────── */
.sprite__shadow {
  width: 68px;
  height: 11px;
  background: rgba(0,0,0,0.15);
  border-radius: 50%;
  margin-top: 5px;
  transition: transform 0.5s ease, opacity 0.5s ease;
}

/* ── Fluffy tail ────────────────────────────────────────── */
.sprite__tail {
  position: absolute;
  bottom: 20px;
  right: 4px;
  z-index: 0;
  width: 22px;
  height: 22px;
  background: var(--bunny-tail);
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--bunny-shadow);
  transition: transform 0.4s ease;
}

/* ── Body ───────────────────────────────────────────────── */
.sprite__body {
  position: relative;
  z-index: 1;
  width: 100px;
  height: 100px;
  background: var(--bunny-body);
  /* slightly pear-shaped — wider at bottom, rounder at top */
  border-radius: 46% 46% 50% 50% / 48% 48% 52% 52%;
  box-shadow: 0 0 0 3px var(--bunny-shadow), 2px 5px 14px rgba(0,0,0,0.12);
  transition: background 0.5s ease, transform 0.3s ease;
}

/* ── Ears ───────────────────────────────────────────────── */
.sprite__ear {
  position: absolute;
  top: -54px;
  width: 22px;
  height: 58px;
  background: var(--bunny-body);
  border-radius: 11px;        /* full pill */
  box-shadow: 0 0 0 3px var(--bunny-shadow);
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: bottom center;
}
.sprite__ear--left  { left: 16px;  transform: rotate(-6deg); }
.sprite__ear--right { right: 16px; transform: rotate(6deg); }

.sprite__ear-inner {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 40px;
  background: var(--bunny-ear-inner);
  border-radius: 5px;
  opacity: 0.75;
  transition: height 0.4s ease, opacity 0.4s ease;
}

/* ── Face ───────────────────────────────────────────────── */
.sprite__face {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 62px;
}

/* ── Eyebrows ───────────────────────────────────────────── */
.sprite__brow {
  position: absolute;
  width: 11px;
  height: 2.5px;
  background: #C0B0DC;   /* slightly darker than --bunny-body */
  border-radius: 2px;
  top: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.sprite__brow--left  { left: 10px;  transform: rotate(-2deg); opacity: 0; }
.sprite__brow--right { right: 10px; transform: rotate(2deg);  opacity: 0; }

/* ── Eyes ───────────────────────────────────────────────── */
.sprite__eye {
  position: absolute;
  width: 16px;
  height: 16px;
  background: var(--bunny-eye);
  border-radius: 50%;
  top: 8px;
  overflow: hidden;
  transition: height 0.2s ease, width 0.2s ease, border-radius 0.2s ease;
}
.sprite__eye--left  { left: 10px; }
.sprite__eye--right { right: 10px; }

/* white sclera — this is what moves toward the click */
.sprite__sclera {
  position: absolute;
  width: 7px;
  height: 5px;
  background: #FAFAFA;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.18s ease;
}



/* ── Nose ───────────────────────────────────────────────── */
.sprite__nose {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 7px;
  background: var(--bunny-nose);
  border-radius: 50% 50% 40% 40%;
  transition: transform 0.2s ease;
}

/* ── Mouth ──────────────────────────────────────────────── */
.sprite__mouth {
  position: absolute;
  bottom: 9px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 9px;
  border: 2.5px solid var(--bunny-mouth);
  border-top: none;
  border-radius: 0 0 20px 20px;
  /* only transition shape/size — never border-top/bottom (causes mid-flip smile glitch) */
  transition: width 0.25s ease, height 0.25s ease, border-radius 0.25s ease;
}

/* ── Blush ──────────────────────────────────────────────── */
.sprite__blush {
  position: absolute;
  bottom: 22px;
  width: 20px;
  height: 11px;
  background: rgba(255,140,160,0);
  border-radius: 50%;
  transition: background 0.5s ease;
}
.sprite__blush--left  { left: 4px; }
.sprite__blush--right { right: 4px; }

/* ── Arms / paws ────────────────────────────────────────── */
.sprite__arm {
  position: absolute;
  top: 48px;
  width: 14px;
  height: 32px;
  background: var(--bunny-arm);
  border-radius: 7px 7px 10px 10px;
  box-shadow: 0 0 0 2px var(--bunny-shadow);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.sprite__arm--left  { left: -9px;  transform-origin: top center; }
.sprite__arm--right { right: -9px; transform-origin: top center; }

/* ── Particle containers ────────────────────────────────── */
.sprite__tears,
.sprite__particles {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 10;
}


/* ═══════════════════════════════════════════════════════════
   EMOTION STATES
   ═══════════════════════════════════════════════════════════ */

/* ── neutral ──────────────────────────────────────────────── */
.emotion-neutral .sprite__body {
  animation: breathe 3.5s ease-in-out infinite;
}
.emotion-neutral .sprite__mouth {
  width: 16px;
  height: 7px;
}

/* ── listening ────────────────────────────────────────────── */
.emotion-listening .sprite__body {
  animation: lean-listen 1.8s ease-in-out infinite;
}
.emotion-listening .sprite__eye {
  height: 18px;   /* a touch wider — paying attention */
}
.emotion-listening .sprite__ear--right {
  transform: rotate(2deg) translateY(-5px);   /* right ear perks forward */
}
.emotion-listening .sprite__ear--left {
  transform: rotate(-10deg);
}
.emotion-listening .sprite__mouth {
  width: 13px;
  height: 5px;
}


/* ── happy ────────────────────────────────────────────────── */
.emotion-happy .sprite__body {
  animation: bounce 0.85s ease-in-out infinite alternate;
}
.emotion-happy .sprite__eye {
  height: 10px;
  border-radius: 50% 50% 4px 4px;  /* squint-smile arc */
  background: var(--bunny-eye);
}
.emotion-happy .sprite__mouth {
  width: 16px;
  height: 6px;
  border-radius: 0 0 10px 10px;
}
.emotion-happy .sprite__blush {
  background: rgba(255, 120, 140, 0.42);
}
.emotion-happy .sprite__ear--left  { transform: rotate(-4deg) translateY(-3px); }
.emotion-happy .sprite__ear--right { transform: rotate(4deg)  translateY(-3px); }
.emotion-happy .sprite__arm--left  { transform: rotate(-20deg); }
.emotion-happy .sprite__arm--right { transform: rotate(20deg); }

/* ── excited ──────────────────────────────────────────────── */
.emotion-excited .sprite__body {
  animation: bounce-fast 0.42s ease-in-out infinite alternate;
}
.emotion-excited .sprite__eye {
  height: 20px;
  width: 18px;
}
.emotion-excited .sprite__mouth {
  width: 18px;
  height: 7px;
  border-radius: 0 0 12px 12px;
}
.emotion-excited .sprite__blush {
  background: rgba(255, 100, 130, 0.5);
}
.emotion-excited .sprite__ear--left  { transform: rotate(-3deg) translateY(-7px); }
.emotion-excited .sprite__ear--right { transform: rotate(3deg)  translateY(-7px); }
.emotion-excited .sprite__arm--left  { transform: rotate(-50deg); }
.emotion-excited .sprite__arm--right { transform: rotate(50deg); }
.emotion-excited .sprite__tail       { animation: tail-wiggle 0.35s ease-in-out infinite alternate; }

/* ── sad ──────────────────────────────────────────────────── */
.emotion-sad .sprite__body {
  animation: slump 2.2s ease-in-out infinite;
}
.emotion-sad .sprite__eye {
  height: 13px;
  clip-path: ellipse(50% 48% at 50% 44%);
}
.emotion-sad .sprite__mouth {
  border-radius: 8px 8px 0 0;
  border-top: 2.5px solid var(--bunny-mouth);
  border-bottom: none;
  top: 42px;
  bottom: unset;
  width: 14px;
  height: 4px;
}
/* ears flop outward and droop */
.emotion-sad .sprite__ear--left  { transform: rotate(-38deg) translateY(8px); }
.emotion-sad .sprite__ear--right { transform: rotate(38deg)  translateY(8px); }
.emotion-sad .sprite__ear-inner  { height: 32px; }

/* ── distressed ───────────────────────────────────────────── */
.emotion-distressed .sprite__body {
  animation: tremble 0.3s ease-in-out infinite;
}
.emotion-distressed .sprite__eye {
  height: 9px;
  clip-path: ellipse(50% 42% at 50% 35%);
}
.emotion-distressed .sprite__mouth {
  border-radius: 22px 22px 0 0;
  border-top: 2.5px solid var(--bunny-mouth);
  border-bottom: none;
  top: 43px;
  bottom: unset;
  width: 22px;
  height: 12px;
}
.emotion-distressed .sprite__ear--left  { transform: rotate(-45deg) translateY(10px); }
.emotion-distressed .sprite__ear--right { transform: rotate(45deg)  translateY(10px); }
.emotion-distressed .sprite__ear-inner  { height: 28px; opacity: 0.5; }

/* ── angry ────────────────────────────────────────────────── */
.emotion-angry .sprite__body {
  animation: vibrate 0.1s linear infinite;
  box-shadow: 0 0 0 3px var(--bunny-shadow), 0 0 20px rgba(220, 80, 80, 0.35);
}
.emotion-angry .sprite__eye {
  height: 13px;
  clip-path: ellipse(50% 50% at 50% 58%);
}
.emotion-angry .sprite__brow--left  { opacity: 1; transform: rotate(14deg)  translate(2px, 3px); }
.emotion-angry .sprite__brow--right { opacity: 1; transform: rotate(-14deg) translate(-2px, 3px); }
.emotion-angry .sprite__mouth {
  border-radius: 8px 8px 0 0;
  border-top: 2.5px solid var(--bunny-mouth);
  border-bottom: none;
  top: 42px;
  bottom: unset;
  width: 13px;
  height: 4px;
}
.emotion-angry .sprite__ear--left  { transform: rotate(-2deg) translateY(-2px); }
.emotion-angry .sprite__ear--right { transform: rotate(2deg)  translateY(-2px); }
.emotion-angry .sprite__arm--left  { transform: rotate(28deg); }
.emotion-angry .sprite__arm--right { transform: rotate(-28deg); }

/* ── anxious ──────────────────────────────────────────────── */
.emotion-anxious .sprite__body {
  animation: jitter 0.5s ease-in-out infinite;
}
.emotion-anxious .sprite__eye {
  animation: eye-dart 2s ease-in-out infinite;
}
.emotion-anxious .sprite__mouth {
  width: 12px;
  height: 4px;
  border-radius: 0 0 5px 5px;
}
.emotion-anxious .sprite__ear--left  { transform: rotate(-10deg); }
.emotion-anxious .sprite__ear--right { transform: rotate(10deg); }

/* ── surprised ────────────────────────────────────────────── */
.emotion-surprised .sprite__body {
  animation: jump 0.55s cubic-bezier(0.36,0.07,0.19,0.97) 1;
}
.emotion-surprised .sprite__eye {
  height: 20px;
  width: 18px;
}
.emotion-surprised .sprite__sclera {
  width: 14px;
  height: 14px;
}
.emotion-surprised .sprite__ear--left  { transform: rotate(-5deg) translateY(-8px); }
.emotion-surprised .sprite__ear--right { transform: rotate(5deg)  translateY(-8px); }
/* O mouth */
.emotion-surprised .sprite__mouth {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2.5px solid var(--bunny-mouth);
  border-top: 2.5px solid var(--bunny-mouth);
  bottom: 6px;
}
/* ── contemplative ────────────────────────────────────────── */
.emotion-contemplative .sprite__body {
  animation: tilt 4s ease-in-out infinite;
}
.emotion-contemplative .sprite__eye {
  height: 8px;
}
.emotion-contemplative .sprite__mouth {
  width: 13px;
  height: 3px;
  border-radius: 2px;
}
.emotion-contemplative .sprite__ear--left  { transform: rotate(-12deg); }
.emotion-contemplative .sprite__ear--right { transform: rotate(4deg); }

/* ── sleeping ─────────────────────────────────────────────── */
.emotion-sleeping .sprite__body {
  animation: breathe-slow 5s ease-in-out infinite;
}
/* eyes closed = flat lines */
.emotion-sleeping .sprite__eye {
  height: 3px;
  border-radius: 2px;
  overflow: hidden;
}
.emotion-sleeping .sprite__sclera { opacity: 0; }
.emotion-sleeping .sprite__mouth {
  width: 12px;
  height: 4px;
  border-radius: 2px;
}
/* ears flop sideways */
.emotion-sleeping .sprite__ear--left  { transform: rotate(-55deg) translateY(12px); }
.emotion-sleeping .sprite__ear--right { transform: rotate(55deg)  translateY(12px); }
.emotion-sleeping .sprite__ear-inner  { height: 26px; opacity: 0.4; }
.emotion-sleeping .sprite__shadow {
  transform: scaleX(0.75);
  opacity: 0.35;
}
.emotion-sleeping .sprite__tail {
  transform: rotate(10deg) scale(1.1);
}


/* ═══════════════════════════════════════════════════════════
   KEYFRAMES
   ═══════════════════════════════════════════════════════════ */

@keyframes breathe {
  0%, 100% { transform: scaleY(1.00) scaleX(1.00); }
  50%       { transform: scaleY(1.04) scaleX(0.97); }
}

@keyframes breathe-slow {
  0%, 100% { transform: scaleY(1.00); }
  50%       { transform: scaleY(1.06); }
}

@keyframes lean-listen {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  40%       { transform: rotate(2.5deg) translateY(-3px); }
  70%       { transform: rotate(-1deg) translateY(-1px); }
}

@keyframes bounce {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-12px); }
}

@keyframes bounce-fast {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-20px); }
}

@keyframes slump {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%       { transform: translateY(5px) rotate(-2deg); }
}

@keyframes tremble {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25%       { transform: translate(-3px, 0) rotate(-1.5deg); }
  75%       { transform: translate(3px, 0)  rotate(1.5deg); }
}

@keyframes vibrate {
  0%, 100% { transform: translateX(0); }
  25%       { transform: translateX(-2px); }
  75%       { transform: translateX(2px); }
}

@keyframes jitter {
  0%, 100% { transform: translate(0, 0); }
  25%       { transform: translate(2px, -1px); }
  75%       { transform: translate(-2px, 1px); }
}

@keyframes tilt {
  0%, 100% { transform: rotate(0deg); }
  35%       { transform: rotate(-5deg); }
  65%       { transform: rotate(5deg); }
}

@keyframes jump {
  0%   { transform: translateY(0); }
  28%  { transform: translateY(-28px); }
  55%  { transform: translateY(-10px); }
  78%  { transform: translateY(-22px); }
  100% { transform: translateY(0); }
}

@keyframes eye-dart {
  0%, 100% { transform: translateX(0); }
  30%       { transform: translateX(-5px); }
  65%       { transform: translateX(5px); }
  82%       { transform: translateX(-2px); }
}

@keyframes tail-wiggle {
  0%   { transform: rotate(-5deg) scale(1.0); }
  100% { transform: rotate(15deg) scale(1.1); }
}


/* ═══════════════════════════════════════════════════════════
   PARTICLES
   ═══════════════════════════════════════════════════════════ */

.tear {
  position: absolute;
  width: 5px;
  height: 8px;
  background: #74b9ff;
  border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
  opacity: 0.9;
  animation: tear-fall 1s ease-in forwards;
}
@keyframes tear-fall {
  0%   { transform: translateY(0) scale(1); opacity: 0.9; }
  100% { transform: translateY(44px) scale(0.5); opacity: 0; }
}

.zzz {
  position: absolute;
  color: #b2bec3;
  font-size: 14px;
  font-weight: bold;
  opacity: 0;
  animation: zzz-float 2.5s ease-out forwards;
}
@keyframes zzz-float {
  0%   { opacity: 0; transform: translateY(0) scale(0.6); }
  20%  { opacity: 0.75; }
  100% { opacity: 0; transform: translateY(-55px) scale(1.1) rotate(14deg); }
}

.heart {
  position: absolute;
  color: #ff8fab;
  font-size: 16px;
  opacity: 0;
  animation: heart-float 1.2s ease-out forwards;
}
@keyframes heart-float {
  0%   { opacity: 0; transform: translateY(0) scale(0.5); }
  30%  { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(-58px) scale(1.2); }
}

.sweat {
  position: absolute;
  width: 6px;
  height: 10px;
  background: #74b9ff;
  border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
  opacity: 0;
  animation: sweat-fly 1s ease-out forwards;
}
@keyframes sweat-fly {
  0%   { opacity: 0.85; transform: translate(0, 0); }
  100% { opacity: 0; transform: translate(18px, -12px); }
}