/* ===========================
   Header
   =========================== */

/* Floating wrapper — handles positioning and the glow layer */
.header-outer {
    position: fixed;
    top: 16px;
    left: 20px;
    right: 20px;
    z-index: 100;
}

@media (min-width: 641px) {
    /* hero の .container と同じ幅・中央揃え */
    .header-outer {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: min(calc(100vw - 28px), 1100px);
    }

    .site-nav {
        margin-left: auto;
    }

    /* デスクトップではナビ展開部分を完全に隠す */
    .mobile-nav-wrap {
        display: none;
    }
}

/* Glow: same pixel staircase shape, blurred behind the header */
.header-outer::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 255, 255, 0.18);
    clip-path: polygon(
        /* top edge */
        calc(var(--ps)*3) 0, calc(100% - var(--ps)*3) 0,
        /* top-right staircase */
        calc(100% - var(--ps)*3) var(--ps),          calc(100% - var(--ps)*2) var(--ps),
        calc(100% - var(--ps)*2) calc(var(--ps)*2),  calc(100% - var(--ps))   calc(var(--ps)*2),
        calc(100% - var(--ps))   calc(var(--ps)*3),  100%                     calc(var(--ps)*3),
        /* right edge */
        100% calc(100% - var(--ps)*3),
        /* bottom-right staircase */
        calc(100% - var(--ps))   calc(100% - var(--ps)*3), calc(100% - var(--ps))   calc(100% - var(--ps)*2),
        calc(100% - var(--ps)*2) calc(100% - var(--ps)*2), calc(100% - var(--ps)*2) calc(100% - var(--ps)),
        calc(100% - var(--ps)*3) calc(100% - var(--ps)),   calc(100% - var(--ps)*3) 100%,
        /* bottom edge */
        calc(var(--ps)*3) 100%,
        /* bottom-left staircase */
        calc(var(--ps)*3) calc(100% - var(--ps)),   calc(var(--ps)*2) calc(100% - var(--ps)),
        calc(var(--ps)*2) calc(100% - var(--ps)*2), var(--ps)         calc(100% - var(--ps)*2),
        var(--ps)         calc(100% - var(--ps)*3), 0                 calc(100% - var(--ps)*3),
        /* left edge */
        0 calc(var(--ps)*3),
        /* top-left staircase */
        var(--ps)         calc(var(--ps)*3),  var(--ps)         calc(var(--ps)*2),
        calc(var(--ps)*2) calc(var(--ps)*2),  calc(var(--ps)*2) var(--ps),
        calc(var(--ps)*3) var(--ps)
    );
    filter: blur(10px);
    z-index: -1;
}

/* Outline: JS が path(evenodd, 外側 + 内側) を --header-border-path に設定する */
/* Outline: 9スライス SVG を border-image で適用。コーナーは固定サイズ、辺は伸縮 */
.header-outer::after {
    content: '';
    position: absolute;
    inset: -2px;
    border: 14px solid transparent;
    border-image: url('../images/header-border.svg') 14 / 14px stretch;
    pointer-events: none;
    z-index: 2;
}

.site-header {
    position: relative;
    z-index: 1;
    /* grid で縦方向アニメーション: 1行目=ヘッダーバー固定、2行目=ナビ */
    display: grid;
    grid-template-rows: var(--header-h) 0fr;
    transition: grid-template-rows 0.35s ease;
    background: rgba(5, 5, 5, 0.22);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    /* Pixel art staircase corners (3 steps × --ps each) */
    clip-path: polygon(
        /* top edge */
        calc(var(--ps)*3) 0, calc(100% - var(--ps)*3) 0,
        /* top-right staircase */
        calc(100% - var(--ps)*3) var(--ps),          calc(100% - var(--ps)*2) var(--ps),
        calc(100% - var(--ps)*2) calc(var(--ps)*2),  calc(100% - var(--ps))   calc(var(--ps)*2),
        calc(100% - var(--ps))   calc(var(--ps)*3),  100%                     calc(var(--ps)*3),
        /* right edge */
        100% calc(100% - var(--ps)*3),
        /* bottom-right staircase */
        calc(100% - var(--ps))   calc(100% - var(--ps)*3), calc(100% - var(--ps))   calc(100% - var(--ps)*2),
        calc(100% - var(--ps)*2) calc(100% - var(--ps)*2), calc(100% - var(--ps)*2) calc(100% - var(--ps)),
        calc(100% - var(--ps)*3) calc(100% - var(--ps)),   calc(100% - var(--ps)*3) 100%,
        /* bottom edge */
        calc(var(--ps)*3) 100%,
        /* bottom-left staircase */
        calc(var(--ps)*3) calc(100% - var(--ps)),   calc(var(--ps)*2) calc(100% - var(--ps)),
        calc(var(--ps)*2) calc(100% - var(--ps)*2), var(--ps)         calc(100% - var(--ps)*2),
        var(--ps)         calc(100% - var(--ps)*3), 0                 calc(100% - var(--ps)*3),
        /* left edge */
        0 calc(var(--ps)*3),
        /* top-left staircase */
        var(--ps)         calc(var(--ps)*3),  var(--ps)         calc(var(--ps)*2),
        calc(var(--ps)*2) calc(var(--ps)*2),  calc(var(--ps)*2) var(--ps),
        calc(var(--ps)*3) var(--ps)
    );
}

.site-header.open {
    grid-template-rows: var(--header-h) 1fr;
}

.site-header__inner {
    display: flex;
    align-items: center;
    height: 100%;
}

/* ナビ展開ラッパー: overflow hidden で 0fr 時に中身を隠す */
.mobile-nav-wrap {
    overflow: hidden;
    min-height: 0; /* grid 0fr で完全に折り畳むために必要 */
}

.site-logo {
    color: var(--cyan);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-shadow: var(--glow-md);
    white-space: nowrap;
    margin-left: 1rem;
}
.site-logo::before { content: '> '; color: var(--magenta); font-weight: 400; }
.site-logo:hover   { color: var(--magenta); text-shadow: 0 0 14px rgba(255, 0, 255, 0.5); }

/* Breadcrumb */
.page-breadcrumb {
    display: flex;
    align-items: center;
    color: var(--cyan);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-shadow: var(--glow-md);
    white-space: nowrap;
    margin-left: 1rem;
}

.page-breadcrumb__item {
    color: var(--text-dim);
}

.page-breadcrumb__item:last-child {
    color: var(--cyan);
}

@media (max-width: 640px) {
    .page-breadcrumb { display: none; }
}

/* Desktop nav */
.site-nav {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    margin-left: auto;
}

.site-nav__link {
    --_wipe: var(--nav-hover-bg);
    position: relative;
    overflow: hidden;
    display: inline-flex; /* inline だと ::before の基準がずれるため */
    align-items: center;
    color: var(--cyan);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 0.35rem 0.7rem;
}
.site-nav__link.active { --_wipe: var(--nav-active-bg); }
.site-nav__link:active { --_wipe: var(--nav-press-bg); }

/* ワイプ層: 同じテキストをシアン背景+黒文字で重ねてclip-pathで隠す */
.site-nav__link::before {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    padding: 0 0.7rem; /* 縦は flex が担うので横のみ */
    background: var(--_wipe);
    color: var(--nav-fg);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-size: 0.72rem;
    white-space: nowrap;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0.25s ease;
}

.site-nav__link:hover::before,
.site-nav__link.active::before {
    clip-path: inset(0 0% 0 0);
}

/* モバイルリンク: 横パディングなし */
.site-nav--mobile .site-nav__link         { padding: 0.65rem 0; }
.site-nav--mobile .site-nav__link::before { padding: 0; }

/* Hamburger */
.hamburger {
    --_wipe: var(--nav-hover-bg);
    position: relative;
    overflow: hidden;
    display: none;
    margin-left: auto;
    background: none;
    border: none;
    color: var(--cyan);
    padding: 0.3rem 0.65rem;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
}
.hamburger:active { --_wipe: var(--nav-press-bg); }
.hamburger::before {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--_wipe);
    color: var(--nav-fg);
    font-size: inherit;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0.25s ease;
}
.hamburger:hover::before { clip-path: inset(0 0% 0 0); }

/* Mobile nav — ヘッダー内に収まり、親の clip-path でシェイプを共有 */
.site-nav--mobile {
    display: flex;
    flex-direction: column;
    padding: 0.25rem 1.5rem 1rem;
}
.site-nav--mobile .site-nav__link {
    padding: 0.25rem 0;
    border: none;
    /* border-bottom: 1px solid rgba(0, 255, 255, 0.07); */
    box-shadow: none;
}

@media (max-width: 640px) {
    .site-nav  { display: none; }
    .hamburger { display: block; }
}

/* ===========================
   Footer
   =========================== */
.site-footer {
    border-top: 1px solid var(--border);
    padding: 1rem 0;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    color: var(--text-dim);
}
.site-footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.site-footer__copy::before { content: '// '; color: rgba(0, 255, 255, 0.3); }