/* HONNE 夜キット — /story/ と同じ世界観を全サイトで共有する共通レイヤー
   使い方: <link rel="stylesheet" href="/assets/night.css"> + <script src="/assets/night.js" defer></script>
   night.js が body に 星空canvas と 月 を自動注入する(既存レイアウトは崩さない)。 */
:root{
  --n-mint:#68f0cf;
  --n-ink:#f6fbf8;
  --n-ink-soft:rgba(246,251,248,.66);
  --n-ink-faint:rgba(246,251,248,.38);
  --n-black:#050806;
  --n-glass:rgba(255,255,255,.045);
  --n-glass-line:rgba(255,255,255,.10);
  --n-mincho:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;
  --n-gothic:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",sans-serif;
}

/* 夜の下地(bodyに .night を付けたページで有効) */
body.night{
  background:linear-gradient(180deg,#050806 0%,#04110c 26%,#061018 55%,#0a0a16 82%,#050508 100%);
  color:var(--n-ink);
}

/* night.js が注入する星空と月 */
#nightSky{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.night-moon{
  position:fixed;top:9vh;right:8vw;width:64px;height:64px;border-radius:50%;
  background:radial-gradient(circle at 62% 40%, rgba(246,251,248,.92), rgba(246,251,248,.25) 58%, transparent 70%);
  box-shadow:0 0 60px 18px rgba(246,251,248,.10),0 0 140px 50px rgba(104,240,207,.05);
  filter:blur(.4px);z-index:0;pointer-events:none;
  animation:nMoonDrift 26s ease-in-out infinite alternate;
}
.night-moon::after{content:"";position:absolute;top:-6%;left:-14%;width:86%;height:86%;border-radius:50%;
  background:#050806;filter:blur(2px);opacity:.92}
@keyframes nMoonDrift{from{transform:translateY(0)}to{transform:translateY(14px)}}
@media (max-width:880px){.night-moon{width:48px;height:48px;right:9vw;top:7vh}}

/* コンテンツは星空より前面へ(ページ側のルート要素に .night-front を付けるか、main/header等はz-index:1相当に) */
.night-front{position:relative;z-index:1}

/* 共通部品 */
.n-glass{background:var(--n-glass);border:1px solid var(--n-glass-line);border-radius:22px;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.n-mincho{font-family:var(--n-mincho)}
.n-glow{color:var(--n-mint);text-shadow:0 0 22px rgba(104,240,207,.5)}
.n-pill{display:inline-flex;align-items:center;gap:10px;padding:14px 30px;border-radius:999px;
  border:1px solid rgba(104,240,207,.5);color:var(--n-mint);text-decoration:none;letter-spacing:.08em;
  background:rgba(104,240,207,.06);box-shadow:0 0 30px rgba(104,240,207,.10);
  transition:background .5s,box-shadow .5s,transform .5s}
.n-pill:hover{background:rgba(104,240,207,.14);box-shadow:0 0 50px rgba(104,240,207,.26);transform:translateY(-2px)}

/* ふわっと表示(night.jsのIntersectionObserverが .on を付与) */
.rv{opacity:0;transform:translateY(24px);filter:blur(6px);
  transition:opacity 1.1s cubic-bezier(.2,.6,.2,1),transform 1.1s cubic-bezier(.2,.6,.2,1),filter 1.1s ease}
.rv.on{opacity:1;transform:none;filter:none}

@media (prefers-reduced-motion:reduce){
  #nightSky{display:none}
  .night-moon{animation:none}
  .rv{opacity:1;transform:none;filter:none;transition:none}
}