.round-item {
  position: absolute;
  will-change: top, right, transform;
  width: 300px;
  height: 300px;
  transition: transform linear 0.1s;

  &__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.5;

    &.active {
      mask-image: radial-gradient(
        circle,
        #fff calc(var(--radius) - 5%),
        transparent calc(var(--radius) + 5%)
      );
      animation: scene-transition 0.5s ease-out forwards;
      opacity: 1;
      z-index: 1;
    }
    &.hide {
      opacity: 0;
    }
    &.fade-out {
      animation: fade-out 0.5s ease-out forwards;
    }
  }
}

@property --radius {
  syntax: "<percentage>";
  inherits: true;
  initial-value: -5%;
}

@keyframes scene-transition {
  to {
    --radius: 105%;
  }
}

@keyframes fade-out {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0);
  }
}
