/* Dottie and Teddy (public/assets/dottie.js): head and shoulders in a coloured circle.
   Every animation is in CSS so states blend. */

.dottie {
  --mouth: 0;
  display: block;
  aspect-ratio: 200 / 210;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.dottie svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.dottie .d-shadow {
  fill: rgb(27 33 96 / 0.12);
  transform-origin: 100px 205px;
  animation: d-shadow 4.5s ease-in-out infinite;
}

.dottie .d-float {
  animation: d-float 4.5s ease-in-out infinite;
}

/* The head turns from the neck; the shoulders stay put. */
.dottie .d-head {
  transform-origin: 100px 150px;
  transition: transform 0.6s cubic-bezier(0.3, 1.4, 0.5, 1);
}

.dottie .d-eye {
  transform-box: fill-box;
  transform-origin: center;
  animation: d-blink 5.2s infinite;
  transition: transform 0.4s ease;
}

.dottie .d-eye:nth-child(2) {
  animation-delay: 0.04s;
}

.dottie .d-eyes {
  transition: transform 0.5s ease;
}

.dottie .d-brow {
  transition: transform 0.4s ease;
}

.dottie .d-cheek {
  fill: #ff8f7e;
  opacity: 0.55;
  transition: opacity 0.4s ease;
}

.dottie .d-bow {
  transform-box: fill-box;
}

.dottie .d-happy-eyes,
.dottie .d-thinking-dots {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.dottie .d-mouth {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 20%;
  transform: scaleY(calc(0.15 + var(--mouth) * 0.85)) scaleX(calc(0.85 + var(--mouth) * 0.15));
  transition: opacity 0.15s ease, transform 0.06s linear;
}

.dottie .d-smile {
  transition: opacity 0.15s ease;
}

/* Listening: leans in a little, eyes open wider. */
.dottie[data-state="listening"] .d-head {
  transform: rotate(-5deg) translateY(-2px);
}

/* On the group, not each eye: the eyes' own transform is taken by the blink animation. */
.dottie[data-state="listening"] .d-eyes {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(1.08);
}

.dottie[data-state="listening"] .d-brow {
  transform: translateY(-3px);
}

/* Thinking: glances up and to the side. */
.dottie[data-state="thinking"] .d-eyes {
  transform: translate(4px, -5px);
}

.dottie[data-state="thinking"] .d-head {
  transform: rotate(4deg);
}

.dottie[data-state="thinking"] .d-thinking-dots {
  opacity: 1;
  animation: d-dots 1.4s ease-in-out infinite;
}

/* Speaking: the mouth follows her voice (--mouth, set from the audio level). */
.dottie[data-state="speaking"] .d-smile {
  opacity: 0;
}

.dottie[data-state="speaking"] .d-mouth {
  opacity: 1;
}

.dottie[data-state="speaking"] .d-head {
  animation: d-nod 2.6s ease-in-out infinite;
}

.dottie[data-state="speaking"] .d-cheek {
  opacity: 0.65;
}

/* Happy: smiling eyes and a little bounce. */
.dottie[data-state="happy"] .d-eyes {
  opacity: 0;
}

.dottie[data-state="happy"] .d-happy-eyes {
  opacity: 1;
}

.dottie[data-state="happy"] .d-float {
  animation: d-bounce 0.9s ease-in-out 2, d-float 4.5s ease-in-out 1.8s infinite;
}

.dottie[data-state="happy"] .d-cheek {
  opacity: 0.75;
}

/* Connecting: a soft pulse. */
.dottie[data-state="connecting"] .d-float {
  animation: d-float 4.5s ease-in-out infinite, d-pulse 1.6s ease-in-out infinite;
}

/* Sleepy: eyes half closed, slow sway (shown before the device is connected). */
.dottie[data-state="sleepy"] .d-eye {
  animation: none;
  transform: scaleY(0.35);
}

.dottie[data-state="sleepy"] .d-float {
  animation-duration: 7s;
}

@keyframes d-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes d-shadow {
  0%, 100% { transform: scaleX(1); opacity: 1; }
  50% { transform: scaleX(0.92); opacity: 0.8; }
}

@keyframes d-blink {
  0%, 92%, 100% { transform: scaleY(1); }
  95% { transform: scaleY(0.08); }
}

@keyframes d-nod {
  0%, 100% { transform: rotate(0deg); }
  30% { transform: rotate(-2deg) translateY(1px); }
  65% { transform: rotate(2deg); }
}

@keyframes d-bounce {
  0%, 100% { transform: translateY(0); }
  35% { transform: translateY(-14px); }
  60% { transform: translateY(0); }
  80% { transform: translateY(-5px); }
}

@keyframes d-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}

@keyframes d-dots {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50% { transform: translateY(-4px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .dottie *,
  .dottie {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- Music: headphones, closed eyes, nodding along ---------- */

.dottie .d-headphones,
.dottie .d-closed-eyes,
.dottie .d-notes {
  opacity: 0;
  transition: opacity 0.4s ease;
}

.dottie[data-accessory="headphones"] .d-headphones {
  opacity: 1;
}

.dottie[data-state="music"] .d-eyes {
  opacity: 0;
}

.dottie[data-state="music"] .d-closed-eyes {
  opacity: 1;
}

.dottie[data-state="music"] .d-head {
  animation: d-groove 1.6s ease-in-out infinite;
}

.dottie[data-state="music"] .d-cheek {
  opacity: 0.65;
}

.dottie[data-state="music"] .d-notes {
  opacity: 1;
}

.dottie .d-note {
  opacity: 0;
}

.dottie[data-state="music"] .d-note {
  animation: d-note-float 3.2s ease-out infinite;
}

.dottie[data-state="music"] .d-note:nth-child(1) {
  --x: 178px;
  --y: 62px;
}

.dottie[data-state="music"] .d-note:nth-child(2) {
  --x: 20px;
  --y: 52px;
  animation-delay: 1.6s;
}

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

@keyframes d-note-float {
  0% { opacity: 0; transform: translate(var(--x), var(--y)) scale(0.7); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(var(--x) + 10px), calc(var(--y) - 46px)) scale(1); }
}