/* Bloomoon — 夜空の1枚ページ */
:root {
  --night-0: #04061a;
  --night-1: #0b1035;
  --night-2: #1d1748;
  --ice: #9fe3f7;      /* 月の水色 */
  --bloom: #ff8fbf;    /* 花のピンク */
  --gold: #e9c27a;     /* 文字の金 */
  --gold-hi: #fff0c8;
  --ink: #d8dcf2;
  --ink-dim: rgba(216, 220, 242, .55);
  --p: 0;              /* ページ全体の進み具合(0〜1)。js/main.js が書き換える */
  --season: #7f95e6;   /* 季節の花の色。data/seasons.json で上書き */
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  background: var(--night-0);
  color: var(--ink);
  font-family: "Cormorant Garamond", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", Georgia, serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------- 景色 ---------- */
.stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* 進むにつれて夜の色がすこし紫へ寄る */
  background:
    radial-gradient(120% 80% at 50% 110%, color-mix(in srgb, var(--night-2) calc(var(--p) * 100%), var(--night-1)) 0%, transparent 70%),
    linear-gradient(var(--night-0), var(--night-1));
}
.stage canvas, .stage svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.stars { opacity: .9; }
.scene { overflow: visible; }

#spark, #lantern, #elder { transition: opacity .6s ease; }

/* ---------- 文字 ---------- */
.story { position: relative; z-index: 1; }

.scene-text {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 22vh 16px 30vh;
  text-align: center;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 1.4s ease, transform 1.4s ease;
}
.scene-text.is-in { opacity: 1; transform: none; }

.verse {
  max-width: 34rem;
  font-size: clamp(1.15rem, 2.6vw + .6rem, 1.7rem);
  line-height: 1.9;
  letter-spacing: .04em;
  font-style: italic;
  color: var(--ink);
  text-shadow: 0 0 18px rgba(4, 6, 26, .9);
}
.verse p { margin: 0; }
.verse p + p { margin-top: .2em; }
/* 場面と場面の間の小さな情景(data/chapters.json の kind: "interlude")。本編の文の下に、少し小さく */
.verse.interlude {
  margin-top: 5.5rem;
  font-size: clamp(1rem, 1.6vw + .55rem, 1.3rem);
  color: rgba(216, 220, 242, .8);
}
.verse .mark {
  display: block;
  margin-bottom: 1.6em;
  font-style: normal;
  font-size: .72rem;
  letter-spacing: .5em;
  color: var(--gold);
  opacity: .8;
}

/* 1画面目 */
.hero { position: relative; opacity: 1; transform: none; padding: 16vh 16px 16vh; }
.logo { display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.logo-mark { width: clamp(110px, 26vw, 170px); height: auto; filter: drop-shadow(0 0 24px rgba(159, 227, 247, .35)); }
/* 月と花のマーク(assets/logo-mark.png 361×381)。2倍の画面でもぼやけないよう、幅は 180px までにする */
.logo-mark-img {
  width: clamp(130px, 34vw, 180px);
  filter: drop-shadow(0 0 22px rgba(159, 227, 247, .28));
  animation: float 9s ease-in-out infinite;
}
@keyframes float { 50% { transform: translateY(-7px); } }
.logo-word {
  font-size: clamp(2rem, 6vw + .5rem, 3.6rem);
  letter-spacing: .14em;
  background: linear-gradient(100deg, #b8893e, var(--gold-hi) 45%, #c99a4c 70%, #f4dda0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.whisper {
  margin: 1.4rem 0 0;
  font-style: italic;
  letter-spacing: .12em;
  color: var(--ink-dim);
}
.scroll-hint {
  position: absolute;
  bottom: 6vh;
  margin: 0;
  font-size: .7rem;
  letter-spacing: .6em;
  color: var(--ink-dim);
  animation: breathe 3.2s ease-in-out infinite;
}
@keyframes breathe { 50% { opacity: .25; } }

/* 季節 */
.season {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30vh 16px 22vh;
  text-align: center;
  text-shadow: 0 0 14px rgba(4, 6, 26, .95);
}
.season-flower { width: 56px; height: 56px; color: var(--season); }
.season-flower { --petal: var(--season); }
.petals { fill: var(--petal, #ff8fbf); fill-opacity: .85; }
.season-name {
  margin: 1.2rem 0 .8rem;
  font-size: .75rem;
  letter-spacing: .4em;
  color: var(--gold);
}
.season-poem { margin: 0; font-size: clamp(1rem, 1.6vw + .6rem, 1.25rem); letter-spacing: .12em; line-height: 2; }
.season-poem-en { margin: .4rem 0 0; font-style: italic; font-size: .9rem; color: var(--ink-dim); letter-spacing: .06em; }

/* 最下部 */
.colophon {
  position: relative;
  z-index: 1;
  margin-top: -8rem;
  padding: 8rem 16px calc(2.4rem + env(safe-area-inset-bottom));
  background: linear-gradient(rgba(4, 6, 26, 0), rgba(4, 6, 26, .88) 55%);
  text-align: center;
  font-family: "Helvetica Neue", Arial, "Hiragino Sans", "Noto Sans JP", sans-serif;
  font-size: .72rem;
  line-height: 1.9;
  letter-spacing: .08em;
  color: var(--ink-dim);
}
.colophon p { margin: 0; }
.colophon .ja { margin-left: .2em; }
.colophon a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(216, 220, 242, .25); }
.colophon a:hover, .colophon a:focus-visible { color: var(--gold-hi); }

@media (max-width: 600px) {
  .verse { font-size: 1.08rem; line-height: 1.75; letter-spacing: .02em; }
  .verse.interlude { font-size: .98rem; margin-top: 4.5rem; }
}

/* 動きを減らす設定の人には、動きを止める */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .scene-text { opacity: 1; transform: none; }
}