/* Icon motion. Origins are in the icon's 24-unit space. */

/* Image: the sun arcs over the peak and sets behind the mountain. */

.icon-image-sun {
  transform-origin: 13.5px 12.5px;
  transition: transform 0.9s cubic-bezier(0.45, 0, 0.25, 1);
}

.reference-empty:hover .icon-image-sun,
.reference-empty.is-over .icon-image-sun {
  transform: rotate(180deg);
  transition-duration: 1.2s;
}

/* Dice: rolls on every new palette. */

.icon-dice {
  transform-origin: 12px 12px;
}

.is-rolling .icon-dice {
  animation: dice-roll 0.6s var(--spring);
}

@keyframes dice-roll {
  from {
    transform: rotate(-200deg) scale(0.8);
  }
}