@keyframes appear-then-fade {
  0%, 100% {
    opacity:0
  }
  5%, 60% {
    opacity:1
  }
}

@keyframes scale-pop {
  0%, 100% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.012);
  }
}

.scale-pop {
  animation: scale-pop 240ms ease-out;
  transform-origin: center;
}

turbo-frame.scale-pop {
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .scale-pop {
    animation: none;
  }
}

/* A photo still being resized: its box in a soft pulse of the page's tint
   until it comes (see application.js). */
@keyframes image-pending {
  from { opacity: 1; }
  to { opacity: 0.5; }
}

img.image-pending {
  background-color: var(--color-store-200);
  animation: image-pending 900ms ease-in-out infinite alternate;

  @media (prefers-reduced-motion: reduce) {
    animation: none;
  }
}