/* motion-photo.css — 集暇主题动态图片播放样式 */

/* 定位上下文：
   - grid 内是 .lazyload-outer-wrap（已加 position: relative）
   - standalone 是 figure.jishang-img
   - JS 还会额外打上 .motion-photo-media class */
figure.jishang-img-is-motion,
.grid-item.jishang-img-is-motion .lazyload-outer-wrap,
.motion-photo-media {
  position: relative;
  display: block;
}

/* 让 <a class="gallery-item"> 成为可定位的祖先 */
.motion-photo-media > a.gallery-item {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 4px;
}

/* 视频层叠在图片区上方 */
.motion-photo-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 2;
  background: transparent;
}

.motion-photo-container.motion-photo-playing .motion-photo-video {
  opacity: 1;
}

/* 播放中：图片淡出 */
.motion-photo-container.motion-photo-playing
  .motion-photo-media
  img {
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Apple Live Photo 风格按钮 */
.motion-photo-btn.live-trigger {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 10;
  height: 32px;
  padding: 0 10px 0 8px;
  border: none;
  background-color: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  opacity: 0.95;
  transition: opacity 0.2s ease, background 0.2s ease, transform 0.15s ease;
  font: inherit;
  color: inherit;
}

.motion-photo-btn.live-trigger:hover {
  opacity: 1;
  background-color: rgba(255, 255, 255, 0.85);
  transform: scale(1.05);
}

.motion-photo-btn.live-trigger:active {
  transform: scale(0.98);
}

.motion-photo-btn.live-trigger:disabled {
  cursor: wait;
  opacity: 0.6;
}

/* 触发图标：div + base64 SVG 背景图。
   用 div 而非 <img> 是因为 <img> + CSS transform 在某些浏览器下
   渲染异常（图消失）。div 是普通 HTML 元素，transform 稳定。 */
.motion-photo-btn .trigger-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNzgzNTgwOTQwMDgwIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjIxNjQiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTUyMC4xNDkzMzMgODUzLjI0OGE0Mi42NjY2NjcgNDIuNjY2NjY3IDAgMSAxIDIuMDA1MzM0IDg1LjMzMzMzM0w1MTIgOTM4LjY2NjY2N2wtMTAuMTU0NjY3LTAuMTI4YTQyLjY2NjY2NyA0Mi42NjY2NjcgMCAxIDEgMi4wMDUzMzQtODUuMzMzMzM0TDUxMiA4NTMuMzMzMzMzbDguMTQ5MzMzLTAuMDg1MzMzeiBtMjI4LjEzODY2Ny0zNS41NDEzMzNhNDIuNjY2NjY3IDQyLjY2NjY2NyAwIDAgMS0xNC4xNjUzMzMgNTguNjY2NjY2IDQyNi40OTYgNDI2LjQ5NiAwIDAgMS0xNy41Nzg2NjcgMTAuMTU0NjY3IDQyLjY2NjY2NyA0Mi42NjY2NjcgMCAwIDEtNDAuOTYtNzQuODhjNC43MzYtMi41NiA5LjQyOTMzMy01LjI5MDY2NyAxNC4wOC04LjEwNjY2N2E0Mi42NjY2NjcgNDIuNjY2NjY3IDAgMCAxIDU4LjYyNCAxNC4xNjUzMzR6IG0tNDEzLjkwOTMzMy0xNC4xNjUzMzRjNC42MDggMi44MTYgOS4zMDEzMzMgNS41NDY2NjcgMTQuMDggOC4xMDY2NjdhNDIuNjY2NjY3IDQyLjY2NjY2NyAwIDAgMS00MS4wMDI2NjcgNzQuODhjLTUuOTczMzMzLTMuMjQyNjY3LTExLjgxODY2Ny02LjY1Ni0xNy41Nzg2NjctMTAuMTU0NjY3YTQyLjY2NjY2NyA0Mi42NjY2NjcgMCAxIDEgNDQuNTAxMzM0LTcyLjgzMnpNNTEyIDI1NmEyNTYgMjU2IDAgMSAxIDAgNTEyIDI1NiAyNTYgMCAwIDEgMC01MTJ6IG0zNTcuNTQ2NjY3IDQwMi42NDUzMzNhNDIuNjY2NjY3IDQyLjY2NjY2NyAwIDAgMSAxNi45ODEzMzMgNTcuODk4NjY3Yy0zLjI0MjY2NyA1Ljk3MzMzMy02LjY1NiAxMS44MTg2NjctMTAuMTU0NjY3IDE3LjU3ODY2N2E0Mi42NjY2NjcgNDIuNjY2NjY3IDAgMCAxLTcyLjgzMi00NC41MDEzMzRjMi44MTYtNC42MDggNS41NDY2NjctOS4zMDEzMzMgOC4xMDY2NjctMTQuMDhhNDIuNjY2NjY3IDQyLjY2NjY2NyAwIDAgMSA1Ny45NDEzMzMtMTYuODk2eiBtLTY1Ny4xOTQ2NjcgMTYuOTM4NjY3YzIuNTYgNC43MzYgNS4yOTA2NjcgOS40MjkzMzMgOC4xMDY2NjcgMTQuMDhhNDIuNjY2NjY3IDQyLjY2NjY2NyAwIDEgMS03Mi44MzIgNDQuNDU4NjY3IDQyNS41NTczMzMgNDI1LjU1NzMzMyAwIDAgMS0xMC4xNTQ2NjctMTcuNTc4NjY3IDQyLjY2NjY2NyA0Mi42NjY2NjcgMCAwIDEgNzQuODgtNDAuOTZ6TTUxMiAzNDEuMzMzMzMzYTE3MC42NjY2NjcgMTcwLjY2NjY2NyAwIDEgMCAwIDM0MS4zMzMzMzQgMTcwLjY2NjY2NyAxNzAuNjY2NjY3IDAgMCAwIDAtMzQxLjMzMzMzNHogbTAgODUuMzMzMzM0YTg1LjMzMzMzMyA4NS4zMzMzMzMgMCAxIDEgMCAxNzAuNjY2NjY2IDg1LjMzMzMzMyA4NS4zMzMzMzMgMCAwIDEgMC0xNzAuNjY2NjY2eiBtLTM4Mi44OTA2NjcgMzMuNDkzMzMzYTQyLjY2NjY2NyA0Mi42NjY2NjcgMCAwIDEgNDEuNjQyNjY3IDQzLjY5MDY2N0wxNzAuNjY2NjY3IDUxMmMwIDIuNzMwNjY3IDAgNS40NjEzMzMgMC4wODUzMzMgOC4xNDkzMzNhNDIuNjY2NjY3IDQyLjY2NjY2NyAwIDAgMS04NS4zMzMzMzMgMi4wMDUzMzRMODUuMzMzMzMzIDUxMmMwLTMuNDEzMzMzIDAtNi44MjY2NjcgMC4xMjgtMTAuMTU0NjY3YTQyLjY2NjY2NyA0Mi42NjY2NjcgMCAwIDEgNDMuNjQ4LTQxLjY4NTMzM3ogbTc2NS43ODEzMzQgMGE0Mi42NjY2NjcgNDIuNjY2NjY3IDAgMCAxIDQzLjY0OCA0MS42ODUzMzNMOTM4LjY2NjY2NyA1MTJsLTAuMTI4IDEwLjE1NDY2N2E0Mi42NjY2NjcgNDIuNjY2NjY3IDAgMSAxLTg1LjMzMzMzNC0yLjAwNTMzNEw4NTMuMzMzMzMzIDUxMmwtMC4wODUzMzMtOC4xNDkzMzNhNDIuNjY2NjY3IDQyLjY2NjY2NyAwIDAgMSA0MS42NDI2NjctNDMuNjkwNjY3eiBtLTE4LjUxNzMzNC0xNzAuMjgyNjY3YzMuNDk4NjY3IDUuNzYgNi45MTIgMTEuNjQ4IDEwLjE1NDY2NyAxNy41Nzg2NjdhNDIuNjY2NjY3IDQyLjY2NjY2NyAwIDEgMS03NC44OCA0MC45NiAzNDAuNzc4NjY3IDM0MC43Nzg2NjcgMCAwIDAtOC4xMDY2NjctMTQuMDggNDIuNjY2NjY3IDQyLjY2NjY2NyAwIDEgMSA3Mi44MzItNDQuNDU4NjY3ek0yMDYuMjkzMzMzIDI3NS43MTJhNDIuNjY2NjY3IDQyLjY2NjY2NyAwIDAgMSAxNC4xNjUzMzQgNTguNjY2NjY3Yy0yLjgxNiA0LjYwOC01LjU0NjY2NyA5LjMwMTMzMy04LjEwNjY2NyAxNC4wOGE0Mi42NjY2NjcgNDIuNjY2NjY3IDAgMSAxLTc0Ljg4LTQxLjAwMjY2N2MzLjI0MjY2Ny01Ljk3MzMzMyA2LjY1Ni0xMS44MTg2NjcgMTAuMTU0NjY3LTE3LjU3ODY2N2E0Mi42NjY2NjcgNDIuNjY2NjY3IDAgMCAxIDU4LjY2NjY2Ni0xNC4xNjUzMzN6IG01MTAuMjUwNjY3LTEzOC4yNGM1Ljk3MzMzMyAzLjI0MjY2NyAxMS44MTg2NjcgNi42NTYgMTcuNTc4NjY3IDEwLjE1NDY2N2E0Mi42NjY2NjcgNDIuNjY2NjY3IDAgMCAxLTQ0LjUwMTMzNCA3Mi44MzIgMzQwLjQzNzMzMyAzNDAuNDM3MzMzIDAgMCAwLTE0LjA4LTguMTA2NjY3IDQyLjY2NjY2NyA0Mi42NjY2NjcgMCAxIDEgNDEuMDAyNjY3LTc0Ljg4eiBtLTM1MS4xNDY2NjcgMTYuOTM4NjY3YTQyLjY2NjY2NyA0Mi42NjY2NjcgMCAwIDEtMTYuOTgxMzMzIDU3Ljk0MTMzMyAzNDAuNzM2IDM0MC43MzYgMCAwIDAtMTQuMDggOC4xMDY2NjdBNDIuNjY2NjY3IDQyLjY2NjY2NyAwIDAgMSAyODkuOTIgMTQ3LjYyNjY2N2M1Ljc2LTMuNDk4NjY3IDExLjY0OC02LjkxMiAxNy41Nzg2NjctMTAuMTU0NjY3YTQyLjY2NjY2NyA0Mi42NjY2NjcgMCAwIDEgNTcuODk4NjY2IDE2LjkzODY2N3ogbTE1Ni43NTczMzQtNjguOTQ5MzM0YTQyLjY2NjY2NyA0Mi42NjY2NjcgMCAwIDEtMi4wMDUzMzQgODUuMzMzMzM0TDUxMiAxNzAuNjY2NjY3bC04LjE0OTMzMyAwLjA4NTMzM2E0Mi42NjY2NjcgNDIuNjY2NjY3IDAgMCAxLTIuMDA1MzM0LTg1LjMzMzMzM0w1MTIgODUuMzMzMzMzbDEwLjE1NDY2NyAwLjEyOHoiIHAtaWQ9IjIxNjUiPjwvcGF0aD48L3N2Zz4=");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  transform-origin: center center;
  will-change: transform;
}

/* 播放中：div 旋转（背景图跟着转，图标"在转"）
   规则适配两种场景：
   - 文档里的 figure（hexo 页面）：.motion-photo-container.motion-photo-playing
   - PhotoSwipe 灯箱里：.motion-photo-btn.live-trigger.playing（按钮直接加 .playing 类） */
.motion-photo-container.motion-photo-playing .motion-photo-btn .trigger-icon,
.motion-photo-btn.live-trigger.playing .trigger-icon {
  animation: motion-photo-spin 2s linear infinite;
}

@keyframes motion-photo-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.motion-photo-btn .trigger-text {
  color: #232323;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  line-height: 1;
  user-select: none;
}

@media (max-width: 600px) {
  .motion-photo-btn.live-trigger {
    height: 28px;
    top: 8px;
    left: 8px;
    padding: 0 8px 0 6px;
  }
  .motion-photo-btn .trigger-icon {
    width: 18px;
    height: 18px;
  }
  .motion-photo-btn .trigger-text {
    font-size: 11px;
  }
}