@charset "UTF-8";
/* =====================================================================
   boot-splash.css — 起動スプラッシュの «絵» を持つ層
   ---------------------------------------------------------------------
   進行の仕組みは /static/js/boot-splash.js が 1 つだけ持ち、
   絵はページごとにここで差し替える。指定は #boot-splash の data-splash で、
   値は各ページが既にヘッダーに書いている data-site-nav-current と同じ語彙
   （apps / book / goods / notes / design / about）。識別子を 2 系統持たない。

   ★ このファイルは «覆い» を持たない。
     position / inset / z-index / background と 6 秒のフェイルセーフは
     各ページの inline <style> が持つこと。あれはスクリプトにも外部 CSS にも
     依存してはいけない最後の砦で、このファイルが 404 したときにも
     「ページが永久に隠れる」「地の色が出ない」のどちらも起こしてはならない。
     ここが落ちたときの姿は「無地の板が 6 秒で消える」になる。

   ★ 毎フレームの入力は --bs-p（0〜1）1 つだけ。
     JS は setProperty を 1 回と ％ の textContent を 1 回書くだけで、
     何がどう動くかを知らない。絵はすべてここが calc() で作る。

     opacity は 0〜1 の外を自動で丸めるので、「n 番目が p を超えたら現れる」は
     clamp を書かずに calc() 1 本で済む:

         opacity: calc((var(--bs-p) - 0.20) * 10);

   ★ transition / animation に頼らないこと。
     design-system.css の動き抑制ブロックが
     animation-duration / transition-duration を 0.001ms !important で
     全要素に掛けるので、そこに預けた動きは «動きを減らす» 設定で消える。
     進捗は --bs-p の直接の写像だけで表現する。

   zerohalf.jp は別ドメインでこのファイルを読まない（自前の inline <style> を持つ）。
   ===================================================================== */

/* =====================================================================
   1. 殻 — 全テーマ共通
   ================================================================== */

#boot-splash {
    /* JS が書く前に CSS が先に効いても、0 から始まるようにしておく */
    --bs-p: 0;

    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .35s linear;
}

#boot-splash.is-done {
    animation: none;
    opacity: 0;
    pointer-events: none;
}

#boot-splash-ui {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 絵の置き場。テーマごとに中身が変わる */
#boot-splash-art {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 26px;
}

/* Rajdhani / Orbitron / DotGothic16 は非同期読み込みなので、スプラッシュが
   出ている «まさにその間» が FOIT になる。ラベルと数字は system の等幅で固定する。 */
#boot-splash-label {
    margin: 0;
    font: 700 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 4px;
}

#boot-splash-track {
    width: min(220px, 56vw);
    height: 3px;
    border-radius: 2px;
    overflow: hidden;
}

#boot-splash-fill {
    height: 100%;
    border-radius: inherit;
    transform: scaleX(0);
    transform-origin: left center;
}

#boot-splash-pct {
    margin: 0;
    font-variant-numeric: tabular-nums;
}

/* ％ の単位。数値は JS が textContent で書くので、記号は CSS 側に置く */
#boot-splash-pct::after { content: '%'; }


/* =====================================================================
   2. アプリ — 台帳のステータスドットが形を得る
   ---------------------------------------------------------------------
   このページの識別子は「ステータスを色ではなく «形» で区別する」こと。
   地の方眼と同じ薄さの点が、左から順に各ステータスの形と色へ確定していく。
   色は apps.css の --st-* と同値（あちらは :root で上書きされるが、
   スプラッシュはページ CSS の到着前にも描くので直値で持つ）。
   ================================================================== */

#boot-splash[data-splash="apps"] { color: rgba(255, 255, 255, .60); }
#boot-splash[data-splash="apps"] #boot-splash-label { color: rgba(255, 255, 255, .38); }
#boot-splash[data-splash="apps"] #boot-splash-pct {
    margin-top: 14px;
    font: 400 11px/1 "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 2px;
}
#boot-splash[data-splash="apps"] #boot-splash-track { display: none; }

#boot-splash[data-splash="apps"] .bs-dots {
    display: flex;
    gap: 12px;
}

/* 地の点。方眼と同じ濃さで、ここは最後まで変わらない */
#boot-splash[data-splash="apps"] .bs-dots i {
    position: relative;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .10);
}

/* 確定した姿。--t を超えたところで立ち上がる */
#boot-splash[data-splash="apps"] .bs-dots i::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--c, #7FD8CB);
    opacity: calc((var(--bs-p) - var(--t)) * 12);
}

#boot-splash[data-splash="apps"] .bs-dots i:nth-child(1)  { --t: .00; }
#boot-splash[data-splash="apps"] .bs-dots i:nth-child(2)  { --t: .08; }
#boot-splash[data-splash="apps"] .bs-dots i:nth-child(3)  { --t: .16; }
#boot-splash[data-splash="apps"] .bs-dots i:nth-child(4)  { --t: .24; }
#boot-splash[data-splash="apps"] .bs-dots i:nth-child(5)  { --t: .32; }
#boot-splash[data-splash="apps"] .bs-dots i:nth-child(6)  { --t: .40; }
#boot-splash[data-splash="apps"] .bs-dots i:nth-child(7)  { --t: .48; }

/* ここから先は「公開中」以外。形で区別するという原則をそのまま出す */

/* 運用中 — 四角 */
#boot-splash[data-splash="apps"] .bs-dots i:nth-child(8) {
    --t: .60;
    border-radius: 2px;
}
#boot-splash[data-splash="apps"] .bs-dots i:nth-child(8)::after { --c: #9DB8F5; }

/* β版 — 中空の輪 */
#boot-splash[data-splash="apps"] .bs-dots i:nth-child(9) { --t: .74; }
#boot-splash[data-splash="apps"] .bs-dots i:nth-child(9)::after {
    background: none;
    border: 2px solid #E8B45C;
}

/* 開発中止 — 細い輪 */
#boot-splash[data-splash="apps"] .bs-dots i:nth-child(10) { --t: .88; }
#boot-splash[data-splash="apps"] .bs-dots i:nth-child(10)::after {
    background: none;
    border: 1px solid #C98A78;
}


/* =====================================================================
   3. 技術書 — ハチドリが三角形で組み上がる
   ---------------------------------------------------------------------
   ヒーローの低ポリのハチドリと同じ作り（水彩ブルー数枚 + 暖色 1 枚）。
   バーはこのページの署名である «手描きの歪んだ角丸» と、ぼかさない平らな影。
   ================================================================== */

#boot-splash[data-splash="book"] #boot-splash-label { color: #9A9790; }
#boot-splash[data-splash="book"] #boot-splash-pct {
    margin-top: 16px;
    font: 900 13px/1 "Noto Sans JP", system-ui, sans-serif;
    color: #625F57;
    letter-spacing: .02em;
}

/* 太さは殻の既定（3px）のまま。他のテーマと «同じ細さ» に揃える。
   歪んだ角丸と平らな影はこのページの署名なので残すが、3px の帯に
   12px の半径や 3px の影を入れると帯そのものより飾りが大きくなるので、
   どちらも帯の高さに合わせて詰める。 */
#boot-splash[data-splash="book"] #boot-splash-track {
    margin-top: 16px;
    background: #EAE6DC;
    /* 機械で引いた線に見せない。4 隅を別々の半径にする */
    border-radius: 1px 4px 2px 3px / 3px 2px 4px 1px;
    box-shadow: 2px 2px 0 #D6D0C2;
    overflow: hidden;
}

#boot-splash[data-splash="book"] #boot-splash-fill {
    background: #7AAECF;
    border-radius: inherit;
}

/* viewBox と同じ比。ここがずれると余白が «絵の下の空き» として出る */
#boot-splash[data-splash="book"] .bs-bird { width: 132px; height: 96px; }

/* 1 枚ずつ現れる。順番は 胴 → 頭 → 上の翼 → 下の翼 → 尾 → のど（暖色） */
#boot-splash[data-splash="book"] .bs-bird polygon {
    opacity: calc((var(--bs-p) - var(--t)) * 8);
}
#boot-splash[data-splash="book"] .bs-bird polygon:nth-child(1) { --t: .00; }
#boot-splash[data-splash="book"] .bs-bird polygon:nth-child(2) { --t: .14; }
#boot-splash[data-splash="book"] .bs-bird polygon:nth-child(3) { --t: .30; }
#boot-splash[data-splash="book"] .bs-bird polygon:nth-child(4) { --t: .46; }
#boot-splash[data-splash="book"] .bs-bird polygon:nth-child(5) { --t: .62; }
#boot-splash[data-splash="book"] .bs-bird polygon:nth-child(6) { --t: .78; }


/* =====================================================================
   4. グッズ — 巨大な連番がそのまま進捗
   ---------------------------------------------------------------------
   このページの署名は .lu-no の極太タブular数字。％の数値«自体»を主役にする。
   色も状態を持つ作りをそのまま使う:
     --ghost #DAD8D2（まだ作っていない日）→ --coral #EE8181（最新）。
   数字が動いても幅が揺れないよう tabular-nums は必須。
   ================================================================== */

#boot-splash[data-splash="goods"] #boot-splash-art { display: none; }

#boot-splash[data-splash="goods"] #boot-splash-pct {
    font: 900 clamp(44px, 8vw, 68px)/1 "Noto Sans JP", system-ui, sans-serif;
    letter-spacing: -.05em;
    /* color-mix が使えない環境では ink のまま出る。数字は読めるので実害が無い */
    color: #23231F;
    color: color-mix(in srgb, #DAD8D2, #EE8181 calc(var(--bs-p) * 100%));
}

#boot-splash[data-splash="goods"] #boot-splash-pct::after {
    /* 極太の数字の隣では % が重いので、ここだけ小さく添える */
    font-size: .3em;
    font-weight: 700;
    vertical-align: .9em;
    margin-left: .1em;
}

/* 罫線とカードで囲わず、番号とラベル列と余白だけで段を作る、という組み方に合わせる */
#boot-splash[data-splash="goods"] #boot-splash-track {
    margin-top: 18px;
    height: 2px;
    background: #ECEAE4;
    border-radius: 0;
}
#boot-splash[data-splash="goods"] #boot-splash-fill { background: #EE8181; }

#boot-splash[data-splash="goods"] #boot-splash-label {
    margin-bottom: 14px;
    color: #B3B1AA;
}


/* =====================================================================
   5. 開発ノート — 方眼に点が打たれていく
   ---------------------------------------------------------------------
   このテーマの憲法は「色は情報として使わない」（notes.css の冒頭）。
   例外は最上部のレインボーラインだけ、という扱いを崩さないので、
   ここは完全にモノクロで組む。強調は濃度とドットの密度だけで作る。

   点は 1 個ずつ要素にせず、14px ピッチの背景を mask で列ごとに出す。
   36 個の <i> を並べるより、要素 2 つで済むうえ目のピッチが崩れない。
   ================================================================== */

#boot-splash[data-splash="notes"] #boot-splash-label { color: #9a9aa2; }
#boot-splash[data-splash="notes"] #boot-splash-pct {
    margin-top: 14px;
    font: 400 11px/1 "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    color: #62626c;
    letter-spacing: 2px;
}

#boot-splash[data-splash="notes"] .bs-grid {
    position: relative;
    width: 224px;   /* 14px × 16 */
    height: 42px;   /* 14px × 3  */
}

#boot-splash[data-splash="notes"] .bs-grid span {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(var(--bs-c) 1.6px, transparent 1.8px);
    background-size: 14px 14px;   /* notes.css の --dot-pitch と同値 */
}

/* 打たれる前の方眼。最後まで残る */
#boot-splash[data-splash="notes"] .bs-grid span:nth-child(1) { --bs-c: #d9d9d2; }

/* 打たれた点。左の列から順に出る。ピッチが 14px なので境目は列と一致する */
#boot-splash[data-splash="notes"] .bs-grid span:nth-child(2) {
    --bs-c: #23232a;
    -webkit-mask-image: linear-gradient(90deg, #000 0 calc(var(--bs-p) * 100%), transparent 0);
            mask-image: linear-gradient(90deg, #000 0 calc(var(--bs-p) * 100%), transparent 0);
}

/* 区切りは border ではなく点線ルール。notes.css の --rule-dots と同じ式 */
#boot-splash[data-splash="notes"] #boot-splash-track {
    margin-top: 18px;
    height: 3px;
    border-radius: 0;
    background-image: radial-gradient(circle at 1px 50%, #b6b6ae 1px, transparent 1.2px);
    background-size: 6px 3px;
}
#boot-splash[data-splash="notes"] #boot-splash-fill { background: #23232a; }


/* =====================================================================
   6. デザインシステム — ブラックホール
   ---------------------------------------------------------------------
   このテーマだけ canvas を使う。描くのは bh-wanderer.js で、
   起動はページ側の window.NZW_SPLASH_HOOK が持つ（boot-splash.js は触らない）。

   地はページと同じ明るい面のまま。canvas を画面いっぱいに敷き、
   本体だけを «画面の中央に固定» する。移動は止めるが自転は止めない
   （bh-wanderer.js の rotation は速度とは別に自分で進む）。

   ★ 白地でも «絵» としては成立する。
     以前スプラッシュの canvas をやめた実測上の理由は、降着円盤の加算合成が
     白背景では RGB 合計 17 しか変えないのにフレームの 75% を食っていたこと。
     ただしそれは «表示中の白い canvas に直接» 加算していたから。
     bh-wanderer.js は本体を «透明な» オフスクリーンに焼いてから転送するので、
     加算合成は透明地の上で効き、結果だけがページに重なる。飽和しない。

   ★ 文字とバーは画面の下へ逃がす。
     本体が画面の中央に居るので、中央に文字を置くと必ず重なる。
   ================================================================== */

#boot-splash[data-splash="design"] {
    /* 中央基準の縦積みをやめる。中央は本体の席にする */
    display: block;
}

#boot-splash[data-splash="design"] #bs-bh-canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

/* 文字とバーは «本体のすぐ下» に置く。画面の下端に貼り付けると、中央の本体と
   離れすぎて 2 つの別々のものに見える。中央からの距離で持たせているので、
   画面の高さが変わっても本体との間隔は変わらない。

   125px は «濃い側の外周» に合わせた値。medium（半径 35）は環境パーティクルが
   最大 4r ≒ 140px まで散るが、そこまで避けると 1 枚の絵に見えなくなる。
   降着円盤と重力圏の輪が収まるのは中心から約 110px なので、その少し外側に置き、
   いちばん薄い粒だけが文字の高さまで届くようにしてある。
   背の低い画面で下端にめり込まないよう min() で頭を押さえる。 */
#boot-splash[data-splash="design"] #boot-splash-ui {
    position: absolute;
    left: 50%;
    top: min(calc(50% + 125px), calc(100% - 84px));
    transform: translateX(-50%);
}

#boot-splash[data-splash="design"] #boot-splash-label { color: #94a3b8; }
#boot-splash[data-splash="design"] #boot-splash-pct { display: none; }  /* VOID タグが兼ねる */

#boot-splash[data-splash="design"] #boot-splash-track {
    margin-top: 18px;
    background: #e2e8f0;
}
#boot-splash[data-splash="design"] #boot-splash-fill { background: #0ea5e9; }


/* =====================================================================
   7. About — 等高線が外へ描かれる
   ---------------------------------------------------------------------
   このページは季節 4 × 時刻 4 の配色を @property で持ち、head の先頭にある
   ブロッキング inline script が first paint より前に <html data-season data-time>
   を立てる。だからスプラッシュは色を自前で持たず、--ground / --topo /
   --topo-route を参照するだけで «訪問した季節と時刻» の配色を引き継ぐ。

   太陽・月を «測量器具» として描く既存の言語に合わせ、輪は正円・実線・均一の太さ。
   ぼかした光にしない。
   ================================================================== */

#boot-splash[data-splash="about"] #boot-splash-label { color: var(--ink-sub, #5D8271); }
#boot-splash[data-splash="about"] #boot-splash-pct {
    margin-top: 14px;
    /* DotGothic16 はページ側で非同期に読むので、ここで使うと必ず FOIT になる */
    font: 700 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--ink, #26302A);
    letter-spacing: 2px;
}

#boot-splash[data-splash="about"] .bs-topo { width: 150px; height: 150px; }

#boot-splash[data-splash="about"] .bs-topo circle {
    fill: none;
    stroke: var(--topo, #5D8271);
    stroke-width: 1.2;
    opacity: calc((var(--bs-p) - var(--t)) * 7);
}
#boot-splash[data-splash="about"] .bs-topo circle:nth-child(1) { --t: .00; }
#boot-splash[data-splash="about"] .bs-topo circle:nth-child(2) { --t: .14; }
#boot-splash[data-splash="about"] .bs-topo circle:nth-child(3) { --t: .28; }
#boot-splash[data-splash="about"] .bs-topo circle:nth-child(4) { --t: .42; }
#boot-splash[data-splash="about"] .bs-topo circle:nth-child(5) { --t: .56; }

/* ルート。等高線を横切って伸びる。
   ★ 破線 1 本に dashoffset を掛けても «模様がずれる» だけで、進んでは見えない。
     しかも p=0 の時点で全線が引かれてしまう。そこで 2 本に分ける:
     これから通る道（薄い破線・最初から全線）と、踏破した区間（実線・伸びる）。
     等高線の «計画と踏破» という読み方になるので、地図の言語とも合う。 */
#boot-splash[data-splash="about"] .bs-topo .route {
    fill: none;
    stroke: var(--topo-route, #B87F55);
    stroke-linecap: round;
}

#boot-splash[data-splash="about"] .bs-topo .route-ghost {
    stroke-width: 1.6;
    stroke-dasharray: 6 5;
    opacity: .3;
}

/* 経路長は getTotalLength() の実測で 152.9。端で欠けないよう少し多めに取る */
#boot-splash[data-splash="about"] .bs-topo .route-done {
    stroke-width: 2.4;
    stroke-dasharray: calc(var(--bs-p) * 155px) 999px;
}

#boot-splash[data-splash="about"] #boot-splash-track {
    margin-top: 18px;
    background: var(--line, #D9D2C0);
}
#boot-splash[data-splash="about"] #boot-splash-fill { background: var(--accent, #5D8271); }