/* GEAR APEX — Enhancement layer
   Claude Design由来の良い部品だけを「追加」する層（既存style.cssは無改変）。
   まずは index でパイロット運用。問題なければ他ページにも link を足して展開する。 */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;600;700&family=Orbitron:wght@600;700;800;900&display=swap');

:root{
  --gax-cyan:#22d3ee;
  --gax-hud-tl:rgba(34,211,238,.6);
  --gax-hud-br:rgba(168,85,247,.6);
  --gax-purple-bright:#a78bfa;
  --gax-blue-bright:#60a5fa;
}

/* ---- HUD eyebrow: セクション見出しの上に置く小さなラベル ---- */
.eyebrow{
  font-family:'Orbitron','JetBrains Mono',ui-monospace,monospace;
  font-size:.6875rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gax-cyan); display:inline-flex; align-items:center; gap:8px;
  text-shadow:0 0 14px rgba(34,211,238,.5);
  margin-bottom:.55rem;
}
.eyebrow::before{
  content:""; width:22px; height:1px;
  background:linear-gradient(90deg,var(--gax-cyan),transparent);
}

/* ---- 数値は Orbitron で“計器”らしく（trust/統計） ---- */
.hero-trust b{
  font-family:'Orbitron','JetBrains Mono',monospace;
  font-variant-numeric:tabular-nums; letter-spacing:.02em;
}

/* ---- ホログラム文字（任意・.holo を付けた要素だけ） ---- */
.holo{
  background:linear-gradient(100deg,var(--gax-purple-bright),var(--gax-cyan) 35%,var(--gax-blue-bright) 55%,var(--gax-purple-bright) 80%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:gaxHolo 6s linear infinite;
}
@keyframes gaxHolo{ from{background-position:0 0;} to{background-position:220% 0;} }

/* ---- HUDコーナーブラケット（任意・.hud を付けた枠だけ） ---- */
.hud{ position:relative; }
.hud::before,.hud::after{ content:""; position:absolute; width:18px; height:18px; pointer-events:none; }
.hud::before{ top:8px; left:8px; border-top:2px solid var(--gax-hud-tl); border-left:2px solid var(--gax-hud-tl); border-top-left-radius:3px; }
.hud::after{ bottom:8px; right:8px; border-bottom:2px solid var(--gax-hud-br); border-right:2px solid var(--gax-hud-br); border-bottom-right-radius:3px; }

/* ---- ナビのホバー下線スイープ：青いバーが左→右へ「びゅん」 ---- */
header nav ul a{ position:relative; }
header nav ul a::after{
  content:""; position:absolute; left:6px; right:6px; bottom:-2px; height:3px;
  background:linear-gradient(90deg,#38bdf8,#2563eb);
  box-shadow:0 0 10px rgba(56,189,248,.65);
  border-radius:3px; transform:scaleX(0); transform-origin:left;
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}
header nav ul a:hover::after{ transform:scaleX(1); }
header nav ul a.is-active::after{ transform:scaleX(1); opacity:.85; }
/* 封印中(鍵付き)はバーを出さない */
header nav ul a.nav-locked::after{ display:none !important; }

@media (prefers-reduced-motion: reduce){
  .holo{ animation:none !important; }
  header nav ul a::after{ transition:none !important; }
}

/* ============================================================
   ゲーム感の仕上げ（2026-06-22）：ホログラム加工／操作の手応え／軽量配慮
   ============================================================ */

/* ---- ホログラム加工（立ち絵をモニター投影風に。JSが .gax-holo-ov を挿入） ---- */
/* ホログラム表示ユニット（HUDパネル）：4隅ブラケット＋枠発光＋投影プラットフォーム＋薄グリッド。
   --acc はキャラ色（ミオ=紫/ヒナ=ローズ/その他=シアン）をJSがセット。 */
.gax-holo-ov{
  --acc:#22d3ee;
  position:absolute; inset:0; pointer-events:none; z-index:6; overflow:hidden;
  /* 多層ベゼル：内側の明線→暗いベゼル溝→外側の細線→内グロー→外周グロー→落ち影 */
  box-shadow:
     inset 0 0 0 1.5px color-mix(in srgb, var(--acc) 62%, transparent),
     inset 0 0 0 4px rgba(6,5,14,.5),
     inset 0 0 0 5.5px color-mix(in srgb, var(--acc) 20%, transparent),
     inset 0 0 42px color-mix(in srgb, var(--acc) 12%, transparent),
     0 0 24px color-mix(in srgb, var(--acc) 24%, transparent),
     0 12px 34px rgba(0,0,0,.5);
}
/* 上辺中央のヘッダーバー（白コア＝発光する“画面のヘッダー”） */
.gax-holo-ov::before{ content:""; position:absolute; top:7px; left:50%; transform:translateX(-50%);
  width:48%; height:3px; border-radius:2px;
  background:linear-gradient(90deg, transparent, var(--acc) 22%, #fff 50%, var(--acc) 78%, transparent);
  box-shadow:0 0 12px var(--acc); }
/* 薄い走査線＋ドットグリッド（テクスチャ感） */
.gax-holo-grid{ position:absolute; inset:0; opacity:.5; pointer-events:none;
  background:
    repeating-linear-gradient(180deg, transparent 0 7px, color-mix(in srgb, var(--acc) 5%, transparent) 7px 8px),
    radial-gradient(color-mix(in srgb, var(--acc) 7%, transparent) 1px, transparent 1.5px);
  background-size: auto, 16px 16px;
}
/* 4隅のメカ風ブラケット（角丸L＋頂点に白く光るノード） */
.gax-holo-corner{ position:absolute; width:34px; height:34px; filter:drop-shadow(0 0 6px var(--acc)); }
.gax-holo-corner::after{ content:""; position:absolute; width:6px; height:6px; border-radius:50%;
  background:#fff; box-shadow:0 0 9px 1px var(--acc); }
.gax-holo-corner.tl{ top:7px; left:7px; border-top:3px solid var(--acc); border-left:3px solid var(--acc); border-radius:4px 0 0 0; }
.gax-holo-corner.tl::after{ top:-4px; left:-4px; }
.gax-holo-corner.tr{ top:7px; right:7px; border-top:3px solid var(--acc); border-right:3px solid var(--acc); border-radius:0 4px 0 0; }
.gax-holo-corner.tr::after{ top:-4px; right:-4px; }
.gax-holo-corner.bl{ bottom:7px; left:7px; border-bottom:3px solid var(--acc); border-left:3px solid var(--acc); border-radius:0 0 0 4px; }
.gax-holo-corner.bl::after{ bottom:-4px; left:-4px; }
.gax-holo-corner.br{ bottom:7px; right:7px; border-bottom:3px solid var(--acc); border-right:3px solid var(--acc); border-radius:0 0 4px 0; }
.gax-holo-corner.br::after{ bottom:-4px; right:-4px; }
/* 下部の投影プラットフォーム（白コアの発光ライン＋下への強い拡散光） */
.gax-holo-base{ position:absolute; left:12%; right:12%; bottom:9px; height:2px; border-radius:2px;
  background:linear-gradient(90deg, transparent, var(--acc) 24%, #fff 50%, var(--acc) 76%, transparent);
  box-shadow:0 0 18px var(--acc); }
.gax-holo-base::after{ content:""; position:absolute; left:-22%; right:-22%; bottom:-16px; height:36px;
  background:radial-gradient(ellipse at 50% 0, color-mix(in srgb, var(--acc) 54%, transparent), transparent 72%); }
/* 上から下へ流れる走査光（動き／reduce motionでは非表示） */
.gax-holo-sweep{ position:absolute; left:0; right:0; top:-26%; height:26%;
  background:linear-gradient(180deg, transparent, color-mix(in srgb, var(--acc) 22%, transparent), transparent);
  animation:gaxSweep 5.5s linear infinite; }
@keyframes gaxSweep{ 0%{ transform:translateY(0); opacity:0; } 10%{ opacity:1; } 90%{ opacity:1; } 100%{ transform:translateY(440%); opacity:0; } }
@media (prefers-reduced-motion: reduce){ .gax-holo-sweep{ display:none !important; } }

/* 一貫性：ページ別の旧コーナー枠を消して、統一のホロ枠に一本化 */
.char-frame-overlay{ display:none !important; }
/* 一貫性：立ち絵まわりのページ別ぼかしハロ/影を撤去（統一のホロ枠だけ残す） */
.vn-art::before, .vn-art::after{ display:none !important; }
/* 一貫性：立ち絵の背後を全ページ同じ暗い面に統一（黒背景動画の“黒箱”を馴染ませる） */
.vn-art, .gw-art, .apm-char{ background:#0b0b13 !important; border-radius:6px; }
/* 枠入り合成動画(_framed)に統一済み＝CSSのホロ枠は二重防止で非表示（枠は動画に焼き込み済み） */
.vn-art > .gax-holo-ov, .apm-char > .gax-holo-ov{ display:none !important; }
/* .vn-art の立ち絵も枠入り合成動画に統一→既存のradialマスク/影を解除して焼き込んだ枠を見せる */
.vn-art .gc-standee-vid, #vn-art-mio .gc-standee-vid, #vn-art-hina .gc-standee-vid{
  -webkit-mask-image:none !important; mask-image:none !important; filter:none !important;
  object-fit:contain; border-radius:8px;
}

/* ---- サイバー背景：薄いデータ/コードが流れる電子世界観（全ページ共通・最背面・極薄） ---- */
.gax-cyber-bg {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  opacity: .28;
  /* 静的な回路/データ・フィールド：ノードドット＋縦データ列＋走査線＋上部グロー */
  background:
    radial-gradient(rgba(34,211,238,.05) 1px, transparent 1.7px) 0 0 / 30px 30px,
    repeating-linear-gradient(90deg, rgba(168,85,247,.028) 0 1px, transparent 1px 88px),
    repeating-linear-gradient(0deg, rgba(34,211,238,.02) 0 1px, transparent 1px 3px),
    radial-gradient(120% 72% at 50% -4%, rgba(124,58,237,.07), transparent 70%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.5) 42%, rgba(0,0,0,.85) 100%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.5) 42%, rgba(0,0,0,.85) 100%);
}
/* 流れるデータ/コード（16進タイルの降下） */
.gax-cyber-bg::before {
  content: ''; position: absolute; left: 0; right: 0; top: -256px; bottom: 0;
  background-image: url("../assets/cyber_tile.png");
  background-repeat: repeat; background-size: 256px 256px;
  opacity: .8;
  animation: gaxCyberRain 38s linear infinite;
  will-change: transform;
}
/* 端末スキャン：細い光の帯がゆっくり縦に走る（“読み取り中”の電子世界観） */
.gax-cyber-bg::after {
  content: ''; position: absolute; left: 0; right: 0; height: 150px; top: 0;
  background: linear-gradient(180deg, transparent, rgba(34,211,238,.06) 46%, rgba(168,85,247,.05) 56%, transparent);
  animation: gaxScanSweep 11s linear infinite; will-change: transform;
}
@keyframes gaxCyberRain { from { transform: translateY(0); } to { transform: translateY(256px); } }
@keyframes gaxScanSweep { 0% { transform: translateY(-170px); } 100% { transform: translateY(105vh); } }
@media (prefers-reduced-motion: reduce) {
  .gax-cyber-bg::before { animation: none; }
  .gax-cyber-bg::after { animation: none; opacity: 0; }
}
@media (max-width: 760px) { .gax-cyber-bg { opacity: .18; } .gax-cyber-bg::after { display: none; } }

/* ---- 操作の手応え：押し込み＋リップル ---- */
.btn-primary, .buy-btn, .b-buy, .daily-btn, .ch-cta, .save-btn, #rhythm-btn,
.feature-card, .category-card, .item-card, .b-card{ transition:transform .13s ease, box-shadow .2s ease; }
.btn-primary:active, .buy-btn:active, .b-buy:active, .daily-btn:active, .ch-cta:active,
.save-btn:active, #rhythm-btn:active{ transform:scale(.96) !important; }
.feature-card:active, .category-card:active, .item-card:active{ transform:scale(.985); }

.gax-ripple{ position:absolute; border-radius:50%; background:rgba(255,255,255,.35);
  transform:scale(0); opacity:.6; pointer-events:none; z-index:3; animation:gaxRipple .6s ease-out forwards; }
@keyframes gaxRipple{ to{ transform:scale(1.7); opacity:0; } }

@media (prefers-reduced-motion: reduce){
  .gax-holo-ov{ animation:none !important; }
  .gax-holo-ov::after{ animation:none !important; display:none !important; }
  .gax-ripple{ display:none !important; }
}

/* ============================================================
   背景の統一（全ページ共通トーン・2026-06-22）
   各ページの body::before/::after を高詳細度＋!importantで上書きして揃える。
   ============================================================ */
html body::before{
  content:'' !important; position:fixed !important; inset:0 !important;
  pointer-events:none !important; z-index:0 !important;
  background:
    radial-gradient(78% 44% at 50% -3%, rgba(124,58,237,.18), transparent 60%),
    radial-gradient(52% 40% at 86% 8%, rgba(34,211,238,.085), transparent 62%),
    radial-gradient(48% 42% at 8% 16%, rgba(251,113,133,.06), transparent 64%) !important;
}
html body::after{
  content:'' !important; position:fixed !important; inset:0 !important;
  pointer-events:none !important; z-index:0 !important; opacity:.4 !important;
  background-image:
    linear-gradient(rgba(124,58,237,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,58,237,.045) 1px, transparent 1px) !important;
  background-size:46px 46px !important;
  -webkit-mask-image:radial-gradient(74% 60% at 50% 0%, #000, transparent 82%) !important;
          mask-image:radial-gradient(74% 60% at 50% 0%, #000, transparent 82%) !important;
}
/* 本文を背景より前面に */
body main{ position:relative; z-index:1; }
/* ページ固有の重複背景グリッドを無効化（統一背景に一本化） */
#best-body::before{ background:none !important; animation:none !important; }

/* ============================================================
   立ち絵の挙動を統一（2026-06-22）：横の固定立ち絵を共通リズムで浮遊。
   ホームの .ch-art はカーソル追従JSがtransformを使うため対象外（競合回避）。
   reduce motion では静止。
   ============================================================ */
/* 立ち絵の上下浮遊は不快とのことで全停止（枠が動かないように） */
.vn-art, .gw-art, .apm-char{ animation:none !important; }
.char-hero .ch-art img, .char-hero .ch-art video{ animation:none !important; }

/* ============================================================
   ページ間ビュー・トランジション（2026-06-22）
   両脇キャラ＋共通ヘッダーをその場に残し、中央だけ切り替わる演出。
   既存の複数ページ構成のまま、SPA化せずに“常駐・差し替え”感を出す。
   対応ブラウザ（Chrome等）でのみ作動、非対応は通常遷移にフォールバック。
   ============================================================ */
@view-transition { navigation: auto; }
header{ view-transition-name: gax-header; }
.vn-char.vn-left{ view-transition-name: gax-char-left; }
.vn-char.vn-right{ view-transition-name: gax-char-right; }
/* ルート（中央含む全体）のクロスフェード時間を少し上品に */
::view-transition-old(root), ::view-transition-new(root){ animation-duration:.32s; }