/* Figma: 180 × 90, 27.846 px corners, 22 × 46 eyes. */
.mascot {
  --mascot-color: #009fe9;
  --mascot-eyes: #052533;
  --mascot-tool-color: #15191d;
  position: relative;
  display: inline-block;
  flex: none;
  width: 180px;
  aspect-ratio: 2;
  vertical-align: middle;
  perspective: 720px;
  isolation: isolate;
}

.mascot[data-color="blue"] {
  --mascot-color: #009fe9;
}
.mascot[data-color="lime"] {
  --mascot-color: #8ddf00;
}
.mascot[data-color="yellow"] {
  --mascot-color: #fdc200;
}
.mascot[data-color="pink"] {
  --mascot-color: #ff34e7;
}

.mascot::after {
  content: "";
  position: absolute;
  inset: auto 10% -11%;
  height: 21%;
  z-index: -1;
  background: radial-gradient(ellipse, var(--mascot-color), transparent 70%);
  opacity: 0.17;
  pointer-events: none;
  transition: background 700ms;
}

.mascot-turn,
.mascot-face,
.mascot-reverse {
  position: absolute;
  inset: 0;
  border-radius: 15.4702% / 30.9404%;
}

.mascot-turn {
  transform-style: preserve-3d;
  transform-origin: 50% 75%;
  animation: mascot-idle 8s ease-in-out infinite;
}

.mascot-face,
.mascot-reverse {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.mascot-face {
  background: var(--mascot-color);
  transform: translateZ(0.2px);
  transition: background-color 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

.mascot-face > i {
  position: absolute;
  top: 24.4444%;
  left: 26.6667%;
  width: 12.2222%;
  height: 51.1111%;
  border-radius: 50% / 23.913%;
  background: var(--mascot-eyes);
  transform-origin: 50% 52%;
  animation: mascot-blink 10s linear infinite;
}

.mascot-face > i + i {
  left: 61.1111%;
}

.mascot-reverse {
  display: grid;
  place-items: center;
  background: var(--mascot-tool-color);
  transform: rotateY(180deg) translateZ(0.2px);
}

.mascot-reverse > img {
  width: 29%;
  height: 58%;
  object-fit: contain;
  filter: invert(1);
  user-select: none;
  -webkit-user-drag: none;
}

.mascot[data-tool="drive-color"] .mascot-reverse > img,
.mascot[data-tool="calendar-color"] .mascot-reverse > img,
.mascot[data-tool="figma-color"] .mascot-reverse > img {
  filter: none;
}

.mascot[data-motion="flipping"] .mascot-turn {
  animation: none;
}
.mascot[data-motion="paused"] .mascot-turn,
.mascot[data-motion="paused"] .mascot-face > i {
  animation-play-state: paused;
}

@keyframes mascot-idle {
  0%,
  32%,
  65%,
  100% {
    transform: translateY(0) rotateZ(0);
  }
  42% {
    transform: translateY(-1.3%) rotateZ(-1.25deg);
  }
  52% {
    transform: translateY(0) rotateZ(0.8deg);
  }
}

@keyframes mascot-blink {
  0%,
  35.6%,
  37.1%,
  76.7%,
  78.2%,
  100% {
    transform: scaleY(1);
  }
  36.25%,
  77.35% {
    transform: scaleY(0.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mascot-turn,
  .mascot-face > i {
    animation: none;
  }
  .mascot-face {
    transition: none;
  }
}