@charset "UTF-8";

/**
 * Deep-Green Grainy Gradient Background
 *
 * 深緑のグラデーション背景に、inline SVGノイズを重ねた
 * ミニマルでプロフェッショナルな背景スタイル
 *
 * @package Hickory
 * @since 1.0.0
 */

/************************************
** カラーパレット
************************************/
:root {
  /* Deep Green Gradient Colors */
  --bg-deep: #0b1a14;      /* 最も暗い深緑 */
  --bg-mid: #0f2f23;       /* 中間の深緑 */
  --bg-soft: #143c2b;      /* 柔らかい深緑 */
  --text: #e6f2ec;         /* 背景上の本文テキスト推奨色 */

  /* Text Colors for Accessibility */
  --text-on-dark: #e6f2ec; /* 背景上の本文テキスト推奨色 */
  --text-muted-on-dark: #b8d4c5; /* 控えめなテキスト */

  /* Noise Settings (調整可能なトークン) */
  --noise-a-opacity: 0.05;    /* ノイズレイヤーAの不透明度 */
  --noise-b-opacity: 0.03;    /* ノイズレイヤーBの不透明度 */
  --noise-a-frequency: 1.2;   /* レイヤーAの周波数（細かさ） */
  --noise-b-frequency: 1.0;   /* レイヤーBの周波数 */
  --vignette-opacity: 0.10;   /* ビネット（周辺減光）の強さ（弱め） */
}

/************************************
** Film-Grain Noise Pattern (inline SVG)
************************************/
/*
 * フィルム粒子のような細かい砂目ノイズ
 *
 * 重要な設定:
 * - type="fractalNoise" (パーリンノイズ)
 * - numOctaves="1" (単層で砂目に、複層にすると小石状になる)
 * - stitchTiles="stitch" (シームレス継ぎ目)
 * - baseFrequency: 1.0〜1.6 の範囲（細かい粒子）
 *
 * 2レイヤー構成:
 * - Layer A (::before): 1024px, baseFrequency=1.2, seed=7, opacity=0.05
 * - Layer B (::after):  768px,  baseFrequency=1.0, seed=13, opacity=0.03
 *
 * リピート感を軽減するため、サイズ・周波数・seedを変えている
 */

/************************************
** Deep-Green Gradient Background
************************************/
/*
 * 画面全体の背景設定
 *
 * レイヤー構成:
 * 1. linear-gradient (斜め深緑グラデーション)
 * 2. radial-gradient (弱いビネット - 中央は明るく保つ)
 * 3. SVGノイズA (::before) - 1024px, 細かい粒子
 * 4. SVGノイズB (::after)  - 768px,  別seedでリピート感軽減
 *
 * blend-mode: normal, multiply (ビネットを乗算で暗く)
 */

html, body {
  height: 100%;
}

/*
 * 背景を白ベースに変更
 * ヒーローセクションとCTAセクションのみ深緑グラデーションを使用
 */
body {
  min-height: 100%;
  background-color: #ffffff;
  color: #1A1A1A;
  position: relative;
  overflow-x: hidden;
}

/* コンテンツ */
body > * {
  position: relative;
  z-index: 2;
}

/************************************
** テスト確認ポイント（ユニットテスト的チェック）
************************************/
/*
 * ✅ 砂目になっているか確認:
 *   - numOctaves=1 であることを確認
 *   - 雲模様や小石状（pebble）になっていない
 *   - フィルム粒子のような均一な細かさ
 *
 * ✅ 4K画面での確認:
 *   - 1024px と 768px のタイルでリピートしている
 *   - 継ぎ目が目立たない（stitchTiles='stitch'）
 *   - モアレが発生していない（2レイヤーでリピート感を崩している）
 *
 * ✅ コントラスト確認:
 *   - 白文字（#ffffff）が見出しで使える
 *   - 本文（#e6f2ec）が WCAG AA 基準（4.5:1以上）
 *
 * ✅ ビネット確認:
 *   - 中央は暗くなっていない
 *   - 左上が最も明るく、右下に向けて自然に暗くなる
 *   - opacity 0.10 程度の弱いビネット
 *
 * ✅ ノイズ調整:
 *   - opacity が強すぎる場合: --noise-a-opacity を 0.03 に下げる
 *   - 粒子が粗い場合: baseFrequency を 1.4〜1.6 に上げる
 *   - リピートが目立つ場合: タイルサイズを 2048px に拡大
 */

/************************************
** バリエーション
************************************/
/* より強いノイズ */
.bg-deep-grain--heavy-noise {
  --noise-a-opacity: 0.08;
  --noise-b-opacity: 0.05;
}

/* 弱いノイズ */
.bg-deep-grain--light-noise {
  --noise-a-opacity: 0.03;
  --noise-b-opacity: 0.02;
}

/* より細かいノイズ */
.bg-deep-grain--fine-noise {
  --noise-a-frequency: 1.5;
  --noise-b-frequency: 1.3;
}

/* より粗いノイズ */
.bg-deep-grain--coarse-noise {
  --noise-a-frequency: 0.8;
  --noise-b-frequency: 0.6;
}

/* ビネットなし */
.bg-deep-grain--no-vignette {
  --vignette-opacity: 0;
}

/* 強いビネット */
.bg-deep-grain--strong-vignette {
  --vignette-opacity: 0.3;
}

/************************************
** セクション用の背景バリエーション
************************************/
/* 明るめの深緑背景（セクション用） */
.section-bg-soft {
  background-color: var(--bg-soft);
  background-image:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.65" seed="42" numOctaves="4" /><feColorMatrix type="saturate" values="0" /></filter><rect width="512" height="512" filter="url(%23noise)" opacity="0.06" /></svg>'),
    linear-gradient(
      180deg,
      var(--bg-soft) 0%,
      rgba(15, 47, 35, 0.5) 100%
    );
  background-repeat: repeat, no-repeat;
  background-size: 512px 512px, cover;
  color: var(--text-on-dark);
}

/* 中間の深緑背景 */
.section-bg-mid {
  background-color: var(--bg-mid);
  background-image:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.65" seed="42" numOctaves="4" /><feColorMatrix type="saturate" values="0" /></filter><rect width="512" height="512" filter="url(%23noise)" opacity="0.08" /></svg>');
  background-repeat: repeat;
  background-size: 512px 512px;
  color: var(--text-on-dark);
}

/************************************
** Tailwind CSS ユーティリティクラス例
************************************/
/*
 * Tailwind を使用している場合は、tailwind.config.js に以下を追加:
 *
 * module.exports = {
 *   theme: {
 *     extend: {
 *       colors: {
 *         'deep': {
 *           dark: '#0b1a14',
 *           DEFAULT: '#0f2f23',
 *           light: '#143c2b',
 *         }
 *       },
 *       backgroundImage: {
 *         'grain': "url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"512\" height=\"512\"><filter id=\"noise\"><feTurbulence type=\"fractalNoise\" baseFrequency=\"0.65\" seed=\"42\" numOctaves=\"4\" /><feColorMatrix type=\"saturate\" values=\"0\" /></filter><rect width=\"512\" height=\"512\" filter=\"url(%23noise)\" opacity=\"0.08\" /></svg>')",
 *       }
 *     }
 *   }
 * }
 *
 * 使用例:
 * <body class="bg-gradient-to-br from-deep-light via-deep to-deep-dark bg-grain">
 */

/************************************
** カスタマイズ方法
************************************/
/*
 * ノイズの強さを変更:
 * --noise-opacity: 0.08; を 0.06〜0.15 の範囲で調整
 *
 * ノイズの細かさを変更:
 * baseFrequency="0.65" を 0.4〜1.2 の範囲で調整
 * （値が大きいほど細かい）
 *
 * ノイズパターンを変更:
 * seed="42" の数値を変更（任意の整数）
 *
 * グラデーションの色を変更:
 * --bg-deep, --bg-mid, --bg-soft の値を調整
 *
 * ビネットの強さを変更:
 * --vignette-opacity: 0.3; を 0〜0.6 の範囲で調整
 */

/************************************
** アクセシビリティ確保
************************************/
/*
 * 背景が暗いため、十分なコントラストを確保
 * WCAG AA 基準（4.5:1以上）を満たす推奨色:
 * - 本文: #e6f2ec (推奨)
 * - 見出し: #ffffff
 * - リンク: #7fd8a8
 */
.bg-deep-grain h1,
.bg-deep-grain h2,
.bg-deep-grain h3,
.bg-deep-grain h4,
.bg-deep-grain h5,
.bg-deep-grain h6 {
  color: #ffffff;
}

.bg-deep-grain a {
  color: #7fd8a8;
}

.bg-deep-grain a:hover {
  color: #a8e6c8;
}

.bg-deep-grain .text-muted {
  color: var(--text-muted-on-dark);
}

/************************************
** レスポンシブ調整
************************************/
@media screen and (max-width: 834px) {
  /* モバイルではノイズを少し控えめに */
  body.bg-deep-grain,
  .bg-deep-grain {
    --noise-opacity: 0.06;
  }

  /* ビネットも控えめに */
  body.bg-deep-grain,
  .bg-deep-grain {
    --vignette-opacity: 0.2;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* アニメーション削減設定を尊重 */
  body.bg-deep-grain,
  .bg-deep-grain {
    background-attachment: scroll, scroll, scroll;
  }
}