/*
 * Luv, Mud — mini character (snippets/luvmud-mini.liquid, assets/luvmud-mini.js)
 *
 * Same construction as the hero characters, scaled down: painted art + code-drawn pupils and lids. Moods are classes
 * on the element: is-sad (frown + droopy lids), is-giggle (^^ eyes), is-dizzy (spinning pupils), is-surprised (wide).
 */

luvmud-mini {
  --lm-px: 0;
  --lm-py: 0;
  position: relative;
  display: block;
  width: 96px;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.lm-mini__body {
  position: relative;
  display: block;
  transform-origin: 50% 100%;
}

.lm-mini__art {
  display: block;
  width: 100%;
  height: auto;
  -webkit-user-drag: none;
}

/* Frown patch over the painted smile (the same patches the hero uses) */
.lm-mini__frown {
  position: absolute;
  left: calc(var(--ml) * 1%);
  top: calc(var(--mt) * 1%);
  width: calc(var(--mw) * 1%);
  height: auto;
  opacity: 0;
  transform: scaleY(0.6);
  transform-origin: 50% 55%;
  transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.3, 1.5, 0.5, 1);
}

.lm-mini__eye {
  position: absolute;
  top: calc(var(--e1y) * 1%);
  left: calc(var(--e1x) * 1%);
  width: calc(var(--es) * 1%);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  transition: scale 0.2s cubic-bezier(0.3, 1.6, 0.5, 1);
}

.lm-mini__eye--2 {
  top: calc(var(--e2y) * 1%);
  left: calc(var(--e2x) * 1%);
}

/* The pupil travels up to ~70% of the free space inside the eyeball (same rule as the hero) */
.lm-mini__pupil {
  position: absolute;
  left: 26%;
  top: 26%;
  width: 48%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 72%, #2e2722, #15110f 62%);
  transform: translate(calc(var(--lm-px) * 38%), calc(var(--lm-py) * 38%));
}

.lm-mini__glint {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 41% 37%, rgb(255 255 255 / 0.95) 0 7.5%, rgb(255 255 255 / 0) 9%),
    radial-gradient(circle at 34% 55%, rgb(255 255 255 / 0.9) 0 3.2%, rgb(255 255 255 / 0) 4.4%);
}

.lm-mini__lidclip {
  position: absolute;
  inset: -8%;
  border-radius: 50%;
  overflow: hidden;
}

.lm-mini__lid,
.lm-mini__droop {
  position: absolute;
  inset: -2%;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.2), rgb(255 255 255 / 0) 42%, rgb(30 15 5 / 0.12) 82%, rgb(30 15 5 / 0.26) 91%, rgb(30 15 5 / 0.26)),
    var(--body);
  border-radius: 0 0 50% 50% / 0 0 22% 22%;
  transform: translateY(-105%);
}

.lm-mini__droop {
  transition: transform 0.3s cubic-bezier(0.3, 1.3, 0.5, 1);
}

.lm-mini__lid {
  transition: transform 0.07s ease-in;
}

/* ^^ : a dark clay arc drawn over a fully closed lid */
.lm-mini__happy {
  position: absolute;
  left: 14%;
  top: 30%;
  width: 72%;
  height: 46%;
  border: solid #2a1d16;
  border-width: max(2px, 0.16em) max(2px, 0.16em) 0 max(2px, 0.16em);
  border-color: #2a1d16 #2a1d16 transparent #2a1d16;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  opacity: 0;
}

/* --- Moods ------------------------------------------------------------------------------------------------------- */

luvmud-mini.is-blinking .lm-mini__lid {
  transform: translateY(-4%);
}

luvmud-mini.is-sad .lm-mini__frown {
  opacity: 1;
  transform: none;
}

luvmud-mini.is-sad .lm-mini__eye--1 .lm-mini__droop {
  transform: translateY(-70%) rotate(-16deg);
}

luvmud-mini.is-sad .lm-mini__eye--2 .lm-mini__droop {
  transform: translateY(-70%) rotate(16deg);
}

luvmud-mini.is-giggle .lm-mini__lid {
  transform: translateY(-2%);
  transition-duration: 0.1s;
}

luvmud-mini.is-giggle .lm-mini__happy {
  opacity: 1;
}

luvmud-mini.is-surprised .lm-mini__eye {
  scale: 1.18;
}

luvmud-mini.is-surprised .lm-mini__pupil {
  scale: 0.72;
}

@media (prefers-reduced-motion: no-preference) {
  luvmud-mini.is-dizzy .lm-mini__pupil {
    animation: lm-mini-dizzy 0.5s linear infinite;
  }

  luvmud-mini.is-dizzy .lm-mini__eye--2 .lm-mini__pupil {
    animation-direction: reverse;
  }
}

@keyframes lm-mini-dizzy {
  0% { transform: translate(38%, 0); }
  25% { transform: translate(0, 38%); }
  50% { transform: translate(-38%, 0); }
  75% { transform: translate(0, -38%); }
  100% { transform: translate(38%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .lm-mini__frown,
  .lm-mini__droop,
  .lm-mini__lid,
  .lm-mini__eye {
    transition: none;
  }
}