/* ==========================================================================
   brand-ornament.css — Leadspace Brand Ornament（Background Ring System）
   --------------------------------------------------------------------------
   正本 / Registry:
     - docs/discovery/leadspace-brand-ornament-registry-v1-1-reality-correction.md
     - docs/discovery/seopro-background-ring-implementation-design-gate-v1.md（A-2 Vendored SVG）
     - Human Review: docs/discovery/seopro-background-ring-visual-mock-revision-v3.md

   方針（厳守）:
     - Brand Ornament（形・色・Gradient・太さ律・Depth・存在感・Brand Signature）は
       Corporate（SoT）の SVG アセットを *そのまま* 使う。CSS で色/グラデを再現しない。
       → 実体は assets/images/brand-ornament/circle0X.svg（Corporate から vendored）。
     - 本 CSS が管理するのは **SEO PRO 独自の 4 要素のみ**:
         1) 配置（四隅起点・オフスクリーンはみ出し）
         2) Hero との距離（中央 H1/CTA 帯を空ける offset）
         3) 中央マスク（radial-gradient で可読性確保）
         4) Motion（translate3d 低速フロート / reduced-motion 停止）
     - 承認済み構成（Composition Spec v1.0・Freeze）: リング5 ＋ 赤球1・
       スケールリズム 特大→大→中→小→極小。サイズ比は Freeze、座標は SEO PRO 独自。
     - リング色 variant → SoT アセット割当:
         特大=cream(circle05) / 大=peach(circle04) / 中=coral(circle03・主役) /
         小=peach(circle04) / 極小=coral(circle03) / 球=red(circle01)
     - enqueue: inc/enqueue.php で build.css の後に読み込む（既存 override 流儀）。
       tailwind content=*.php のため本ファイルは build.css に混入しない。
   ========================================================================== */

/* ----- Ornament 層（Hero <section> 最背面・中央マスクは SEO PRO 独自）----- */
.ls-ornament-layer {
  /* 中央 H1 / CTA 帯を radial マスクで薄く抜き、背景がコピーより目立たないようにする */
  -webkit-mask-image: radial-gradient(ellipse 72% 60% at 50% 50%, rgba(0,0,0,0.50) 0%, rgba(0,0,0,0.82) 46%, #000 76%);
          mask-image: radial-gradient(ellipse 72% 60% at 50% 50%, rgba(0,0,0,0.50) 0%, rgba(0,0,0,0.82) 46%, #000 76%);
}

/* ----- 共通: Ornament 要素（SoT SVG を背景として配置・改変しない）----- */
.ls-orn {
  position: absolute;
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
  /* 合成パフォーマンス（repaint なし）*/
  will-change: transform;
  contain: layout paint style;
}

/* ==========================================================================
   Desktop 配置（SEO PRO 独自）＋ スケールリズム（Freeze）
   特大 → 大 → 中 → 小 → 極小。四隅起点・画面外へはみ出し・中央は空ける。
   ========================================================================== */
/* 特大 XL：cream（circle05）左から包み込む embrace（mid 高さへ下げ視覚重心を中央へ） */
.ls-orn-r1 {
  width: 780px; height: 780px;
  top: -140px; left: -420px;
  background-image: url(../images/brand-ornament/circle05.svg);
  animation: lsOrnFloat1 40s ease-in-out infinite alternate;
}
/* 大 L：peach（circle04）右から包み込む embrace（r1 と対で Hero を両側から抱える） */
.ls-orn-r2 {
  width: 600px; height: 600px;
  top: -150px; right: -340px;
  background-image: url(../images/brand-ornament/circle04.svg);
  animation: lsOrnFloat2 34s ease-in-out infinite alternate;
}
/* 中 M：coral（circle03・主役／暖色グラデ）左下（coral 対の一方・下部の重心を担う） */
.ls-orn-r3 {
  width: 440px; height: 440px;
  top: 380px; left: -200px;
  background-image: url(../images/brand-ornament/circle03.svg);
  animation: lsOrnFloat3 44s ease-in-out infinite alternate;
}
/* 小 S：peach（circle04）左上へ移動（Human Review ②：右下の中リング→左上） */
.ls-orn-r4 {
  width: 320px; height: 320px;
  top: -30px; left: -110px;
  background-image: url(../images/brand-ornament/circle04.svg);
  animation: lsOrnFloat4 38s ease-in-out infinite alternate;
}
/* 極小 XS：coral（circle03）右下へ移動（Human Review ①：左上の小リング→右下・coral 対の他方） */
.ls-orn-r5 {
  width: 200px; height: 200px;
  top: 440px; right: 10px;
  background-image: url(../images/brand-ornament/circle03.svg);
  animation: lsOrnFloat5 32s ease-in-out infinite alternate;
}
/* 赤い球 ●：Brand Signature（circle01）右上・周縁・CTA 非干渉・最前アクセント */
.ls-orn-ball {
  width: 120px; height: 120px;
  top: 120px; right: 90px;
  background-image: url(../images/brand-ornament/circle01.svg);
  animation: lsOrnFloat6 36s ease-in-out infinite alternate;
}

/* ----- Motion（SEO PRO 独自・translate3d のみ・低速低振幅）----- */
@keyframes lsOrnFloat1 { 0%{transform:translate3d(0,0,0)} 100%{transform:translate3d(30px,24px,0)} }
@keyframes lsOrnFloat2 { 0%{transform:translate3d(0,0,0)} 100%{transform:translate3d(-32px,26px,0)} }
@keyframes lsOrnFloat3 { 0%{transform:translate3d(0,0,0)} 100%{transform:translate3d(26px,-28px,0)} }
@keyframes lsOrnFloat4 { 0%{transform:translate3d(0,0,0)} 100%{transform:translate3d(-26px,-22px,0)} }
@keyframes lsOrnFloat5 { 0%{transform:translate3d(0,0,0)} 100%{transform:translate3d(18px,-14px,0)} }
@keyframes lsOrnFloat6 { 0%{transform:translate3d(0,0,0)} 100%{transform:translate3d(-16px,16px,0)} }

/* ==========================================================================
   SP（max-width: 640px）配置（SEO PRO 独自）
   - スケールリズム（Freeze）は維持。サイズを縮小し中央マスクを強める。
   - リング5＋球1 の構成は維持（Composition Spec Freeze）。
   ========================================================================== */
@media (max-width: 640px) {
  .ls-ornament-layer {
    /* SP は中央をより強く抜いて H1 の明度を確保 */
    -webkit-mask-image: radial-gradient(ellipse 74% 56% at 50% 50%, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.76) 46%, #000 80%);
            mask-image: radial-gradient(ellipse 74% 56% at 50% 50%, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.76) 46%, #000 80%);
  }
  .ls-orn-r1  { width: 360px; height: 360px; top: -90px; left: -170px; }  /* 左 embrace */
  .ls-orn-r2  { width: 280px; height: 280px; top: -90px; right: -150px; } /* 右 embrace */
  .ls-orn-r3  { width: 210px; height: 210px; top: 330px; left: -120px; } /* coral 左下 */
  .ls-orn-r4  { width: 150px; height: 150px; top: 20px;  left: -70px; }  /* ② 中→左上 */
  .ls-orn-r5  { width: 96px;  height: 96px;  top: 360px; right: -10px; } /* ① 小→右下 */
  .ls-orn-ball{ width: 60px;  height: 60px;  top: 70px;  right: -6px; }  /* 赤球 右上 */
}

/* ==========================================================================
   prefers-reduced-motion（必須）: Ornament のフロートを完全停止
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .ls-orn {
    animation: none !important;
    transform: none !important;
  }
}