/* ============================================================
   絶対彼氏 — トップページ（index.html）専用スタイル
   ============================================================
   このファイルは index.html だけに適用されます。
   ゲーム画面のスタイルは css/style.css を参照してください。
   ============================================================ */

/* ────────────────────────────────────────
   リセット
──────────────────────────────────────── */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ────────────────────────────────────────
   ページ全体
   背景のグラデーションはここで管理します。
   色を変えたい場合は radial-gradient / linear-gradient の
   カラーコードを変更してください。
──────────────────────────────────────── */
body {
  min-height: 100vh;
  background:
    /* 左下：ピンクのぼかし */
    radial-gradient(ellipse at 20% 80%, rgba(255, 182, 210, 0.35) 0%, transparent 55%),
    /* 右上：ブルーのぼかし */
    radial-gradient(ellipse at 80% 20%, rgba(173, 216, 255, 0.35) 0%, transparent 55%),
    /* ベースグラデーション（白→淡ピンク→淡ブルー） */
    linear-gradient(160deg, #fff8fb 0%, #fef0f6 40%, #edf6ff 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  overflow: hidden;
}

/* ────────────────────────────────────────
   浮遊パーティクル（背景の小さな丸）
   JSで自動生成されます。粒の数は index.html の
   スクリプト内 `for (let i = 0; i < 40; i++)` で変更できます。
──────────────────────────────────────── */
.particles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* クリックを貫通させる */
  z-index: 0;
}

.particle {
  position: absolute;
  border-radius: 50%;
  animation: float linear infinite;
}

/* パーティクルが下から上へ浮かび上がるアニメーション */
@keyframes float {
  0%   { transform: translateY(100vh) scale(0); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 0.8; }
  100% { transform: translateY(-10vh) scale(1.2); opacity: 0; }
}

/* ────────────────────────────────────────
   ハートアイコン（背景に漂うハート）
   JSで自動生成されます。数は index.html の
   スクリプト内 `for (let i = 0; i < 14; i++)` で変更できます。
──────────────────────────────────────── */
.hearts {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.heart {
  position: absolute;
  opacity: 0;
  animation: heartFloat ease-in infinite;
}

/* ハートがふわりと上昇するアニメーション */
@keyframes heartFloat {
  0%   { opacity: 0; transform: translateY(0) scale(0.5); }
  20%  { opacity: 0.5; }
  80%  { opacity: 0.25; }
  100% { opacity: 0; transform: translateY(-180px) scale(1.1) rotate(15deg); }
}

/* ────────────────────────────────────────
   メインコンテンツ（ロゴ・キャッチコピー・ボタン）
──────────────────────────────────────── */
.container {
  position: relative;
  z-index: 1; /* パーティクルより前面に表示 */
  text-align: center;
  padding: 40px 24px;
  animation: fadeInUp 1s ease both; /* ページ読み込み時にふわっと表示 */
}

/* ページ読み込み時のフェードイン */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ────────────────────────────────────────
   ロゴ
   ロゴのフォントサイズは clamp(最小, 推奨, 最大) で
   画面幅に合わせて自動調整されます。
──────────────────────────────────────── */

/* 上部の小見出し「― Love Story ―」 */
.logo-sub {
  font-size: 13px;
  letter-spacing: 6px;
  color: #c07090;
  margin-bottom: 14px;
}

/* メインタイトル「絶対彼氏」 グラデーションテキスト */
.logo-main {
  font-size: clamp(52px, 10vw, 80px); /* 画面幅に応じてリサイズ */
  font-weight: 900;
  /* グラデーションをテキストに適用 */
  background: linear-gradient(135deg, #f9607a 0%, #e05e9a 50%, #9b72cf 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 8px;
  line-height: 1.1;
  margin-bottom: 8px;
  filter: drop-shadow(0 2px 12px rgba(240, 100, 150, 0.25));
}

/* 英字サブタイトル「Zettai Kareshi」 */
.logo-en {
  font-size: 13px;
  letter-spacing: 5px;
  color: #b090b8;
  margin-bottom: 44px;
  font-style: italic;
}

/* ────────────────────────────────────────
   キャッチコピー
──────────────────────────────────────── */
.catchcopy {
  font-size: clamp(14px, 3vw, 17px);
  color: #5a3a52;
  line-height: 2.1;
  margin-bottom: 52px;
  letter-spacing: 2px;
}

/* 各行を縦に並べる */
.catchcopy span {
  display: block;
}

/* ────────────────────────────────────────
   「はじめる」ボタン
   グラデーション・ホバー時のエフェクトはここで管理します。
──────────────────────────────────────── */
.start-btn {
  display: inline-block;
  padding: 17px 58px;
  font-size: 17px;
  font-family: inherit;
  letter-spacing: 4px;
  color: #fff;
  background: linear-gradient(135deg, #f9607a 0%, #d85fa0 60%, #9b72cf 100%);
  border: none;
  border-radius: 50px;
  cursor: pointer;
  text-decoration: none;
  box-shadow:
    0 4px 20px rgba(240, 96, 122, 0.35),
    0 1px 4px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden; /* 光沢エフェクトをボタン内に収める */
}

/* ホバー時の光沢（シャイン）エフェクト用擬似要素 */
.start-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
  transition: left 0.5s ease;
}

/* ホバー：少し浮き上がる */
.start-btn:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 8px 28px rgba(240, 96, 122, 0.45);
}

/* ホバー時に光沢が左→右へ流れる */
.start-btn:hover::before {
  left: 100%;
}

/* クリック時：少し押し込まれる */
.start-btn:active {
  transform: translateY(-1px) scale(1.01);
}

/* ────────────────────────────────────────
   装飾ライン（ボタン下の「♡」付きライン）
──────────────────────────────────────── */
.deco-line {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 42px auto 0;
  width: fit-content;
  color: #d4a8c0;
  font-size: 13px;
  letter-spacing: 3px;
}

/* 左右のラインは擬似要素で描画 */
.deco-line::before,
.deco-line::after {
  content: '';
  display: block;
  width: 56px;
  height: 1px;
}

.deco-line::before {
  background: linear-gradient(90deg, transparent, #d4a8c0);
}

.deco-line::after {
  background: linear-gradient(90deg, #d4a8c0, transparent);
}