/* ================================================================
   6. 第三屏 — 3D 轮播 + Lightbox + 视频播放器
   【Safari 兼容修复版】
   ================================================================ */

/* ── 粘性视口 ── */
.h-viewport {
  position: sticky !important;
  top: 0 !important;
  height: 100vh;
  width: 100%;
  /* ❌ 移除 overflow: hidden —— Safari 中会截断 3D 子元素 */
  /* overflow: hidden; */
  overflow: clip; /* ✅ 替代方案：clip 不影响 3D 渲染上下文 */
  background-color: #ffc000;

  /* ✅ Safari 需要显式创建新的合成层 */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* ── 第三屏静态网格背景 ── */
.p3-static-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  background-image: var(--grid-image);
  background-size: var(--grid-size) var(--grid-size);
}

/* ── 3D 场景容器 ── */
.h-3d-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  /* ✅ Safari 需要 -webkit- 前缀 */
  -webkit-perspective: 2000px;
  perspective: 2000px;

  /* ✅ 关键：确保 Safari 不会扁平化 3D 子元素 */
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;

  z-index: 1;
}

/* ── 3D 轨道 ── */
.h-track {
  position: relative;
  width: 100%;
  height: 100%;

  /* ✅ Safari 前缀 */
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;

  will-change: transform;
  transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.h-panel {
  position: absolute;
  top: 50%;
  left: 50%;

  /* ✅ Safari 修复：用 CSS 变量 + translate 居中，替代负 margin */
  --panel-w: clamp(300px, 40vw, 640px);
  --panel-h: clamp(169px, 40vh, 360px);

  width: var(--panel-w);
  height: var(--panel-h);

  /* ❌ 移除原来的负 margin：
     margin-top: calc(clamp(169px, 40vh, 360px) / -2);
     margin-left: calc(clamp(300px, 40vw, 640px) / -2);
  */
  margin: 0; /* ✅ 居中由 JS 的 translate(-50%,-50%) 完成 */

  padding: 0;
  box-sizing: border-box;
  background: transparent;
  border-radius: 16px;
  overflow: visible;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.3;
  filter: brightness(0.8);
  transition:
    box-shadow 0.4s ease,
    opacity 0.4s ease,
    filter 0.4s ease;

  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;

  /* ✅ Safari 前缀 */
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

/* Safari 初始化重绘辅助类（配合 JS 使用，不影响视觉） */
.safari-init-repaint {
  /* 触发一次合成层重建，但不改变任何视觉属性 */
  -webkit-transform: translateZ(0.01px);
  transform: translateZ(0.01px);
}

/* ── 圆点容器 & 圆点（无变化，省略） ── */
.h-dots {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  z-index: 100;
  pointer-events: auto;
}

.h-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  background: transparent;
  cursor: pointer;
  padding: 0;
  margin: 0;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.h-dot.active {
  background: #ffffff;
  border-color: #ffffff;
  transform: scale(1.2);
}

.h-dot:hover {
  background: rgba(255, 255, 255, 0.5);
}

/* ── 媒体卡片 ── */
.media-card {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  border: none;
  transition:
    transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow 0.4s ease;
  -webkit-user-select: none;
  user-select: none;

  /* ✅ Safari：强制 GPU 合成，避免 3D 闪烁 */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.media-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: radial-gradient(
    ellipse at center,
    transparent 60%,
    rgba(0, 0, 0, 0.35) 100%
  );
  z-index: 2;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.media-card:hover::before,
.media-card.is-hover::before {
  opacity: 0;
}

.media-card:hover,
.media-card.is-hover {
  transform: scale(1.05) translateZ(0); /* ✅ 保持 Z 轴 */
  box-shadow:
    0 0 2px rgba(255, 255, 255, 1),
    0 0 3px rgba(255, 255, 255, 0.7),
    0 0 4px rgba(255, 255, 255, 0.4),
    0 0 5px rgba(255, 255, 255, 0.15);
}

.media-card img,
.media-card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
  pointer-events: none;
}

.media-card:hover img,
.media-card.is-hover img,
.media-card:hover video,
.media-card.is-hover video {
  transform: scale(1.06);
}

/* Lightbox 部分不变，此处省略... */