@property --state-top-corners {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 0%;
}

@property --state-top-center {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 0%;
}

@property --state-bottom-corners {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 0%;
}

@property --state-bottom-center {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 0%;
}

body {
  background: #F0F0F0;
}

span {
  --speed: 7s;
  --delay: calc(sibling-index() * 80ms);
  
  position: fixed;
  inset: 0; /* 10vmin; */
  
  clip-path: shape(
    from 0% var(--state-top-corners, 0%),
    line to 50% var(--state-top-center, 0%),
    line to 100% var(--state-top-corners, 0%),
    line to 100% var(--state-bottom-corners, 0%),
    line to 50% var(--state-bottom-center, 0%),
    line to 0% var(--state-bottom-corners, 0%),
    close
  );

  animation:
    move var(--speed, 10s) var(--delay, 0s) ease-in-out infinite,
    colors var(--speed, 10s) var(--delay, 0s) ease-in-out infinite;
}

@keyframes move {
  12% {
    --state-top-corners: 0%;
    --state-top-center: 0%;
    --state-bottom-corners: 0%;
    --state-bottom-center: 0%;
  }
  24%, 28% {
    --state-top-corners: 0%;
    --state-top-center: 0%;
    --state-bottom-corners: 0%;
    --state-bottom-center: 100%;
  }
  40%,
  60% {
    --state-top-corners: 0%;
    --state-top-center: 0%;
    --state-bottom-corners: 100%;
    --state-bottom-center: 100%;
  }
  72%, 76% {
    --state-top-corners: 0%;
    --state-top-center: 100%;
    --state-bottom-corners: 100%;
    --state-bottom-center: 100%;
  }
  88% {
    --state-top-corners: 100%;
    --state-top-center: 100%;
    --state-bottom-corners: 100%;
    --state-bottom-center: 100%;
  }
}

@keyframes colors {
  0%, 50% {
    z-index: sibling-index();
    
    --c1: #F0F0F0; /* white */
    --c2: #E73334; /* red */
    --c3: #F19EAC; /* orange */
    --c4: #F9D94C; /* yellow */
    --c5: #49A372; /* green */
    --c6: #2D38D1; /* blue */
    --c7: #6325C6; /* purple */
    --c8: #000000; /* black */
  }
  51%, 100% {
    z-index: calc(sibling-count() - sibling-index());
    
    --c8: #F0F0F0; /* white */
    --c7: #E73334; /* red */
    --c6: #F19EAC; /* orange */
    --c5: #F9D94C; /* yellow */
    --c4: #49A372; /* green */
    --c3: #2D38D1; /* blue */
    --c2: #6325C6; /* purple */
    --c1: #000000; /* black */
  }
}

span:nth-of-type(1) { background: var(--c1); }
span:nth-of-type(2) { background: var(--c2); }
span:nth-of-type(3) { background: var(--c3); }
span:nth-of-type(4) { background: var(--c4); }
span:nth-of-type(5) { background: var(--c5); }
span:nth-of-type(6) { background: var(--c6); }
span:nth-of-type(7) { background: var(--c7); }
span:nth-of-type(8) { background: var(--c8); }