/* Review homepage only: reveal the explanation without moving its card. */
#shift .shift-col.before .shift-list > li > div > small {
  color: #ff9297;
  opacity: 1;
  transform: none;
}

#shift .shift-col.before .shift-list > li.before-explanation-ready > div > small {
  transition: opacity 1.6s ease, transform 1.6s cubic-bezier(.22, .61, .36, 1);
}

#shift .shift-col.before .shift-list > li.before-explanation-ready:not(.is-explanation-visible) > div > small {
  opacity: 0;
  transform: translateY(5px);
}

/* A static completed state also works when JavaScript is unavailable. */
#shift .shift-col.before .shift-list > li,
#shift .shift-col.after .shift-list > li {
  --shift-result-color: #ff7b7b;
  position: relative;
  padding-right: 46px;
}

#shift .shift-col.after .shift-list > li { --shift-result-color: #69e6a3; }
#shift .shift-col.before .shift-list > li > div,
#shift .shift-col.after .shift-list > li > div { min-width: 0; }

#shift .shift-col.before .shift-list > li::after,
#shift .shift-col.after .shift-list > li::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--shift-result-color);
  transform: scaleX(1);
  transform-origin: left center;
  pointer-events: none;
}

#shift .shift-col.before .shift-list > li::before,
#shift .shift-col.after .shift-list > li::before {
  content: '';
  position: absolute;
  right: 12px;
  top: 50%;
  width: 22px;
  height: 22px;
  transform: translateY(-50%);
  opacity: 1;
  background: center / contain no-repeat;
  pointer-events: none;
}

#shift .shift-col.before .shift-list > li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 6 12 12M18 6 6 18' fill='none' stroke='%23ff7b7b' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
#shift .shift-col.after .shift-list > li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5 9.5 17 19 7' fill='none' stroke='%2369e6a3' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

#shift .shift-col .shift-list > li.shift-progress-ready:not(.is-progress-running):not(.is-progress-complete)::after {
  transform: scaleX(0);
}
#shift .shift-col .shift-list > li.shift-progress-ready:not(.is-progress-running):not(.is-progress-complete)::before {
  opacity: 0;
}
#shift .shift-col .shift-list > li.is-progress-running::after {
  animation: shift-row-line .6s cubic-bezier(.22, .61, .36, 1) both;
}
#shift .shift-col .shift-list > li.is-progress-running::before {
  animation: shift-row-mark .0667s ease-out .6s both;
}

@keyframes shift-row-line {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes shift-row-mark {
  from { opacity: 0; transform: translateY(-50%) scale(.8); }
  to { opacity: 1; transform: translateY(-50%) scale(1); }
}

.motion-paused #shift .shift-col.before .shift-list > li.before-explanation-ready > div > small {
  opacity: 1;
  transform: none;
  transition: none;
}

.motion-paused #shift .shift-col .shift-list > li.shift-progress-ready::after,
.motion-paused #shift .shift-col .shift-list > li.shift-progress-ready::before {
  animation: none !important;
  opacity: 1 !important;
}
.motion-paused #shift .shift-col .shift-list > li.shift-progress-ready::after { transform: scaleX(1) !important; }
.motion-paused #shift .shift-col .shift-list > li.shift-progress-ready::before { transform: translateY(-50%) !important; }

@media (prefers-reduced-motion: reduce) {
  #shift .shift-col.before .shift-list > li.before-explanation-ready > div > small {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  #shift .shift-col .shift-list > li.shift-progress-ready::after,
  #shift .shift-col .shift-list > li.shift-progress-ready::before {
    animation: none !important;
    opacity: 1 !important;
  }
  #shift .shift-col .shift-list > li.shift-progress-ready::after { transform: scaleX(1) !important; }
  #shift .shift-col .shift-list > li.shift-progress-ready::before { transform: translateY(-50%) !important; }
}