* {
  border: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --hue: 223;
  --sat: 10%;
  --gray50: hsl(var(--hue), var(--sat), 95%);
  --gray950: hsl(var(--hue), var(--sat), 5%);
  --hotpink500: hsl(330, 90%, 50%);
  --orange500: hsl(30, 90%, 50%);
  --blue500: hsl(210, 90%, 50%);
  --purple500: hsl(270, 90%, 50%);
  --trans-dur: 0.3s;
  color-scheme: light dark;
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
}

body {
  background-color: light-dark(var(--gray50), var(--gray950));
  color: light-dark(var(--gray950), var(--gray50));
  display: grid;
  place-items: center;
  font: 1em/1.5 sans-serif;
  height: 100vh;
  transition: background-color var(--trans-dur), color var(--trans-dur);
}

main {
  padding: 1.5em 0;
}

.origami {
  --dur: 4s;
  aspect-ratio: 1;
  margin: auto;
  position: relative;
  width: 8em;
  transform-style: preserve-3d;
}
.origami__square, .origami__flap {
  position: absolute;
}
.origami__square {
  animation-name: square-color, square-twist;
  background-color: var(--orange500);
  inset: 6.25%;
  width: 87.5%;
  height: 87.5%;
}
.origami__flap {
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  transform-origin: 50% 100%;
}
.origami__flap:before, .origami__flap:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.origami__flap:before {
  animation-name: flap-color, flap-rotate-fix;
  background-color: var(--orange500);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  height: 200%;
  transform: translate3d(0, -50%, 0);
}
.origami__flap:after {
  animation-name: flap-color, flap-rotate;
  background-color: var(--hotpink500);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  height: 100%;
  transform-origin: 50% 0;
}
.origami__flap:nth-child(2) {
  transform: rotate(90deg);
}
.origami__flap:nth-child(3) {
  transform: rotate(180deg);
}
.origami__flap:nth-child(4) {
  transform: rotate(270deg);
}
.origami__square, .origami__flap:before, .origami__flap:after {
  animation-duration: var(--dur), calc(var(--dur) / 4);
  animation-iteration-count: infinite;
}
.origami__square, .origami__flap:after {
  animation-timing-function: steps(1, end), cubic-bezier(0.37, 0, 0.63, 1);
}
.origami__flap:before {
  animation-timing-function: steps(1, end), cubic-bezier(0.61, 1, 0.88, 1);
}

/* Animation */
@keyframes square-color {
  from, to {
    background-color: var(--orange500);
  }
  25% {
    background-color: var(--blue500);
  }
  50% {
    background-color: var(--purple500);
  }
  75% {
    background-color: var(--hotpink500);
  }
}
@keyframes square-twist {
  from {
    transform: rotate(0) scale(1);
  }
  to {
    transform: rotate(45deg) scale(0.7071067812);
  }
}
@keyframes flap-color {
  from, 87.5%, to {
    background-color: var(--hotpink500);
  }
  12.5%, 25% {
    background-color: var(--orange500);
  }
  37.5%, 50% {
    background-color: var(--blue500);
  }
  62.5%, 75% {
    background-color: var(--purple500);
  }
}
@keyframes flap-rotate {
  from {
    transform: rotateX(0);
  }
  to {
    transform: rotateX(-180deg);
  }
}
@keyframes flap-rotate-fix {
  from, 50% {
    transform: translate3d(0, -50%, 0) scaleY(0);
  }
  to {
    transform: translate3d(0, -50%, 0) scaleY(1);
  }
}