/* 上から下へ、柔らかな波の境界で画像を表示するアニメーション */
@keyframes gameha-wave-reveal {
  0% {
    clip-path: polygon(0 0, 100% 0, 100% 0, 82% 2%, 64% 0, 46% 3%, 27% 0, 10% 2%, 0 0);
    opacity: 0;
    transform: scale(1.035);
    filter: blur(8px) saturate(.8);
  }
  24% {
    clip-path: polygon(0 0, 100% 0, 100% 24%, 84% 29%, 67% 23%, 49% 30%, 31% 24%, 14% 28%, 0 25%);
    opacity: .72;
  }
  52% {
    clip-path: polygon(0 0, 100% 0, 100% 52%, 85% 58%, 67% 50%, 50% 59%, 31% 51%, 14% 57%, 0 53%);
    opacity: .92;
    filter: blur(2px) saturate(.95);
  }
  78% {
    clip-path: polygon(0 0, 100% 0, 100% 78%, 84% 84%, 66% 77%, 49% 85%, 31% 78%, 14% 83%, 0 79%);
  }
  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    opacity: 1;
    transform: scale(1);
    filter: blur(0) saturate(1);
  }
}

.gameha-random-illustration__frame img.is-entering,
#random-image.is-entering {
  animation: gameha-wave-reveal 880ms cubic-bezier(.22,.72,.2,1) both;
  will-change: clip-path, opacity, transform, filter;
}

.gameha-random-illustration__caption.has-text,
#image-caption.has-text {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .gameha-random-illustration__frame img,
  #random-image,
  .gameha-random-illustration__caption,
  #image-caption {
    animation: none !important;
    transition: none !important;
  }
}