/* Bilby, the tutor avatar: all of its motion.

   The drawing is public/bilby.svg (copied into the page's avatar template). Its colours
   are attributes in the SVG, so nothing here sets a colour.

   Page hooks, and only these: an ancestor with class "tutor" (the tutor tile). It gets
   "is-talking" while tutor audio plays, carries --level (0..1, the voice loudness, about
   60 updates a second) and data-state = connecting | talking | listening | thinking | muted.
   Outside the tutor tile (start page, cards) Bilby just smiles and blinks.

   How the parts move:
   - poses that belong to a state use the "rotate" and "scale" properties, with a transition;
   - the talking wiggle and sway are keyframes on "transform";
   so going from a pose into talking blends instead of snapping.

   Every selector starts at .avatar__svg so it wins over any older .av-* rule. */

.avatar__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible; /* the halo and a wiggling ear may reach past the frame */
}

/* ---------- pivots ---------- */

.avatar__svg .av-glow,
.avatar__svg .av-ear,
.avatar__svg .av-eyes,
.avatar__svg .av-mouth {
  transform-box: fill-box;
}

.avatar__svg .av-glow,
.avatar__svg .av-eyes {
  transform-origin: 50% 50%;
}

/* Each ear swings around its base. */
.avatar__svg .av-ear {
  transform-origin: 50% 100%;
  transition: rotate 0.4s cubic-bezier(0.3, 1.6, 0.5, 1), scale 0.4s ease-out;
}

/* The jaw is hinged at its top edge, which sits behind the snout. */
.avatar__svg .av-mouth {
  transform-origin: 50% 0%;
}

/* The head tips around the chin. Its own box changes while the ears and the jaw move,
   which would make a fill-box pivot wander, so this one is measured on the 200 x 200
   drawing instead. */
.avatar__svg .av-head {
  transform-box: view-box;
  transform-origin: 50% 88%;
  transition: rotate 0.45s cubic-bezier(0.3, 1.3, 0.5, 1);
}

/* ---------- quiet (the default everywhere) ---------- */

/* Halo off unless Bilby is in the lesson room. */
.avatar__svg .av-glow {
  opacity: 0;
}

/* Closed smile showing, open mouth hidden. */
.avatar__svg .av-smile {
  opacity: 1;
}

.avatar__svg .av-mouth {
  opacity: 0;
}

.avatar__svg .av-eyes {
  animation: bilby-blink 5.2s infinite;
}

/* ---------- in the lesson room ---------- */

.tutor .avatar__svg .av-glow {
  opacity: calc(0.4 + var(--level, 0) * 0.6);
  transform: scale(calc(0.88 + var(--level, 0) * 0.16));
}

/* Talking: the jaw drops with the voice (at level 0 it sits exactly where the closed
   smile is), the ears wiggle and the head sways a little. */
.tutor.is-talking .avatar__svg .av-smile {
  opacity: 0;
}

.tutor.is-talking .avatar__svg .av-mouth {
  opacity: 1;
  transform: scaleY(calc(0.62 + var(--level, 0) * 0.38));
}

.tutor.is-talking .avatar__svg .av-ear {
  animation: bilby-ear-wiggle 1.7s ease-in-out infinite;
}

.tutor.is-talking .avatar__svg .av-ear--right {
  animation-duration: 2.1s;
  animation-delay: -0.6s;
}

.tutor.is-talking .avatar__svg .av-head {
  animation: bilby-head-sway 3.4s ease-in-out infinite;
}

/* Listening: the ears perk up, a touch taller and more upright. */
.tutor[data-state="listening"] .avatar__svg .av-ear {
  rotate: 3.5deg;
  scale: 1 1.035;
}

/* Thinking: a small tilt of the head, one ear cocked. */
.tutor[data-state="thinking"] .avatar__svg .av-head {
  rotate: -3deg;
}

.tutor[data-state="thinking"] .avatar__svg .av-ear--right {
  rotate: -4deg;
}

/* Muted: the ears relax outwards. */
.tutor[data-state="muted"] .avatar__svg .av-ear {
  rotate: -6deg;
}

/* Connecting: dimmed until the tutor is really there. These are the same values the page
   already gives this element, so having both rules changes nothing. */
.tutor[data-state="connecting"] .avatar--tutor {
  opacity: 0.55;
  filter: saturate(0.5);
}

/* ---------- keyframes ---------- */

@keyframes bilby-blink {
  0%, 94%, 100% { transform: scaleY(1); }
  96.5% { transform: scaleY(0.08); }
}

@keyframes bilby-ear-wiggle {
  0%, 100% { transform: rotate(0deg); }
  30% { transform: rotate(-3deg); }
  65% { transform: rotate(2.5deg); }
}

@keyframes bilby-head-sway {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-1.2deg); }
  75% { transform: rotate(1.2deg); }
}

/* ---------- reduced motion: nothing moves, the mouth is simply open or closed ---------- */

@media (prefers-reduced-motion: reduce) {
  .avatar__svg .av-eyes,
  .avatar__svg .av-ear,
  .avatar__svg .av-head {
    animation: none !important;
    transition: none !important;
    rotate: none !important;
    scale: none !important;
  }

  .tutor .avatar__svg .av-glow {
    opacity: 0.6;
    transform: none;
  }

  .tutor.is-talking .avatar__svg .av-smile {
    opacity: 0;
  }

  .tutor.is-talking .avatar__svg .av-mouth {
    opacity: 1;
    transform: scaleY(0.86);
  }
}