/* /assets/css/nav-desktop.css（更新：トップページでは nav-desktop を“永遠に非表示”） */
/* =========================================================
   fudosha.net
   /assets/css/nav-desktop.css
   - Desktop nav (SVG map overlay on logo)
   - SVG is rendered as <img>, interactive layer is transparent anchors.
   ========================================================= */

@media (min-width: 768px){

  body[data-page="main"].is-started .nav-desktop.nav-desktop--map .nav-map-img{
    transform-origin: 50% 85%;
    will-change: transform;
    animation: navBounce 2020ms ease-out 1;
  }

  body[data-page="main"].is-started .nav-desktop.nav-desktop--map{
    will-change: transform;
    animation: navBounceBox 2020ms ease-out 1;
  }

  body[data-page="main"].is-started .nav-desktop.nav-desktop--map .hit::after{
    animation: hitBlink 2020ms ease-out 1;
  }
}

@keyframes navBounce{
  0%   { transform: translateY(0); }
  18%  { transform: translateY(-3px); }
  36%  { transform: translateY(0); }
  55%  { transform: translateY(-1.5px); }
  75%  { transform: translateY(0); }
  100% { transform: translateY(0); }
}

@keyframes navBounceBox{
  0%   { transform: translateY(0); }
  18%  { transform: translateY(-1.5px); }
  36%  { transform: translateY(0); }
  55%  { transform: translateY(-0.75px); }
  75%  { transform: translateY(0); }
  100% { transform: translateY(0); }
}

@keyframes hitBlink{
  0%   { opacity: 0; }
  22%  { opacity: 1; }
  40%  { opacity: 0; }
  62%  { opacity: 0.9; }
  82%  { opacity: 0; }
  100% { opacity: 0; }
}

/* =========================================================
   0) Slot (#navDesktopSlot)
   ========================================================= */

#navDesktopSlot{
  position: relative;
  z-index: 5;
}

@media (min-width: 768px){
  .brand-link{
    position: relative;
  }

  #navDesktopSlot{
    position: absolute;
    inset: 0;
    pointer-events: auto;
  }
}

/* =========================================================
   1) Desktop nav (SVG + hitboxes)
   ========================================================= */

.nav-desktop{
  display: none;
}

@media (min-width: 768px){
  .nav-desktop.nav-desktop--map{
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1010;
    pointer-events: auto;
  }

  .nav-desktop--map .nav-map-img{
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;
    object-fit: contain;

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

  .nav-desktop--map .nav-map-hit{
    position: absolute;
    inset: 0;
    pointer-events: auto;

    overflow: visible;
  }

  .nav-desktop--map .hit{
    position: absolute;
    display: block;
    background: transparent;
    text-decoration: none;

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

    isolation: isolate;

    --hit-pad: 0px;
    --hl-w: 76%;
    --hl-h: 66%;
  }

  .nav-desktop--map .hit::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%
      ),
      rgba(110, 190, 255, 0.14);

    filter: blur(0.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;
  }

  .nav-desktop--map .hit::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 rgba(110, 190, 255, 0.35),
      0 0 42px rgba(110, 190, 255, 0.18);

    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;
  }

  .nav-desktop--map .hit:hover::after{
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.06);
    filter: blur(1.0px);
  }
  .nav-desktop--map .hit:hover::before{
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.02);
  }

  .nav-desktop--map .hit: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%
      ),
      rgba(110, 190, 255, 0.20);
  }

  .nav-desktop--map .hit:active::before{
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.01);
  }

  .nav-desktop--map .hit.is-active::after{
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.06);
    filter: blur(1.0px);
    background: rgba(110, 190, 255, 0.16);
  }
  .nav-desktop--map .hit.is-active::before{
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.02);
  }

  .nav-desktop--map .hit:focus-visible::after{
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.06);
    filter: blur(0.8px);
    background: rgba(15,18,28,0.18);
  }
  .nav-desktop--map .hit: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);
  }

  @media (prefers-reduced-motion: reduce){
    .nav-desktop--map .hit::before,
    .nav-desktop--map .hit::after{
      transition: none;
    }
    .nav-desktop--map .hit:hover::before,
    .nav-desktop--map .hit:hover::after,
    .nav-desktop--map .hit:active::before,
    .nav-desktop--map .hit:active::after,
    .nav-desktop--map .hit:focus-visible::before,
    .nav-desktop--map .hit:focus-visible::after{
      transform: translate(-50%, -50%);
      filter: none;
    }
  }
}

/* =========================================================
   2) Home only: ALWAYS HIDE (PC)
   - トップページPCは nav-desktop2 を hero に出す仕様に変更したため、
     ロゴ重ねの nav-desktop は出さない。
   ========================================================= */

@media (min-width: 768px){
  body[data-page="main"] .nav-desktop.nav-desktop--map{
    opacity: 0;
    visibility: hidden;
  }

  body[data-page="main"] .nav-desktop.nav-desktop--map .nav-map-hit{
    pointer-events: none;
  }
}

/* =========================================================
   3) Hitbox coordinates（SVG viewBox: 960x300 前提）
   ========================================================= */

@media (min-width: 768px){
  .nav-desktop--map .hit.r1{ top: 65.8%; height: 7.0%; }
  .nav-desktop--map .hit.r2{ top: 73.8%; height: 7.2%; }
  .nav-desktop--map .hit.r3{ top: 82.3%; height: 7.2%; }
  .nav-desktop--map .hit.r4{ top: 90.2%; height: 7.2%; }

  .nav-desktop--map .hit.r1.c1{ left: 63.8%; width: 9.4%; }
  .nav-desktop--map .hit.r1.c2{ left: 75.2%; width: 11.0%; }
  .nav-desktop--map .hit.r1.c3{ left: 87.2%; width: 12.0%; }

  .nav-desktop--map .hit.r2.c1{ left: 61.2%; width: 10.5%; }
  .nav-desktop--map .hit.r2.c2{ left: 74.0%; width: 11.2%; }
  .nav-desktop--map .hit.r2.c3{ left: 87.0%; width: 12.0%; }

  .nav-desktop--map .hit.r3.c1{ left: 61.2%; width: 10.0%; }
  .nav-desktop--map .hit.r3.c2{ left: 73.2%; width: 12.8%; }
  .nav-desktop--map .hit.r3.c3{ left: 89.8%; width: 11.2%; }

  .nav-desktop--map .hit.r4.c1{ left: 62.8%; width: 11.8%; }
  .nav-desktop--map .hit.r4.c2{ left: 74.6%; width: 10.2%; }
  .nav-desktop--map .hit.r4.c3{ left: 86.5%; width: 10.5%; }
}