/**
 * PC 端背景视觉效果（仅 H5 宽屏生效）
 *
 * 使用方式：
 *   1. import '@/style/pc-bg-effects.css'
 *   2. 给 body 加 class="pc-bg"（四角暗角）
 *   3. 给 550px 内容容器加 class="pc-bg-wrap"（呼吸阴影）
 *   4. 调用 initDotCanvas()（点阵画布，见 @/utils/dotCanvas.js）
 */

@media (min-width: 551px) {
  @keyframes pc-shadow-breathe {
    0%, 100% {
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.20),
        0 2px 8px rgba(0, 0, 0, 0.10),
        0 16px 48px rgba(0, 0, 0, 0.16),
        0 60px 120px rgba(0, 0, 0, 0.12);
    }
    50% {
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        0 2px 12px rgba(0, 0, 0, 0.14),
        0 24px 64px rgba(0, 0, 0, 0.22),
        0 80px 160px rgba(0, 0, 0, 0.18);
    }
  }

  /* body 加 class="pc-bg" → 四角柔和暗角 */
  body.pc-bg {
    overflow: hidden;
  }
  body.pc-bg::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
      radial-gradient(ellipse at top left,     rgba(0,0,0,0.22) 0%, transparent 38%),
      radial-gradient(ellipse at top right,    rgba(0,0,0,0.22) 0%, transparent 38%),
      radial-gradient(ellipse at bottom left,  rgba(0,0,0,0.22) 0%, transparent 38%),
      radial-gradient(ellipse at bottom right, rgba(0,0,0,0.22) 0%, transparent 38%);
    pointer-events: none;
    z-index: 0;
  }

  /* 内容容器加 class="pc-bg-wrap" → 呼吸阴影 */
  .pc-bg-wrap {
    position: relative;
    z-index: 1;
    animation: pc-shadow-breathe 6s ease-in-out infinite;
  }
}