:root {
  --diameter: max(135vw, 135vh);
  --anim-width: clamp(300px, 70vw, 800px);
}
.open-anim {
  color: var(--color-white-faded);
  width: var(--anim-width);
  aspect-ratio: 1.5;
  overflow: hidden;
  position: fixed;
  top: calc((100vh - var(--anim-width) / 1.5) / 2);
  left: calc((100vw - var(--anim-width)) / 2);
  border-radius: 8px;
  z-index: 100;
  &.d-none {
    display: none;
  }
  & svg {
    position: relative;
    left: calc(100% - 40px);
    z-index: 11;
    cursor: pointer;
  }
  & .list .item {
    position: absolute;
    inset: 0 0 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1s;
    & .image {
      flex-shrink: 0;
      width: var(--diameter);
      height: var(--diameter);
      background-image: var(--url);
      background-position: center;
      border-radius: 50%;
      position: relative;
      filter: blur(30px);
      transform: rotate(-60deg);
      transition: 1s;
      &::before,
      &::after {
        position: absolute;
        width: 70%;
        height: 70%;
        content: "";
        border-radius: 50%;
        background-image: linear-gradient(
            to right,
            var(--color-background-glb),
            var(--color-background-glb)
          ),
          var(--url);
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-position: center;
      }
      &::after {
        width: 30%;
        height: 30%;
        background-image: var(--url);
        transform: translate(-50%, -50%) rotate(-270deg);
        transition: transform 1s;
      }
      &::before {
        transform: translate(-50%, -50%) rotate(-120deg);
        transition: transform 1s;
      }
    }
    & .content {
      position: absolute;
      top: 20%;
      width: 50%;
      /*       font-size: 1.2rem; */
      text-shadow: 0 0 80px #000;
      & h2 {
        font-size: clamp(2rem, 5vw, 5rem);
        opacity: 0;
        & span {
          font-size: clamp(3rem, 7vw, 7rem);
          color: var(--color-active-red);
        }
      }
    }
  }
  & .list .item.active {
    opacity: 1;
    pointer-events: auto;
    animation: imageSlide 4s linear;
    & ~ .item {
      opacity: 0;
      & .image {
        transform: rotate(60deg);
        filter: blur(30px);
        &::before {
          transform: translate(-50%, -50%) rotate(120deg);
        }
        &::after {
          transform: translate(-50%, -50%) rotate(270deg);
        }
      }
    }
    & .content h2 {
      animation: textSlide 3s linear 1s;
    }
    & .image {
      transform: rotate(0);
      filter: blur(0);
      &::before,
      &::after {
        transform: translate(-50%, -50%) rotate(0);
      }
    }
  }
}
@keyframes imageSlide {
  0% {
    transform: translateX(50px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes textSlide {
  0% {
    transform: translateX(-120px);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(80px);
  }
}