/* ============ LiTAER Hero — AI Orbit × Robot Hand (3D ヒーロー v7) ============
   demos/03-hero-ai-orbit-3d/css/hero.css の移植版。フロントページのみ読み込む。

   ⚠ 3D の規則はすべて html.hero-3d 配下にスコープしている。
     ヒーローは訪問者が 3 バージョンから選ぶ（functions.php の paint 前インライン）:
       data-hero-mode="ai"      … 3D CINEMATIC（既定 / V1）  → .hero-3d が付く
       data-hero-mode="current" … 変更前の現行ヒーロー（V2）  → .hero-3d は付かない
       data-hero-mode="classic" … 3D CLASSIC（v6 相当 / V3）  → .hero-3d が付く
     current では .hero-3d が付かないので、このファイルの 3D 規則は一切当たらない。
     style.css の既存ヒーロー 56 セレクタは無傷のまま。
     ただし .experience-switch（切替 UI）だけは 3 バージョン共通で出すためスコープ外。

   ⚠ 入場アニメは transform ではなく translate プロパティを使う（README 非自明ルール 3）。
     transform:none が中央寄せの translateX(-50%) を打ち消し、SP で CTA が右にはみ出す。

   コピーの入場演出は移植していない。テーマの motion.js heroIntro() が
   同じカットイン + [data-hero-seq] の .revealed 付与を既に持っているため、そちらに委ねる。 */

.hero-3d .hero{
  /* ヒーロー内だけのトークン。テーマの :root にある --accent / --ease-expo / --font-ja は流用する。 */
  --green:#00c99f;
  --green-deep:#00a37f;
  --green-dark:#067a62;
  --brand-green:#14803f;
  --brand-cyan:#3fc3e8;
  --gold:#d9a93f;
  --hero-muted:#8aa39a;
  --hero-line:rgba(6,122,98,.14);
  --hero-text-sub:#4c5f58;
  --focus-x:.73;--focus-y:.59;   /* 画像が無い時のリング中心（.no-hand） */
}

/* ---------- 1. シェル ---------- */
/* テーマの .hero は flex + padding。3D では中身を絶対配置するので block に戻す。 */
.hero-3d .hero{
  display:block;padding:0;align-items:initial;
  background:#fff;overflow:visible;
}
.hero-3d .hero-stage{
  position:relative;height:100svh;min-height:640px;overflow:hidden;background:#fff;
}
/* CINEMATIC: 約1.75画面ぶん sticky で送る。GSAP の pin は使わない（hero-cinema.js は停止中）。 */
[data-hero-mode="ai"] .hero{height:175svh;min-height:1120px}
[data-hero-mode="ai"] .hero-stage{position:sticky;top:0}
[data-hero-mode="classic"] .hero{height:100svh;min-height:640px;overflow:hidden}

/* 現行ヒーローの視覚層は 3D モードでは出さない（style.css 側で display:none 済み）。
   ここでは念のため canvas-fx / tech-network の canvas も止める。 */
.hero-3d .hero .fx-canvas{display:none}

/* ---------- 2. 背景の空気（グロー + ドットグリッド）---------- */
.hero-3d .hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-3d .bg-glow{position:absolute;border-radius:50%;filter:blur(60px)}
.hero-3d .bg-glow-mint{
  width:64vw;height:64vw;left:62%;top:58%;translate:-50% -40%;
  background:radial-gradient(circle,rgba(0,201,159,.15) 0%,rgba(63,195,232,.06) 45%,transparent 70%);
  animation:orbitBgBreath 7s ease-in-out infinite;
}
@keyframes orbitBgBreath{50%{scale:1.11;opacity:.78}}
.hero-3d .bg-glow-gold{
  width:22vw;height:22vw;right:-7vw;top:-9vw;
  background:radial-gradient(circle,rgba(217,169,63,.022) 0%,transparent 68%);
}
.hero-3d .bg-griddots{
  position:absolute;inset:0;
  background-image:radial-gradient(rgba(6,122,98,.10) 1px,transparent 1px);
  background-size:28px 28px;
  -webkit-mask-image:radial-gradient(ellipse 78% 72% at 62% 50%,#000 0%,transparent 76%);
          mask-image:radial-gradient(ellipse 78% 72% at 62% 50%,#000 0%,transparent 76%);
  animation:orbitGridDrift 18s linear infinite;
}
@keyframes orbitGridDrift{to{background-position:28px 28px}}

/* ---------- 3. ロボットハンド ---------- */
.hero-3d .hero-hand{
  position:absolute;z-index:1;pointer-events:none;inset:0;
  width:100%;height:100%;isolation:isolate;
  opacity:0;translate:0 40px;
  transition:opacity .9s var(--ease-expo),translate .9s var(--ease-expo);
}
.hero-3d .hero-scene{position:absolute;inset:0;animation:orbitImageFloat 6s ease-in-out infinite}
.hero-3d .hero-hand > .hero-scene > img{
  position:absolute;inset:0;z-index:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 50%;max-width:none;
}
.hero-3d .hero-core-portal{position:absolute;inset:0;z-index:4;pointer-events:none;perspective:900px;transform-style:preserve-3d}
.hero-3d .hero-transition-wash{
  position:absolute;inset:0;z-index:3;pointer-events:none;opacity:var(--portal-wash,0);
  background:radial-gradient(circle at 50% 50%,rgba(226,255,247,.98) 0%,rgba(0,201,159,.42) 38%,rgba(255,255,255,.96) 76%);
  mix-blend-mode:screen;will-change:opacity;
}
.hero-3d .hero-hand::before,
.hero-3d .hero-hand::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen;
}
.hero-3d .hero-hand::before{
  background:radial-gradient(circle at var(--palm-x,68%) var(--palm-y,41%),rgba(255,255,255,.98) 0%,rgba(0,201,159,.24) 7%,rgba(63,195,232,.11) 17%,transparent 30%);
  animation:orbitCoreAura 2.2s ease-in-out infinite;
}
.hero-3d .hero-hand::after{
  background:linear-gradient(108deg,transparent 31%,rgba(255,255,255,0) 40%,rgba(255,255,255,.78) 48%,rgba(63,195,232,.18) 52%,transparent 62%);
  translate:-115% 0;animation:orbitLightSweep 4.4s var(--ease-expo) infinite 1.1s;
}
@keyframes orbitImageFloat{50%{scale:1.012;filter:saturate(1.06) brightness(1.02)}}
@keyframes orbitCoreAura{50%{opacity:.62;scale:1.045}}
@keyframes orbitLightSweep{0%,18%{translate:-115% 0}62%,100%{translate:115% 0}}
.hero-3d .is-ready .hero-hand,
.hero-3d .hero.is-ready .hero-hand{
  opacity:calc(1 - var(--sp,0));
  translate:calc(var(--px,0) * -10px) calc(var(--py,0) * -6px + var(--sp,0) * 60px);
  transition:opacity .9s var(--ease-expo),translate .9s var(--ease-expo);
}
/* 入場が終わったら視差を毎フレーム反映させたいので transition を切る */
.hero-3d .hero.is-settled .hero-hand{transition:none}
.hero-3d .hero.no-hand .hero-hand{display:none}
.hero-3d .hero.no-hand .hero-core-portal{display:none}

/* ---------- 4. 中央AIコア / チップのレイヤー ---------- */
.hero-3d .layer-core-anchor{
  position:absolute;left:68%;top:41%;width:320px;aspect-ratio:1;translate:-50% -50%;z-index:4;
  scale:var(--portal-scale,1);opacity:var(--portal-opacity,1);will-change:left,top,scale,opacity,filter;
  filter:brightness(var(--portal-brightness,1)) saturate(var(--portal-saturation,1));
}
.hero-3d .layer-chip{
  position:absolute;inset:0;width:100%;aspect-ratio:1;
  opacity:0;translate:var(--entry-x,0) var(--entry-y,0);rotate:var(--entry-r,0deg);scale:.08;
  filter:blur(20px) brightness(2.8) saturate(1.4);
  animation:orbitLayerIgnite 1.25s var(--ease-expo) var(--delay) forwards;
  transform-style:preserve-3d;will-change:translate,rotate,scale,filter,opacity;
}
.hero-3d .layer-chip::after{
  content:"";position:absolute;inset:12%;border-radius:50%;pointer-events:none;
  background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.95) 48%,transparent 61%);
  mix-blend-mode:screen;opacity:0;translate:-110% 0;
  animation:orbitChipSweep 4.8s var(--ease-expo) calc(var(--delay) + 1.4s) infinite;
}
.hero-3d .chip-motion{
  position:absolute;inset:0;display:block;
  animation:orbitChipHover var(--dur,4.5s) ease-in-out calc(var(--delay) + 1.2s) infinite alternate;
  will-change:translate,rotate,scale,filter;
}
.hero-3d .chip-motion img{width:100%;height:100%;object-fit:contain;max-width:none}
.hero-3d .layer-core{z-index:4;--entry-x:0;--entry-y:0;--entry-r:-16deg}
.hero-3d .layer-core .chip-motion{
  animation:orbitCoreLevitates 2.4s ease-in-out 1.5s infinite;
  filter:drop-shadow(0 20px 24px rgba(0,42,32,.24)) drop-shadow(0 0 24px rgba(0,255,178,.42));
}
.hero-3d .layer-core::before{
  content:"";position:absolute;inset:9%;border-radius:50%;z-index:-1;
  border:2px solid rgba(0,255,178,.7);box-shadow:0 0 22px rgba(0,255,178,.8),inset 0 0 25px rgba(0,255,178,.42);
  animation:orbitCoreShock 2.15s ease-out 1.5s infinite;
}
@keyframes orbitLayerIgnite{0%{opacity:0}54%{opacity:1;filter:blur(2px) brightness(2.2) saturate(1.5)}76%{translate:0 0;rotate:0deg;scale:1.16}100%{opacity:1;translate:0 0;rotate:0deg;scale:1;filter:blur(0) brightness(1.04) saturate(1.1)}}
@keyframes orbitChipHover{0%{translate:0 -3%;rotate:-1.6deg;scale:1;filter:brightness(1)}100%{translate:0 5%;rotate:1.8deg;scale:1.045;filter:brightness(1.14)}}
@keyframes orbitCoreLevitates{0%,100%{translate:0 -1%;scale:1;filter:brightness(1) saturate(1.08)}50%{translate:0 2%;scale:1.055;filter:brightness(1.18) saturate(1.24)}}
@keyframes orbitChipSweep{0%,68%{opacity:0;translate:-120% 0}72%{opacity:.9}86%,100%{opacity:0;translate:120% 0}}
@keyframes orbitCoreShock{0%{opacity:.85;scale:.58}72%,100%{opacity:0;scale:1.55}}

/* ---------- 5. 3D キャンバス ---------- */
.hero-3d #orbitCanvas{
  position:absolute;inset:0;z-index:2;width:100%;height:100%;display:block;pointer-events:none;
  opacity:0;transition:opacity 1.2s ease .2s;
}
.hero-3d .hero.is-ready #orbitCanvas{opacity:1}
.hero-3d .hero.no-webgl #orbitCanvas{display:none}

/* 5b. WebGL 不可時の DOM リング */
.hero-3d #orbitFallback{position:absolute;inset:0;z-index:2;pointer-events:none;display:none}
.hero-3d .hero.no-webgl #orbitFallback{display:block}
.hero-3d .fb-stage{
  position:absolute;left:calc(var(--focus-x) * 100%);top:calc(var(--focus-y) * 100%);width:0;height:0;
}
.hero-3d .fb-core{
  position:absolute;left:0;top:0;width:104px;height:104px;margin:-52px 0 0 -52px;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#fff 0%,#eafaf4 52%,rgba(0,201,159,.45) 100%);
  box-shadow:0 0 40px rgba(0,201,159,.35);
  display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:26px;color:var(--green-dark);letter-spacing:.04em;
}
.hero-3d .fb-ring{position:absolute;left:0;top:0;animation:orbitFbSpin 48s linear infinite}
.hero-3d .fb-chip{
  position:absolute;left:0;top:0;width:88px;height:88px;margin:-44px 0 0 -44px;border-radius:50%;
  background:radial-gradient(circle at 35% 28%,#fff 0%,#f8fcfa 52%,#e6f2ed 100%);
  border:3px solid currentColor;
  box-shadow:0 10px 28px rgba(6,60,48,.20),inset 0 0 0 6px rgba(255,255,255,.72),inset 0 -8px 18px rgba(6,122,98,.08);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:14px;line-height:1.1;text-align:center;
  /* 親のスピンを打ち消して文字を立てる（rotate プロパティは transform より先に適用される） */
  animation:orbitFbSpinBack 48s linear infinite;
}
.hero-3d .fb-chip.has-image{border:0;background:none;box-shadow:none}
.hero-3d .fb-chip.has-image img{width:128%;height:128%;max-width:none;object-fit:contain;filter:drop-shadow(0 10px 14px rgba(6,60,48,.2))}
@keyframes orbitFbSpin{to{rotate:360deg}}
@keyframes orbitFbSpinBack{to{rotate:-360deg}}

/* ---------- 6. コピー（テーマの .hero-content マークアップに載せ替え）---------- */
.hero-3d .hero-content{
  position:absolute;z-index:5;left:clamp(40px,5vw,88px);top:50%;right:auto;
  translate:0 calc(-50% - var(--sp,0) * 40px);
  max-width:720px;width:auto;pointer-events:none;
  opacity:calc(1 - var(--sp,0) * 1.6);
}
.hero-3d .hero-content a{pointer-events:auto}
.hero-3d .hero-eyebrow{
  display:inline-flex;align-items:center;gap:9px;margin-bottom:20px;
  font-size:11.5px;font-weight:700;letter-spacing:.18em;color:var(--green-dark);
}
.hero-3d .hero-eyebrow i{width:26px;height:2px;background:linear-gradient(90deg,var(--green),transparent);display:block}
.hero-3d .hero h1{
  font-size:clamp(34px,3.9vw,58px);font-weight:900;line-height:1.32;letter-spacing:.005em;
  margin-bottom:0;color:var(--text-primary);
}
/* ⚠ アクセント（1%の改善 / 利他的に価値）に background-clip:text のグラデーションを
   当ててはいけない。テーマの motion.js は見出しを 1 文字ずつ <span class="char"> に
   分割してカットインさせる（style.css の charCutInAccent）。子の .char は自前の color を
   持つ一方 -webkit-text-fill-color は親から transparent を継承するため、
   グリフが透明のまま塗られず、charCutInAccent の緑の text-shadow だけが残って
   「緑のぼやけた塊」になる。デモは文字分割が無かったので成立していただけ。
   本番はテーマの単色 var(--accent)（同じブランド緑 #00c99f）をそのまま使う。 */
.hero-3d .hero-desc{margin:22px 0 0;font-size:15px;line-height:2;color:var(--hero-text-sub);max-width:520px}
.hero-3d .hero-cta-group{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap;width:auto}
.hero-3d .hero-cta{
  display:inline-flex;align-items:center;gap:10px;width:auto;
  font-weight:700;font-size:15px;padding:16px 30px;border-radius:99px;white-space:nowrap;
}
.hero-3d .hero-cta-primary{
  color:#fff;
  background:linear-gradient(135deg,var(--green) 0%,var(--green-deep) 100%);
  box-shadow:0 10px 30px rgba(0,201,159,.34),inset 0 1px 0 rgba(255,255,255,.35);
  transition:translate .35s var(--ease-expo),box-shadow .35s;
}
.hero-3d .hero-cta-primary::before{display:none}
.hero-3d .hero-cta-primary:hover{translate:0 -3px;box-shadow:0 16px 40px rgba(0,201,159,.48)}
.hero-3d .hero-cta svg{transition:translate .35s var(--ease-expo)}
.hero-3d .hero-cta:hover svg{translate:4px 0}
.hero-3d .hero-cta-secondary{
  color:var(--green-dark);background:transparent;
  padding:16px 28px;border:1.5px solid rgba(0,163,127,.35);
  transition:border-color .3s,background .3s;
}
.hero-3d .hero-cta-secondary:hover{border-color:var(--green);background:rgba(0,201,159,.07)}
.hero-3d .hero-stats{
  display:flex;gap:48px;margin-top:40px;padding-top:24px;
  border-top:1px solid var(--hero-line);flex-wrap:nowrap;
}
.hero-3d .hero-stat-num{font-size:2.4rem;font-weight:900;color:var(--green-deep);line-height:1.05;font-variant-numeric:tabular-nums}
.hero-3d .hero-stat-label{margin-top:6px;font-size:11.5px;letter-spacing:.08em;color:var(--hero-muted)}

/* ---------- 7. HUD / スクロール ---------- */
.hero-3d .hero-hud{
  position:absolute;z-index:6;left:clamp(32px,6vw,96px);bottom:28px;right:auto;top:auto;
  display:flex;align-items:center;gap:8px;
  font-size:10.5px;font-weight:700;letter-spacing:.14em;color:rgba(20,128,63,.85);
}
/* デモの HUD に DEPTH は無い。3D では tech-network.js を止めるので数字も更新されない。 */
.hero-3d .hero-hud .hud-depth{display:none}
.hero-3d .hud-status{display:flex;align-items:center;gap:8px}
.hero-3d .hud-dot{
  width:7px;height:7px;border-radius:50%;background:var(--green);
  box-shadow:0 0 8px rgba(0,201,159,.9);animation:orbitHudPulse 2s infinite;
}
@keyframes orbitHudPulse{0%,100%{opacity:1}50%{opacity:.35}}
.hero-3d .scroll-indicator{
  position:absolute;z-index:6;left:50%;bottom:22px;margin-left:-180px;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font-size:10px;font-weight:700;letter-spacing:.3em;color:var(--green-dark);opacity:.6;
}
.hero-3d .scroll-indicator .scroll-line{
  display:block;width:1px;height:42px;background:linear-gradient(var(--green),transparent);
  animation:orbitScrollLine 2s var(--ease-expo) infinite;transform-origin:top;
}
@keyframes orbitScrollLine{0%{scale:1 0}45%{scale:1 1}100%{scale:1 1;opacity:0}}
[data-hero-mode="ai"] .hero.is-settled .hero-hud,
[data-hero-mode="ai"] .hero.is-settled .scroll-indicator{opacity:calc(1 - var(--sp,0) * 2) !important}

/* ---------- 8. モード切替スイッチ ---------- */
/* ⚠ デモは nav に置いていたが、テーマの .nav-links は ≤900px でハンバーガーに畳まれる。
   nav に入れるとメニューを開くまで押せず、タップ領域の要件を満たせないため
   ヒーロー内の右上（固定ナビの下）に置く。 */
/* ⚠ z-index は .hero-content(10) より上に置く。現行(V2)では .hero-content が
   style.css の z-index:10 のままなので、7 だと見出しの .line がスイッチを覆い、
   見えているのに押せない（実測 390x664 で elementFromPoint が SPAN.line を返した）。
   3D の 2 バージョンは .hero-content が z-index:5 なので顕在化しなかった。 */
/* ⚠ 色トークンはここで自前に定義する。.hero-3d .hero 側の定義に頼ると、
   current(V2) / legacy(V3) では .hero-3d が付かないため未定義になり、
   選択中ボタンの背景が transparent・文字色も継承値になって選択状態が見えなくなる
   （実測: active 背景が rgba(0,0,0,0)）。4 バージョン共通の UI なので独立させる。 */
.experience-switch{
  --sw-idle:#8aa39a;
  --sw-on:#00a37f;
  --sw-line:rgba(6,122,98,.18);
  position:absolute;z-index:20;top:84px;right:clamp(16px,4vw,48px);
  display:inline-flex;align-items:center;gap:2px;padding:4px;
  border:1px solid var(--sw-line);border-radius:99px;
  background:rgba(255,255,255,.82);box-shadow:0 8px 24px rgba(6,60,48,.10);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}
.experience-switch button{
  appearance:none;-webkit-appearance:none;border:0;background:transparent;
  color:var(--sw-idle);cursor:pointer;border-radius:99px;
  /* ★ タップ領域: Apple HIG 44x44。デモは 66.6x22 / 54.5x22 しか無かった。 */
  min-width:44px;min-height:44px;padding:0 16px;
  display:inline-flex;align-items:center;justify-content:center;
  font:800 10px/1 var(--font-ja);letter-spacing:.09em;
  transition:color .25s,background .25s,box-shadow .25s;
  touch-action:manipulation;
}
.experience-switch button[aria-pressed="true"]{
  color:#fff;background:var(--sw-on);box-shadow:0 4px 12px rgba(0,163,127,.28);
}
.experience-switch button:focus-visible{outline:2px solid var(--sw-on);outline-offset:2px}

/* ---------- 9. 静止（?pose=end / ?reduce=1 / prefers-reduced-motion）---------- */
.hero-3d .hero.is-static .fb-ring,
.hero-3d .hero.is-static .fb-chip,
.hero-3d .hero.is-static .hud-dot,
.hero-3d .hero.is-static .scroll-indicator .scroll-line,
.hero-3d .hero.is-static .bg-glow-mint,
.hero-3d .hero.is-static .bg-griddots{animation:none}
.hero-3d .hero.is-static .hero-hand,
.hero-3d .hero.is-static #orbitCanvas{transition:none}
.hero-3d .hero.is-static .hero-scene,
.hero-3d .hero.is-static .hero-hand::before,
.hero-3d .hero.is-static .hero-hand::after,
.hero-3d .hero.is-static .layer-chip,
.hero-3d .hero.is-static .chip-motion,
.hero-3d .hero.is-static .layer-chip::before,
.hero-3d .hero.is-static .layer-chip::after{animation:none}
.hero-3d .hero.is-static .layer-chip{opacity:1;translate:0 0;rotate:0deg;scale:1;filter:none}
.hero-3d .hero.is-static .hero-hand::before{opacity:.62}

/* ---------- 10. レスポンシブ（幅）---------- */
@media (max-width:900px){
  .hero-3d .hero{--focus-x:.59;--focus-y:.75}
  [data-hero-mode="ai"] .hero{min-height:1050px}
  .hero-3d .hero-stage{min-height:600px}
  [data-hero-mode="classic"] .hero{min-height:600px}
  /* cover 画像を下へ逃がし、コピーと軌道を分離する。掌計算も JS で同率補正。 */
  .hero-3d .hero-scene{translate:0 18%}
  .hero-3d .hero-hand > .hero-scene > img{object-position:72% 50%}
  .hero-3d .hero-content{
    left:6vw;right:6vw;top:80px;max-width:none;text-align:center;
    translate:0 calc(var(--sp,0) * -40px);
  }
  .hero-3d .hero h1{font-size:clamp(25px,7vw,34px);line-height:1.42;margin-bottom:0}
  .hero-3d .hero-desc{display:none}
  .hero-3d .hero-cta-group{justify-content:center;gap:10px;margin-top:24px;flex-direction:row}
  .hero-3d .hero-cta{padding:14px 22px;font-size:14px;width:auto}
  .hero-3d .hero-cta-secondary{padding:14px 22px}
  .hero-3d .hero-stats{justify-content:center;gap:32px;margin-top:26px;padding-top:18px}
  .hero-3d .hero-stat-num{font-size:1.8rem}
  /* 下端はチップが通るので HUD は出さない（現行テーマと同じ扱い） */
  .hero-3d .hero-hud{display:none}
  .hero-3d .scroll-indicator{display:none}
  .hero-3d .fb-chip{width:66px;height:66px;margin:-33px 0 0 -33px;font-size:11.5px}
  .hero-3d .fb-core{width:80px;height:80px;margin:-40px 0 0 -40px;font-size:21px}
}
/* 現行(V2) はコピーが通常フローなので、スイッチのぶん上に余白が要る
   （3D の 2 バージョンはコピーが絶対配置なので不要）。 */
@media (max-width:900px){
  html:not(.hero-3d) .hero{padding-top:152px}
}
@media (max-width:600px){
  .experience-switch{top:76px;padding:3px}
  .experience-switch button{padding:0 11px;font-size:9px}
}

/* ---------- 11. ★ レスポンシブ（高さ）= 実機の重なり対策 ----------
   幅ベースの分岐しか無いと、実機で「使える高さ」が 660px 前後の端末
   (iPhone13=664 / SE=568 / GalaxyS9+=658) で .hero-stats / .hero-cta-group が
   中央AIに 15〜50% 重なる。名目 390×844 では再現しない。
   実測では 390x844 でも 33% 重なったため閾値は 800px に置く
   （840px 以上は通常ティア側の SP_SCENE_SHIFT=0.27 で掌を下へ逃がして解決する）。
   JS 側 (hero-orbit.js の SHORT_H=800) と同じ値で対になっている。
   コピーを下端に逃がし、掌とリングは JS 側で上へ・小さくしている。 */
@media (max-width:900px) and (max-height:799.98px){
  /* ⚠ ステージの min-height を外す。低い画面では 600/640px の下限のほうが viewport より
     高くなり、下端に寄せたコピーが画面外へ押し出される（実測 320x568 で統計値の下端が
     586px = 画面外）。ここだけは実際の svh に合わせる。 */
  .hero-3d .hero-stage{min-height:0}
  [data-hero-mode="classic"] .hero{min-height:0}
  .hero-3d .hero-content{
    /* 58px はフッターの浮動「クラシック表示」ボタン（bottom:14px + 高さ36px）を避ける高さ。
       これが無いと下端に寄せた統計値の上にボタンが重なる（実測 390x664 で 4536px²）。 */
    top:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 58px);
    translate:0 calc(var(--sp,0) * -28px);
  }
  .hero-3d .hero h1{font-size:clamp(21px,5.6vw,27px);line-height:1.36}
  .hero-3d .hero-cta-group{margin-top:14px;gap:8px}
  .hero-3d .hero-cta{padding:11px 16px;font-size:12.5px}
  .hero-3d .hero-cta-secondary{padding:11px 16px}
  .hero-3d .hero-cta svg{width:15px;height:15px}
  .hero-3d .hero-stats{margin-top:12px;padding-top:10px;gap:26px}
  .hero-3d .hero-stat-num{font-size:1.35rem}
  .hero-3d .hero-stat-label{margin-top:2px;font-size:9.5px}
  .hero-3d .hero-scene{translate:0 -4%}
  .experience-switch{top:70px}
}
/* さらに低い画面（iPhone SE 相当 = 568px）。浮動ボタンぶん 58px を空けたぶん、
   コピーの塊が上へ迫って見出しが中央AIに触れる（実測 320x568 で h1 が 4.1% 重なった）。
   見出しと余白をもう一段詰めて、コピー全体の高さを削る。 */
@media (max-width:900px) and (max-height:600px){
  .hero-3d .hero-cta-secondary{display:none}
  .hero-3d .hero h1{font-size:clamp(18px,5vw,22px);line-height:1.28}
  .hero-3d .hero-cta-group{margin-top:10px}
  .hero-3d .hero-cta{padding:9px 14px;font-size:12px}
  .hero-3d .hero-stats{margin-top:8px;padding-top:6px;gap:22px}
  .hero-3d .hero-stat-num{font-size:1.2rem}
}

/* ---------- 12. prefers-reduced-motion ---------- */
@media (prefers-reduced-motion:reduce){
  .hero-3d .hud-dot,
  .hero-3d .scroll-indicator .scroll-line,
  .hero-3d .fb-ring,
  .hero-3d .fb-chip,
  .hero-3d .bg-glow-mint,
  .hero-3d .bg-griddots{animation:none}
  .hero-3d .hero-hand,
  .hero-3d #orbitCanvas{transition-duration:.01s}
  .hero-3d .hero-scene,
  .hero-3d .hero-hand::before,
  .hero-3d .hero-hand::after,
  .hero-3d .layer-chip,
  .hero-3d .chip-motion,
  .hero-3d .layer-chip::before,
  .hero-3d .layer-chip::after{animation:none}
  .hero-3d .layer-chip{opacity:1;translate:0 0;rotate:0deg;scale:1;filter:none}
}