/* ================================================================
   home.css
   トップページ（index.php）専用スタイル
   ================================================================ */

/* ────────────────────────────────────────────────────────────────
   広告帯
   ──────────────────────────────────────────────────────────────── */
.ad-banner-top    { padding-top: 2rem; }
.ad-banner-bottom { padding-bottom: 2rem; }


/* ────────────────────────────────────────────────────────────────
   ヒーロー：データ更新バナー
   ──────────────────────────────────────────────────────────────── */
.hero-update-banner {
  margin-top: 2.5rem;
  justify-content: center;
}


/* ────────────────────────────────────────────────────────────────
   クイックリンクセクション
   ──────────────────────────────────────────────────────────────── */
.section--quicklinks {
  padding-block: 1rem;
}

.quicklinks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

/* カード共通 */
.quicklink-card {
  border-radius: var(--radius-lg);
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  transition: transform var(--transition), box-shadow var(--transition);
}
.quicklink-card:hover {
  transform: translateY(-4px);
}

/* カードの種類別アクセントカラー */
.quicklink-card--tier {
  background: linear-gradient(135deg, rgba(255,68,68,.12), rgba(13,16,40,.9));
  border: 1px solid rgba(255,68,68,.25);
}
.quicklink-card--deck {
  background: linear-gradient(135deg, rgba(200,160,32,.12), rgba(13,16,40,.9));
  border: 1px solid rgba(200,160,32,.25);
}
.quicklink-card--ranking {
  background: linear-gradient(135deg, rgba(0,207,255,.10), rgba(13,16,40,.9));
  border: 1px solid rgba(0,207,255,.25);
}
.quicklink-card--post {
  background: linear-gradient(135deg, rgba(204,68,255,.10), rgba(13,16,40,.9));
  border: 1px solid rgba(204,68,255,.25);
}

/* ライトモード上書き */
[data-theme="light"] .quicklink-card--tier    { background: linear-gradient(135deg, rgba(255,68,68,.08),  rgba(240,236,223,.95)); border-color: rgba(255,68,68,.20); }
[data-theme="light"] .quicklink-card--deck    { background: linear-gradient(135deg, rgba(160,120,16,.10), rgba(240,236,223,.95)); border-color: rgba(160,120,16,.28); }
[data-theme="light"] .quicklink-card--ranking { background: linear-gradient(135deg, rgba(0,128,176,.08),  rgba(240,236,223,.95)); border-color: rgba(0,128,176,.22); }
[data-theme="light"] .quicklink-card--post    { background: linear-gradient(135deg, rgba(136,34,204,.08), rgba(240,236,223,.95)); border-color: rgba(136,34,204,.20); }

.quicklink-card__icon  { font-size: 1.8rem; }
.quicklink-card__title {
  font-family: var(--f-heading);
  font-size: 1rem;
  color: var(--c-txt-hi);
}
.quicklink-card__desc  {
  font-size: .82rem;
  color: var(--c-txt-muted);
}


/* ────────────────────────────────────────────────────────────────
   セクション内「もっと見る」リンク
   ──────────────────────────────────────────────────────────────── */
.section-more {
  text-align: center;
  margin-top: 2rem;
}
.section-more--lg {
  margin-top: 2.5rem;
}


/* ────────────────────────────────────────────────────────────────
   プレミアム会員バナー
   ──────────────────────────────────────────────────────────────── */
.premium-banner {
  background: linear-gradient(135deg, rgba(120,94,16,.18), rgba(13,16,40,.98));
  border: 1px solid var(--c-gold-lo);
  border-radius: var(--radius-lg);
  padding: 3.5rem;
  text-align: center;
}
[data-theme="light"] .premium-banner {
  background: linear-gradient(135deg, rgba(160,120,16,.10), rgba(255,255,255,.97));
}

.premium-banner__icon {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.premium-banner__title {
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 3vw, 2rem);
  color: var(--c-gold-hi);
  margin: .8rem 0;
}

.premium-banner__desc {
  color: var(--c-txt-muted);
  max-width: 520px;
  margin: 0 auto 1.8rem;
  line-height: 1.8;
  font-size: .92rem;
}

.premium-banner__features {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.premium-banner__feature {
  font-size: .85rem;
  color: var(--c-txt-muted);
}


/* ────────────────────────────────────────────────────────────────
   Hero（styles.css から移動）
   ──────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  padding-block: 9rem 5rem;
}

.hero-bg               { position: absolute; inset: 0; z-index: 0; }
.hero-bg-img           { width: 100%; height: 100%; object-fit: cover; opacity: .40; }
.hero-bg-overlay       { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(2,3,8,.92), rgba(13,16,40,.55) 55%, rgba(2,3,8,.88)); }
[data-theme="light"] .hero-bg-overlay {
  background: linear-gradient(135deg, rgba(160,120,16,.10), rgba(255,255,255,.97));
}

/* Ambient orbs */
.hero-orb {
  position: absolute; border-radius: 50%;
  filter: blur(40px); pointer-events: none;
  animation: orbPulse 9s ease-in-out infinite;
}
.hero-orb-1 { width: 500px; height: 500px; background: radial-gradient(circle, rgba(204,68,255,.25), transparent 70%); top: -120px; right: -100px; }
.hero-orb-2 { width: 380px; height: 380px; background: radial-gradient(circle, rgba(0,207,255,.18),  transparent 70%); bottom: 80px; left: -80px; animation-delay: -4s; }
.hero-orb-3 { width: 300px; height: 300px; background: radial-gradient(circle, rgba(200,160,32,.18), transparent 70%); top: 40%; right: 22%; animation-delay: -7s; }

@keyframes orbPulse {
  0%, 100% { transform: scale(1);    opacity: .7; }
  50%       { transform: scale(1.1); opacity: 1;  }
}

/* Content */
.hero-content {
  position: relative; z-index: 1;
  text-align: center; max-width: 960px;
  padding-inline: 2rem;
  animation: heroReveal 1.1s cubic-bezier(.16,1,.3,1) both;
}
@keyframes heroReveal { from { opacity: 0; transform: translateY(36px); } to { opacity: 1; transform: none; } }

.hero-eyebrow {
  display: inline-block;
  font-family: var(--f-ui); font-size: .72rem; font-weight: 700;
  letter-spacing: .5em; text-transform: uppercase;
  color: var(--c-cyan); text-shadow: 0 0 18px rgba(0,207,255,.7);
  margin-bottom: 1.5rem;
}

.hero-title {
  font-family: var(--f-display); font-weight: 900;
  font-size: clamp(2.6rem, 7.5vw, 7rem);
  line-height: 1; letter-spacing: .04em;
  color: var(--c-txt-hi);
  /* text-shadow: 0 0 80px rgba(200,160,32,.35), 0 4px 12px rgba(0,0,0,.9); */
  margin-bottom: 1.5rem;
}
.hero-title-accent {
  display: block;
  background: linear-gradient(135deg, var(--c-gold), var(--c-gold-hi) 50%, var(--c-gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-desc    { font-size: 1.05rem; color: var(--c-txt-muted); max-width: 600px; margin: 0 auto 2.8rem; line-height: 1.85; }
.hero-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* スクロールインジケーター */
.scroll-indicator {
  position: absolute; bottom: 2.5rem; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  z-index: 1;
  animation: fadeInUp 1s 1.4s both;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateX(-50%) translateY(16px); }
  to   { opacity: 1; transform: translateX(-50%); }
}
.scroll-indicator span        { font-family: var(--f-ui); font-size: .6rem; letter-spacing: .35em; color: var(--c-txt-muted); }
.scroll-indicator-line        { width: 1px; height: 48px; background: linear-gradient(180deg, var(--c-gold), transparent); animation: lineGrow 1.5s ease-in-out infinite; }
@keyframes lineGrow { 0%,100% { transform: scaleY(.4); opacity: .5; } 50% { transform: scaleY(1); opacity: 1; } }

/* ── レスポンシブ（home.css内ヒーロー用） ──────── */
@media (max-width: 768px) {
  .hero-orb { display: none; }
}
@media (max-width: 480px) {
  .hero-actions { flex-direction: column; align-items: center; }
}



/* meta_dataカード（4色ローテーション） */
.quicklink-card--meta-0 {
  background: linear-gradient(135deg, rgba(200,160,32,.12), rgba(13,16,40,.9));
  border: 1px solid rgba(200,160,32,.25);
}
.quicklink-card--meta-1 {
  background: linear-gradient(135deg, rgba(0,207,255,.10), rgba(13,16,40,.9));
  border: 1px solid rgba(0,207,255,.25);
}
.quicklink-card--meta-2 {
  background: linear-gradient(135deg, rgba(204,68,255,.10), rgba(13,16,40,.9));
  border: 1px solid rgba(204,68,255,.25);
}
.quicklink-card--meta-3 {
  background: linear-gradient(135deg, rgba(255,68,68,.12), rgba(13,16,40,.9));
  border: 1px solid rgba(255,68,68,.25);
}

[data-theme="light"] .quicklink-card--meta-0 { background: linear-gradient(135deg, rgba(160,120,16,.10), rgba(240,236,223,.95)); border-color: rgba(160,120,16,.28); }
[data-theme="light"] .quicklink-card--meta-1 { background: linear-gradient(135deg, rgba(0,128,176,.08),  rgba(240,236,223,.95)); border-color: rgba(0,128,176,.22); }
[data-theme="light"] .quicklink-card--meta-2 { background: linear-gradient(135deg, rgba(136,34,204,.08), rgba(240,236,223,.95)); border-color: rgba(136,34,204,.20); }
[data-theme="light"] .quicklink-card--meta-3 { background: linear-gradient(135deg, rgba(255,68,68,.08),  rgba(240,236,223,.95)); border-color: rgba(255,68,68,.20); }

.quicklink-card__date {
  font-size: .78rem;
  color: var(--c-txt-muted);
  font-family: var(--f-ui);
  letter-spacing: .03em;
}