.root {
  position: absolute;
  z-index: 1;
  top: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  height: 14.375rem;
}

.star {
  pointer-events: none; // Let wrapper handle mouse events

  position: relative;
  transform-style: preserve-3d;

  width: 6.25rem;
  height: 6.25rem;
  min-height: 6.25rem;
  margin-top: calc(-2.25rem * 2); // Centered minus center shift

  background-image: url('../../../assets/icons/star/GoldStar.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  transition: transform 0.6s ease-out;

  // Create depth effect with pseudo-elements
  &::before,
  &::after {
    pointer-events: none;
    content: '';

    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background-image: url('../../../assets/icons/star/GoldStarFill.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }

  &::before {
    z-index: -1;
    transform: translateZ(-3px);
    filter: brightness(0.8);
  }

  &::after {
    z-index: -2;
    transform: translateZ(-6px);
    filter: brightness(0.8);
  }

  .root:hover & {
    transition-duration: 0.5s;
  }

  &_purple {
    background-image: url('../../../assets/premium/PremiumStar.svg');

    &::before,
    &::after {
      background-image: url('../../../assets/premium/PremiumStarFill.svg');
    }
  }
}
