.root {
  position: relative;

  overflow: hidden;
  display: flex;
  justify-content: center;

  aspect-ratio: 1;
}

.wrapper {

  --y-static: -40%;
  --y-dynamic: -10%;
  --scroll-progress-converted: var(--scroll-progress, 0);
  --abs-scroll-progress-converted: var(--abs-scroll-progress, 0);

  position: absolute;
  transform:
    perspective(200px)
    translate3d(
      calc(var(--scroll-progress-converted) * -30%),
      calc(var(--y-static) + var(--abs-scroll-progress-converted) * var(--y-dynamic)),
      0
    )
    rotateY(calc(var(--scroll-progress-converted) * 40deg));

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

  width: 70%;

  opacity: calc(1 - var(--abs-scroll-progress-converted) * 0.4);
}

.down {
  --y-static: 2%;
  --y-dynamic: 10%;
}

.root :global(.reverse) {
  --scroll-progress-converted: calc((1 - var(--scroll-progress, 0)) * -1);
  --abs-scroll-progress-converted: calc(1 - var(--abs-scroll-progress, 0));
}

.frame {
  position: relative;
  z-index: 1;
  width: 100%;

  -webkit-user-drag: none;
}

.video {
  position: absolute;
  z-index: 0;
  bottom: 0;

  width: 100%;
  padding: 4%;
  border-radius: 0 0 10% 10%;
}

.down .video {
  top: 0;
  bottom: initial;
  border-radius: 10% 10% 0 0;
}

.placeholder {
  --placeholder-background: #555555;

  position: absolute;
  z-index: 0;

  width: 97%;
  height: 97%;
  border-radius: 10%;

  background-color: var(--placeholder-background);
}
