.hero-badge-anim {
  @apply max-w-max px-4 lg:px-6 py-2 relative   grid place-items-center;

  & .badge-content {
    @apply text-white tracking-wider text-sm md:text-sm;
    opacity: 0;
    animation: reveal-badge-content 0.6s ease 1.1s forwards;
  }

  & .rect-container {
    @apply absolute bg-dark/20 -z-10;
    width: 8px;
    height: 8px;

    animation: anim-width-rect-dots 1s cubic-bezier(0.56, 0.02, 0.03, 1.46) 0.8s
      forwards;

    & .rectangle {
      @apply absolute size-[4px] bg-white;
      opacity: 0;
    }

    /* starting position */
    & .rectangle.one {
      top: 0;
      left: 0;
      transform: translateX(-50%) translateY(-50%);
      animation: bounce-effect-opacity 0.6s ease 0s forwards;
    }
    & .rectangle.two {
      bottom: 0%;
      left: 0;
      transform: translateX(-50%) translateY(50%);
      animation: bounce-effect-opacity 0.6s ease 0.2s forwards;
    }
    & .rectangle.three {
      bottom: 0%;
      right: 0;
      transform: translateX(50%) translateY(50%);
      animation: bounce-effect-opacity 0.6s ease 0.4s forwards;
    }
    & .rectangle.four {
      top: 0;
      right: 0;
      transform: translateX(50%) translateY(-50%);
      animation: bounce-effect-opacity 0.6s ease 0.5s forwards;
    }
  }
}

@keyframes anim-width-rect-dots {
  0% {
    width: 8px;
    height: 8px;
    opacity: 1;
  }
  30% {
    width: 8px;
    height: 100%;
  }
  100% {
    width: 100%;
    height: 100%;
  }
}

@keyframes bounce-effect-opacity {
  0% {
    filter: blur(4px);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}

@keyframes reveal-badge-content {
  0% {
    opacity: 0;
    transform: translateY(-100%);
    filter: blur(8px);
  }
  40% {
    opacity: 0;
    transform: translateY(20%);
    filter: blur(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
    filter: blur(0px);
  }
}

/* Animate Badge Stars */
.badge-stars {
  @apply text-primary-light;
}

.badge-stars .star {
  animation: star-fade-in-out 0.8s ease-in-out infinite alternate;
}

.badge-stars .star:nth-child(2) {
  animation: star-fade-in-out 0.8s ease-in-out 0.3s infinite alternate;
}

@keyframes star-fade-in-out {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.7;
  }
}

/* Pricing Cards */

.price-tag.active {
  opacity: 0;
  animation: text-reveal 0.6s forwards 0.2s;
}

@keyframes text-reveal {
  0% {
    opacity: 0;
    transform: translateY(10px);
    filter: blur(4px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0px);
  }
}

.price-tag.inactive {
  position: absolute;
  animation: text-hide 0.6s forwards;
}

@keyframes text-hide {
  0% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0px);
  }
  100% {
    opacity: 0;
    transform: translateY(-10px);
    filter: blur(4px);
  }
}

.price-togger {
  @apply flex items-center justify-center mb-10 p-1.25 bg-light max-w-max mx-auto rounded-full;
}
.price-toggler-btn {
  @apply text-white bg-light px-5 py-3 rounded-full font-medium cursor-pointer select-none transition-colors duration-300;
}
.price-toggler-btn.active {
  background: linear-gradient(
    0deg,
    var(--color-primary-light) 0%,
    var(--color-primary) 100%
  );
}