.certainty-shift {
  height: auto;
}

.certainty-sticky {
  position: relative;
  top: auto;
  min-height: 900px;
  height: auto;
  padding-top: clamp(110px, 13vw, 180px);
  padding-bottom: clamp(250px, 25vw, 330px);
}

.certainty-sticky::before {
  opacity: .72;
  background: radial-gradient(circle at 72% 48%, #fff 0, #f4f4f1 30%, transparent 62%);
}

.certainty-line {
  font-size: clamp(58px, 8.4vw, 126px);
  line-height: .88;
}

.certainty-muted,
.certainty-clear,
.certainty-note,
.certainty-orbit {
  opacity: 0;
  transform: translate3d(12vw, 0, 0);
  transition: opacity .9s ease, transform 1.15s cubic-bezier(.16, .8, .2, 1);
}

.certainty-muted {
  width: max-content;
  max-width: 13ch;
  margin-left: clamp(12px, 2.5vw, 42px);
  padding-left: .04em;
  color: #969da7;
  background: none;
  filter: none;
}

.certainty-clear {
  max-width: 12ch;
  text-align: right;
  transition-delay: .12s;
}

.certainty-note {
  transition-delay: .24s;
}

.certainty-orbit {
  border: 0;
  transition-delay: .34s;
}

.certainty-shift.is-revealed .certainty-muted,
.certainty-shift.is-revealed .certainty-clear,
.certainty-shift.is-revealed .certainty-note {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.certainty-shift.is-revealed .certainty-orbit {
  opacity: 1;
  transform: scale(1);
}

.certainty-rotor {
  position: absolute;
  inset: 0;
  border: 1px solid #26292e24;
  border-radius: 50%;
  animation: certaintyWheelSpin 18s linear infinite;
  animation-play-state: paused;
}

.certainty-rotor::before {
  content: "";
  position: absolute;
  inset: 34px;
  border: 1px dashed #26292e2b;
  border-radius: 50%;
}

.certainty-orbit::before {
  display: none;
}

.certainty-core {
  transform: none;
}

.certainty-chip {
  translate: -50% -50%;
  animation: certaintyChipCounter 18s linear infinite;
  animation-play-state: paused;
}

.chip-image {
  top: 0;
  left: 50%;
}

.chip-receipt {
  top: 50%;
  right: auto;
  left: 100%;
}

.chip-value {
  top: 100%;
  bottom: auto;
  left: 50%;
}

.chip-appraisal {
  top: 50%;
  left: 0;
}

.certainty-orbit.is-spinning .certainty-rotor,
.certainty-orbit.is-spinning .certainty-chip {
  animation-play-state: running;
}

@keyframes certaintyWheelSpin {
  to { transform: rotate(360deg); }
}

@keyframes certaintyChipCounter {
  to { transform: rotate(-360deg); }
}

@media (max-width: 800px) {
  .certainty-sticky {
    min-height: 820px;
    padding-bottom: 260px;
  }

  .certainty-line {
    font-size: clamp(48px, 13vw, 78px);
  }

  .certainty-clear {
    align-self: flex-start;
    text-align: left;
  }

  .certainty-note {
    margin-bottom: 0;
  }

  .certainty-orbit,
  .certainty-shift.is-revealed .certainty-orbit {
    left: 50%;
    transform: translateX(-50%);
  }

  .certainty-rotor::before {
    inset: 26px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .certainty-muted,
  .certainty-clear,
  .certainty-note,
  .certainty-orbit {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .certainty-rotor,
  .certainty-chip {
    animation: none;
  }
}

@media (max-width: 800px) and (prefers-reduced-motion: reduce) {
  .certainty-orbit {
    transform: translateX(-50%);
  }
}