/* /assets/css/nav-desktop2.css（全文・A案：右基準＋縦中央 + hit2 hover/active glow）
   - Top page PC hero overlay menu (nav-desktop2)
   - 初期：非表示（Press Start 前）
   - Press Start 後：body.is-started でフェードイン
   - Latest より下に固定
   - 配置：Xは「右端からの距離」、Yは「heroの縦中央（navの中央）」に固定
   - 透明リンク(.hit2)：hoverで発光 / activeで明転 / focus-visible対応 / is-active対応
*/

/* 既定：まず出さない（SP含む） */
.nav-desktop2{
  display: none;
}

@media (min-width: 768px){

  /* =========================================================
     1) 変数は「トップページの hero-inner」だけに閉じ込める
     - nav2 サイズは “hero-inner幅基準” に寄せる（ズームで暴れにくい）
     ========================================================= */
  body.is-home #siteMain .hero-inner{
    position: relative;
    isolation: isolate;

    /* 右マージン：viewportではなく “ほどほど固定” に寄せる */
    --nav2-r: clamp(calc(12px * var(--pc-ui-scale, 1)), 2.2vw, calc(40px * var(--pc-ui-scale, 1)));

    /* ★重要：vwより % を優先（hero-inner幅基準）
       - これでページ全体のスケールと足並みが揃う */
    --nav2-w: clamp(calc(260px * var(--pc-layout-scale, 1)), 32%, calc(420px * var(--pc-layout-scale, 1)));

    --nav2-aspect: 1 / 1;

    --nav2-center-shift: calc(0px * var(--pc-ui-scale, 1));

    --nav2-hit-x: calc(0px * var(--pc-ui-scale, 1));
    --nav2-hit-y: calc(-5px * var(--pc-ui-scale, 1));

    --z-hero-nav2:   100;
    --z-hero-latest: 120;

    --nav2-fade-ms: var(--motion-nav2-fade, 520ms);
    --nav2-fade-ease: var(--ease, ease);
    --nav2-fade-shift: calc(8px * var(--pc-ui-scale, 1));

    --nav2-glow-fill: rgba(255, 255, 255, 0.4);
    --nav2-glow-fill-active: rgba(1, 34, 61, 0.767);
    --nav2-glow-shadow-1: rgba(110, 190, 255, 0.40);
    --nav2-glow-shadow-2: rgba(110, 190, 255, 0.22);
  }

  /* cqw が使えるなら、より厳密に hero-inner 基準へ */
  @supports (width: 1cqw){
    body.is-home #siteMain .hero-inner{
      container-type: inline-size;

      --nav2-r: clamp(calc(12px * var(--pc-ui-scale, 1)), 4cqw, calc(48px * var(--pc-ui-scale, 1)));
      --nav2-w: clamp(calc(240px * var(--pc-layout-scale, 1)), 30cqw, calc(440px * var(--pc-layout-scale, 1)));
    }
  }

  /* =========================================================
     2) PCではDOMがあるなら表示対象にする（ただし初期は透明）
     ========================================================= */
  body.is-home #siteMain .nav-desktop2{
    display: block;
  }

  body.is-home #siteMain .hero-inner .latest{
    position: absolute;
    z-index: var(--z-hero-latest);
  }

  /* =========================================================
     3) nav 本体：hero に absolute で載せる（初期は非表示）
     ========================================================= */
  body.is-home #siteMain .hero-inner .nav-desktop2{
    position: absolute;

    right: var(--nav2-r);
    left: auto;

    top: 50%;

    width: var(--nav2-w);
    aspect-ratio: var(--nav2-aspect);

    z-index: var(--z-hero-nav2);

    pointer-events: none;

    opacity: 0;
    visibility: hidden;

    transform: translateY(calc(-50% + var(--nav2-center-shift) + var(--nav2-fade-shift)));

    transition:
      opacity var(--nav2-fade-ms) var(--nav2-fade-ease),
      transform var(--nav2-fade-ms) var(--nav2-fade-ease),
      visibility 0s linear var(--nav2-fade-ms);

    /* レイヤー安定（ズーム/描画揺れ対策） */
    contain: layout paint;
  }

  body.is-home.is-started #siteMain .hero-inner .nav-desktop2{
    opacity: 1;
    visibility: visible;

    transform: translateY(calc(-50% + var(--nav2-center-shift)));

    transition:
      opacity var(--nav2-fade-ms) var(--nav2-fade-ease),
      transform var(--nav2-fade-ms) var(--nav2-fade-ease),
      visibility 0s linear 0s;
  }

  /* 画像は下層に固定 */
  body.is-home #siteMain .hero-inner .nav-desktop2 > img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;

    z-index: 0;

    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
  }

  /* =========================================================
     4) 当たり判定（1×12）
     ========================================================= */
  body.is-home #siteMain .hero-inner .nav-desktop2 .nav2-hit{
    position: absolute;

    inset: 4.8% 0 1.9% 0;

    transform: translate(var(--nav2-hit-x), var(--nav2-hit-y));

    pointer-events: none;

    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(12, 1fr);

    overflow: visible;

    z-index: 10;
  }

  body.is-home.is-started #siteMain .hero-inner .nav-desktop2 .nav2-hit{
    pointer-events: auto;
  }

  /* =========================================================
     5) hit2 glow / active / focus / is-active
     - ★HOME問題の本質：is-active が hover を上書きしてた
       -> is-active と hover/active の“合成”ルールを用意する
     ========================================================= */
  body.is-home #siteMain .hero-inner .nav-desktop2 .nav2-hit .hit2{
    position: relative;
    display: block;
    background: transparent;
    text-decoration: none;

    -webkit-tap-highlight-color: transparent;
    outline: none;

    isolation: isolate;

    --hit-pad: 0px;
    --hl-w: 78%;
    --hl-h: 62%;
  }

  body.is-home #siteMain .hero-inner .nav-desktop2 .nav2-hit .hit2::after{
    content:"";
    position:absolute;

    left: 50%;
    top: 50%;
    width: calc(var(--hl-w) - (var(--hit-pad) * 2));
    height: calc(var(--hl-h) - (var(--hit-pad) * 2));
    transform: translate(-50%, -50%) scale(0.96);

    border-radius: 10px;
    opacity: 0;

    background:
      radial-gradient(circle at 50% 50%,
        rgba(255,255,255,0.00) 0%,
        rgba(255,255,255,0.00) 60%,
        rgba(255,255,255,0.00) 100%
      ),
      var(--nav2-glow-fill);

    filter: blur(0px);

    transition:
      opacity var(--motion-ui-fast, 170ms) ease,
      transform var(--motion-ui-mid, 220ms) cubic-bezier(.2,.8,.2,1),
      filter var(--motion-ui-mid, 220ms) cubic-bezier(.2,.8,.2,1),
      background var(--motion-ui-min, 160ms) ease;

    pointer-events: none;
    z-index: 1;
  }

  body.is-home #siteMain .hero-inner .nav-desktop2 .nav2-hit .hit2::before{
    content:"";
    position:absolute;

    left: 50%;
    top: 50%;
    width: calc(var(--hl-w) + 12%);
    height: calc(var(--hl-h) + 12%);
    transform: translate(-50%, -50%) scale(0.98);

    border-radius: 12px;
    opacity: 0;

    box-shadow:
      0 0 18px var(--nav2-glow-shadow-1),
      0 0 42px var(--nav2-glow-shadow-2);

    transition:
      opacity var(--motion-ui-fast, 170ms) ease,
      transform var(--motion-ui-slow, 240ms) cubic-bezier(.2,.8,.2,1);

    pointer-events: none;
    z-index: 0;
  }

  /* is-active（常時点灯） */
  body.is-home.is-started #siteMain .hero-inner .nav-desktop2 .nav2-hit .hit2.is-active::after{
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.02);
    filter: blur(0.6px);
    background: rgba(110, 190, 255, 0.18);
  }
  body.is-home.is-started #siteMain .hero-inner .nav-desktop2 .nav2-hit .hit2.is-active::before{
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.01);
  }

  /* クリック時（is-active でも勝たせる） */
  body.is-home #siteMain .hero-inner .nav-desktop2 .nav2-hit .hit2:active::after,
  body.is-home #siteMain .hero-inner .nav-desktop2 .nav2-hit .hit2.is-active:active::after{
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.03);
    filter: blur(0.6px);
    background:
      radial-gradient(circle at 50% 50%,
        rgba(255,255,255,1.15) 0%,
        rgba(255,255,255,0.50) 45%,
        rgba(255,255,255,0.10) 78%
      ),
      var(--nav2-glow-fill-active);
  }
  body.is-home #siteMain .hero-inner .nav-desktop2 .nav2-hit .hit2:active::before,
  body.is-home #siteMain .hero-inner .nav-desktop2 .nav2-hit .hit2.is-active:active::before{
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.01);
  }

  /* focus-visible */
  body.is-home #siteMain .hero-inner .nav-desktop2 .nav2-hit .hit2:focus-visible::after{
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.06);
    filter: blur(0.8px);
    background: rgba(15,18,28,0.18);
  }
  body.is-home #siteMain .hero-inner .nav-desktop2 .nav2-hit .hit2:focus-visible::before{
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.02);
    box-shadow:
      0 0 0 2px rgba(15,18,28,0.35),
      0 0 18px rgba(110, 190, 255, 0.22);
  }

  /* hover（最後に置いて is-active を上書き＝HOMEも光る） */
  @media (any-hover: hover){
    body.is-home #siteMain .hero-inner .nav-desktop2 .nav2-hit .hit2:hover::after,
    body.is-home #siteMain .hero-inner .nav-desktop2 .nav2-hit .hit2.is-active:hover::after{
      opacity: 1;
      transform: translate(-50%, -50%) scale(1.06);
      filter: blur(1px);
      background:
        radial-gradient(circle at 50% 50%,
          rgba(255,255,255,0.00) 0%,
          rgba(255,255,255,0.00) 60%,
          rgba(255,255,255,0.00) 100%
        ),
        var(--nav2-glow-fill);
    }
    body.is-home #siteMain .hero-inner .nav-desktop2 .nav2-hit .hit2:hover::before,
    body.is-home #siteMain .hero-inner .nav-desktop2 .nav2-hit .hit2.is-active:hover::before{
      opacity: 1;
      transform: translate(-50%, -50%) scale(1.02);
    }
  }

  @media (prefers-reduced-motion: reduce){
    body.is-home #siteMain .hero-inner{
      --nav2-fade-shift: 0px;
    }
    body.is-home #siteMain .hero-inner .nav-desktop2{
      transition: none;
    }
    body.is-home #siteMain .hero-inner .nav-desktop2 .nav2-hit .hit2::before,
    body.is-home #siteMain .hero-inner .nav-desktop2 .nav2-hit .hit2::after{
      transition: none;
      filter: none;
    }
  }
}