@property --angle {
  syntax: '<angle>'; /* <- defined as type number for the transition to work */
  initial-value: 0deg;
  inherits: true;
}

#survey-splash {
  width: 100%;
  aspect-ratio: 16/9;
  margin: 250px 0;

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

  position: relative;

  > .overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    border-radius: 36px;
    background-color: #00000077;
    backdrop-filter: blur(10px);
    opacity: 0;
    transition: all 0.5s ease;
    pointer-events: none;
  }

  > .close-wrapper {
    top: 36px;
    right: 36px;
    position: absolute;
    z-index: 3;
    opacity: 0;
    transition: all 0.5s ease;
  }

  animation: spinSplashImage 120s linear infinite;
  &:has(.wrapper:not(.active):hover) {
    animation-play-state: paused;

    > .overlay {
      opacity: 0.8;
    }
  }

  &:has(.wrapper.active) {
    animation-play-state: paused;

    > .overlay,
    > .close-wrapper {
      opacity: 1;
    }

    .wrapper:not(.active) {
      filter: blur(10px);
      opacity: 0;
    }
  }

  > img {
    width: 100%;
    border-radius: 36px;
    transition: all 0.5s ease;
  }

  .wrapper {
    --offset: 0deg;
    position: absolute;
    z-index: 1;

    top: calc(50% + sin(var(--angle) + var(--offset)) * 50%);
    left: calc(50% + cos(var(--angle) + var(--offset)) * 50%);
    transform: translate(-50%, -50%);

    width: min(500px, 40vw);
    height: min(500px, 40vh);
    cursor: pointer;

    > img {
      width: 100%;
      height: 100%;
      object-fit: contain;

      transition: all 300ms ease;
    }

    &:nth-child(1) {
      --offset: calc(0 * 360deg / 4);
    }

    &:nth-child(2) {
      --offset: calc(1 * 360deg / 4);
    }

    &:nth-child(3) {
      --offset: calc(2 * 360deg / 4);
    }

    &:nth-child(4) {
      --offset: calc(3 * 360deg / 4);
    }

    transition: all 0.5s ease;

    &:not(.active):hover {
      > img {
        transform: scale(1.1);
      }
    }

    &.active {
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 2;

      padding: 36px;

      transform: translate(0, 0);
    }
  }
}

@keyframes spinSplashImage {
  0% {
    --angle: 0deg;
  }

  100% {
    --angle: 360deg;
  }
}