:root {
  --button-ease: cubic-bezier(0.25, 0.76, 0.355, 1);
}

header {
  z-index: 1;
}

.text-circles-container {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: color-dodge;
}

.text-circle {
  position: absolute;
  top: var(--circle-y);
  left: var(--circle-x);
  width: var(--circle-size);
  aspect-ratio: 1;
  font-family: "Times New Roman", Times, serif;
  font-size: var(--circle-font-size);
  font-weight: 700;
  pointer-events: none;
  user-select: none;
}

.text-circle text {
  fill: var(--color-contact-circle);
  opacity: 0.6;
}

.text-circle svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.circle-1 {
  --circle-x: 5vw;
  --circle-y: 55vh;
  --circle-size: clamp(680px, 60vw, 800px);
  --circle-font-size: clamp(17px, 1.05vw, 20px);
  animation: spin-counter-clockwise 130s linear infinite;
}

.circle-2 {
  --circle-x: 60vw;
  --circle-y: 125vh;
  --circle-size: clamp(1000px, 90vw, 1300px);
  --circle-font-size: clamp(17px, 1.05vw, 20px);
  animation: spin-counter-clockwise 210s linear infinite;
}

.circle-3 {
  --circle-x: 95vw;
  --circle-y: 25vh;
  --circle-size: clamp(650px, 60vw, 750px);
  --circle-font-size: clamp(25px, 1.55vw, 30px);
  animation: spin-counter-clockwise 130s linear infinite;
}

.circle-4 {
  --circle-x: 43vw;
  --circle-y: -12vh;
  --circle-size: clamp(650px, 50vw, 750px);
  --circle-font-size: clamp(30px, 2.4vw, 50px);
  animation: spin-counter-clockwise 90s linear infinite;
}

@keyframes spin-counter-clockwise {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}

.flx {
  display: flex;
}

.shcenter {
  position: relative;
  z-index: 1;
}

.shbtn {
  position: relative;
  padding: 0 30px 45px;
  border: 0;
  outline: none;
  background: var(--color-transparent);
  cursor: pointer;
  font: inherit;
  -webkit-tap-highlight-color: var(--color-transparent);
}

.cc-center {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
}

.shbtntxt {
  color: var(--color-contact-heading);
  font-family: "Century Gothic", sans-serif;
  font-size: clamp(42px, 10vw, 120px);
  font-weight: 700;
  text-align: center;
  pointer-events: none;
  user-select: none;
  transition: transform 0.4s var(--button-ease), opacity 0.4s var(--button-ease);
}

.copyclipboard {
  position: relative;
  overflow: hidden;
  padding: 16px 20px;
  transform: translateY(-10px);
  color: var(--button-text-hover);
  font-size: 14px;
  font-weight: 700;
  line-height: 14px;
  user-select: none;
}

.copyclipboard::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 80px;
  background-color: var(--color-black);
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.copyclipboard span {
  position: relative;
  z-index: 1;
  transform: translate3d(0, 40px, 0);
  white-space: nowrap;
  transition: transform 0.2s var(--button-ease);
}

.shbtn:hover .shbtntxt {
  transform: scale3d(0.95, 0.95, 0.95) rotate(-6.75deg);
  opacity: 0.3;
}

.shbtn:hover .copyclipboard::before,
.copyclipboard.animate-bg::before {
  opacity: 1;
}

.shbtn:hover .copyclipboard span,
.copyclipboard.animate-bg span {
  transform: translateZ(0);
  transition: transform 0.3s var(--button-ease) 0.15s;
}

@media screen and (max-width: 768px) {
  .text-circles-container {
    display: none;
  }

  .shbtn:active .shbtntxt {
    transform: scale3d(0.95, 0.95, 0.95) rotate(-6.75deg);
    opacity: 0.3;
  }

  .shbtn:active .copyclipboard::before {
    opacity: 1;
  }

  .shbtn:active .copyclipboard span {
    transform: translateZ(0);
  }
}

@media screen and (max-width: 480px) {
  .shbtntxt {
    font-size: clamp(38px, 9vw, 80px);
  }
}