/* Friendly CSS beaver mascot */
@keyframes beaver-bob {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-7px) rotate(1deg); }
}

@keyframes tail-swish {
  0%, 100% { transform: rotate(18deg); }
  50% { transform: rotate(24deg); }
}

@keyframes beaver-blink {
  0%, 44%, 48%, 100% { transform: scaleY(1); }
  46% { transform: scaleY(0.08); }
}

.beaver-container {
  position: relative;
  isolation: isolate;
  width: 260px;
  height: 220px;
  margin: 28px auto 42px;
  filter: drop-shadow(0 14px 10px rgb(59 47 39 / 24%));
}

.tail {
  position: absolute;
  right: -5px;
  bottom: 5px;
  z-index: -1;
  width: 92px;
  height: 145px;
  border: 4px solid #3c2519;
  border-radius: 52% 48% 45% 55% / 62% 62% 38% 38%;
  background:
    repeating-linear-gradient(55deg, transparent 0 13px, rgb(255 255 255 / 9%) 13px 16px),
    repeating-linear-gradient(-55deg, transparent 0 13px, rgb(35 20 14 / 20%) 13px 16px),
    linear-gradient(135deg, #795036, #4a2e20);
  transform: rotate(18deg);
  transform-origin: 50% 100%;
  animation: tail-swish 2.8s ease-in-out infinite;
}

.tail::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 2px solid rgb(255 255 255 / 10%);
  border-radius: inherit;
}

.beaver {
  position: absolute;
  bottom: 0;
  left: 24px;
  width: 205px;
  height: 178px;
  border: 4px solid #4d2b18;
  border-radius: 48% 48% 44% 44% / 42% 42% 58% 58%;
  background:
    radial-gradient(circle at 35% 25%, rgb(255 255 255 / 16%) 0 12%, transparent 13%),
    linear-gradient(145deg, #ad6b34 0 48%, #86491f 100%);
  animation: beaver-bob 3.2s ease-in-out infinite;
}

/* Belly and feet */
.beaver::before {
  content: "";
  position: absolute;
  right: 22px;
  bottom: -13px;
  left: 22px;
  height: 76px;
  border-radius: 50% 50% 42% 42%;
  background: radial-gradient(ellipse at 50% 15%, #c8894f, #a65f2d 72%);
  box-shadow:
    -25px 18px 0 -8px #55301d,
    25px 18px 0 -8px #55301d;
}

/* Muzzle */
.beaver::after {
  content: "";
  position: absolute;
  top: 73px;
  left: 50%;
  width: 102px;
  height: 62px;
  border-radius: 48% 48% 52% 52%;
  background: #d89a60;
  box-shadow: inset 0 -5px 0 rgb(107 55 25 / 15%);
  transform: translateX(-50%);
}

.ear {
  position: absolute;
  top: -23px;
  left: 17px;
  z-index: -1;
  width: 57px;
  height: 62px;
  border: 4px solid #4d2b18;
  border-radius: 50%;
  background: radial-gradient(circle, #c77b48 0 43%, #78401f 45% 100%);
  box-shadow: 124px 0 0 -4px #78401f, 124px 0 0 0 #4d2b18;
}

.eye {
  position: absolute;
  top: 48px;
  left: 49px;
  z-index: 2;
  width: 25px;
  height: 29px;
  border: 3px solid #4d2b18;
  border-radius: 50%;
  background: #fffaf0;
  box-shadow: 79px 0 0 -3px #fffaf0, 79px 0 0 0 #4d2b18;
  transform-origin: center;
  animation: beaver-blink 5s ease-in-out infinite;
}

.eye::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 8px;
  width: 10px;
  height: 13px;
  border-radius: 50%;
  background: #24150f;
  box-shadow: 79px 0 0 #24150f;
}

.eye::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 10px;
  width: 3px;
  height: 4px;
  border-radius: 50%;
  background: white;
  box-shadow: 79px 0 0 white;
}

.nose {
  position: absolute;
  top: 77px;
  left: 50%;
  z-index: 3;
  width: 34px;
  height: 25px;
  border: 3px solid #321d14;
  border-radius: 55% 55% 48% 48%;
  background: linear-gradient(145deg, #5c3a2d, #24140f);
  transform: translateX(-50%);
}

.nose::before,
.nose::after {
  content: "";
  position: absolute;
  top: 7px;
  width: 5px;
  height: 4px;
  border-radius: 50%;
  background: #0f0907;
}

.nose::before { left: 7px; }
.nose::after { right: 7px; }

.tooth {
  position: absolute;
  top: 117px;
  left: 50%;
  z-index: 3;
  width: 25px;
  height: 35px;
  border: 2px solid #d4c8ae;
  border-radius: 2px 2px 7px 7px;
  background: linear-gradient(90deg, #fffdf4, #eadfc8);
  box-shadow: 22px 0 0 -2px #fffdf4, 22px 0 0 0 #d4c8ae;
  transform: translateX(-23px) rotate(1deg);
}

@media (max-width: 600px) {
  .beaver-container {
    margin-top: 18px;
    transform: scale(0.85);
    transform-origin: top center;
  }
}