/* --------------------------------

Component

-------------------------------- */

.parallax-btn {
  --parallax-btn-cursor-fx-delta: 50px; /* max translate value of the background image effect */

  position: relative;
  display: inline-block;
  font-size: 1.375rem;
  text-decoration: none;
  border-radius: 50em;
  padding: 0.5rem 1rem;
  cursor: pointer;
  perspective: 4000px;
}

.parallax-btn:focus {
  outline: none;
}

.parallax-btn__content {
  position: relative;
  display: inline-flex;
  z-index: 2;
  color: hsl(0, 0%, 100%);
  font-weight: 500;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

.parallax-btn__bg {
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 8px hsla(250, 84%, 38%, 0.2);
  transform: translateZ(-5px);
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
}

.parallax-btn:hover .parallax-btn__bg, .parallax-btn:focus .parallax-btn__bg {
  outline: none;
  transform: scale(1.1) rotateX(-180deg) translateZ(5px);
  box-shadow: 0 0 0 1px hsla(0, 0%, 100%, 0.2), 0 0 16px hsla(250, 84%, 38%, 0.2);
}

.parallax-btn__bg-front, .parallax-btn__bg-back {
  position: absolute;
  inset: 0;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  border-radius: inherit;
}

.parallax-btn__bg-front {
  background-color: hsl(250, 84%, 54%);
}

.parallax-btn__bg-back {
  background-color: hsl(230, 13%, 9%);
  transform: rotateX(180deg);
  overflow: hidden;
}

.parallax-btn__bg-img {
  position: absolute;
  display: block;
  height: calc(100% + 2*var(--parallax-btn-cursor-fx-delta));
  max-width: none;
  width: calc(100% + 2*var(--parallax-btn-cursor-fx-delta));
  inset: calc(-1 * var(--parallax-btn-cursor-fx-delta));
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}