.btn-wrapper {
  --color: #b5faff31;
  --txt-color: #283a3b;
  --txt-color-2: #283a3b;
  --point-size: 8px;
  --point-color: #ffffff;
  --line-color: #00000015;
  --line-style: solid;
  --line-weight: 1px;
  --anim-speed: 1s;

  position: relative;
  display: grid;
  place-items: center;
  padding: 1.5rem 5rem;
  min-width: 160px;
  min-height: 48px;

  user-select: none;
}

.txt-secondary {
  position: absolute;
  bottom: -2rem;
  font:
    400 0.75em "Inter",
    sans-serif;
  color: #0006;
  font-style: italic;
  will-change: opacity;
  transition: opacity calc(var(--anim-speed, 1s) * 0.5) ease;
  opacity: 1;
}
#hint2 {
  opacity: 0;
}

.btn {
  filter: drop-shadow(0 6px 2px #00000055) drop-shadow(0 14px 4px #00000055)
    drop-shadow(0 32px 8px #00000055) drop-shadow(0 64px 16px #00000055);

  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  height: 100%;
}

.txt-box {
  position: absolute;
  display: grid;
  place-items: center;
  text-wrap: nowrap;
  inset: 0 0%;
  overflow: clip;
  will-change: inset, filter;
  transition: filter 0.25s ease;
  animation: frame-half calc(var(--anim-speed, 1s) * 0.5) forwards;
}

.txt-box::after {
  content: "";
  position: absolute;
  inset: var(--point-size, 8px);
  background: repeating-linear-gradient(45deg, #3f87a6, #ebf8e1 15%, #fff 20%);
  mix-blend-mode: hard-light;
  background-size: 440%;
  transition: background-size 0.4s ease-in;
  filter: blur(1px);
  z-index: 3;
  opacity: 0.1;
}

.txt {
  position: absolute;
  padding: 1rem 2rem;

  z-index: 2;
  font:
    500 1.3em "Inter",
    sans-serif;
  color: var(--txt-color, #15104c);

  will-change: opacity, display, text-shadow;

  text-shadow:
    0 -1px 1px #ffffff60,
    0 2px 1px #00000015,
    0 4px 2px #00000015,
    0 8px 4px #00000015,
    0 16px 8px #00000015;
}
.txt:last-child {
  color: var(--txt-color-2, #15104c);
  opacity: 0;
  animation: none;
}

.frame {
  position: absolute;
  inset: 0 0%;
  z-index: 1;
  border: var(--line-style, solid) var(--line-weight, 1px)
    var(--line-color, #000000);
  background-color: var(--color, #f9d323);
  transition-delay: calc(var(--anim-speed, 1s) * 0.5);
  box-shadow: inset 0 1px 4px 1px #fff5;
  animation: frame-half calc(var(--anim-speed, 1s) * 0.5) forwards;
}

.point {
  position: absolute;
  box-sizing: border-box;
  width: var(--point-size, 8px);
  aspect-ratio: 1;
  border-radius: 25%;
  border: solid var(--line-weight, 1px) var(--line-color, #000000);
  background-color: var(--point-color, #fff);
  background-image: radial-gradient(circle at 50% 120%, #0005, #ffff);

  &.top {
    top: calc(var(--point-size, 8px) * -0.5);
  }
  &.bottom {
    bottom: calc(var(--point-size, 8px) * -0.5);
  }
  &.left {
    left: calc(var(--point-size, 8px) * -0.5);
  }
  &.right {
    right: calc(var(--point-size, 8px) * -0.5);
  }
}

.btn:hover {
  .txt {
    animation: txt-out calc(var(--anim-speed, 1s) * 0.5) forwards;
  }
  .txt:last-child {
    animation: txt-in calc(var(--anim-speed, 1s) * 0.5) forwards;
  }

  .txt-box {
    animation: frame var(--anim-speed, 1s) ease;

    &::after {
      background-size: 700%;
    }
  }

  .frame {
    animation: frame var(--anim-speed, 1s) ease;
  }

  ~ #hint1 {
    opacity: 0;
  }
  ~ #hint2 {
    opacity: 1;
  }
}

@keyframes txt-in {
  90% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes txt-out {
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes frame-half {
  0% {
    inset: 0 50%;
  }
  100% {
    inset: 0 0%;
  }
}
@keyframes frame {
  50% {
    inset: 0 50%;
  }
}

.btn::before {
  content: "Address copied";
  position: absolute;
  inset: 0;
  font:
    400 1em "Inter",
    sans-serif;
  letter-spacing: 0.03em;
  color: #000a;
  z-index: -1;
  filter: blur(16px);
  opacity: 0;
}

.btn:active {
  .txt-box {
    filter: contrast(1.4) brightness(1.4);
  }
}

.btn:focus {
  &::before {
    animation: appear calc(var(--anim-speed, 01s) * 1.5)
      cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  }
}

@keyframes appear {
  70% {
    opacity: 0.75;
    filter: blur(0px);
  }
  100% {
    transform: translateY(-24px);
  }
}