/* Floating jump-to panel */
@layer components {
  body[data-page="home"] .jump-panel{
    --jump-collapsed:56px;
    --jump-expanded:156px;
    --jump-shift:0px;
    --jump-hide-offset:calc(100% + 24px);

    position:fixed;
    right:16px;
    top:50%;
    transform:translateY(-50%) translateX(var(--jump-shift));
    z-index:1050;

    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:10px 4px;
    width:var(--jump-collapsed);

    border-radius:18px;
    border:1px solid color-mix(in srgb,var(--primary) 18%, transparent);
    background:linear-gradient(160deg,
      color-mix(in srgb,var(--surface) 94%, #000 6%) 0%,
      color-mix(in srgb,var(--surface) 86%, #000 14%) 100%);
    box-shadow:0 16px 38px rgba(0,0,0,.35);
    backdrop-filter:blur(10px);
    overflow:hidden;

    transition:width .24s cubic-bezier(.2,.9,.2,1), background .2s ease, border-color .2s ease, transform .24s cubic-bezier(.2,.9,.2,1), opacity .2s ease;
    will-change:width, transform, opacity;
  }

  body[data-page="home"] .jump-panel:hover,
  body[data-page="home"] .jump-panel:focus-within{
    width:var(--jump-expanded);
    border-color:color-mix(in srgb,var(--primary) 32%, transparent);
    background:linear-gradient(160deg,
      color-mix(in srgb,var(--surface) 96%, #000 4%) 0%,
      color-mix(in srgb,var(--surface) 88%, #000 12%) 100%);
  }

  body[data-page="home"] .jump-panel-link{
    box-sizing:border-box;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0;
    padding:10px 6px;
    min-height:44px;
    border-radius:14px;
    border:1px solid transparent;
    color:color-mix(in srgb,var(--text-light) 88%, #ffffff 12%);
    text-decoration:none;
    transition:background .2s ease, color .2s ease, transform .2s ease, border-color .2s ease, gap .24s cubic-bezier(.2,.9,.2,1);
  }

  body[data-page="home"] .jump-panel:hover .jump-panel-link,
  body[data-page="home"] .jump-panel:focus-within .jump-panel-link{
    justify-content:flex-start;
    gap:8px;
  }

  body[data-page="home"] .jump-panel-link.is-active,
  body[data-page="home"] .jump-panel-link[aria-current="location"]{
    background:linear-gradient(135deg,
      color-mix(in srgb,var(--primary) 30%, var(--surface) 70%) 0%,
      color-mix(in srgb,var(--primary) 42%, var(--surface) 58%) 100%);
    border-color:color-mix(in srgb,var(--primary) 62%, transparent);
    color:color-mix(in srgb,#ffffff 98%, var(--bg) 2%);
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb,var(--primary) 38%, transparent),
      0 8px 18px color-mix(in srgb,var(--primary) 24%, transparent);
  }

  body[data-page="home"] .jump-panel-link.is-active .jump-panel-dot,
  body[data-page="home"] .jump-panel-link[aria-current="location"] .jump-panel-dot{
    background:color-mix(in srgb,var(--primary) 92%, #ffffff 8%);
    border-color:color-mix(in srgb,var(--primary) 96%, #ffffff 4%);
    box-shadow:
      0 0 0 3px color-mix(in srgb,var(--primary) 42%, transparent),
      0 0 10px color-mix(in srgb,var(--primary) 46%, transparent);
  }

  body[data-page="home"] .jump-panel-link:hover{
    background:color-mix(in srgb,var(--primary) 18%, transparent);
    border-color:color-mix(in srgb,var(--primary) 30%, transparent);
    color:color-mix(in srgb,#ffffff 92%, var(--bg) 8%);
    transform:translateY(-1px);
  }

  body[data-page="home"] .jump-panel-link:focus-visible{
    outline:3px solid color-mix(in srgb,var(--primary) 60%, #ffffff 40%);
    outline-offset:2px;
  }

  body[data-page="home"] .jump-panel-dot{
    width:10px;
    height:10px;
    border-radius:999px;
    background:color-mix(in srgb,var(--primary) 38%, transparent);
    border:2px solid color-mix(in srgb,var(--primary) 62%, transparent);
    flex-shrink:0;
  }

  body[data-page="home"] .jump-panel-text{
    max-width:0;
    min-width:0;
    opacity:0;
    overflow:hidden;
    white-space:nowrap;
    transform:translateX(6px);
    transition:max-width .24s cubic-bezier(.2,.9,.2,1), opacity .18s ease, transform .24s cubic-bezier(.2,.9,.2,1);

    font-size:.86rem;
    letter-spacing:.01em;
  }

  body[data-page="home"] .jump-panel:hover .jump-panel-text,
  body[data-page="home"] .jump-panel:focus-within .jump-panel-text{
    max-width:124px;
    opacity:1;
    transform:none;
  }

  body[data-page="home"] .jump-panel-action{
    box-sizing:border-box;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0;
    padding:8px 6px;
    min-height:40px;
    border-radius:14px;
    border:1px solid color-mix(in srgb,var(--primary) 18%, transparent);
    background:transparent;
    color:color-mix(in srgb,var(--text-light) 88%, #ffffff 12%);
    font:inherit;
    cursor:pointer;
    transition:background .2s ease, color .2s ease, transform .2s ease, border-color .2s ease, gap .24s cubic-bezier(.2,.9,.2,1);
  }

  body[data-page="home"] .jump-panel-action:hover{
    background:color-mix(in srgb,var(--primary) 18%, transparent);
    border-color:color-mix(in srgb,var(--primary) 32%, transparent);
    color:color-mix(in srgb,#ffffff 92%, var(--bg) 8%);
    transform:translateY(-1px);
  }

  body[data-page="home"] .jump-panel-action:focus-visible{
    outline:3px solid color-mix(in srgb,var(--primary) 60%, #ffffff 40%);
    outline-offset:2px;
  }

  body[data-page="home"] .jump-panel-action-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:20px;
    height:20px;
    transition:transform .2s ease;
  }

  body.menu-open .jump-panel{
    opacity:0;
    pointer-events:none;
  }

  body[data-page="home"] .jump-panel-reveal{
    position:fixed;
    right:16px;
    top:50%;
    transform:translateY(-50%) translateX(14px);
    z-index:1048;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0;
    width:40px;
    height:40px;
    padding:8px;
    border-radius:16px;
    border:1px solid color-mix(in srgb,var(--primary) 18%, transparent);
    background:linear-gradient(160deg,
      color-mix(in srgb,var(--surface) 94%, #000 6%) 0%,
      color-mix(in srgb,var(--surface) 86%, #000 14%) 100%);
    box-shadow:0 16px 34px rgba(0,0,0,.32);
    backdrop-filter:blur(10px);
    color:color-mix(in srgb,var(--text-light) 90%, #ffffff 10%);
    font:inherit;
    cursor:pointer;
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease, transform .24s cubic-bezier(.2,.9,.2,1), background .2s ease, border-color .2s ease;
  }

  body[data-page="home"] .jump-panel.is-hidden + .jump-panel-reveal{
    opacity:1;
    pointer-events:auto;
    transform:translateY(-50%) translateX(0);
  }

  body[data-page="home"] .jump-panel-reveal:hover{
    transform:translateY(-50%) translateX(0);
    border-color:color-mix(in srgb,var(--primary) 32%, transparent);
    background:linear-gradient(160deg,
      color-mix(in srgb,var(--surface) 96%, #000 4%) 0%,
      color-mix(in srgb,var(--surface) 88%, #000 12%) 100%);
  }

  body[data-page="home"] .jump-panel-reveal:focus-visible{
    outline:3px solid color-mix(in srgb,var(--primary) 60%, #ffffff 40%);
    outline-offset:2px;
  }

  body[data-page="home"] .jump-panel-reveal-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:18px;
    height:18px;
  }

  body.menu-open .jump-panel-reveal{
    opacity:0;
    pointer-events:none;
  }

  @media (hover:none) and (pointer:coarse), (max-width:768px){
    body[data-page="home"] .jump-panel{
      --jump-collapsed:46px;
      --jump-expanded:136px;
      --jump-hide-offset:calc(100% + 20px);

      left:auto;
      right:calc(10px + env(safe-area-inset-right, 0px));
      top:55%;
      bottom:auto;
      transform:translateY(-50%);
      width:var(--jump-collapsed);
      gap:6px;
      padding:8px 4px;
      border-radius:16px;
      box-shadow:0 10px 22px rgba(0,0,0,.24);
      opacity:.9;
    }

    body.menu-open .jump-panel{
      opacity:0;
      pointer-events:none;
    }

    body[data-page="home"] .jump-panel:hover,
    body[data-page="home"] .jump-panel:focus-within{
      width:var(--jump-expanded);
      opacity:1;
    }

    body[data-page="home"] .jump-panel-link{
      min-height:38px;
      padding:8px 6px;
    }

    body[data-page="home"] .jump-panel-action{
      min-height:34px;
    }

    body[data-page="home"] .jump-panel:hover .jump-panel-link,
    body[data-page="home"] .jump-panel:focus-within .jump-panel-link{
      gap:6px;
    }

    body[data-page="home"] .jump-panel-dot{
      width:8px;
      height:8px;
    }

    body[data-page="home"] .jump-panel-text{
      font-size:.78rem;
    }

    body[data-page="home"] .jump-panel:hover .jump-panel-text,
    body[data-page="home"] .jump-panel:focus-within .jump-panel-text{
      max-width:108px;
    }

    body[data-page="home"] .jump-panel-reveal{
      right:calc(10px + env(safe-area-inset-right, 0px));
      width:36px;
      height:36px;
      padding:6px;
      border-radius:14px;
      box-shadow:0 10px 22px rgba(0,0,0,.24);
    }
  }

  @media (max-width:520px){
    body[data-page="home"] .jump-panel{
      --jump-collapsed:42px;
      --jump-expanded:124px;
      --jump-hide-offset:calc(100% + 18px);

      right:calc(8px + env(safe-area-inset-right, 0px));
      top:56%;
    }

    body[data-page="home"] .jump-panel-reveal{
      right:calc(8px + env(safe-area-inset-right, 0px));
      top:56%;
    }
  }

  body[data-page="home"] .jump-panel.is-condensed,
  body[data-page="home"] .jump-panel.is-condensed:hover,
  body[data-page="home"] .jump-panel.is-condensed:focus-within{
    width:var(--jump-collapsed);
    border-color:color-mix(in srgb,var(--primary) 18%, transparent);
    background:linear-gradient(160deg,
      color-mix(in srgb,var(--surface) 94%, #000 6%) 0%,
      color-mix(in srgb,var(--surface) 86%, #000 14%) 100%);
  }

  body[data-page="home"] .jump-panel.is-condensed .jump-panel-link,
  body[data-page="home"] .jump-panel.is-condensed:hover .jump-panel-link,
  body[data-page="home"] .jump-panel.is-condensed:focus-within .jump-panel-link{
    justify-content:center;
    gap:0;
  }

  body[data-page="home"] .jump-panel.is-condensed .jump-panel-action,
  body[data-page="home"] .jump-panel.is-condensed:hover .jump-panel-action,
  body[data-page="home"] .jump-panel.is-condensed:focus-within .jump-panel-action{
    justify-content:center;
    gap:0;
  }

  body[data-page="home"] .jump-panel.is-condensed .jump-panel-text,
  body[data-page="home"] .jump-panel.is-condensed:hover .jump-panel-text,
  body[data-page="home"] .jump-panel.is-condensed:focus-within .jump-panel-text{
    max-width:0;
    opacity:0;
    transform:translateX(6px);
  }

  body[data-page="home"] .jump-panel.is-hidden,
  body[data-page="home"] .jump-panel.is-hidden:hover,
  body[data-page="home"] .jump-panel.is-hidden:focus-within{
    --jump-shift:var(--jump-hide-offset);
    opacity:0;
    pointer-events:none;
    width:var(--jump-collapsed);
    border-color:color-mix(in srgb,var(--primary) 18%, transparent);
    background:linear-gradient(160deg,
      color-mix(in srgb,var(--surface) 94%, #000 6%) 0%,
      color-mix(in srgb,var(--surface) 86%, #000 14%) 100%);
  }

  @media (prefers-reduced-motion: reduce){
    body[data-page="home"] .jump-panel,
    body[data-page="home"] .jump-panel-link,
    body[data-page="home"] .jump-panel-dot,
    body[data-page="home"] .jump-panel-text,
    body[data-page="home"] .jump-panel-action,
    body[data-page="home"] .jump-panel-action-icon,
    body[data-page="home"] .jump-panel-reveal{
      transition:none !important;
      transform:none !important;
    }
  }
}