/* The eyelids are positioned over the eyes of plush.webp. */
.momo-mascot {
  position: relative;
  display: block;
  aspect-ratio: 576 / 363;
  line-height: 0;
  pointer-events: none;
}

.momo-mascot img {
  display: block;
  width: 100%;
  height: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  .momo-mascot::before,
  .momo-mascot::after {
    position: absolute;
    z-index: 1;
    content: '';
    border-radius: 50%;
    background: radial-gradient(ellipse 34% 11% at 55% 63%, #082967 0 64%, transparent 100%),
      linear-gradient(146deg, #1a60eb, #0748cc 78%);
    clip-path: inset(0 0 100% 0);
    animation: momo-blink 6.4s ease-in-out infinite;
  }

  .momo-mascot::before {
    left: 50%;
    top: 31.5%;
    width: 12.5%;
    height: 23%;
    rotate: -8deg;
  }

  .momo-mascot::after {
    left: 67.6%;
    top: 28.9%;
    width: 11.9%;
    height: 23%;
    rotate: -9deg;
  }

  .momo-launcher .momo-mascot {
    transform-origin: center 85%;
    transition: transform 170ms ease-out;
  }

  @media (hover: hover) {
    .momo-launcher:hover .momo-mascot {
      transform: translateY(-2px) scale(1.08);
    }
  }

  .momo-launcher:focus-visible .momo-mascot {
    transform: translateY(-2px) scale(1.08);
  }

  .momo-launcher:active .momo-mascot {
    transform: translateY(1px) scale(1.08, .9);
    transition-duration: 100ms;
  }

  :is(dialog[open], [data-open='true']) .momo-greeting {
    transform-origin: center 85%;
    animation: momo-greet 360ms ease-out both;
  }
}

@keyframes momo-blink {
  0%, 44%, 49%, 100% { clip-path: inset(0 0 100% 0); }
  46.2%, 46.8% { clip-path: inset(0); }
}

@keyframes momo-greet {
  0%, 100% { transform: none; }
  42% { transform: translateY(-2px) rotate(-4deg); }
  73% { transform: rotate(2deg); }
}