/* Folding stuff */
.folding-section {
  overflow: hidden;
  position: relative;
  background-color: rgb(0, 0, 0);
  perspective: 100vh;
  transition: perspective-origin 1s ease;

  view-timeline-name: --foldingSectionTimeline;

  /* container-name: foldingcontainer;
  animation: unfold cubic-bezier(1, 0, 0.5, 0.5);
  animation-range: entry 50% exit 50%;
  animation-timeline: view(); */
}

/* .folding-section::before {
  content: '';
  width: 2px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translatex(-50%);
  background: white;
} */

.fold {
  transform-style: preserve-3d;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  transition:
    background-color 0.5s ease,
    transform 0.5s ease;
}

.fold-left {
  background: hsl(0, 0%, 60%);
  left: 0;
  transform-origin: left center;
  transform: translatey(-50%) translatex(0) rotatey(45deg) scalex(0.71);

  animation-timeline: --foldingSectionTimeline;
  animation-name: unfoldleft;
  animation-fill-mode: both;
  animation-timing-function: linear;
  animation-duration: 1ms;
  animation-range-start: entry 50%;
  animation-range-end: exit 50%;
}

.fold-right {
  background: hsl(0, 0%, 50%);
  right: 0;
  transform-origin: right center;
  transform: translatey(-50%) translatex(0) rotatey(-45deg) scalex(0.71);

  animation-timeline: --foldingSectionTimeline;
  animation-name: unfoldright;
  animation-fill-mode: both;
  animation-timing-function: linear;
  animation-duration: 1ms;
  animation-range-start: entry 50%;
  animation-range-end: exit 50%;
}

/* @keyframes unfold {
  0% {
    --has-unfolded: false;
  }
  1% {
    --has-unfolded: true;
  }
  99% {
    --has-unfolded: true;
  }
  100% {
    --has-unfolded: false;
  }
} */

@keyframes unfoldleft {
  0% {
    background-color: hsl(0, 0%, 60%);
    transform: translatey(-50%) translatex(0) rotatey(45deg) scalex(0.71);
  }

  40% {
    background-color: hsl(0, 70%, 50%);
    transform: translatey(-50%) translatex(-50%) rotatey(0deg) scalex(1);
  }

  60% {
    background-color: hsl(0, 70%, 50%);
    transform: translatey(-50%) translatex(-50%) rotatey(0deg) scalex(1);
  }

  100% {
    background-color: hsl(0, 0%, 60%);
    transform: translatey(-50%) translatex(0) rotatey(45deg) scalex(0.71);
  }
}

@keyframes unfoldright {
  0% {
    background-color: hsl(0, 0%, 40%);
    transform: translatey(-50%) translatex(0) rotatey(-45deg) scalex(0.71);
  }

  40% {
    background-color: hsl(0, 70%, 50%);
    transform: translatey(-50%) translatex(50%) rotatey(0deg) scalex(1);
  }

  60% {
    background-color: hsl(0, 70%, 50%);
    transform: translatey(-50%) translatex(50%) rotatey(0deg) scalex(1);
  }

  100% {
    background-color: hsl(0, 0%, 40%);
    transform: translatey(-50%) translatex(0) rotatey(-45deg) scalex(0.71);
  }
}

/* @container foldingcontainer style(--has-unfolded: true) {
  .fold-left {
    background-color: hsl(0, 70%, 50%);
    transform: translatey(-50%) translatex(-50%) rotatey(0deg) scalex(1);
  }

  .fold-right {
    background-color: hsl(0, 70%, 50%);
    transform: translatey(-50%) translatex(50%) rotatey(0deg) scalex(1);
  }
} */