/* =========================================================
   みなこ 61歳バースデーサイト
   トーン：子猫イラストの世界観（生成りの和紙・水彩のにじみ・
   淡い藍・ドライフラワー・湯けむり）に合わせた水彩ストーリーブック
   ========================================================= */

:root {
  /* 紙・地の色（イラストの背景から採色） */
  --paper:        #f6efe0;   /* 生成りの和紙 */
  --paper-deep:   #efe4cd;   /* 少し沈んだ紙 */
  --paper-warm:   #f9f3e7;   /* 明るい紙 */

  /* 墨（文字）— 純黒でなく温かい焦茶 */
  --ink:          #4a3a2c;
  --ink-soft:     #6d5a48;
  --ink-faint:    #a8967f;
  --ink-mute:     #c2b299;

  /* 差し色 */
  --brown:        #a67c52;   /* 子猫の毛 */
  --brown-deep:   #7c5c3c;
  --indigo:       #8290a8;   /* 水彩の藍のにじみ */
  --indigo-soft:  #aab3c4;
  --apricot:      #e6c69c;   /* やわらかい橙 */
  --dried:        #d8c3a0;   /* ドライフラワー */

  --maxw: 1080px;

  --serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--serif);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.9;
  letter-spacing: 0.04em;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* 和紙のテクスチャ（うっすら） */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
  background:
    radial-gradient(circle at 20% 30%, rgba(130,144,168,0.05), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(230,198,156,0.06), transparent 45%);
}

/* ---------- セクション共通 ---------- */
.section {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14vh 6vw;
  text-align: center;
  overflow: hidden; /* 背景のにじみ(bloom)を章の内側にクリップ＝横スクロール防止 */
}

.inner {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
}

/* 章ごとに背景のにじみを変える */
.section--overcome { background: linear-gradient(180deg, var(--paper) 0%, #f2ebdb 100%); }
.section--onsen    { background: linear-gradient(180deg, #f2ebdb 0%, #eef0ef 100%); }
.section--thanks   { background: linear-gradient(180deg, #eef0ef 0%, #f7efe1 100%); }
.section--future   { background: linear-gradient(180deg, #f7efe1 0%, #f3ece0 100%); }
.section--finale   { background: linear-gradient(180deg, #f3ece0 0%, #efe6d4 100%); }

/* 水彩のにじみ（各セクションに大きく淡く） */
.bloom {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
}
.bloom--indigo  { background: radial-gradient(circle, var(--indigo), transparent 70%); }
.bloom--apricot { background: radial-gradient(circle, var(--apricot), transparent 70%); }

/* ---------- タイポ ---------- */
.kicker {
  font-size: clamp(1rem, 4vw, 1.2rem);
  letter-spacing: 0.28em;
  color: var(--ink-soft);
  font-weight: 600;
  margin-bottom: 1.5em;
  padding-left: 0.28em;
}

.chapter-title {
  font-size: clamp(2rem, 8vw, 3.6rem);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.12em;
  color: var(--ink);
  margin-bottom: 1.4em;
}

.body-text p {
  font-size: clamp(1rem, 4vw, 1.2rem);
  font-weight: 400;
  color: var(--ink-soft);
  margin: 0 auto 1.1em;
  max-width: 34em;
}

/* ---------- 章1 オープニング ---------- */
.hero {
  min-height: 100svh;
  position: relative;
  overflow: hidden;
  justify-content: flex-start; /* 上から積む＝重なり防止 */
  padding-top: 5vh;
  padding-bottom: 4vh;
}
.hero__overline {
  font-size: clamp(0.85rem, 3vw, 1rem);
  letter-spacing: 0.55em;
  color: var(--brown);
  margin-bottom: 1.2em;
  padding-left: 0.55em;
}
.hero__kitten {
  width: min(54vw, 280px);
  aspect-ratio: 1;
  object-fit: contain;
  margin: 0 auto 1.4em;
  display: block;
  mix-blend-mode: multiply; /* クリーム背景を紙に溶かす */
}
.hero__title {
  font-size: clamp(2.2rem, 9.2vw, 4.4rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.1em;
  color: var(--ink);
  margin-bottom: 0.8em;
}
.hero__subtitle {
  font-size: clamp(1rem, 4vw, 1.25rem);
  color: var(--ink-soft);
  font-weight: 400;
}

/* スクロール誘導（歩き出しの子猫＋肉球） */
.scroll-hint {
  margin-top: 1.4em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4em;
  color: var(--ink-mute);
  font-size: 0.9rem;
  letter-spacing: 0.3em;
  animation: bob 2.6s ease-in-out infinite;
}
.scroll-hint img { width: 70px; height: auto; opacity: 0.95; mix-blend-mode: multiply; }
@keyframes bob {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(8px); }
}

/* ---------- 章の実写（例：入院の夜） ---------- */
.chapter-photo {
  margin: 0.5em auto 2.2em;
  width: min(82vw, 560px);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(40,32,24,0.28);
  line-height: 0;
}
.chapter-photo img { width: 100%; height: auto; display: block; }
.chapter-photo figcaption {
  line-height: 1.7;
  font-size: 0.82rem;
  color: var(--ink-mute);
  letter-spacing: 0.12em;
  padding: 0.9em 1em;
  background: #2a221b;
  color: #d8c9b6;
  text-align: center;
}

/* ---------- 章マスコット（各章の子猫） ---------- */
.chapter-kitten {
  width: min(58vw, 260px);
  aspect-ratio: 1;
  object-fit: contain;
  margin: 0 auto 2em;
  display: block;
  mix-blend-mode: multiply;
}

/* ---------- 温泉のお湯 動画 ---------- */
.onsen-video {
  margin: 2.5em auto 0.5em;
  width: min(88vw, 640px);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(124,92,60,0.16);
  line-height: 0;
}
.onsen-video video {
  width: 100%;
  height: auto;
  display: block;
}

/* ---------- 写真ギャラリー（章3） ---------- */
.gallery-wrap { width: 100%; }

.gallery-label {
  margin: 3em 0 1.2em;
  font-size: clamp(1.1rem, 4.4vw, 1.35rem);
  letter-spacing: 0.2em;
  color: var(--ink-soft);
  font-weight: 600;
  text-align: center;
}
.gallery-label::before,
.gallery-label::after {
  content: "—";
  color: var(--dried);
  margin: 0 0.8em;
}

.gallery {
  columns: 3 240px;
  column-gap: 1.1em;
  width: 100%;
}
.photo {
  break-inside: avoid;
  margin-bottom: 1.1em;
  background: var(--paper-warm);
  border-radius: 4px;
  padding: 0.55em 0.55em 0.9em;
  box-shadow: 0 8px 22px rgba(124,92,60,0.10);
  transform: rotate(var(--tilt, 0deg));
  transition: transform 0.5s ease, box-shadow 0.5s ease;
}
.photo:hover { transform: rotate(0deg) translateY(-4px); box-shadow: 0 14px 30px rgba(124,92,60,0.16); }
.photo img { width: 100%; display: block; border-radius: 2px; }
.photo__placeholder {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-mute);
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  background:
    linear-gradient(135deg, rgba(130,144,168,0.14), rgba(230,198,156,0.16)),
    var(--paper-deep);
  border: 1px dashed rgba(124,92,60,0.22);
}
.photo__caption {
  margin-top: 0.7em;
  font-size: 0.82rem;
  color: var(--ink-soft);
  letter-spacing: 0.08em;
  text-align: center;
}

/* ---------- 章の区切り：肉球の足あと ---------- */
.paw-divider {
  position: relative;
  z-index: 1;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.4em;
  background: transparent;
}
.paw {
  width: 26px;
  height: 26px;
  opacity: 0;
  transform: translateY(10px);
  color: var(--brown);
}
.paw:nth-child(even) { transform: translateY(24px); }

/* ---------- 締め ---------- */
.finale__kitten {
  width: min(72vw, 340px);
  aspect-ratio: 1;
  object-fit: contain;
  margin: 0 auto 2.4em;
  display: block;
  mix-blend-mode: multiply;
}
.finale__line {
  font-size: clamp(1.6rem, 6.5vw, 2.6rem);
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.1em;
  color: var(--ink);
  margin-bottom: 2.2em;
}
.finale__sign {
  font-size: clamp(0.95rem, 3.4vw, 1.1rem);
  color: var(--ink-soft);
  letter-spacing: 0.18em;
}

/* ---------- BGM ♪ ボタン ---------- */
.bgm-btn {
  position: fixed;
  right: max(4vw, 16px);
  bottom: max(4vh, 16px);
  z-index: 50;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(124,92,60,0.22);
  background: rgba(246,239,224,0.82);
  backdrop-filter: blur(4px);
  color: var(--brown-deep);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(124,92,60,0.16);
  opacity: 0.7;
  transition: opacity 0.4s ease, transform 0.4s ease, background 0.4s ease;
}
.bgm-btn:hover { opacity: 1; }
.bgm-btn.on {
  background: var(--brown);
  color: #fff;
  opacity: 0.9;
  animation: bgm-pulse 2.4s ease-in-out infinite;
}
@keyframes bgm-pulse {
  0%,100% { box-shadow: 0 6px 18px rgba(124,92,60,0.16); }
  50%     { box-shadow: 0 6px 26px rgba(166,124,82,0.45); }
}
@media (prefers-reduced-motion: reduce) { .bgm-btn.on { animation: none; } }

/* ---------- 湯けむり ---------- */
.steam {
  position: absolute;
  bottom: 0;
  width: 3px;
  height: 180px;
  background: linear-gradient(to top, rgba(255,255,255,0.0), rgba(255,255,255,0.55));
  filter: blur(4px);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  animation: rise 9s ease-in infinite;
}
@keyframes rise {
  0%   { opacity: 0; transform: translateY(0) scaleX(1); }
  20%  { opacity: 0.6; }
  100% { opacity: 0; transform: translateY(-260px) scaleX(2.4) skewX(8deg); }
}

/* ---------- 出現アニメ（下からふわっと＝湯気のように） ---------- */
.reveal {
  opacity: 0;
  transform: translateY(38px);
  transition: opacity 1.4s cubic-bezier(.2,.7,.2,1), transform 1.4s cubic-bezier(.2,.7,.2,1);
}
.reveal.is-in { opacity: 1; transform: translateY(0); }
.reveal.d1 { transition-delay: 0.15s; }
.reveal.d2 { transition-delay: 0.30s; }
.reveal.d3 { transition-delay: 0.45s; }
.reveal.d4 { transition-delay: 0.60s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .steam, .scroll-hint { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------- モバイル調整 ---------- */
@media (max-width: 640px) {
  .section { padding: 12vh 8vw; }
  .gallery { columns: 2 150px; column-gap: 0.8em; }
  body { line-height: 1.85; }
}