/* トップページ専用「奥行き」表現（試作）。home-motion.css と併用。
   一括OFF: index.html から home-depth.css / home-depth.js の2行を消す、または URL に ?depth=off
   すべて html.dp-on 配下（JS無効・reduced-motion・?depth=off では付かない＝通常表示）。
   使うのは box-shadow / グラデ / translate / transform のみ（レイアウトを動かさない=CLSなし）。
   スクロール視差と傾きは PC幅(861px〜)かつマウス端末のみ。スマホは静的な陰影とグラデだけ。
   匿名査定ボタン・電話/LINEボタンの位置・色・大きさは変えない。 */
@media (prefers-reduced-motion: no-preference) {
  html.dp-on {
    --dp-sh-1: 0 1px 2px rgba(60,35,15,.06), 0 4px 8px rgba(60,35,15,.05), 0 14px 28px rgba(60,35,15,.07);
    --dp-sh-2: 0 2px 4px rgba(60,35,15,.07), 0 10px 18px rgba(60,35,15,.08), 0 26px 48px rgba(60,35,15,.10);
  }

  /* ヒーローを一段手前に：下のセクションへ柔らかい影を落とす */
  html.dp-on .hr-hero { position: relative; z-index: 2; box-shadow: 0 14px 28px -14px rgba(90,40,10,.40); }
  html.dp-on .hr-hero.is-bold .hr-hero-app .sq-app { box-shadow: 0 2px 4px rgba(0,0,0,.10), 0 12px 24px rgba(0,0,0,.14), 0 32px 56px rgba(60,20,0,.18); }

  /* セクション背景：平らな色から、ごく薄いグラデと光のにじみへ */
  html.dp-on .hr-section, html.dp-on .hr-final { position: relative; overflow: hidden; isolation: isolate; }
  html.dp-on .hr-section > .container, html.dp-on .hr-final > .container { position: relative; z-index: 1; }
  html.dp-on .hr-promise-wrap { background: linear-gradient(180deg, #F3EADF 0%, var(--beige) 28%, var(--beige) 100%); }
  html.dp-on .hr-family { background: linear-gradient(180deg, #fff 0%, #FFFAF5 100%); }
  html.dp-on .home-featured.hr-section { background: linear-gradient(180deg, var(--beige) 0%, #F7EFE6 100%); }
  html.dp-on .hr-people { background: linear-gradient(180deg, #FFFAF5 0%, #fff 70%); }
  html.dp-on .hr-promise-wrap::before, html.dp-on .hr-family::before, html.dp-on .hr-people::before {
    content: ""; position: absolute; z-index: 0; pointer-events: none; border-radius: 50%;
    width: 520px; height: 520px;
    background: radial-gradient(closest-side, rgba(233,154,110,.20), rgba(233,154,110,0));
    translate: 0 calc(var(--dp-y, 0px) * -1);
  }
  html.dp-on .hr-promise-wrap::before { right: -160px; top: -120px; }
  html.dp-on .hr-family::before { left: -200px; bottom: -220px; background: radial-gradient(closest-side, rgba(210,101,44,.10), rgba(210,101,44,0)); }
  html.dp-on .hr-people::before { right: -180px; top: -80px; }
  html.dp-on .hr-final { background: radial-gradient(ellipse 70% 90% at 50% 0%, #FFFDFB 0%, #FFF9F4 40%, #FBF1E8 100%); }

  /* カード：多層のやわらかい影（ひとつ浮かせる） */
  html.dp-on .hr-promise { box-shadow: var(--dp-sh-2); border-radius: 4px; }
  html.dp-on .hr-family-links a { box-shadow: var(--dp-sh-1); background: #fff; }
  html.dp-on .home-featured-card { box-shadow: var(--dp-sh-1); border-color: rgba(60,35,15,.06); }
  html.dp-on .home-kounyu { box-shadow: var(--dp-sh-1); background: #fff; }
  html.dp-on .home-faq-item { box-shadow: 0 1px 2px rgba(60,35,15,.05), 0 6px 14px rgba(60,35,15,.05); }
  html.dp-on .hr-people-photo { position: relative; }
  html.dp-on .hr-people-photo img { position: relative; z-index: 1; box-shadow: var(--dp-sh-2); }
  html.dp-on .hr-people-photo::before {
    content: ""; position: absolute; z-index: 0; inset: 14px -14px -14px 14px; border-radius: 50% 50% 8px 8px;
    background: linear-gradient(160deg, #F8DCC8, #F0C3A3); opacity: .75;
    translate: 0 calc(var(--dp-y, 0px) * -1);
  }
  html.dp-on .hr-owl-final { filter: drop-shadow(0 10px 10px rgba(60,35,15,.16)); }

  /* 視差の対象（JSが data-dp を付けたものだけ。独立プロパティ translate なので home-motion の transform と衝突しない） */
  html.dp-on.dp-par [data-dp] { translate: 0 var(--dp-y, 0px); will-change: translate; }

  /* ================= ヒーロー（ファーストビュー）の奥行き：強め =================
     調整つまみ: 影の濃さ=下の box-shadow / text-shadow の rgba の最後の数字、
     動きの強さ=home-depth.js の HERO_* 定数。 */
  html.dp-on .hr-hero.is-bold {
    overflow-x: clip;
    background-image:
      radial-gradient(ellipse 55% 75% at 100% 0%, rgba(255,196,150,.30), transparent 70%),
      linear-gradient(90deg, rgba(70,25,0,.20), transparent 58%),
      linear-gradient(180deg, transparent 55%, rgba(70,25,0,.16));
  }
  html.dp-on .hr-hero > .container, html.dp-on .hr-hero > .hr-town { position: relative; z-index: 1; }
  html.dp-on .hr-hero-inner { perspective: 1400px; }
  html.dp-on .dp-orb { position: absolute; z-index: 0; border-radius: 50%; pointer-events: none; will-change: translate; }
  html.dp-on .dp-orb-a { width: 560px; height: 560px; right: -120px; top: -90px; background: radial-gradient(closest-side, rgba(255,214,176,.50), rgba(255,214,176,0)); }
  html.dp-on .dp-orb-b { width: 420px; height: 420px; left: -140px; bottom: 30px; background: radial-gradient(closest-side, rgba(255,150,90,.32), rgba(255,150,90,0)); }
  html.dp-on .dp-orb-c { width: 220px; height: 220px; left: 40%; top: 6%; background: radial-gradient(closest-side, rgba(255,236,212,.30), rgba(255,236,212,0)); }
  /* 手前の薄いもや（街並みの足元に空気感） */
  html.dp-on .hr-hero.is-bold::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56px; z-index: 2; pointer-events: none;
    background: linear-gradient(to top, rgba(255,236,216,.30), rgba(255,236,216,0));
  }
  /* 見出し：奥行きのある影（白文字の可読性も上がる） */
  html.dp-on .hr-hero.is-bold .hr-hero-title { text-shadow: 0 1px 0 rgba(90,35,5,.35), 0 6px 18px rgba(60,20,0,.35), 0 18px 40px rgba(40,10,0,.25); }
  html.dp-on .hr-hero.is-bold .hr-hero-title span { transform-origin: 0 60%; }
  html.dp-on .hr-hero.is-bold .hr-bubble { box-shadow: none; filter: drop-shadow(0 10px 16px rgba(50,15,0,.30)); }
  html.dp-on .hr-owl-perch { filter: drop-shadow(0 8px 8px rgba(40,12,0,.35)); }
  /* ボタン・カード類：多層の影（文字・色・大きさ・位置は不変。CTAはむしろ浮いて見える） */
  html.dp-on .hr-hero.is-bold .hr-hero-actions .btn-primary { box-shadow: 0 3px 6px rgba(40,12,0,.25), 0 14px 26px rgba(40,12,0,.30); }
  html.dp-on .hr-hero.is-bold .hr-contact a { box-shadow: 0 2px 4px rgba(40,12,0,.16), 0 12px 22px rgba(40,12,0,.22); }
  html.dp-on .hr-hero.is-bold .hr-steps-row li { box-shadow: 0 2px 4px rgba(40,12,0,.14), 0 10px 20px rgba(40,12,0,.18); }
  html.dp-on .hr-hero.is-bold .hr-hero-app .sq-app {
    box-shadow: 0 2px 3px rgba(40,12,0,.18), 0 14px 22px rgba(40,12,0,.22), 0 40px 70px rgba(40,12,0,.34), 0 80px 120px -20px rgba(40,12,0,.28), inset 0 1px 0 rgba(255,255,255,.7);
  }
  html.dp-on .hr-hero-app { will-change: rotate; }


  /* ---- 朝・昼・夕・夜（太陽/月/空の色）。調整つまみ: 周期は home-depth.js の SUN_PERIOD、夜の暗さは .dp-sky-night の rgba 末尾 ---- */
  html.dp-on .dp-sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; will-change: opacity; }
  html.dp-on .dp-sky-night { background: linear-gradient(180deg, rgba(25,18,55,.55) 0%, rgba(70,28,40,.38) 100%); }
  html.dp-on .dp-sky-glow { background: radial-gradient(ellipse 75% 65% at 82% 100%, rgba(255,170,90,.50), rgba(255,170,90,0) 70%); }
  html.dp-on .dp-sky-front { inset: auto 0 0 0; height: 110px; z-index: 2; background: rgba(25,18,55,.34); }
  html.dp-on .dp-stars { position: absolute; inset: 0 0 45% 0; z-index: 0; pointer-events: none; opacity: 0; }
  html.dp-on .dp-stars i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px rgba(255,255,255,.8); animation: dp-twinkle 3.2s ease-in-out infinite alternate; }
  @keyframes dp-twinkle { from { opacity: .35; } to { opacity: 1; } }

  /* ---- フクロウ：奥から飛来→ボタンに止まる（飛来中は羽ばたき）。止まった姿は約1.26倍。
     調整つまみ: --dp-owl-k（止まった時の倍率）。羽ばたき速度は owl-mascot-fly.svg 内の .26s ---- */
  html.dp-on { --dp-owl-k: 1.26; --dp-owl-sh: drop-shadow(0 8px 8px rgba(40,12,0,.35)); }
  html.dp-on .hr-owl-perch { width: calc(58px * var(--dp-owl-k)); height: calc(62px * var(--dp-owl-k)); transform-origin: 50% 100%; }
  @keyframes dp-owl-fly {
    0%   { transform: translate(min(34vw, 420px), -240px) scale(.16); filter: blur(7px) var(--dp-owl-sh); }
    30%  { transform: translate(min(22vw, 260px), -130px) scale(.42); filter: blur(4px) var(--dp-owl-sh); }
    62%  { transform: translate(64px, -54px) scale(.82); filter: blur(1.2px) var(--dp-owl-sh); }
    87%  { transform: translate(0, 7px) scale(1.04); filter: blur(0px) var(--dp-owl-sh); }
    100% { transform: none; filter: blur(0px) var(--dp-owl-sh); }
  }
  @keyframes dp-show-fly { 0% { opacity: 0; } 4% { opacity: 1; } 87% { opacity: 1; } 88%, 100% { opacity: 0; } }
  @keyframes dp-show-sit { 0%, 87% { opacity: 0; } 88%, 100% { opacity: 1; } }
  html.dp-on .hr-owl-perch { animation: dp-owl-fly 3.4s cubic-bezier(.3,.1,.25,1) 1.8s both; }
  html.dp-on .hr-owl-perch .op-fly { animation: dp-show-fly 3.4s linear 1.8s both, hr-flap .3s ease-in-out 1.8s 11; }
  html.dp-on .hr-owl-perch .op-sit { animation: dp-show-sit 3.4s linear 1.8s both; }
  /* 吹き出しは着地の直前に */
  html.dp-on .hr-hero.is-bold .hr-bubble { animation-delay: 4.9s; }
  @media (max-width: 860px) {
    html.dp-on .hr-owl-perch { width: calc(50px * var(--dp-owl-k)); height: calc(54px * var(--dp-owl-k)); }
    html.dp-on .dp-sky-front { height: 70px; }
  }

  /* ホバー：軽い傾き＋影の持ち上げ（マウスのある端末のみ） */
  @media (hover: hover) and (pointer: fine) {
    html.dp-on .home-featured-card { transform-style: preserve-3d; transition: transform .25s var(--hm-ease, ease), box-shadow .3s; will-change: transform; }
    html.dp-on .home-featured-grid > .home-featured-card:hover {
      transform: perspective(900px) translateY(-4px) rotateX(var(--dp-rx, 0deg)) rotateY(var(--dp-ry, 0deg));
      box-shadow: 0 4px 8px rgba(60,35,15,.08), 0 18px 32px rgba(60,35,15,.14), 0 36px 60px rgba(60,35,15,.12);
    }
    html.dp-on .home-featured-card.dp-tilting { transition: transform .08s linear, box-shadow .3s; }
    html.dp-on .hr-family-links a:hover { box-shadow: var(--dp-sh-2); }
  }

  /* スマホ・タブレット：重いものは出さない（影は軽く、傾き・視差なし） */
  @media (max-width: 860px) {
    html.dp-on .hr-promise-wrap::before, html.dp-on .hr-family::before, html.dp-on .hr-people::before { width: 320px; height: 320px; }
    html.dp-on .hr-hero { box-shadow: 0 10px 20px -12px rgba(90,40,10,.35); }
    html.dp-on .dp-orb-a { width: 340px; height: 340px; right: -110px; }
    html.dp-on .dp-orb-b { width: 260px; height: 260px; }
    html.dp-on .dp-orb-c { width: 140px; height: 140px; }
    html.dp-on .hr-owl-final { filter: none; }
  }
}