/* 图集时间轴（Stories 式）。
   容器尺寸完全由父元素决定 —— 首页滑动模式里它铺满整屏卡片，
   详情页里它占据媒体区。 */

.gallery {
  position: relative;
  width: 100%;
  height: 100%;

  /* ⚠️ 裁剪**必须**放在这一层（有 transform 的 .gallery__stage 的父元素），
     绝对不能放到 .gallery__stage 自己身上。

     原因：当 overflow: hidden 和 transform 在同一个元素上时，浏览器不会对
     远端子元素做光栅化 —— 滑到第 2 张之后画面全黑，但 DOM 里检查一切正常
     （已解码、可见、尺寸正确、opacity 1），极难排查。
     裁剪在父元素上时，transformed 的子元素作为整体被光栅化，父元素负责裁切，
     就能正常绘制。

     这个 bug 桌面和手机都复现，跟内存无关 —— 印证了「DOM 属性都对但画面是黑的」
     就该往光栅化/合成方向查。 */
  overflow: hidden;
}

/* ---------------------------------------------------------------- 进度条 */

.gallery__bars {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 4;
  display: flex;
  gap: 3px;
  padding: 10px 10px 14px;
  background: linear-gradient(rgba(0, 0, 0, .42), transparent);
  pointer-events: none;
}

.gallery__bar {
  flex: 1;
  height: 2.5px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .32);
  overflow: hidden;
}

.gallery__bar > i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 2px;
  background: #fff;
  /* 不要加 transition：进度是每帧算好直接写进去的，
     加了过渡反而会滞后、出现拖尾 */
}

/* ---------------------------------------------------------------- 舞台 */

/* 刻意**不用**原生横向滚动（overflow-x: scroll + scroll-snap）。
   实测：只要这个元素是个横向滚动容器，落在它上面的纵向手势就会被它吃掉、
   链不到外层 feed —— 结果就是「在图片上起手的上下滑完全没反应，
   但落在图片外的文字上却正常」。这个差异极难排查，也基本毁掉滑动模式。

   改成 transform 位移 + touch-action: pan-y：
   浏览器明确知道「这个元素只接受纵向手势」，纵向就会正常链给 feed，
   横向拖拽则由 JS 自己处理（见 gallery.js 的 _bindGestures）。 */
.gallery__stage {
  display: flex;
  width: 100%;
  height: 100%;
  touch-action: pan-y;
  /* ⚠️ 这里**不能**写 overflow（原因见 .gallery 的说明：会和 transform
     一起导致远端子元素不被光栅化，滑过去一片黑）。裁剪交给父元素。 */

  /* 不用 will-change: transform —— 它会在祖先链上引入合成层，
     有可能影响外层 feed 的 scroll-snap。位移用 translate3d 就够 GPU 加速了。 */
}

.gallery__stage.is-animating {
  transition: transform .28s cubic-bezier(.22, .61, .36, 1);
}

.gallery__slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  scroll-snap-align: center;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.gallery__slide img,
.gallery__slide video {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* 实况图：静帧垫在下面，配对视频盖在上面 */
.gallery__slide .live { position: relative; width: 100%; height: 100%; }

/* ---------------------------------------------------------------- 状态 */

/* 暂停时给一个明确的视觉反馈，否则用户不知道是卡住了还是暂停了。
   两处都要覆盖，因为单个视频卡片**不建 Gallery**（见 gallery.js 的 needsTimeline），
   它的播放/暂停由 feed.js 单独处理 —— 但用户看到的反馈必须一致：
     .gallery      图集 / 实况卡片（Gallery._applyPaused 加类）
     .card__media  单个视频卡片（feed.js 的点击处理器加类） */
:is(.gallery, .card__media).is-paused::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, .5);
  /* 暂停图标用内联 SVG 背景，和 ui.js 那套图标同一形状 ——
     不要用 '❚❚' 这类字符，字形在不同设备上不一致。 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Crect x='7' y='5' width='3.6' height='14' rx='1.2'/%3E%3Crect x='13.4' y='5' width='3.6' height='14' rx='1.2'/%3E%3C/svg%3E");
  background-size: 26px 26px;
  background-repeat: no-repeat;
  background-position: center;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 5;
  pointer-events: none;
  animation: gallery-pop .18s ease-out;
}

@keyframes gallery-pop {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.8); }
}

/* 单张时不显示进度条（一段永远走满的条只会让人困惑） */
.gallery__bars[hidden] { display: none !important; }