/* ==========================================================================
   animations.css — seo-professional / Phase 2.5 共通アニメーション
   --------------------------------------------------------------------------
   方針:
     - H1 可読性最優先・CV 導線阻害禁止・最小限の動き
     - JS 依存は IntersectionObserver のみ（common.js / 5KB 未満）
     - prefers-reduced-motion: reduce で全アニメ完全無効化（必須）
   採用範囲（Yu 確定）:
     1. Hero 背景：太い縁のリング 6 個（PC）/ 4 個（SP）— 四隅中心配置
     2. Scroll fade-in（H2 / カードグリッド / Stats Strip 厳選）— 全ページ
     3. CTA / Card hover（0.2s ease-out 統一）— 全ページ
   不採用（Yu 確定）:
     - 数値カウントアップ
     - パララックス
     - カーソル追従
     - タイプライター
     - View Transition API
     - 塗りつぶし orb / blob（2026-05-05 リング表現へ方針転換）
   ========================================================================== */

/* ==========================================================================
   0. Hero 背景演出（太い縁リング・四隅中心配置 / CSS のみ）
   --------------------------------------------------------------------------
   - 目的: leadspace.co.jp 系の「中央空洞・太い縁のリングが四隅にゆったり浮かぶ」
           軽やかで上質な多層感を CSS のみで再現（canvas / WebGL / JS 不使用）
   - 配置: Hero <section> 内、最背面
   - 親 wrapper: <div class="hero-bg-layer absolute inset-0 overflow-hidden pointer-events-none">
   - 構造（背→前）:
       layer 1: 太い縁のリング 6 個（左上 大 / 右上 大薄 / 左下 大 / 右下 大 / 左中 小 / 右中 小）
       layer 2: 斜め sheen（白の細い光の筋・補助）
       layer 3: 1px ドットメッシュ（ごく薄い質感・補助）
   - リングは border 表現（中央空洞）。filter: blur は使わずシャープな輪郭を保つ
   - 中央 H1 / CTA 上は radial-gradient mask で抜く（可読性確保）
   - 動きは translate3d のみ（GPU 合成・repaint なし）
   - SP では opacity を一段下げ、リング数を 4 個に削減（hero-ring-5/6 を非表示）
   - 旧塗り orb（hero-orb-1〜4）と既存 hero-float-1/2 は display:none で視覚消去
     （HTML 構造は維持・clas 名だけ残す）
   ========================================================================== */

/* Hero 背景全体の親 wrapper（中央の H1 / CTA 領域は内側 radial で薄く抜く） */
.hero-bg-layer {
  /* 中央を抜くマスク：H1・CTA 上での過剰なコントラスト低下を防ぐ
     リング表現に合わせ、塗り時より少し弱め（mask の中央を 0.65→0.6 に）にして
     リング輪郭が中央方向にも自然に届くようにする */
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(0,0,0,0.60) 0%, rgba(0,0,0,0.85) 45%, #000 75%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(0,0,0,0.60) 0%, rgba(0,0,0,0.85) 45%, #000 75%);
}

/* ----- 旧塗り orb 完全非表示（HTML 構造は維持・クラス名だけ残す） ----- */
.hero-orb,
.hero-orb-1,
.hero-orb-2,
.hero-orb-3,
.hero-orb-4 {
  display: none !important;
}

/* ----- 既存 Wave A の塗り円も非表示（リング表現と矛盾するため） ----- */
.animate-hero-float-1,
.animate-hero-float-2 {
  display: none !important;
}

/* ----- layer 1: 太い縁のリング（中央空洞）----- */
.hero-ring {
  position: absolute;
  border-radius: 9999px;
  background: transparent;
  /* シャープな輪郭優先：blur は使わない */
  filter: blur(0);
  /* 合成パフォーマンス向上 */
  contain: layout paint style;
  pointer-events: none;
}

/* 左上：大きめリング（ネイビー基調・存在感の主役）
   位置：左上隅から少し外にはみ出す → 四隅起点の構図を作る */
.hero-ring-1 {
  top: -180px;
  left: -200px;
  width: 540px;
  height: 540px;
  border: 56px solid rgba(13, 43, 78, 0.16);
  opacity: 0.85;
  animation: heroRingFloat1 36s ease-in-out infinite alternate;
}

/* 右上：大きめ・薄めの大リング（オレンジ淡）
   位置：右上隅から外にはみ出す。Yu 指示「右上は薄めの大きなリング」
   2026-05-06 数値再調整: 色 blue 0.12 → orange 0.10 / opacity 0.80 → 0.70 / 周期 44s → 32s */
.hero-ring-2 {
  top: -240px;
  right: -260px;
  width: 660px;
  height: 660px;
  border: 84px solid rgba(255, 119, 65, 0.10);
  opacity: 0.70;
  animation: heroRingFloat2 32s ease-in-out infinite alternate;
}

/* 左下：大きめリング（淡いベージュ系・抜け感）
   位置：左下隅から少しはみ出す。CTA との距離を取って中央寄りにしない
   2026-05-06 数値再調整: border 62px → 82px（縁の存在感を強める） */
.hero-ring-3 {
  bottom: -200px;
  left: -160px;
  width: 480px;
  height: 480px;
  border: 82px solid rgba(212, 188, 154, 0.20);
  opacity: 0.70;
  animation: heroRingFloat3 40s ease-in-out infinite alternate;
}

/* 右下：大きめリング（淡いベージュ系・左下と対のトーン）
   位置：右下隅から少しはみ出す。CTA 直背面を避けるため右寄り
   2026-05-06 数値再調整: 色 blue 0.14 → ベージュ 0.20 / opacity 0.75 → 0.70 / 周期 48s → 40s */
.hero-ring-4 {
  bottom: -220px;
  right: -180px;
  width: 500px;
  height: 500px;
  border: 56px solid rgba(212, 188, 154, 0.20);
  opacity: 0.70;
  animation: heroRingFloat4 40s ease-in-out infinite alternate;
}

/* 左中：小リング（オレンジ淡・四隅構図のリズム補助）
   位置：左の中央高さ・かなり外側
   オレンジは CTA と被らないよう極薄（0.10）。色の遊びとして小サイズで添える */
.hero-ring-5 {
  top: 38%;
  left: -120px;
  width: 240px;
  height: 240px;
  border: 32px solid rgba(255, 119, 65, 0.10);
  opacity: 0.70;
  animation: heroRingFloat5 32s ease-in-out infinite alternate;
}

/* 右中：小リング（ネイビー基調・左中オレンジと対のトーン）
   位置：右の中央高さ・かなり外側。CTA は中央下にあるので、右中央高さなら干渉しない
   2026-05-06 数値再調整: 色 orange 0.10 → navy 0.16 / opacity 0.65 → 0.85 / 周期 38s → 36s */
.hero-ring-6 {
  top: 30%;
  right: -100px;
  width: 220px;
  height: 220px;
  border: 30px solid rgba(13, 43, 78, 0.16);
  opacity: 0.85;
  animation: heroRingFloat6 36s ease-in-out infinite alternate;
}

/* ----- リング浮遊アニメーション（translate3d のみ・低速・低振幅）----- */
@keyframes heroRingFloat1 {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(28px, 22px, 0); }
}
@keyframes heroRingFloat2 {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-32px, 26px, 0); }
}
@keyframes heroRingFloat3 {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(24px, -28px, 0); }
}
@keyframes heroRingFloat4 {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-28px, -24px, 0); }
}
@keyframes heroRingFloat5 {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(18px, -14px, 0); }
}
@keyframes heroRingFloat6 {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-18px, 16px, 0); }
}

/* ----- layer 2: 斜め sheen（白の細い光の筋・補助）----- */
.hero-sheen {
  position: absolute;
  top: -30%;
  left: -30%;
  width: 160%;
  height: 160%;
  background: linear-gradient(
    115deg,
    transparent 35%,
    rgba(255,255,255,0.08) 48%,
    rgba(255,255,255,0.14) 50%,
    rgba(255,255,255,0.08) 52%,
    transparent 65%
  );
  animation: heroSheenSlide 28s linear infinite;
  pointer-events: none;
}

@keyframes heroSheenSlide {
  0%   { transform: translate3d(-12%, 0, 0); }
  100% { transform: translate3d(12%, 0, 0); }
}

/* ----- layer 3: 1px ドットメッシュ（ごく薄い質感・補助）----- */
.hero-mesh {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(13,43,78,0.10) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: 0 0;
  /* 中央付近を薄く抜いて、H1 上で目立たせない */
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 50%, transparent 30%, #000 80%);
          mask-image: radial-gradient(ellipse 60% 55% at 50% 50%, transparent 30%, #000 80%);
  opacity: 0.55;
}

/* ==========================================================================
   0.5 SP（max-width: 640px）調整
   --------------------------------------------------------------------------
   - SP では PC より背景が暗く見える問題への対策
   - リング数を 4 個に削減（hero-ring-5 / hero-ring-6 を非表示）
   - 各リング opacity を一段下げる（0.85 → 0.55 等）
   - 親 wrapper の中央抜きマスクを強める
   - mesh / sheen も opacity を絞る
   - 結果として H1 周辺は PC と同等の明るさを保つ
   ========================================================================== */
@media (max-width: 640px) {
  /* SP では背景全体を白寄りに */
  .hero-bg-layer {
    -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 50%, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.75) 45%, #000 78%);
            mask-image: radial-gradient(ellipse 70% 55% at 50% 50%, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.75) 45%, #000 78%);
  }

  /* SP は四隅 4 個のみ。中央寄りの小リング 5/6 は非表示にして中央を明るく保つ */
  .hero-ring-5,
  .hero-ring-6 {
    display: none !important;
  }

  /* 残る四隅 4 個も opacity を下げる + サイズも少し縮小（SP 画面の専有率を抑える）
     2026-05-06 SP 数値再調整:
       - ring-1: PC navy → SP ベージュ 0.20 / opacity 0.55 → 0.70（border-color 上書き必須）
       - ring-2: PC orange → SP orange 同色だが明示上書き / opacity 0.45 → 0.70
       - ring-3 / ring-4 は既存値維持
     2026-05-07 Phase D10 Task 3: SP リング全体を約 50% 縮小（width/height/border/位置を半減）。
       Hero テキスト・CTA を背景円が圧迫していた SP 表示を改善。opacity / 色は維持。
       PC（min-width:641px 相当）の §0 定義には一切影響しない。
     2026-05-07 Phase D11: hero-ring-2 / hero-ring-3 のみ 150% 再拡大（D10 縮小値 × 1.5）。
       縮小しすぎで SP の右上・左下の余白構図が弱くなったため、ring-2 / ring-3 だけ
       存在感を戻す。ring-1 / ring-4 は D10 値維持（中央 H1・CTA への圧迫回避）。
       opacity / 色 / z-index / display / PC §0 定義は一切変更しない。 */
  .hero-ring-1 {
    top: -60px;
    left: -70px;
    width: 190px;
    height: 190px;
    border-width: 18px;
    border-color: rgba(212, 188, 154, 0.20);
    opacity: 0.70;
  }
  /* Phase D11: 210→315 / b20→30 / top:-70→-105 / right:-80→-120（×1.5） */
  .hero-ring-2 {
    top: -105px;
    right: -120px;
    width: 315px;
    height: 315px;
    border-width: 30px;
    border-color: rgba(255, 119, 65, 0.10);
    opacity: 0.70;
  }
  /* Phase D11: 180→270 / b17→26（17×1.5=25.5→26 丸め）/ bottom:-60→-90 / left:-55→-83（-55×1.5=-82.5→-83 丸め） */
  .hero-ring-3 {
    bottom: -90px;
    left: -83px;
    width: 270px;
    height: 270px;
    border-width: 26px;
    opacity: 0.50;
  }
  .hero-ring-4 {
    bottom: -70px;
    right: -65px;
    width: 190px;
    height: 190px;
    border-width: 18px;
    opacity: 0.50;
  }

  /* sheen / mesh も SP では控えめに */
  .hero-sheen {
    opacity: 0.6;
  }
  .hero-mesh {
    opacity: 0.30;
  }
}

/* ==========================================================================
   1.5 SP ハンバーガーメニュー（peer pattern / Phase D5 2026-05-07 Task 1）
   --------------------------------------------------------------------------
   - 仕組み: <input id="nav-toggle"> + <label for="nav-toggle"> + <div class="nav-panel">
     の sibling 関係を使い、JS なしで :checked sibling 制御で開閉する。
   - 旧実装の不具合:
       a) `nav-panel` に Tailwind `hidden` 固定 → どの状態でも display:none で開かない
       b) :checked sibling CSS / icon の出し分けが未実装
   - 新実装の方針:
       a) checkbox 自体は sr-only（視覚消去・キーボード focus 維持）
       b) nav-panel は規定で display:none、`#nav-toggle:checked ~ .nav-panel` で flex 表示
       c) icon-open / icon-close は label 内に並置し、:checked で出し分け
       d) PC（md 以上）では nav-panel / label / checkbox を非表示（既存 md:hidden を尊重）
   - z-index: header sticky が z-50 のため、open 時の panel は header 直下（top:64px）に
     position:absolute で出すのみ。panel 内部の z は不要。label を z-50 にして panel を z-40
     とし、label の操作面（タップ）が常に最前面に来るようにする。
   - prefers-reduced-motion: 開閉トランジションは付けない（瞬時切替で副作用なし）。
   ========================================================================== */
@media (max-width: 767px) {
  /* checkbox 自体は視覚的に消す（sr-only パターン） */
  #nav-toggle {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  /* 規定: panel は非表示 / icon-open のみ表示 */
  .nav-panel {
    display: none;
  }
  #nav-toggle ~ label .icon-open  { display: inline-block; }
  #nav-toggle ~ label .icon-close { display: none; }

  /* 開いた状態: panel を表示 / icon を切替 */
  #nav-toggle:checked ~ .nav-panel {
    display: block;
  }
  #nav-toggle:checked ~ label .icon-open  { display: none; }
  #nav-toggle:checked ~ label .icon-close { display: inline-block; }

  /* panel 内のリンク折返し・余白の念押し（Tailwind 維持） */
  .nav-panel ul { margin: 0; padding: 0.5rem 0; }
  .nav-panel li { list-style: none; }
}

/* PC（md 以上）では peer pattern を完全に無効化 */
@media (min-width: 768px) {
  #nav-toggle,
  #nav-toggle ~ label,
  .nav-panel {
    display: none !important;
  }
}

/* ==========================================================================
   2. Scroll Fade-in（厳選適用）
   --------------------------------------------------------------------------
   - 適用対象（Yu 確定）:
       * 全 H2 要素
       * カードグリッド（SERVICE / EXPERIENCE / COLUMN）
       * Stats Strip（C-StatsStrip）
   - 適用しない:
       * Hero / FV / 3 Point Diagnostic（H1 可読性・第一印象優先）
       * CTA セクション（CV 阻害回避）
   - 発火: IntersectionObserver（threshold: 0.15, rootMargin: 0px 0px -8% 0px）
   ========================================================================== */
.fade-in-up {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition:
    opacity   0.6s ease-out,
    transform 0.6s ease-out;
}

.fade-in-up.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* ==========================================================================
   3. CTA / Card hover transition（0.2s ease-out 統一）
   --------------------------------------------------------------------------
   - TOP の Tailwind `transition` クラスは 150ms デフォルト
     Phase 2.5 では 200ms に明示化して CTA の押し心地を硬めに統一
   - 既存の `transition` `transition-all` クラスを上書きしないよう、
     class 追加方式ではなく duration 明示の utility として用意（任意付与）
   ========================================================================== */
.transition-200 {
  transition-duration: 0.2s !important;
  transition-timing-function: ease-out !important;
}

/* ==========================================================================
   4. prefers-reduced-motion 対応（必須）
   --------------------------------------------------------------------------
   - WCAG 2.1 推奨に準拠
   - OS / ブラウザでアニメ抑制設定をしているユーザーには全アニメ即停止
   - fade-in-up は最終状態（is-visible 相当）で固定表示
   - リング 6 個は静的表示（位置はそのまま・transform リセット）
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .hero-ring,
  .hero-ring-1,
  .hero-ring-2,
  .hero-ring-3,
  .hero-ring-4,
  .hero-ring-5,
  .hero-ring-6,
  .hero-sheen {
    animation: none !important;
    transform: none !important;
  }

  .fade-in-up {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}