.checkbox-container {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.checkbox-container label {
  cursor: pointer;
}

.checkbox input[type="checkbox"] {
  display: none; /* Hide the default checkbox */
}
.checkbox {
  width: 2rem;
  height: 2rem;
  background-color: transparent;
  margin-right: 0.5rem;
  border-radius: 6px;
  border: 2px solid #555;
  position: relative;
  overflow: hidden;
  transition:
    all 0.3s ease,
    0.2s border cubic-bezier(0.26, 0.62, 0.43, 1.06);
  cursor: pointer;
}

.checkbox::before {
  content: "";
  position: absolute;
  top: 232%; /* Starts outside `.background` */
  left: 50%;
  transform: translate(-50%, -100%) scale(0.75); /* Scaled down initially */
  border-radius: 50% 20% / 30% 70%;
  width: 115%;
  height: 115%;
  filter: blur(4px);
  background: #577399;
  z-index: 1; /* Places the pseudo-element behind `.download` */
  transition:
    transform 0.56s cubic-bezier(0.5, 0.26, 0.7, 1.8),
    top 0.38s ease,
    filter 0.48s ease; /* Smooth position and scaling transitions */
}
.checkbox::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 75%;
  height: 75%;
  clip-path: polygon(
    41% 52%,
    26% 35%,
    10% 51%,
    37% 88%,
    37% 88%,
    37% 88%,
    37% 88%,
    91% 33%,
    78% 18%
  );
  background: white;
  z-index: 1;
  opacity: 0; /* Initially hidden */
  transition: all 0.3s cubic-bezier(0.93, 0.17, 0.43, 1.07);
}

/* Use :has selector to target the checkbox when it's checked */
.checkbox-container:has(.checkbox input[type="checkbox"]:checked)
  .checkbox::before {
  top: 50%; /* Moves to the center of `` */
  transform: translate(-50%, -50%) scale(1); /* Fully fills the `.download` */
  filter: blur(0px);
}

/* Ensure the pseudo-element reacts to the checkbox state */
.checkbox-container:has(.checkbox input[type="checkbox"]:checked)
  .checkbox::after {
  opacity: 1;
  transform: translate(-50%, -50%) perspective(70px) scale(1);
  animation: checkmarkAnimation 0.5s ease-in-out forwards;
}

.checkbox:has(input[type="checkbox"]:checked) {
  border: 0px solid; /* Border disappears when checked */
}

@keyframes checkmarkAnimation {
  0% {
    opacity: 0;
    transform: perspective(70px) translate(10%, -20%) rotate(43deg)
      rotateY(100deg) scale(0);
  }
  50% {
    opacity: 1;
    transform: perspective(70px) translate(-57%, -42%) rotate(32deg)
      rotateY(55deg) scale(1.32);
  }
  100% {
    opacity: 1;
    transform: perspective(70px) translate(-50%, -50%) rotate(0deg)
      rotateY(0deg) scale(1);
  }
}