/* ============================================================
   Three.js Corporate Background — bg.css
   bg-test.html 移植版
   読み込み順: theme-base → global-style → theme-colors → bg-style
   ============================================================ */

/* bodyのグラデーション背景（Three.js canvasの描画色と合わせたライトテーマ） */
body {
  background:
    radial-gradient(circle at 20% 20%, rgba(65, 232, 222, 0.12), transparent 28%),
    radial-gradient(circle at 80% 30%, rgba(255, 255, 255, 0.9), transparent 25%),
    linear-gradient(135deg, #f7fbfc 0%, #e7eef1 48%, #d8e1e6 100%);
}

/* 光沢・フレアオーバーレイ */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(
      120deg,
      rgba(255, 255, 255, 0.28),
      transparent 40%,
      rgba(255, 255, 255, 0.18) 70%,
      transparent 100%
    );
  mix-blend-mode: screen;
  opacity: 0.7;
}

/* アクセントカラーの柔らかいグロー */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(65, 232, 222, 0.08), transparent 45%);
  filter: blur(30px);
  opacity: 0.9;
}

/* Three.js canvas — 全画面固定、コンテンツの背後 */
canvas#bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
}

/* ============================================================
   z-index 再設計
   -1 : (なし)
    0 : canvas#bg / body::before / body::after
    1 : ページコンテンツ（.top-page / .wp-site-blocks 等）
 9999 : header（固定ヘッダー） / #loading-screen
   ============================================================ */

/* WordPressブロックテーマのコンテンツラッパー */
.wp-site-blocks {
  position: relative;
  z-index: 1;
}

/* FSEテンプレート直下の main 要素 */
body > main,
.top-page {
  position: relative;
  z-index: 1;
}