/* Buddy in the dashboard (editor/buddy.js): the colours, the moods and the motion of marketing/src/components/Buddy.astro,
   unchanged, so he looks and moves the same as on mybitbuddy.nl. Motion only with prefers-reduced-motion: no-preference. */
.buddy {
  display: block;
  width: var(--buddy-size);
  height: var(--buddy-size);
  overflow: visible;
}
/* Colours: the orange and the eyes are the same in both modes; the bit follows the page, and a parent can set
   --buddy-bit (and --buddy-bit-dark) when Buddy stands on a dark band. */
.buddy-skin {
  fill: #ff914d;
}
.buddy-eye {
  fill: #2f2f2f;
}
.buddy-bit {
  fill: var(--buddy-bit, #4e4e4e);
}
.buddy-soft {
  fill: var(--buddy-soft, #a6a6a6);
}
.buddy-on-bit {
  fill: var(--buddy-on-bit, #ffffff);
}
.buddy-arc,
.buddy-check,
.buddy-question {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.buddy-arc {
  stroke: #2f2f2f;
  stroke-width: 5px;
}
.buddy-check {
  stroke: var(--buddy-on-bit, #ffffff);
  stroke-width: 4px;
}
.buddy-question {
  stroke: var(--buddy-on-bit, #ffffff);
  stroke-width: 3.5px;
}
@media (prefers-color-scheme: dark) {
  .buddy-bit {
    fill: var(--buddy-bit-dark, #a6a6a6);
  }
  .buddy-soft {
    fill: var(--buddy-soft-dark, #6b6b6b);
  }
  .buddy-on-bit {
    fill: var(--buddy-on-bit-dark, #1a1a1a);
  }
  .buddy-check,
  .buddy-question {
    stroke: var(--buddy-on-bit-dark, #1a1a1a);
  }
}

/* Which eyes and which bit: only the parts of the current mood are shown. */
[data-show] {
  display: none;
}
.buddy[data-mood='rust'] [data-show~='rust'],
.buddy[data-mood='nieuwsgierig'] [data-show~='nieuwsgierig'],
.buddy[data-mood='denkt'] [data-show~='denkt'],
.buddy[data-mood='schrijft'] [data-show~='schrijft'],
.buddy[data-mood='bouwt'] [data-show~='bouwt'],
.buddy[data-mood='beeld'] [data-show~='beeld'],
.buddy[data-mood='klaar'] [data-show~='klaar'],
.buddy[data-mood='vraag'] [data-show~='vraag'],
.buddy[data-mood='oeps'] [data-show~='oeps'],
.buddy[data-mood='slaapt'] [data-show~='slaapt'] {
  display: inline;
}

/* Motion. A shown part starts its animation when it appears, so a new mood always arrives with a small move. */
.buddy-body,
.buddy-hop,
.buddy-blink,
.buddy-float,
.buddy-dot,
.buddy-wiggle,
.buddy-drop,
.buddy-pop,
.buddy-tumble {
  transform-box: fill-box;
  transform-origin: center;
}
.buddy-body,
.buddy-hop,
.buddy-wiggle {
  transform-origin: 50% 100%;
}
@media (prefers-reduced-motion: no-preference) {
  .buddy-body {
    animation: buddy-breathe 3.2s ease-in-out infinite;
  }
  .buddy[data-mood='slaapt'] .buddy-body {
    animation-duration: 6s;
  }
  .buddy.is-hopping .buddy-hop {
    animation: buddy-hop 0.5s ease-out;
  }
  .buddy-blink {
    animation: buddy-blink 4.8s infinite;
  }
  .buddy-read {
    animation: buddy-read 1.6s ease-in-out infinite;
  }
  .buddy-float {
    animation: buddy-float 2.6s ease-in-out infinite;
  }
  .buddy-float--slow {
    animation-duration: 4.5s;
  }
  .buddy-dot {
    animation: buddy-pulse 1.1s ease-in-out infinite;
  }
  .buddy-dot--2 {
    animation-delay: 0.18s;
  }
  .buddy-dot--3 {
    animation-delay: 0.36s;
  }
  .buddy-wiggle {
    animation: buddy-wiggle 1.2s ease-in-out infinite;
  }
  .buddy-drop {
    animation: buddy-drop 1.8s cubic-bezier(0.3, 0.7, 0.4, 1) infinite;
  }
  .buddy-pop {
    animation: buddy-pop 0.6s cubic-bezier(0.3, 1.6, 0.5, 1) both;
  }
  .buddy-tumble {
    animation: buddy-tumble 0.7s cubic-bezier(0.5, 0, 0.7, 1.4) both;
  }
  .buddy.is-paused,
  .buddy.is-paused * {
    animation-play-state: paused;
  }
  .buddy[data-still] * {
    animation: none;
  }
}

@keyframes buddy-breathe {
  0%,
  100% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.02, 0.98);
  }
}
@keyframes buddy-hop {
  0% {
    transform: translateY(0) scale(1, 1);
  }
  30% {
    transform: translateY(-10px) scale(0.95, 1.06);
  }
  60% {
    transform: translateY(0) scale(1.05, 0.94);
  }
  100% {
    transform: translateY(0) scale(1, 1);
  }
}
@keyframes buddy-blink {
  0%,
  92%,
  100% {
    transform: scaleY(1);
  }
  95% {
    transform: scaleY(0.12);
  }
}
@keyframes buddy-read {
  0%,
  100% {
    transform: translateX(-3px);
  }
  50% {
    transform: translateX(3px);
  }
}
@keyframes buddy-float {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-6px) rotate(-8deg);
  }
}
@keyframes buddy-pulse {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.45;
  }
  50% {
    transform: translateY(-6px);
    opacity: 1;
  }
}
@keyframes buddy-wiggle {
  0%,
  100% {
    transform: rotate(-6deg);
  }
  50% {
    transform: rotate(6deg);
  }
}
@keyframes buddy-drop {
  0% {
    transform: translateY(-34px);
    opacity: 0;
  }
  45% {
    transform: translateY(0);
    opacity: 1;
  }
  55% {
    transform: translateY(-4px);
  }
  65%,
  85% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(0);
    opacity: 0;
  }
}
@keyframes buddy-pop {
  0% {
    transform: scale(0) rotate(-40deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}
@keyframes buddy-tumble {
  0% {
    transform: translate(-40px, -80px) rotate(-90deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}