/* ============================================================
   Edel Hearts — Logo Motion Kit（子テーマ用・スコープ済み）
   使用箇所：トップ hero 背景 / トップ scroll セクション /
             About scroll-morph セクション / フッター鼓動マーク
   すべて .eh- 接頭辞でスコープし、テーマ既存スタイルに干渉しない
   ============================================================ */
:root{
  --eh-navy:#0a1d39; --eh-ivory:#f5f1e8; --eh-gold:#c6a15b; --eh-deep:#06132a;
}

/* ---------- 01 : hero 背景の粒子 ---------- */
.eh-hero-canvas{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:0;            /* .hero__content(z:1) の背後、::after ドットと同層 */
  pointer-events:none;  /* CTA クリックを妨げない */
  opacity:.8;           /* 星屑なので少し明るめ。見出しは text-shadow で可読 */
}

/* ---------- 09 : ヘッダー着地ドック（中央下→左上ヘッダーへ融合） ---------- */
/* 飛来する軽いロックアップ（暗色ヒーロー上：白マーク＋アイボリー文字） */
.eh-fly-brand{
  position:fixed; top:0; left:0; z-index:1001;
  display:flex; align-items:center; gap:12px;
  transform-origin:center; will-change:transform,opacity; pointer-events:none;
}
.eh-fly-brand .mk{ width:44px; height:44px; flex:none; }
.eh-fly-brand .mk img{ width:100%; height:100%; object-fit:contain; display:block;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.45)); }
.eh-fly-brand .nm{
  font-family:Georgia,"Times New Roman",serif; color:var(--eh-ivory);
  font-size:24px; font-weight:500; letter-spacing:.02em; white-space:nowrap;
  text-shadow:0 2px 10px rgba(0,0,0,.5);   /* 明るい地表上でも読めるように */
}

/* ヘッダー内ブランド（着地点：白背景にネイビー）。マーク＋文字を横並び */
.eh-hdr-brand{ display:inline-flex; align-items:center; gap:10px; }
.eh-hdr-brand__mk{ display:inline-flex; width:26px; height:26px; flex:none; }
.eh-hdr-brand__mk img{ width:100%; height:100%; object-fit:contain; display:block; }
/* JS 起動時（トップ＋PC）だけ初期を薄く。JS がスクロールで 0.22→1 に濃くする */
html.eh-dock-on .eh-hdr-brand{ opacity:.22; }

/* スマホ：飛来演出は出さない（ヘッダーロゴは通常の濃色で静止） */
@media (max-width:768px){
  .eh-fly-brand{ display:none; }
}

/* ---------- 11 : scroll でスクラブする液体モーフ ---------- */
.eh-scrollmorph{ position:relative; height:300vh; background:var(--eh-ivory); }
.eh-scrollmorph__sticky{ position:sticky; top:0; height:100vh; overflow:hidden; }
.eh-scrollmorph__sticky canvas{ display:block; width:100%; height:100%; }
.eh-scrollmorph__tag{
  position:absolute; top:50%; transform:translateY(-50%);
  font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(10,29,57,.5); transition:opacity .3s;
}
.eh-scrollmorph__tag.l{ left:6vw; } .eh-scrollmorph__tag.r{ right:6vw; text-align:right; }
.eh-scrollmorph__bar{
  position:absolute; left:6vw; right:6vw; bottom:52px; height:2px;
  background:rgba(10,29,57,.14); border-radius:2px;
}
.eh-scrollmorph__bar i{
  position:absolute; left:0; top:-3px; width:8px; height:8px; border-radius:50%;
  background:var(--eh-gold); transform:translateX(-50%);
}

/* ---------- 02 : フッターの鼓動マーク ---------- */
.eh-heartbeat{
  position:relative; display:inline-flex; width:40px; height:40px;
  vertical-align:middle;
}
.eh-heartbeat img{
  width:100%; height:100%; object-fit:contain; display:block;
  transform-origin:center; animation:eh-beat 1.8s ease-in-out infinite;
  filter:drop-shadow(0 0 6px rgba(245,241,232,.18));
}
.eh-heartbeat::before{  /* 鼓動に合わせた淡い光 */
  content:""; position:absolute; inset:-30%; border-radius:50%;
  background:radial-gradient(circle,rgba(198,161,91,.4),transparent 62%);
  filter:blur(6px); animation:eh-glow 1.8s ease-in-out infinite; z-index:-1;
}

/* ---------- keyframes ---------- */
@keyframes eh-beat{
  0%,100%{transform:scale(1)} 12%{transform:scale(1.12)} 24%{transform:scale(1)}
  36%{transform:scale(1.06)} 48%{transform:scale(1)}
}
@keyframes eh-glow{
  0%,100%{opacity:.3;transform:scale(1)} 12%{opacity:.85;transform:scale(1.15)}
  36%{opacity:.5;transform:scale(1.05)} 60%{opacity:.3;transform:scale(1)}
}

/* ---------- WHY 右側：設計図ドラフト ---------- */
.home-why .edel-wrap{ position:relative; }   /* 装飾レイヤーの基準（このセクション限定） */
.eh-why-fx{
  position:absolute; top:24px; bottom:24px; right:0; width:40%;
  pointer-events:none; z-index:1;
}
.eh-why-fx canvas{ display:block; width:100%; height:100%; }
/* 横幅が狭いときは左の文字に重なってOK（薄めにして可読性を確保） */
@media (max-width:900px){
  .eh-why-fx{ width:64%; opacity:.5; }
}

/* ---------- モーション控えめ設定を尊重 ---------- */
@media (prefers-reduced-motion:reduce){
  .eh-heartbeat img{ animation:none; }
  .eh-heartbeat::before{ animation:none; opacity:.4; }
  /* 粒子・モーフの JS 側でも自動アニメを停止（scroll/scrub 操作は維持） */
}