/* ============================================================
   LUNIBER — ABOUT PAGE
   月モチーフ × ブランドメッセージ
   ============================================================ */

body.about-page {
  background: var(--bg);
  color: var(--text);
}

/* メイン全体 */
.about-main {
  padding-top: var(--header-h);
  position: relative;
  overflow: hidden;
}

/* ============================================================
   ABOUT HERO  ─ 月とメッセージ
   ============================================================ */
.about-hero {
  position: relative;
  min-height: calc(100vh - var(--header-h));
  padding: 80px 24px 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background:
    radial-gradient(ellipse 70% 50% at 50% 35%,
      rgba(60,80,140,0.18) 0%,
      rgba(20,30,80,0.10) 40%,
      transparent 75%),
    var(--bg);
}

/* ── 背景の星（小さな光点） ── */
.about-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.about-stars span {
  position: absolute;
  width: 2px;
  height: 2px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(255,255,255,0.85);
  opacity: 0.7;
  animation: starTwinkle 4s ease-in-out infinite;
}
.about-stars span:nth-child(1)  { top: 12%; left: 18%; animation-delay: 0s;   }
.about-stars span:nth-child(2)  { top: 22%; left: 78%; animation-delay: 0.6s; width: 1px; height: 1px; }
.about-stars span:nth-child(3)  { top: 35%; left:  8%; animation-delay: 1.2s; }
.about-stars span:nth-child(4)  { top: 48%; left: 88%; animation-delay: 1.8s; width: 3px; height: 3px; }
.about-stars span:nth-child(5)  { top: 62%; left: 14%; animation-delay: 2.4s; width: 1px; height: 1px; }
.about-stars span:nth-child(6)  { top: 75%; left: 72%; animation-delay: 0.3s; }
.about-stars span:nth-child(7)  { top: 18%; left: 50%; animation-delay: 1.5s; width: 1px; height: 1px; }
.about-stars span:nth-child(8)  { top: 82%; left: 36%; animation-delay: 2.1s; }
.about-stars span:nth-child(9)  { top: 8%;  left: 64%; animation-delay: 3.0s; width: 1px; height: 1px; }
.about-stars span:nth-child(10) { top: 55%; left: 30%; animation-delay: 0.9s; width: 1px; height: 1px; }
.about-stars span:nth-child(11) { top: 40%; left: 60%; animation-delay: 2.7s; width: 1px; height: 1px; }
.about-stars span:nth-child(12) { top: 88%; left: 88%; animation-delay: 1.7s; }

@keyframes starTwinkle {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 1;    }
}

/* ── 流れる薄い霧（境界が出ないよう全体に均一に） ── */
.about-mist {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(ellipse 90% 60% at 50% 50%, rgba(220,220,235,0.04) 0%, transparent 80%);
  animation: aboutMistDrift 22s ease-in-out infinite alternate;
}
@keyframes aboutMistDrift {
  0%   { opacity: 0.75; }
  100% { opacity: 1;    }
}

/* ── Eyebrow ラベル ── */
.about-eyebrow {
  position: relative;
  z-index: 5;
  font-size: 10px;
  letter-spacing: 8px;
  color: rgba(220,225,240,0.55);
  text-transform: uppercase;
  /* 三日月との間隔を以前の3倍に（40px → 120px） */
  margin-bottom: 120px;
  font-weight: 300;
}

/* ============================================================
   月モチーフ + メッセージ コンポジション
   ============================================================ */
.moon-composition {
  position: relative;
  z-index: 5;
  /* 月を以前の4/5サイズに縮小 (720px → 576px) */
  width: min(576px, 80vw);
  aspect-ratio: 1 / 1;          /* 三日月画像はほぼ正方形 */
  display: flex;
  align-items: center;
  justify-content: center;
  /* 三日月の懐（メッセージ位置）が画面中央に来るよう
     コンポジション全体を左へオフセット。
     メッセージは left:60% 位置にあるので、
     その差分（中心から +10%）を左に代偿する。 */
  margin-left: -10%;
  /* 上のラベル（ABOUT LUNIBER）を削除したため、
     ヒーロー上部に少し余白を追加してバランスを取る */
  margin-top: 60px;
}

/* ─── 月のハロー（柔らかい白光） ─── */
.moon-halo {
  position: absolute;
  /* 三日月の中心にハローを配置 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 78%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(230,235,255,0.18) 0%,
    rgba(200,210,240,0.10) 30%,
    rgba(160,180,220,0.04) 55%,
    transparent 75%
  );
  filter: blur(20px);
  animation: moonHaloBreath 6s ease-in-out infinite;
  z-index: 1;
}
@keyframes moonHaloBreath {
  0%, 100% { opacity: 0.75; transform: translate(-50%,-50%) scale(1);    }
  50%      { opacity: 1;    transform: translate(-50%,-50%) scale(1.08); }
}

/* ─── 月の本体（指定された透過PNG画像） ─── */
.moon-image {
  position: relative;
  z-index: 2;
  width: 88%;
  height: auto;
  display: block;
  margin: 0 auto;
  user-select: none;
  pointer-events: none;
  /* 月の輪郭を柔らかく白く光らせる */
  filter:
    drop-shadow(0 0 18px rgba(230,235,255,0.55))
    drop-shadow(0 0 44px rgba(190,210,250,0.32))
    drop-shadow(0 0 90px rgba(150,180,230,0.20));
  animation: moonFloat 9s ease-in-out infinite;
}
@keyframes moonFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* ─── 三日月の懐（右側の凹みの内側）に置くメッセージ ─── */
.moon-message {
  position: absolute;
  z-index: 3;
  /* 提供画像の三日月は左に弧、右側に懐がある → テキストは右寄り中央
     最終行「シンプルの中に〜」が三日月下の弧に被らないよう
     全体をわずかに上にオフセット（top: 47%） */
  top: 47%;
  left: 60%;
  transform: translate(-50%, -50%);
  /* 一番長い「こう着るべき」の行が1行に収まる幅に */
  width: 62%;
  text-align: center;
  pointer-events: none;
}

.moon-message-jp {
  font-family: 'Cormorant Garamond', 'Noto Sans JP', serif;
  font-weight: 400;
  /* 三日月の懐にピッタリ収まるサイズに拡大 */
  font-size: clamp(14px, 1.85vw, 20px);
  /* 行間を広めにしてゆったり整える */
  line-height: 2.35;
  letter-spacing: 0.04em;
  color: rgba(245,245,255,0.95);
  text-shadow:
    0 0 10px rgba(180,200,240,0.55),
    0 0 22px rgba(120,150,210,0.30);
  /* ふわっと現れる */
  animation: messageFadeIn 2.2s ease-out 0.6s both;
}

/* 各行を block 化して自動折り返しを禁止
   （三日月の懐から長文がはみ出さないようにする） */
.moon-message-jp .msg-line {
  display: block;
  white-space: nowrap;
}
/* 段落間の空行（PCでは三日月の縦幅をいっぱいに使うため広めに） */
.moon-message-jp .msg-gap {
  display: block;
  height: 1.8em;
}

/* 改行禁止クラス（長い行を1行に保つ） */
.moon-message-jp .nowrap {
  white-space: nowrap;
}

/* 数字をシンプルなサンセリフで（Cormorantの装飾的な数字を上書き） */
.moon-message-jp .latin-num {
  font-family: 'Space Grotesk', 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-feature-settings: "lnum";
  letter-spacing: 0;
  margin: 0 0.05em;
}

@keyframes messageFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}

/* ─── 署名 ─── */
.about-signature {
  position: relative;
  z-index: 5;
  /* 三日月との間隔を ABOUT LUNIBER と同じくらいに拡大（56px → 120px） */
  margin-top: 120px;
  font-size: 10px;
  letter-spacing: 10px;
  color: rgba(220,225,240,0.45);
  font-weight: 300;
  text-transform: uppercase;
}

/* ============================================================
   CTA セクション
   ============================================================ */
.about-cta {
  position: relative;
  padding: 100px 24px 120px;
  text-align: center;
  background: var(--bg);
}

.about-cta-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  /* ─── iOS Safari のグラデーション・バンディング対策 ───
     複数の radial-gradient / blur / drop-shadow が重なると、
     モバイル端末では諧調が粗くなり「四角い枡」状の
     バンディング（縞模様）が現れる。
     モバイルでは背景グラデーションと霧を無効化し、
     ハロー・drop-shadowもシンプル化する。 */
  .about-hero {
    padding: 60px 16px 80px;
    /* グラデーション層を消し、単色 navy にする */
    background: var(--bg);
  }
  .about-mist {
    /* 動くグラデーション層を消す（バンディングの主因） */
    display: none;
  }
  /* スマホでも三日月の内側にテキストを重ねるレイアウトを維持
     ユーザー要望：月が切れないギリギリまで左へオフセット */
  .moon-composition {
    aspect-ratio: 1 / 1;
    /* 4/5サイズに縮小したスマホ版 */
    width: min(336px, 78vw);
    height: auto;
    /* スマホは画面が狭いためモバイル独自のオフセット量を指定。
       width=78vw の月を (100vw - 78vw)/2 = 11vw 左右に余白があるので、
       その余白をせまいいずたぶん使うだけ左に　サイドマージンとして 8vw 残して
       左へ -10vw （画面サイズ基準）オフセット。 */
    margin-left: -10vw;
  }
  .moon-halo {
    top: 50%;
    left: 50%;
    width: 80%;
    aspect-ratio: 1 / 1;
    /* ハローのグラデーションを単純化 + blur削減 */
    background: radial-gradient(
      circle,
      rgba(230,235,255,0.16) 0%,
      rgba(180,200,235,0.06) 45%,
      transparent 70%
    );
    filter: blur(12px);
    /* アニメーションも止めてレイヤー再描画を抑制 */
    animation: none;
  }
  .moon-image {
    width: 100%;
    margin: 0 auto;
    /* 3段の drop-shadow を1段に削減（iOS の描画負荷を軽減） */
    filter: drop-shadow(0 0 14px rgba(220,230,255,0.45));
    /* ふわふわ浮遊アニメも停止（GPU 合成の縞を回避） */
    animation: none;
    /* GPU レイヤーを明示してピクセル深度を保つ */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }
  /* メッセージは三日月の懐（右寄り）に重ねて配置
     新文章は最長17文字あるため、懐に収まるよう幅を広げて中央寄りへ
     ユーザー要望：文字位置を少し右へずらし、三日月の弧との距離を確保 */
  .moon-message {
    position: absolute;
    /* 最終行が弧に被らないようわずかに上へ */
    top: 48%;
    /* 文字位置を少し右へ（56% → 60%） */
    left: 60%;
    transform: translate(-50%, -50%);
    /* 17文字を1行で収めるためコンテナを広めに */
    width: 66%;
    padding: 0;
  }
  .moon-message-jp {
    /* 17文字 × 文字サイズ が container 幅(=78vw × 0.66 ≒ 51vw)に収まるよう、
       1文字あたり約 51vw / 17 ≒ 3.0vw が上限。
       余裕をみて 2.6vw を基準にする。 */
    font-size: clamp(10.5px, 2.6vw, 13.5px);
    /* 行間をさらに広げる */
    line-height: 2.25;
    letter-spacing: 0.01em;
  }
  /* モバイルでは段落間ギャップをさらに広げてバランスよく */
  .moon-message-jp .msg-gap {
    height: 1.55em;
  }
  .about-eyebrow {
    /* スマホでも三日月との間隔は広めに（PCの約半分） */
    margin-bottom: 64px;
  }
  .about-signature {
    margin-top: 64px;
    letter-spacing: 6px;
  }
}

@media (max-width: 480px) {
  .about-eyebrow {
    letter-spacing: 5px;
    margin-bottom: 48px;
  }
  /* 極小画面では、長い行が画面幅をはみ出さないよう
     文字サイズと letter-spacing をさらに詰める
     ユーザー要望：右へもう少し送る */
  .moon-message {
    top: 48%;
    left: 59%;
    width: 70%;
  }
  .moon-message-jp {
    font-size: clamp(9.5px, 2.75vw, 12.5px);
    /* 極小画面でも行間をさらに広げる */
    line-height: 2.15;
    letter-spacing: 0;
  }
  .moon-message-jp .msg-gap {
    height: 1.35em;
  }
  .about-cta-buttons {
    flex-direction: column;
    align-items: center;
  }
  .about-cta-buttons .btn {
    width: 80%;
    justify-content: center;
  }
}