/* Nio, el bot: una O amb ulls. */
.bot {
  --s: 1em;
  --bw: .15;
  position: relative;
  display: inline-block;
  flex: none;
  box-sizing: border-box;
  width: var(--s);
  height: var(--s);
  border: calc(var(--s) * var(--bw)) solid currentColor;
  border-radius: 50%;
}
.bot .eyes {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--s) * .11);
  transform: translate(var(--ex, 0px), var(--ey, 0px));
  transition: transform .18s cubic-bezier(.2, .8, .2, 1);
}
.bot .eyes i {
  display: block;
  width: calc(var(--s) * .12);
  height: calc(var(--s) * .22);
  border-radius: 999px;
  background: currentColor;
  transform-origin: center;
  animation: bot-blink 5.4s infinite;
  animation-delay: var(--bd, 0s);
}
@keyframes bot-blink { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }

/* Treballant: mira d'una banda a l'altra */
.bot[data-mood="work"] .eyes { animation: bot-scan 1.1s ease-in-out infinite alternate; transition: none; }
@keyframes bot-scan { from { transform: translateX(calc(var(--s) * -.13)); } to { transform: translateX(calc(var(--s) * .13)); } }

/* En ombra: observa, amb les parpelles a mitges */
.bot[data-mood="peek"] .eyes i { height: calc(var(--s) * .12); border-radius: 0 0 999px 999px; }

/* Aturat: dorm */
.bot[data-mood="sleep"] .eyes { transform: translateY(calc(var(--s) * .04)); }
.bot[data-mood="sleep"] .eyes i { width: calc(var(--s) * .15); height: calc(var(--s) * .035); animation: none; }

/* Content: ulls en arc i un saltet */
.bot[data-mood="happy"] { animation: bot-hop .45s ease 2; }
.bot[data-mood="happy"] .eyes i { width: calc(var(--s) * .16); height: calc(var(--s) * .09); background: none; border: calc(var(--s) * .045) solid currentColor; border-bottom: 0; border-radius: 999px 999px 0 0; animation: none; }
@keyframes bot-hop { 50% { transform: translateY(calc(var(--s) * -.12)); } }

/* Com a O del nom */
.word { display: inline-flex; align-items: baseline; }
/* Un cercle ple, una mica més gran que la «o» de Manrope perquè tingui cos i s'equilibri amb «ni». */
.word .bot { --s: .64em; --bw: .17; width: .64em; height: .64em; border-width: .108em; margin-left: .05em; top: .018em; }

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