/* ============================================
   FLOATING DOT MENU (修正決定版)
   ============================================ */

@media (max-width: 768px) {
  /* 既存のPCナビを消す */
  .nav-links { display: none !important; }

  /* 背景：黒 */
  .menu-backdrop {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(17, 16, 16, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.8s ease;
    z-index: 998;
  }
  .menu-active .menu-backdrop {
    opacity: 1;
    visibility: visible;
  }

  /* メニュー項目を包むコンテナ */
  .mobile-menu-overlay {
    position: fixed;
    bottom: 30px; /* ボタンの位置に合わせる */
    right: 30px;
    z-index: 999;
    pointer-events: none;
  }

  /* メニュー項目の初期状態（ボタンの裏に隠す） */
  .mobile-menu-item {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 130px;
    height: 46px;
background: transparent;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 23px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'DM Mono', monospace;
    text-decoration: none;
    font-size: 11px;
    letter-spacing: 0.05em;
    font-weight: bold;
    /* --- 重要：初期状態は透明にしておく --- */
    opacity: 0 !important;
    transform: translate(0, 0) scale(0.5);
    transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
    white-space: nowrap;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  }

  /* 開いた時のアニメーション（位置を個別に指定） */
  .menu-active .mobile-menu-item { opacity: 1 !important; pointer-events: auto; }
  
  .menu-active .item-top     { transform: translate(0, -320px) scale(1); transition-delay: 0.0s; }
  .menu-active .item-about   { transform: translate(-85px, -250px) scale(1); transition-delay: 0.1s; }
  .menu-active .item-skills  { transform: translate(-140px, -170px) scale(1); transition-delay: 0.2s; }
  .menu-active .item-works   { transform: translate(-165px, -80px) scale(1); transition-delay: 0.3s; }
  .menu-active .item-contact { transform: translate(-140px, 10px) scale(1); transition-delay: 0.4s; }

  /* メインボタン（ドット） */
  .floating-menu-trigger {
    position: fixed !important;
    bottom: 30px;
    right: 30px;
    width: 64px;
    height: 64px;
    background: #111010; /* var(--ink) */
    border-radius: 50%;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    cursor: pointer;
    border: none;
    -webkit-tap-highlight-color: transparent;
  }

  /* ＋アイコン */
  .trigger-icon {
    position: relative;
    width: 20px;
    height: 20px;
    transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
  }
  .trigger-icon::before, .trigger-icon::after {
    content: '';
    position: absolute;
    background: #F5F2EC;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
  }
  .trigger-icon::before { width: 100%; height: 2px; }
  .trigger-icon::after { width: 2px; height: 100%; }

  /* ボタンが開いている時の回転 */
  .menu-active .trigger-icon { transform: rotate(135deg); }
}