/* ===========================================================================
   GEAR APEX - トップLP ソシャゲ風レイヤー（軽量版）  scope: body.home のみ
   方針: 重い処理（blur付き背景アニメ / filter・box-shadow・background-position の
   常時アニメ）は廃止し「静止で焼き込み」。常時動くのは GPU で安いもの最小限だけ。
   =========================================================================== */

/* 常時アニメは「不透明度」と「transform」のみ（GPU合成・再描画なし） */
@keyframes gachaGlowPulse { 0%,100% { opacity: .45; } 50% { opacity: .9; } }
@keyframes gachaSheenX    { 0% { transform: translateX(-160%) skewX(-18deg); } 60%,100% { transform: translateX(560%) skewX(-18deg); } }

/* ---- HERO：エネルギー オーラ（静止・1レイヤー・blurなし） ---- */
.home .hero { position: relative; overflow: hidden; isolation: isolate; }
.home .hero::before {
  content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(38% 40% at 22% 26%, rgba(124,58,237,.34), transparent 70%),
    radial-gradient(36% 38% at 80% 20%, rgba(0,119,255,.26), transparent 70%),
    radial-gradient(46% 46% at 66% 82%, rgba(236,72,153,.20), transparent 72%);
}
/* テック格子（静止・極薄） */
.home .hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .045;
  background-image: linear-gradient(rgba(255,255,255,.6) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.6) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent 90%);
  mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent 90%);
}

/* アイキャッチ帯（静止の金リボン） */
.home .hero-eyebrow {
  background: linear-gradient(135deg, rgba(251,191,36,.16), rgba(168,85,247,.16));
  border: 1px solid rgba(251,191,36,.5); color: #fde68a;
  box-shadow: 0 0 16px rgba(251,191,36,.22);
}
.home .hero-eyebrow i { color: #fbbf24; }

/* タイトル：静止グラデ文字＋静止グロー（アニメなし＝再描画ゼロ） */
.home .hero h1 { text-shadow: 0 0 18px rgba(124,58,237,.35); }
.home .hero h1 .text-accent {
  background: linear-gradient(100deg, #c4b5fd, #a855f7 40%, #38bdf8 75%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* CTA：静止の強グロー＋“opacityだけ”脈動する発光擬似要素（主ボタン1つだけ） */
.home .hero-cta .btn-primary {
  position: relative;
  box-shadow: 0 10px 28px rgba(124,58,237,.5), 0 0 0 1px rgba(168,85,247,.55) inset;
  border: 1px solid rgba(168,85,247,.6);
}
.home .hero-cta .btn-primary::before {
  content: ''; position: absolute; inset: -3px; z-index: -1; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 22px 4px rgba(168,85,247,.55); animation: gachaGlowPulse 2.8s ease-in-out infinite;
}
.home .hero-cta .btn-ghost-lp { border: 1px solid rgba(34,211,238,.5); box-shadow: 0 0 16px rgba(34,211,238,.16); }

/* 信頼ステータス → ガチャ風チップ（静止） */
.home .hero-trust { gap: 0.7rem; }
.home .hero-trust span {
  padding: 0.5rem 1rem; border-radius: 12px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(168,85,247,.34);
  box-shadow: 0 0 14px rgba(124,58,237,.16);
}
.home .hero-trust span b { color: #fde68a; }

/* 検索バー（静止枠） */
.home .search-input {
  border: 1px solid rgba(168,85,247,.42) !important;
  box-shadow: 0 0 20px rgba(124,58,237,.18) !important;
}

/* ---- キャラ相談バナー：レア(金)フレーム（静止）＋光沢スイープ(transform/デスクトップのみ) ---- */
.home .char-hero {
  position: relative; overflow: hidden; isolation: isolate;
  border: 1.5px solid transparent; border-radius: 22px;
  background:
    linear-gradient(var(--bg-card, #14121f), var(--bg-card, #14121f)) padding-box,
    linear-gradient(120deg, #fbbf24, #a855f7 45%, #38bdf8 75%, #fbbf24) border-box;
  box-shadow: 0 16px 44px rgba(124,58,237,.26);
}
.home .char-hero::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 22%; z-index: 3; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.16), transparent);
  transform: translateX(-160%) skewX(-18deg); animation: gachaSheenX 7s ease-in-out infinite;
}
.home .char-hero .ch-tag {
  background: linear-gradient(135deg, rgba(251,191,36,.18), rgba(168,85,247,.16));
  border: 1px solid rgba(251,191,36,.46); color: #fde68a;
}

/* ---- セクション見出し：ゲームUI風ブラケット（静止） ---- */
.home .section-title { position: relative; text-shadow: 0 0 16px rgba(124,58,237,.26); }
.home .section-title::before {
  content: ''; display: inline-block; width: 6px; height: 1.1em; margin-right: .2rem; vertical-align: -2px;
  background: linear-gradient(180deg, #fbbf24, #a855f7); border-radius: 2px;
  box-shadow: 0 0 10px rgba(168,85,247,.5);
}

/* ---- 機能/ガイドカード：レア枠（静止）＋ホバー時だけ動く（hoverは常時負荷なし） ---- */
.home .feature-card {
  position: relative; overflow: hidden; isolation: isolate;
  border: 1px solid transparent; border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02)) padding-box,
    linear-gradient(140deg, rgba(168,85,247,.5), rgba(0,119,255,.32) 55%, rgba(251,191,36,.32)) border-box;
  transition: transform .18s ease, box-shadow .25s ease;
}
.home .feature-card::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -50%; width: 35%; z-index: 2; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.16), transparent);
  transform: skewX(-18deg); transition: left .6s ease;
}
.home .feature-card:hover { transform: translateY(-5px) scale(1.015); box-shadow: 0 16px 40px rgba(124,58,237,.38), 0 0 24px rgba(168,85,247,.3); }
.home .feature-card:hover::after { left: 130%; }
.home .feature-card .fc-icon { box-shadow: 0 0 18px rgba(168,85,247,.4), 0 0 0 1px rgba(255,255,255,.08) inset; border: 1px solid rgba(168,85,247,.46); }

/* カテゴリカード：ホバー時のみ発光（常時負荷なし） */
.home .category-grid .category-card:hover,
.home #category-container > *:hover { box-shadow: 0 14px 34px rgba(124,58,237,.3), 0 0 20px rgba(168,85,247,.24) !important; }

/* きらめき粒子（gacha_fx.js）。デスクトップのみ・自動間引き。 */
.home .gacha-spark { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

/* ---- スマホ：重い演出を全部OFF（静止の枠・グローだけ残す） ---- */
@media (max-width: 760px) {
  .home .char-hero::after { display: none; }            /* 光沢スイープ停止 */
  .home .hero-cta .btn-primary::before { animation: none; }/* 脈動停止（静止グローは残る） */
  .home .feature-card::after { display: none; }
  .home .gacha-spark { display: none !important; }       /* 粒子停止 */
}
/* OSの「視差を減らす」設定では常時アニメを全停止 */
@media (prefers-reduced-motion: reduce) {
  .home .char-hero::after, .home .hero-cta .btn-primary::before { animation: none !important; }
  .home .gacha-spark { display: none !important; }
}

/* ===========================================================================
   eスポーツ/FPS HUD レイヤー（すべて静止＝追加の常時負荷なし）
   =========================================================================== */

/* HERO：スキャンライン＋四隅レティクル（要素背景に焼き込み・1描画） */
.home .hero {
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='none' stroke='%23a855f7' stroke-width='2' opacity='0.5'%3E%3Cpath d='M2 20V2h18'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='none' stroke='%2322d3ee' stroke-width='2' opacity='0.45'%3E%3Cpath d='M118 100v18h-18'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat, no-repeat, no-repeat;
  background-position: 0 0, 18px 16px, right 18px bottom 16px;
}

/* 角カット（FPS UI風）ボタン */
.home .hero-cta .btn-primary, .home .hero-cta .btn-ghost-lp, .home .char-hero .ch-cta {
  border-radius: 7px !important;
  clip-path: polygon(11px 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%, 0 11px);
}

/* 見出しを HUD ヘッダー化：角バー＋発光アンダーライン */
.home .section-title::before { transform: skewX(-16deg); width: 7px; }
.home .section-title {
  background-image: linear-gradient(90deg, rgba(168,85,247,.7), rgba(34,211,238,.4) 55%, transparent 90%);
  background-repeat: no-repeat; background-position: left bottom; background-size: 190px 2px; padding-bottom: 8px;
}

/* カード四隅にターゲット・ブラケット（::before・静止） */
.home .feature-card::before {
  content: ''; position: absolute; inset: 9px; z-index: 2; pointer-events: none;
  --hud: rgba(196,181,253,.85);
  background-image:
    linear-gradient(var(--hud), var(--hud)), linear-gradient(var(--hud), var(--hud)),
    linear-gradient(var(--hud), var(--hud)), linear-gradient(var(--hud), var(--hud)),
    linear-gradient(var(--hud), var(--hud)), linear-gradient(var(--hud), var(--hud)),
    linear-gradient(var(--hud), var(--hud)), linear-gradient(var(--hud), var(--hud));
  background-repeat: no-repeat;
  background-size: 13px 2px, 2px 13px, 13px 2px, 2px 13px, 13px 2px, 2px 13px, 13px 2px, 2px 13px;
  background-position:
    left top, left top, right top, right top,
    left bottom, left bottom, right bottom, right bottom;
  opacity: .5; transition: opacity .25s ease;
}
.home .feature-card:hover::before { opacity: 1; }

/* キャラ相談バナーの四隅ブラケット（金・::before） */
.home .char-hero::before {
  content: ''; position: absolute; inset: 12px; z-index: 3; pointer-events: none;
  --hud: rgba(251,191,36,.8);
  background-image:
    linear-gradient(var(--hud), var(--hud)), linear-gradient(var(--hud), var(--hud)),
    linear-gradient(var(--hud), var(--hud)), linear-gradient(var(--hud), var(--hud)),
    linear-gradient(var(--hud), var(--hud)), linear-gradient(var(--hud), var(--hud)),
    linear-gradient(var(--hud), var(--hud)), linear-gradient(var(--hud), var(--hud));
  background-repeat: no-repeat;
  background-size: 20px 2px, 2px 20px, 20px 2px, 2px 20px, 20px 2px, 2px 20px, 20px 2px, 2px 20px;
  background-position: left top, left top, right top, right top, left bottom, left bottom, right bottom, right bottom;
}

/* eスポーツ・アクセント：hero eyebrow に雷、trust チップを角ばらせる */
.home .hero-trust span { border-radius: 6px; clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px); }

@media (max-width: 760px) {
  .home .feature-card::before { inset: 7px; opacity: .65; }
  .home .char-hero::before { inset: 9px; }
}

/* ===========================================================================
   v3: 世界観フォト背景＋キャラ・ステージ＋ボタン/検索の質感（2026-06-23 担当B）
   生成画像 assets/hero_world.png を ヒーロー＋キャラバナー背景に兼用。
   画像が無い場合は微ビネットだけ残り崩れない（グレースフル・フォールバック）。
   すべて静止（常時アニメ追加なし）＝既存の軽量方針を踏襲。
   =========================================================================== */

/* ── ヒーロー：写真/動画背景（最背面 z-3）＋可読性オーバーレイ。既存オーラ/格子は上に残る ── */
.home .hero .hero-bg {
  position: absolute; inset: 0; z-index: -3; pointer-events: none; overflow: hidden;
  background: url("../assets/world_portal.png") center 30% / cover no-repeat;
}
/* 動くループ背景（PCのみ）。静止画(poster/背景)の上に重なり、::afterで暗くして可読性を確保 */
.home .hero .hero-bg .hero-bg-vid {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 36%; z-index: 0; pointer-events: none;
}
.home .hero .hero-bg::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    linear-gradient(180deg, rgba(8,8,18,.82) 0%, rgba(8,8,18,.48) 42%, rgba(8,8,18,.92) 100%),
    radial-gradient(125% 85% at 50% 32%, rgba(8,8,18,0) 38%, rgba(8,8,18,.6) 100%);
}
/* Mobile still uses the same hero loop; the crop may be tighter, but motion stays. */
@media (max-width: 760px) {
  .home .hero .hero-bg .hero-bg-vid {
    display: block;
    object-fit: cover;
    object-position: center 34%;
  }
}
@media (prefers-reduced-motion: reduce) { .home .hero .hero-bg .hero-bg-vid { display: none; } }

/* ── キャラ相談バナー：同じ世界観画像を床寄りで。立ち絵/文字が映える濃いめオーバーレイ ── */
.home .char-hero .ch-bg {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: 22px; overflow: hidden;
  background-image:
    linear-gradient(180deg, rgba(12,10,26,.80) 0%, rgba(12,10,26,.52) 48%, rgba(12,10,26,.9) 100%),
    url("../assets/world_portal.png");
  background-size: cover, cover;
  background-position: center, center 68%;
  background-repeat: no-repeat;
}

/* ── 二重枠の解消：各キャラ箱のホログラムHUD枠(enhance.jsの.gax-holo-ov)をホームだけ非表示。
      バナーの金枠1つ＋下の発光スポットライトで「世界観の中に自然に立つ」見せ方に統一。 ── */
.home .char-hero .gax-holo-ov { display: none !important; }

/* ── キャラを「床に立たせる」発光ステージ（立ち絵の足元に色付きグロー） ── */
.home .char-hero .ch-art { isolation: isolate; }
/* 立ち絵の背後に暗いスポットライト溜まり＝忙しい写真背景からキャラを浮かせる（縁は透過で写真が残る） */
.home .char-hero .ch-art::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(58% 66% at 50% 44%, rgba(7,6,18,.74), rgba(7,6,18,.34) 66%, rgba(7,6,18,0) 100%);
}
.home .char-hero .ch-art::after {
  content: ''; position: absolute; left: 50%; bottom: 6%; z-index: -1;
  width: 62%; height: 22px; transform: translateX(-50%); border-radius: 50%;
  filter: blur(5px); pointer-events: none;
}
.home .char-hero .ch-left.ch-art::after  { background: radial-gradient(closest-side, rgba(167,139,250,.55), rgba(167,139,250,0) 72%); }
.home .char-hero .ch-right.ch-art::after { background: radial-gradient(closest-side, rgba(251,113,133,.55), rgba(251,113,133,0) 72%); }

/* ── 主CTAボタン：色は据え置き、艶（上端ハイライト）＋押し心地を追加 ── */
.home .hero-cta .btn-primary,
.home .char-hero .ch-cta {
  box-shadow: 0 12px 30px rgba(168,85,247,.42),
              0 0 0 1px rgba(255,255,255,.10) inset,
              0 1px 0 rgba(255,255,255,.34) inset;
  transition: transform .16s ease, box-shadow .22s ease, filter .22s ease;
}
.home .hero-cta .btn-primary:hover,
.home .char-hero .ch-cta:hover { transform: translateY(-3px); filter: saturate(1.08) brightness(1.05); }
.home .hero-cta .btn-primary:active,
.home .char-hero .ch-cta:active { transform: translateY(0) scale(.985); }
.home .hero-cta .btn-ghost-lp:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(34,211,238,.22); }

/* ── 検索バー：虫眼鏡アイコン＋フォーカスリング（探す動線を分かりやすく） ── */
.home .search-container { position: relative; }
.home .search-container::before {
  content: "\f002"; font-family: "Font Awesome 6 Free"; font-weight: 900;
  position: absolute; left: 1.25rem; top: 50%; transform: translateY(-50%);
  color: #a78bfa; font-size: 1rem; opacity: .9; pointer-events: none; z-index: 2;
}
.home .search-input { padding-left: 3rem !important; }
.home .search-input:focus {
  border-color: rgba(168,85,247,.7) !important;
  box-shadow: 0 0 0 3px rgba(168,85,247,.18), 0 0 26px rgba(124,58,237,.3) !important;
}

/* OSの「視差を減らす」設定では、上記の interactionトランスフォームも抑制 */
@media (prefers-reduced-motion: reduce) {
  .home .hero-cta .btn-primary,
  .home .char-hero .ch-cta,
  .home .hero-cta .btn-ghost-lp { transition: box-shadow .2s ease; }
  .home .hero-cta .btn-primary:hover,
  .home .char-hero .ch-cta:hover,
  .home .hero-cta .btn-ghost-lp:hover { transform: none; }
}

/* ===========================================================================
   v7: 注目ナビゲーター・ショーケース（動くHUD枠 holo_frame.mp4 を 9:16 でピッタリ使う）
   枠＝動画（背面・100%）／キャラ＝透過PNG（前面・中央）。枠の縁が歪まず額縁として映える。
   =========================================================================== */
.home .gax-featured { padding-top: 1.1rem; padding-bottom: 1.1rem; }
.home .gax-fc-wrap {
  display: flex; align-items: center; justify-content: center; gap: 2.4rem; flex-wrap: wrap;
}
.home .gax-fc-card {
  position: relative; flex: 0 0 auto; width: 300px; aspect-ratio: 9 / 16;
  border-radius: 10px; overflow: hidden; isolation: isolate; background: #06070f;
  box-shadow: 0 18px 48px rgba(0,0,0,.5), 0 0 30px rgba(56,189,248,.18);
}
/* 合成済み1本動画（キャラ＋枠を lighten で焼き込み済み）でカードを満たす＝軽量 */
.home .gax-fc-vid {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 1; pointer-events: none;
}

/* ===========================================================================
   v10: キャラ相談バナーの2人も「動く枠＋透けるキャラ」に統一（カーソル追従は維持）
   各 .ch-art を 9:16 のHUDカード化し、立ち絵動画(背面)＋枠動画(前面・screen)を重ねる。
   =========================================================================== */
.home .char-hero .ch-left,
.home .char-hero .ch-right { display: flex; justify-content: center; align-items: flex-end; overflow: visible; }
.home .char-hero .ch-art {
  width: 190px; height: auto; aspect-ratio: 9 / 16; max-width: 100%;
  display: block; overflow: hidden; isolation: isolate;
  background: #06070f; border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0,0,0,.5), 0 0 26px rgba(56,189,248,.16);
}
/* 合成済み1本動画（キャラ＋枠を焼き込み済み）でカードを満たす＝軽量化（1スロット1動画） */
.home .char-hero .ch-art .ch-framed-vid {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  z-index: 1; pointer-events: none;
}
/* 枠を二重にしないため、バナー外周のHUDブラケット(金)はホームでは控える（金の細枠は残す） */
.home .char-hero::before { display: none; }
/* 足元スポット/フロアグローはカード化で不要 */
.home .char-hero .ch-art::before,
.home .char-hero .ch-art::after { display: none; }
@media (max-width: 880px) {
  .home .char-hero .ch-art { width: 150px; }
}
.home .gax-fc-side { max-width: 340px; text-align: left; }
.home .gax-fc-quote {
  font-size: 1.02rem; line-height: 1.75; color: var(--text-main); margin: 0 0 1.1rem;
  padding-left: .9rem; border-left: 3px solid rgba(168,85,247,.6);
}
.home .gax-fc-side .btn-primary { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; }
@media (max-width: 760px) {
  .home .gax-fc-wrap { gap: 1.2rem; }
  .home .gax-fc-card { width: 220px; }
  .home .gax-fc-side { text-align: center; }
  .home .gax-fc-quote { border-left: 0; padding-left: 0; }
}