/* Selected treatment: colorful letter jumps and the original pearl greeting. */
body[data-theme] #site-nav a.nav-kids {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  isolation: isolate;
}
.kids-word {
  display: inline-block;
}
.kids-blocks {
  display: inline-flex;
  gap: 1px;
}
.kids-blocks > span {
  display: inline-block;
  border-radius: 3px;
  padding-inline: 1px;
  transition:
    background-color 150ms ease,
    color 150ms ease;
}
.kids-blocks > span:nth-child(1) {
  --block: #ac286c;
}
.kids-blocks > span:nth-child(2) {
  --block: #167568;
}
.kids-blocks > span:nth-child(3) {
  --block: #6442b0;
}
.kids-blocks > span:nth-child(4) {
  --block: #a94a13;
}
.nav-kids .kids-word {
  transition: color 150ms ease;
}
.nav-kids:is(:hover, :focus-visible) .kids-word {
  color: #6442b0;
}
.nav-kids:is(:hover, :focus-visible) .kids-blocks > span {
  color: #fff;
  background: var(--block);
}
.kids-pearl {
  position: relative;
  display: inline-block;
  flex: 0 0 19px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 32% 24%,
    #fff 10%,
    #f7f3ff 42%,
    #d7d0e9 80%,
    #b7adc9
  );
  box-shadow:
    inset -1px -2px 3px #76668b26,
    0 2px 3px #44305c14;
  transform: rotate(-12deg);
}
[data-theme="6"] .kids-pearl {
  background: radial-gradient(
    circle at 32% 24%,
    #fff 10%,
    #f1f8fb 42%,
    #d1e3ed 80%,
    #9bbaca
  );
}
.kids-pearl i,
.kids-pearl b {
  position: absolute;
  top: 7px;
  width: 2px;
  height: 3px;
  border-radius: 2px;
  background: #435467;
}
.kids-pearl i {
  left: 5px;
}
.kids-pearl b {
  right: 5px;
}
.kids-pearl > span {
  position: absolute;
  left: 7px;
  top: 11px;
  width: 5px;
  height: 3px;
  border: solid #435467;
  border-width: 0 0 1px;
  border-radius: 0 0 50% 50%;
}
@media (prefers-reduced-motion: no-preference) {
  .nav-kids:is(:hover, :focus-visible) .kids-pearl {
    animation: pearl-hello 720ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
  .nav-kids:is(:hover, :focus-visible) .kids-pearl b {
    animation: pearl-wink 720ms ease both;
  }
  .nav-kids:is(:hover, :focus-visible) .kids-blocks > span {
    animation: kids-letter-jump 850ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
    animation-delay: calc(var(--i) * 65ms);
  }
}
@keyframes pearl-hello {
  0% {
    transform: rotate(-12deg);
  }
  38% {
    transform: translateY(-3px) rotate(15deg);
  }
  68% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(8deg);
  }
}
@keyframes pearl-wink {
  0%,
  35%,
  75%,
  100% {
    transform: scaleY(1);
  }
  48%,
  62% {
    transform: scaleY(0.24);
  }
}
@keyframes kids-letter-jump {
  0%,
  100% {
    transform: translateY(0) rotate(0);
  }
  32% {
    transform: translateY(-8px) rotate(-9deg);
  }
  60% {
    transform: translateY(2px) rotate(5deg);
  }
  80% {
    transform: translateY(-2px) rotate(-2deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .nav-kids .kids-word,
  .kids-blocks > span {
    transition: none;
  }
}