.rearview-loader {
  display: inline-block;
  max-width: 100%;
  vertical-align: middle;
  line-height: 0;
}

.rearview-loader > svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 280 / 244;
}

.rearview-ride {
  transform-box: view-box;
  transform-origin: 140px 24px;
  animation: rearview-road-bob 2.8s ease-in-out infinite;
}

.rearview-pendant {
  transform-box: view-box;
}

.rearview-pendant-front {
  transform-origin: 138px 108px;
  animation: rearview-dice-front 2.4s ease-in-out infinite;
}

.rearview-pendant-back {
  transform-origin: 149px 108px;
  animation: rearview-dice-back 2.7s ease-in-out -0.6s infinite;
}

@keyframes rearview-road-bob {
  0%, 100% {
    transform: translateY(0) rotate(-0.7deg);
  }
  22% {
    transform: translateY(3px) rotate(0.4deg);
  }
  43% {
    transform: translateY(-2px) rotate(0.6deg);
  }
  63% {
    transform: translateY(2px) rotate(-0.3deg);
  }
  82% {
    transform: translateY(-1px) rotate(-0.7deg);
  }
}

@keyframes rearview-dice-front {
  0%, 100% {
    transform: rotate(-10deg);
  }
  50% {
    transform: rotate(11deg);
  }
}

@keyframes rearview-dice-back {
  0%, 100% {
    transform: rotate(8deg);
  }
  50% {
    transform: rotate(-9deg);
  }
}

.rearview-study-stage {
  display: grid;
  place-items: center;
  min-height: 335px;
}

.rearview-study-compact {
  display: flex;
  justify-content: center;
  align-items: end;
  gap: 24px;
  flex-wrap: wrap;
}

.rearview-study-compact > div {
  display: grid;
  justify-items: center;
  gap: 8px;
}

.rearview-study-compact small {
  font-size: 11px;
}

.rearview-study[data-paused="true"] .rearview-ride,
.rearview-study[data-paused="true"] .rearview-pendant {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .rearview-ride, .rearview-pendant {
    animation: none;
  }
}