@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");

.hero-actions {
  margin: 66px 0 30px;
  overflow: visible;
}

.hero-shop-cta {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  isolation: isolate;
}

.hero-shop-cta .hero-shop-link {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  padding: 10px 20px;
  border: 5px solid #374151;
  border-radius: 20px;
  background-color: #fff;
  color: #111827;
  font-family: "Poppins", sans-serif;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.hero-shop-cta .hero-shop-link:focus-visible {
  outline: 4px solid rgba(158, 47, 43, 0.28);
  outline-offset: 4px;
}

.hero-shop-cta .dog {
  position: absolute;
  z-index: 1;
  top: -10px;
  right: 1px;
  width: 65px;
  height: 65px;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translate(0, 0) rotate(0);
  transition:
    0.3s transform cubic-bezier(0.33, 1, 0.68, 1),
    0.04s opacity linear 0.62s,
    0s visibility linear 0.62s;
}

.hero-shop-cta .dog div {
  position: absolute;
}

.hero-shop-cta.dog-out .dog {
  visibility: visible;
  opacity: 1;
  transform: translate(20px, -55px) rotate(15deg);
  transition-delay: 0.6s, 0.62s, 0.62s;
}

.hero-shop-cta .tail {
  bottom: -34%;
  left: -50%;
  width: 10%;
  height: 35%;
  opacity: 0;
  transform: rotate(-25deg);
  transition: 0.1s opacity;
  transition-delay: 0s;
}

.hero-shop-cta .tail::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50% 50% 0 0;
  background-color: #e1a46e;
  transform-origin: bottom center;
  animation: hero-tail-skew 0.3s cubic-bezier(0.65, 0, 0.35, 1) infinite alternate;
}

.hero-shop-cta.dog-out .tail {
  opacity: 1;
  transition-delay: 0.6s;
}

.hero-shop-cta .body {
  bottom: -20%;
  left: 50%;
  width: 70%;
  height: 50%;
  border-radius: 50% 50% 0 0;
  background-color: #9f6a43;
  transform: translateX(-50%);
}

.hero-shop-cta .head {
  bottom: 5%;
  left: 50%;
  width: 65%;
  height: 70%;
  border-radius: 80% 80% 60% 60%;
  background-color: #e1a46e;
  transform: translateX(-50%);
}

.hero-shop-cta .nuzzle {
  bottom: 0;
  left: 50%;
  width: 70%;
  height: 40%;
  transform: translateX(-50%);
}

.hero-shop-cta .nuzzle::before,
.hero-shop-cta .nuzzle::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  display: inline-block;
  width: 50%;
  height: 100%;
  border-radius: 70% 30% 50% 20%;
  background-color: #c28e5f;
}

.hero-shop-cta .nuzzle::after {
  right: 0;
  left: auto;
  transform: scaleX(-1);
}

.hero-shop-cta .mouth {
  bottom: -20%;
  left: 50%;
  width: 50%;
  height: 90%;
  border-radius: 100%;
  background-color: #111827;
  transform: translateX(-50%);
}

.hero-shop-cta .tongue {
  bottom: 5%;
  left: 50%;
  width: 50%;
  height: 50%;
  border-radius: 50%;
  background-color: #ef4444;
  transform: translateX(-50%);
  animation: hero-tongue-bounce 0.3s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}

.hero-shop-cta .nose {
  z-index: 10;
  top: 0;
  left: 50%;
  width: 30%;
  height: 20%;
  transform: translateX(-50%);
}

.hero-shop-cta .nose::before {
  content: "";
  position: absolute;
  top: -50%;
  left: 0;
  display: inline-block;
  width: 100%;
  height: 60%;
  border-radius: 1000px 1000px 0 0;
  background-color: #1f2937;
}

.hero-shop-cta .nose::after {
  content: "";
  position: absolute;
  top: 10%;
  left: 0;
  display: inline-block;
  width: 100%;
  height: 100%;
  border-radius: 0 0 1000px 1000px;
  background-color: #1f2937;
}

.hero-shop-cta .nostrils {
  z-index: 1;
  top: 0;
  left: 50%;
  width: 90%;
  height: 100%;
  transform: translateX(-50%);
}

.hero-shop-cta .nostrils::before {
  content: "";
  position: absolute;
  left: 10%;
  display: inline-block;
  width: 30%;
  height: 100%;
  border-radius: 100%;
  background-color: #000;
}

.hero-shop-cta .nostrils::after {
  content: "";
  position: absolute;
  right: 10%;
  display: inline-block;
  width: 30%;
  height: 100%;
  border-radius: 100%;
  background-color: #000;
}

.hero-shop-cta .highlight {
  top: -50%;
  left: 50%;
  width: 80%;
  height: 30%;
  border-radius: 1000px 1000px 0 0;
  background: linear-gradient(#fff, rgba(255, 255, 255, 0));
  opacity: 0.3;
  transform: translateX(-50%);
}

.hero-shop-cta .eyes {
  top: 25%;
  left: 50%;
  width: 80%;
  height: 35%;
  transform: translateX(-50%);
}

.hero-shop-cta .eyes .left,
.hero-shop-cta .eyes .right {
  top: 50%;
  width: 25%;
  height: 52%;
  border-radius: 1000px;
  background-color: #111;
  transform: translateY(-50%);
}

.hero-shop-cta .eyes .left::after,
.hero-shop-cta .eyes .right::after {
  content: "";
  position: absolute;
  top: 15%;
  left: 15%;
  display: inline-block;
  width: 30%;
  height: 30%;
  border-radius: 1000px;
  background-color: #fff;
  opacity: 0.7;
}

.hero-shop-cta .eyes .left {
  left: 15%;
}

.hero-shop-cta .eyes .right {
  right: 15%;
}

.hero-shop-cta .ears {
  top: 70%;
  left: 50%;
  width: 90%;
  height: 90%;
  transform: translate(-50%, -50%);
}

.hero-shop-cta .ears div {
  z-index: 1;
  top: 0;
  left: 0;
  width: 30%;
  height: 50%;
  border-radius: 60% 20% 80% 10%;
  background-color: #9f6a43;
  transform: rotate(15deg);
}

.hero-shop-cta .ears div.right {
  right: 0;
  left: auto;
  transform: rotate(-15deg) scaleX(-1);
}

.hero-shop-cta .paw {
  position: absolute;
  z-index: 3;
  top: 15px;
  right: -20px;
  width: 20px;
  height: 20px;
  overflow: hidden;
  pointer-events: none;
  transition: 0.3s right cubic-bezier(0.33, 1, 0.68, 1);
}

.hero-shop-cta .paw::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #e1a46e;
  transition: 0.3s left cubic-bezier(0.33, 1, 0.68, 1);
  transition-delay: 0.3s;
}

.hero-shop-cta .paw.top {
  top: -20px;
  right: 40px;
  transform: rotate(-90deg);
  transition: 0.3s top cubic-bezier(0.33, 1, 0.68, 1);
}

.hero-shop-cta.dog-out .paw {
  right: -5px;
  transition-delay: 0.3s;
}

.hero-shop-cta.dog-out .paw::after {
  left: 0;
  transition-delay: 0s;
}

.hero-shop-cta.dog-out .paw.top {
  top: -8px;
  right: 40px;
  transition-delay: 0.4s;
}

@keyframes hero-tail-skew {
  from {
    transform: skewX(15deg);
  }
  to {
    transform: skewX(-15deg);
  }
}

@keyframes hero-tongue-bounce {
  from {
    bottom: 20%;
  }
  to {
    bottom: 15%;
  }
}

@media (max-width: 500px) {
  .hero-actions {
    margin-top: 72px;
  }

  .hero-shop-cta {
    align-self: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-shop-cta .dog,
  .hero-shop-cta .tail,
  .hero-shop-cta .paw,
  .hero-shop-cta .paw::after {
    transition: none !important;
  }

  .hero-shop-cta .tail::after,
  .hero-shop-cta .tongue {
    animation: none !important;
  }
}