3D button animation

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/youssefahmed2017/animationsx-registry@main/animations/3d-button-animation.css">

/*
  "3D stack" button — recreated from beehiiv.com's real
  .custom-box-shadow-button / -text / -1 / -2 implementation
  (pulled live from their stylesheet + saved page source).

  Usage: add the `animate-target` class to any element.
    <button class="animate-target">Sign up with Google</button>

  Real mechanics (not a guess):
  - At rest the two backing layers sit exactly behind the visible
    face — fully hidden, no offset.
  - On hover, the face and each layer peel apart by different
    amounts (beehiiv's actual deltas: -18px / -12px / -6px),
    revealing the stack. The button also scales up slightly.

  Implementation note: layers are done with box-shadow (which
  paints behind an element's own background by spec), not
  z-indexed ::before/::after — negative z-index on a pseudo
  inside its own isolated stacking context paints ABOVE that
  element's background, not behind it, which is what made an
  earlier version of this file render as a solid pink block.
*/

.animate-target {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  font-family: inherit;
  font-weight: 700;
  color: #ffffff;
  background-color: #2f39ba;
  border: 1px solid #2f39ba;
  border-radius: 6px;
  cursor: pointer;

  /* Two hidden backing layers, each a (fill, border-ring) shadow pair.
     At rest both sit at 0 0 with 0 spread — exactly the same box as
     the element itself, so they're fully invisible underneath it. */
  box-shadow:
    0 0 0 0 #ffc8eb,
    0 0 0 0 #0b0d2a,
    0 0 0 0 #f092dd,
    0 0 0 0 #0b0d2a;
  transition: transform 0.125s ease-out, box-shadow 0.125s ease-out;
}

.animate-target:hover,
.animate-target:focus-visible {
  transform: translate(-18px, -18px) scale(1.02);
  box-shadow:
    6px 6px 0 0 #ffc8eb,
    6px 6px 0 1px #0b0d2a,
    12px 12px 0 0 #f092dd,
    12px 12px 0 1px #0b0d2a;
}

.animate-target:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

@media (max-width: 600px) {
  .animate-target {
    transition: none !important;
  }
  .animate-target:hover {
    transform: none !important;
    box-shadow: none !important;
  }
}