/* No bitmap placeholder: a lightweight, five-petal SVG preserves HDR image bytes. */
.pix-image-host {
  position: relative;
  display: block;
}

.pix-image-waiting {
  min-height: 96px;
}

.normal_card_content .feature > .pix-image-host,
.normal_grid_content .feature > .pix-image-host {
  height: 100%;
}

/* Keep existing square/tiled moment geometry, including narrow phone columns. */
.img_list .mo_img.pix-image-waiting {
  min-height: 0;
}

.img_list .list_inner[num="1"] .mo_img.pix-image-waiting {
  min-height: 96px;
}

img.pix-image-pending,
img.pix-image-failed {
  visibility: hidden;
}

.pix-image-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: inherit;
  background: #fcf2f6;
  color: #856b7d;
  pointer-events: none;
  font-size: 12px;
  text-align: center;
}

.dark .pix-image-placeholder {
  background: #382b3b;
  color: #d7bdcc;
}

.pix-sakura-loader .pix-sakura {
  display: block;
  width: 64px;
  height: 64px;
  max-width: 75%;
  max-height: 75%;
  overflow: visible;
  animation: none !important;
  margin: 0;
}

.pix-sakura-bloom {
  transform-origin: 50px 50px;
  animation: pix-sakura-bloom 3.2s infinite;
}

.pix-sakura-petal {
  fill: #e8a3bf;
  transform-origin: 50px 49px;
  animation: 3.2s infinite;
  opacity: 0;
}

.pix-sakura-petal-1, .pix-sakura-petal-3 { fill: #efb9cf; }
.pix-sakura-petal-0 { animation-name: pix-petal-0; }
.pix-sakura-petal-1 { animation-name: pix-petal-1; }
.pix-sakura-petal-2 { animation-name: pix-petal-2; }
.pix-sakura-petal-3 { animation-name: pix-petal-3; }
.pix-sakura-petal-4 { animation-name: pix-petal-4; }

.pix-sakura-center {
  fill: #fff0f6;
  animation: pix-sakura-center 3.2s infinite;
}

/* Only run for visible, still-loading images; no continuous scroll handler. */
.pix-sakura-loader:not(.is-visible) .pix-sakura *,
.pix-loaders-paused .pix-sakura-loader .pix-sakura * {
  animation-play-state: paused;
}

@keyframes pix-sakura-bloom {
  0%, 42% { transform: rotate(-12deg) scale(0.94); opacity: 1; }
  58% { transform: rotate(10deg) scale(1.16); opacity: 1; }
  65% { transform: rotate(14deg) scale(0.96); opacity: 1; }
  72% { transform: rotate(16deg) scale(1.04); opacity: 1; }
  90%, 100% { transform: rotate(34deg) scale(1.35); opacity: 0; }
}

@keyframes pix-sakura-center {
  0%, 38% { opacity: 0; }
  48%, 74% { opacity: 1; }
  90%, 100% { opacity: 0; }
}

@keyframes pix-petal-0 {
  0%, 2% { opacity: 0; transform: scale(0.15) translateY(5px); }
  9% { opacity: 1; transform: scale(1.16, 0.93); }
  13% { opacity: 1; transform: scale(0.95, 1.04); }
  18%, 72% { opacity: 1; transform: scale(1); }
  90%, 100% { opacity: 0; transform: translateY(-9px) scale(0.8); }
}

@keyframes pix-petal-1 {
  0%, 9% { opacity: 0; transform: scale(0.15) translateY(5px); }
  16% { opacity: 1; transform: scale(1.16, 0.93); }
  20% { opacity: 1; transform: scale(0.95, 1.04); }
  25%, 72% { opacity: 1; transform: scale(1); }
  90%, 100% { opacity: 0; transform: translateY(-9px) scale(0.8); }
}

@keyframes pix-petal-2 {
  0%, 16% { opacity: 0; transform: scale(0.15) translateY(5px); }
  23% { opacity: 1; transform: scale(1.16, 0.93); }
  27% { opacity: 1; transform: scale(0.95, 1.04); }
  32%, 72% { opacity: 1; transform: scale(1); }
  90%, 100% { opacity: 0; transform: translateY(-9px) scale(0.8); }
}

@keyframes pix-petal-3 {
  0%, 23% { opacity: 0; transform: scale(0.15) translateY(5px); }
  30% { opacity: 1; transform: scale(1.16, 0.93); }
  34% { opacity: 1; transform: scale(0.95, 1.04); }
  39%, 72% { opacity: 1; transform: scale(1); }
  90%, 100% { opacity: 0; transform: translateY(-9px) scale(0.8); }
}

@keyframes pix-petal-4 {
  0%, 30% { opacity: 0; transform: scale(0.15) translateY(5px); }
  37% { opacity: 1; transform: scale(1.16, 0.93); }
  41% { opacity: 1; transform: scale(0.95, 1.04); }
  46%, 72% { opacity: 1; transform: scale(1); }
  90%, 100% { opacity: 0; transform: translateY(-9px) scale(0.8); }
}

@media (prefers-reduced-motion: reduce) {
  .pix-sakura-loader .pix-sakura * {
    animation: none !important;
    opacity: 1;
  }
  .pix-sakura-loader .pix-sakura-bloom,
  .pix-sakura-loader .pix-sakura-petal {
    transform: none;
  }
}