.mascot-wrap {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --secret-x: 70%;
  --secret-y: 10%;
  display: flex;
  width: min(285px, 100%);
  height: 365px;
  align-items: center;
  justify-content: center;
  overflow: visible;
  border-radius: 18px 40px 23px 45px / 28px 20px 35px 22px;
  background: #ffe96f;
  cursor: pointer;
  transition: transform 0.14s ease-out, box-shadow 0.25s ease;
  transform: perspective(650px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) rotate(2deg);
  animation: mascot-enter 0.75s 0.26s both;
}

.mascot-wrap:hover {
  box-shadow: 12px 14px 0 #d2a721, 18px 20px 24px rgb(23 33 41 / 20%);
  transform: perspective(650px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) rotate(2deg) translateY(-5px);
}

.mascot-wrap:focus-visible {
  outline: 4px solid var(--red);
  outline-offset: 6px;
}

.mascot-wrap::before,
.mascot-wrap::after,
.mascot-wrap > .mascot,
.mascot-wrap > .flame,
.mascot-wrap > p {
  display: none;
}

.mascot-real {
  display: block;
  width: min(100%, 256px);
  height: auto;
  filter: drop-shadow(5px 6px 0 rgb(23 33 41 / 23%)) drop-shadow(10px 12px 8px rgb(23 33 41 / 16%));
  transition: filter 0.25s ease, transform 0.25s ease;
}

.mascot-wrap:hover .mascot-real {
  filter: drop-shadow(7px 9px 0 rgb(23 33 41 / 25%)) drop-shadow(13px 16px 10px rgb(23 33 41 / 20%));
  transform: translateY(-3px);
}

.mascot-label {
  position: absolute;
  bottom: 16px;
  left: 0;
  width: 100%;
  margin: 0;
  font-family: "Permanent Marker", cursive;
  font-size: 1.35rem;
  line-height: 0.9;
  text-align: center;
}

.mascot-wrap > .mascot-label {
  display: block;
}

.mascot-label small {
  font-family: Fredoka, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
}

.mascot-easter-egg {
  position: absolute;
  z-index: 5;
  top: var(--secret-y);
  left: var(--secret-x);
  color: var(--red);
  font-family: "Permanent Marker", cursive;
  font-size: 4.25rem;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  text-shadow: 2px 2px 0 var(--cream), 4px 4px 0 var(--ink);
  transform: translate(-50%, -50%) rotate(-14deg) scale(0.2);
}

.mascot-wrap.show-secret .mascot-easter-egg {
  animation: secret-pop 1.7s ease-out both;
}

@keyframes mascot-enter {
  from {
    opacity: 0;
    translate: 0 22px;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes secret-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-24deg) scale(0.2);
  }

  35% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(-9deg) scale(1.22);
  }

  65% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(-14deg) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-14deg) scale(0.9);
  }
}

@media (max-width: 575.98px) {
  .mascot-wrap {
    width: 255px;
    height: 330px;
    margin-bottom: 0;
    transform: rotate(2deg);
  }

  .mascot-wrap:hover {
    transform: rotate(2deg) translateY(-3px);
  }

  .mascot-real {
    width: 230px;
  }
}