/* ==========================================================
   3×3 APP案例 WebGL 交互展示（嵌入 index.html 用）
   样式作用域全部限定在 .cases-sec 下，不影响主站其他版块
   （page2.html 独立 demo 仍用 page2.css，两者互不依赖）
   ========================================================== */

.cases-sec .cases-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  user-select: none;
  -webkit-user-select: none;
}

/* 单 Canvas 覆盖整个网格（Scissor 多视口渲染） */
.cases-sec .cases-canvas {
  position: absolute; inset: 0;
  z-index: 1;
  display: block; width: 100%; height: 100%;
  pointer-events: none; /* 事件穿透到格子，由 JS 统一路由 */
}

.cases-sec .case-tile {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 20px;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 78% 8%, #ffffff 0%, #eef5ff 48%, #e4eefb 100%);
  border: 1px solid #e3eaf5;
  box-shadow: 0 6px 18px rgba(20, 41, 78, 0.05);
  cursor: crosshair;          /* JS 会按状态覆盖为 grab / grabbing */
  touch-action: pan-y;        /* 主站页面：保留触屏纵向滚动，拖整机交互以桌面为主 */
}

/* WebGL 不可用时的降级图
   注意：主站 style.css 有 `img { display:block }`，会覆盖 [hidden] 的 UA 隐藏，必须显式关掉 */
.cases-sec .case-fallback {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: top;
}
.cases-sec .case-fallback[hidden] { display: none; }
.cases-sec .case-tile.no3d { cursor: default; }

.cases-sec .live-label {
  position: absolute; left: 20px; bottom: 16px; z-index: 2;
  pointer-events: none;
  padding: 10px 16px 11px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.34);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 8px 22px rgba(20, 41, 78, 0.06);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.cases-sec .live-label strong {
  display: block; font-size: 14.5px; font-weight: 800; color: #14294e;
  text-shadow: 0 1px 6px rgba(255, 255, 255, 0.85);
}
.cases-sec .live-label span {
  display: block; font-size: 11.5px; color: #4a5c7d; margin-top: 2px; letter-spacing: .5px;
  text-shadow: 0 1px 6px rgba(255, 255, 255, 0.85);
}

.cases-sec .live-hint {
  position: absolute; top: 16px; left: 20px; z-index: 2;
  pointer-events: none;
  font-size: 11px; font-weight: 700; letter-spacing: 2px;
  color: #4e7fc0;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(201, 217, 242, 0.9);
}
.cases-sec .live-hint::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--primary, #315a95);
  animation: casesHintPulse 2s ease-out infinite;
}
@keyframes casesHintPulse {
  0%   { box-shadow: 0 0 0 0 rgba(49,90,149,.45); }
  70%  { box-shadow: 0 0 0 7px rgba(49,90,149,0); }
  100% { box-shadow: 0 0 0 0 rgba(49,90,149,0); }
}

/* ---------- 响应式 ---------- */
@media (max-width: 1024px) {
  .cases-sec .cases-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 640px) {
  .cases-sec .cases-grid { grid-template-columns: 1fr; gap: 14px; }
}