.phantom-btn {
  position: relative;
  appearance: none;
  border: none;
  background: none;
  padding: 80px;
  perspective: 1000px;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Impact, "Arial Black", sans-serif;
}

.ptrig {
  position: absolute;
  z-index: 100;
  width: 33.33%;
  height: 33.33%;
}
.p-1 {
  top: 0;
  left: 0;
}
.p-2 {
  top: 0;
  left: 33.33%;
}
.p-3 {
  top: 0;
  right: 0;
}
.p-4 {
  top: 33.33%;
  left: 0;
}
.p-5 {
  top: 33.33%;
  left: 33.33%;
}
.p-6 {
  top: 33.33%;
  right: 0;
}
.p-7 {
  bottom: 0;
  left: 0;
}
.p-8 {
  bottom: 0;
  left: 33.33%;
}
.p-9 {
  bottom: 0;
  right: 0;
}

.phantom-wrapper {
  position: relative;
  width: max-content;
  transform-style: preserve-3d;
  transition: transform 0.2s cubic-bezier(0.1, 0.9, 0.2, 1);
}

/* --- Shatter Background Layers --- */
.shard-layer {
  position: absolute;
  inset: -20px;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.layer-1 {
  background: #000;
  clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 80% 100%, 0% 100%);
  transform: rotate(-2deg);
  z-index: 1;
}

.layer-2 {
  background: #e60012; /* Phantom Red */
  clip-path: polygon(10% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 20%);
  transform: rotate(1deg) translate(4px, 4px);
  z-index: 2;
}

.layer-3 {
  background: #fff;
  border: 4px solid #000;
  clip-path: polygon(0% 0%, 95% 0%, 100% 15%, 100% 100%, 5% 100%, 0% 85%);
  transform: rotate(0deg);
  z-index: 3;
  /* Pattern */
  background-image: radial-gradient(#000 1px, transparent 1px);
  background-size: 8px 8px;
}

.phantom-btn:hover .layer-1 {
  transform: rotate(-4deg) scale(1.05) translate(-10px, -5px);
}

.phantom-btn:hover .layer-2 {
  transform: rotate(3deg) scale(1.05) translate(10px, 5px);
}

.phantom-btn:hover .layer-3 {
  transform: scale(1.02);
}

/* --- Ransom Note Text --- */
.heist-content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 36px;
  gap: 20px;
  z-index: 10;
  transform-style: preserve-3d;
}

.ransom-row {
  display: flex;
  gap: 2px;
  align-items: center;
  transform-style: preserve-3d;
}

.spacer {
  width: 10px;
}

.note-block {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 6px;
  border: 2px solid #000;
  transform: rotate(calc(var(--i) * 3deg - 15deg));
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 2px 2px 0 #000;
}

.b-w {
  background: #fff;
  color: #000;
}
.b-b {
  background: #000;
  color: #fff;
  transform: rotate(calc(var(--i) * -2deg + 10deg)) translateY(4px);
}

.txt {
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.phantom-btn:hover .note-block {
  /* Chaotic Jitter */
  transform: rotate(0deg) translateY(0);
  animation: ransomShake 0.4s infinite alternate;
  animation-delay: calc(var(--i) * 0.05s);
}

.phantom-btn:hover .b-w {
  background: #e60012;
  color: #fff;
}

@keyframes ransomShake {
  0% {
    transform: translateY(0) rotate(5deg) scale(1);
  }
  100% {
    transform: translateY(-4px) rotate(-5deg) scale(1.1);
  }
}

/* --- Calling Card Chip --- */
.card-socket {
  width: 50px;
  height: 34px;
  position: relative;
  perspective: 600px;
}

.calling-card {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: center center;
}

.card-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border: 2px solid #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.front {
  background: #000;
  transform: rotateY(0deg);
}

.back {
  background: #e60012;
  transform: rotateY(180deg);
}

.mask-icon,
.star-icon {
  width: 24px;
  height: 24px;
}

.phantom-btn:hover .calling-card {
  transform: rotateY(180deg) scale(1.2) rotateZ(10deg);
}

/* --- Action Star Background --- */
.action-star {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150px;
  height: 150px;
  background: #000;
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
  transform: translate(-50%, -50%) scale(0) rotate(0deg);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: 0;
  pointer-events: none;
}

.phantom-btn:hover .action-star {
  transform: translate(-50%, -50%) scale(1.4) rotate(180deg);
}

/* --- Parallax Tilt (Disorienting) --- */
/* The shards move opposite to the content to create depth */

.phantom-btn:has(.p-1:hover) .phantom-wrapper {
  transform: rotateX(15deg) rotateY(-15deg);
}
.phantom-btn:has(.p-1:hover) .layer-1 {
  transform: translate(15px, 15px);
}
.phantom-btn:has(.p-1:hover) .layer-2 {
  transform: translate(10px, 10px);
}

.phantom-btn:has(.p-2:hover) .phantom-wrapper {
  transform: rotateX(15deg);
}
.phantom-btn:has(.p-2:hover) .layer-1 {
  transform: translateY(15px);
}

.phantom-btn:has(.p-3:hover) .phantom-wrapper {
  transform: rotateX(15deg) rotateY(15deg);
}
.phantom-btn:has(.p-3:hover) .layer-1 {
  transform: translate(-15px, 15px);
}
.phantom-btn:has(.p-3:hover) .layer-2 {
  transform: translate(-10px, 10px);
}

.phantom-btn:has(.p-4:hover) .phantom-wrapper {
  transform: rotateY(-15deg);
}
.phantom-btn:has(.p-4:hover) .layer-1 {
  transform: translateX(15px);
}

.phantom-btn:has(.p-5:hover) .phantom-wrapper {
  transform: scale(1.05);
}

.phantom-btn:has(.p-6:hover) .phantom-wrapper {
  transform: rotateY(15deg);
}
.phantom-btn:has(.p-6:hover) .layer-1 {
  transform: translateX(-15px);
}

.phantom-btn:has(.p-7:hover) .phantom-wrapper {
  transform: rotateX(-15deg) rotateY(-15deg);
}
.phantom-btn:has(.p-7:hover) .layer-1 {
  transform: translate(15px, -15px);
}
.phantom-btn:has(.p-7:hover) .layer-2 {
  transform: translate(10px, -10px);
}

.phantom-btn:has(.p-8:hover) .phantom-wrapper {
  transform: rotateX(-15deg);
}
.phantom-btn:has(.p-8:hover) .layer-1 {
  transform: translateY(-15px);
}

.phantom-btn:has(.p-9:hover) .phantom-wrapper {
  transform: rotateX(-15deg) rotateY(15deg);
}
.phantom-btn:has(.p-9:hover) .layer-1 {
  transform: translate(-15px, -15px);
}
.phantom-btn:has(.p-9:hover) .layer-2 {
  transform: translate(-10px, -10px);
}

/* --- "Take Your Heart" Click --- */
.phantom-btn:active .phantom-wrapper {
  transform: scale(0.95) !important;
}

.phantom-btn:active .layer-1,
.phantom-btn:active .layer-2,
.phantom-btn:active .layer-3 {
  background: #000;
  border-color: #e60012;
  clip-path: none;
  border-radius: 8px;
}

.phantom-btn:active .note-block {
  background: #fff;
  color: #000;
  border-color: #000;
  animation: none;
  transform: rotate(0) !important;
}

.phantom-btn:active .calling-card {
  transform: rotateY(180deg) scale(0.8);
}