/* アプデ人事LP（/update-hr）ヒーローの3D軌道
   ------------------------------------------------------------------
   マークアップとJSは views/partials/hr_hero_orbit.php。読み込みは router.php の /update-hr ルート。
   旧スマホモック（assets/images/hr_mv.png）を置き換えたもの。

   内側 = 制作実績11点 / 外側 = 支援先のSNSスクショ10点 / 中心 = 旧スマホモック

   ★ 寸法の正はこのファイル。JSは .hero-orbit__metrics を実測して受け取るだけ。
     --orbit-rx / --orbit-ry         … 内側の楕円の横半径（ステージ幅の%）・縦半径（ステージ高さの%）
                                        ry を小さくするほど「上から見下ろした軌道」になる
     --orbit-card-w                  … 内側カード1枚の幅（ステージ幅の%）
     --orbit-sns-rx / --orbit-sns-ry … 外側（SNSスクショ）の半径
     --orbit-sns-card-w              … 外側カード1枚の幅（ステージ幅の%）
     --orbit-core-w                  … 中心のスマホモックの幅（ステージ幅の%）

   ⚠️ 外側のはみ出しはステージ幅で決まる。 (sns-rx + sns-card-w / 2) が 50% を超えると
      #hr-hero の overflow:hidden で切れる。半径を触るときは必ず両方を足して確認する。

   ⚠️ カード側で高さを持たせていない（aspect-ratio で決める）。
      中央合わせは outer の translate(-50%,-50%) だけで行い、拡大縮小は inner に分けてある。
      1つの transform に translate と scale を混ぜると、縮んだカードほど中心がずれる
      （translate の -50% は縮小前の寸法で効くため）。

   /css/style.css はビルド済みTailwindで新規クラスを足せないため、このファイルに独立して書く。 */

.hero-orbit {
  --orbit-rx: 33%;
  --orbit-ry: 22%;
  --orbit-card-w: 27%;
  --orbit-core-w: 47%;

  --orbit-sns-rx: 43%;
  --orbit-sns-ry: 28%;
  --orbit-sns-card-w: 11.5%;

  position: relative;
  width: 100%;
  aspect-ratio: 560 / 440;
  /* JSが位置を入れるまでは全部が中央に重なっているので、その一瞬を見せない */
  opacity: 0;
  transition: opacity 0.8s ease;
}

.hero-orbit.is-ready {
  opacity: 1;
}

/* 中心のほのかな光。軌道の中心に「何かがある」感じを出すためだけのもの */
.hero-orbit__glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 56%;
  height: 62%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 128, 182, 0.14), rgba(0, 128, 182, 0) 70%);
  pointer-events: none;
}

/* 軌道の線。カードの中心が通る楕円そのもの（半径×2） */
.hero-orbit__path {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--orbit-rx) * 2);
  height: calc(var(--orbit-ry) * 2);
  transform: translate(-50%, -50%);
  border: 1px solid rgba(0, 128, 182, 0.22);
  border-radius: 50%;
  pointer-events: none;
}

.hero-orbit__path--sns {
  width: calc(var(--orbit-sns-rx) * 2);
  height: calc(var(--orbit-sns-ry) * 2);
  border-color: rgba(0, 128, 182, 0.12);
}

/* 軌道の中心に置くスマホモック。
   ⚠️ z-index はカード側の振れ幅（内側 10000±2000 / 外側 10000±3120）の**中心**でなければならない。
      手前のカード(>10000)は前に、奥のカード(<10000)は後ろに回り、輪の中に入って見える。
      ここを14000にすると全部のカードが後ろに隠れ、6000にすると全部が前に出る。
      ⚠️ 2026-09-11 に 150 → 10000 へ変更。カードのz-indexを連続値にして
         交差時のちらつき（同値になると重なり順がDOM順に落ちる）を消したため。 */
.hero-orbit__core {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 10000;
  width: var(--orbit-core-w);
  /* 中心よりわずかに上へ。ぴったり中央だと、手前を通るカードがスマホの画面を横切ってしまう。
     少し上げると、カードが本体の下端をかすめる位置関係になる */
  transform: translate(-50%, -57%);
  pointer-events: none;
}

.hero-orbit__core img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 34px rgba(0, 52, 82, 0.22));
}

/* JSへの寸法の受け渡し。幅=横半径 / 高さ=縦半径 を実寸で持つだけの見えない要素。
   getComputedStyle だとカスタムプロパティが `33%` の文字列で返ってきて px にならない */
.hero-orbit__metrics {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--orbit-rx);
  height: var(--orbit-ry);
  visibility: hidden;
  pointer-events: none;
}

.hero-orbit__metrics--sns {
  width: var(--orbit-sns-rx);
  height: var(--orbit-sns-ry);
}

.hero-orbit__item {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--orbit-card-w);
  margin: 0;
  /* ⚠️ will-change に opacity を入れない（2026-09-11）。22枚すべてが合成レイヤーに昇格し、
     毎フレームの重なり順の入れ替えでレイヤーの並べ替えが走る。動かしているのは transform なので
     昇格させるのもそれだけでよい。 */
  will-change: transform;
  backface-visibility: hidden;
}

.hero-orbit__item--sns {
  width: var(--orbit-sns-card-w);
}

/* ⚠️ カードは画像が届くまで隠しておく（2026-09-11）。
   白地＋影を持っているので、読み込み前は「白い四角が22枚並ぶ」状態が見えてしまう
   （test21で実際に撮れた。FVなので loading="lazy" を外しても消えない）。
   .is-loaded はJSが img の load で1枚ずつ付ける＝届いた順に浮かび上がる。
   ⚠️ 透明度は**カード側**に持たせること。.hero-orbit__item の opacity は
      JSが毎フレーム奥行きで上書きするので、そこに書くと消える。 */
.hero-orbit__card {
  display: block;
  overflow: hidden;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(0, 52, 82, 0.16);
  transform: scale(var(--s, 1));
  transform-origin: center;
  opacity: 0;
  transition: opacity 0.45s ease;
}

.hero-orbit__item.is-loaded .hero-orbit__card {
  opacity: 1;
}

/* 外側はスマホの実機スクショなので、白い縁を付けて「画面」に見せる。
   角丸は実機に寄せて相対値（幅の9%）にしてある＝縮んでも比率が崩れない */
.hero-orbit__card--sns {
  border-radius: 9% / 5%;
  padding: 2.5%;
  box-shadow: 0 8px 20px rgba(0, 52, 82, 0.18);
}

.hero-orbit__card--sns img {
  border-radius: 6% / 3.4%;
}

.hero-orbit__card img {
  display: block;
  width: 100%;
  height: auto;
}

@media screen and (max-width: 767px) {
  /* ★ 2026-09-14: タブレット幅と同じ理由で、SPでも軌道の上端が固定ヘッダー（65px）の裏に
     31.6px 潜っていた（`top:0` のため）。上段の小さいカードがヘッダーの下端で切れる。
     ⚠️ オフセットはタブレットの88pxではなく **48px**。SPは軌道ステージの上に
        「1枚目のカードまでの空き」が実測で約10%（375pxで33.4px）あるので、
        88pxにすると下がりすぎる。48px なら 320〜767px のどの幅でも
        1枚目のカードがヘッダーの下端より 11〜21px 下に来る（実測で確認）。
     ★ ここも寸法は変数2つが正。見出しの上余白が追従する。
       SPの .hero-orbit は aspect-ratio 1/0.94 なので 高さ = 幅 × 0.94。
       元の見出しは clamp(340px, 85vw, 410px) で、軌道の下端との間隔が実測5.1pxしかなかった。 */
  #hr-hero {
    --sp-orbit-top: 48px;
    --sp-orbit-w: min(95%, 430px);
  }

  #hr-hero .hero-media {
    top: var(--sp-orbit-top) !important;
    left: 50% !important;
    right: auto !important;
    width: var(--sp-orbit-w) !important;
    transform: translateX(-50%);
  }

  #hr-hero .hero-headline {
    padding-top: calc(var(--sp-orbit-top) + var(--sp-orbit-w) * 0.94 + 24px) !important;
  }

  .hero-orbit {
    --orbit-rx: 29%;
    --orbit-ry: 19%;
    --orbit-card-w: 24%;
    --orbit-core-w: 39%;

    --orbit-sns-rx: 40%;
    --orbit-sns-ry: 29%;
    --orbit-sns-card-w: 12%;

    aspect-ratio: 1 / 0.94;
  }

  .hero-orbit__card {
    border-radius: 8px;
    box-shadow: 0 6px 16px rgba(0, 52, 82, 0.14);
  }

  .hero-orbit__card--sns {
    border-radius: 9% / 5%;
    box-shadow: 0 5px 12px rgba(0, 52, 82, 0.16);
  }
}

/* ============================================================
   タブレット幅（768〜1023px）の配置
   ------------------------------------------------------------
   2026-09-14: この範囲だけ**軌道が右上隅に貼り付いていた**。
   原因は home.php の .hero-media のインラインstyle `top:0; right:0; width:min(95%,430px)`。
   767px以下では .hero-main が430px幅（SPの枠）なので right:0 が枠の右端＝ほぼ中央に見えるが、
   768px以上で .hero-main が全幅になるため、**430pxの箱が画面の右上隅に寄る**。
   実測（768/834/1023px）ではいずれも軌道の右端が画面右端と一致し、top=0 のため
   **固定ヘッダー（65px）の裏に上端が潜って切れて**いた。カードの最上端は y=31.8px。

   ⚠️ インラインstyleが相手なので `!important` が要る（セレクタの詳細度では勝てない）。

   ★ 軌道の寸法は下の2変数が正。**見出しの上余白がこれに追従する**ので、
     大きさを変えたいときは --tab-orbit-w だけ触ればよい（2箇所に数値を書かない）。
     高さは .hero-orbit の aspect-ratio 560/440 ＝ 幅 × 0.7857 で決まる。
   ============================================================ */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  #hr-hero {
    /* 固定ヘッダー65px ＋ 余白23px。ヘッダーの高さを変えたらここも直す */
    --tab-orbit-top: 88px;
    --tab-orbit-w: min(64vw, 560px);
  }

  #hr-hero .hero-media {
    top: var(--tab-orbit-top) !important;
    left: 50% !important;
    right: auto !important;
    width: var(--tab-orbit-w) !important;
    transform: translateX(-50%);
  }

  /* 見出しの上余白＝軌道の下端（top + 幅×0.7857）＋ 24px。
     元は clamp(340px, 85vw, 410px) で、SPの430px枠を前提にした値だった。 */
  #hr-hero .hero-headline {
    padding-top: calc(var(--tab-orbit-top) + var(--tab-orbit-w) * 0.7857 + 24px) !important;
  }
}