/* home.css — トップページと記事一覧ページ(page-N.html)だけで使うスタイル。
   2026-09-05 追加。style.css を変更すると全21ページの ?v= を上げる必要があるため、
   トップ側だけの意匠はこのファイルに分けている。改修したら ?v= を上げ、
   index.html / en/index.html / page-N.html / en/page-N.html の参照を更新すること。 */

/* ── 特集(年表)カード:hero と記事一覧のあいだ ───────────────── */
.feature{
  position: relative;
  margin: 4px 0 46px;
  padding: 30px 32px 28px;
  background: var(--bg-panel);
  border: 1px solid var(--line-strong);
  border-left: 2px solid var(--ember);
  overflow: hidden;
}
.feature::after{
  content: ""; position: absolute; top: -130px; right: -100px;
  width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(207,157,108,0.14), rgba(207,157,108,0) 70%);
  pointer-events: none;
}
.feature > *{ position: relative; z-index: 1; }
.feature-label{
  margin: 0 0 13px; font-size: 11.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ember);
}
.feature h2{ margin: 0 0 13px; font-size: 23px; line-height: 1.55; font-weight: 600; letter-spacing: 0.01em; }
.feature h2 a{ color: var(--text); text-decoration: none; transition: color 0.3s; }
.feature h2 a:hover{ color: var(--ember); }
.feature-text{ margin: 0; font-size: 14px; line-height: 1.95; color: var(--text-muted); max-width: 64ch; }
.feature-links{ display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; }
.feature-btn{
  display: inline-block; font-size: 12.5px; letter-spacing: 0.05em;
  color: var(--text); text-decoration: none; padding: 9px 20px;
  border: 1px solid var(--ember); border-radius: 999px; white-space: nowrap;
  background: rgba(207,157,108,0.10);
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.feature-btn:hover{ background: rgba(207,157,108,0.22); }
.feature-btn.ghost{ border-color: var(--line-strong); background: transparent; color: var(--text-muted); }
.feature-btn.ghost:hover{ color: var(--text); border-color: var(--ember); background: rgba(207,157,108,0.08); }

/* ── 記事一覧ページ(2ページ目以降)の見出し ──────────────────── */
.archive-head{ padding: 46px 0 4px; }
.archive-head h1{ margin: 0 0 12px; font-size: 27px; font-weight: 600; letter-spacing: 0.02em; }
.archive-head .section-label{ margin: 0; }

/* ── ページ送り ──────────────────────────────────────────── */
.pagination{
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 8px; margin: 44px 0 0; padding-top: 34px; border-top: 1px solid var(--line);
}
.pagination a, .pagination span{
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0 12px;
  font-size: 13px; letter-spacing: 0.03em; text-decoration: none;
  color: var(--text-muted); border: 1px solid transparent; border-radius: 3px;
  transition: color 0.3s, border-color 0.3s, background 0.3s;
}
.pagination a:hover{ color: var(--text); border-color: var(--line-strong); background: rgba(233,231,242,0.05); }
.pagination .pg-current{ color: var(--text); border-color: var(--accent); background: rgba(132,129,196,0.13); }
.pagination .pg-disabled{ color: var(--text-faint); opacity: 0.5; }
.pagination .pg-edge{ font-size: 12.5px; }

@media (max-width: 640px){
  .feature{ padding: 24px 20px 22px; margin-bottom: 38px; }
  .feature h2{ font-size: 20px; }
  .feature-links{ gap: 8px; }
  .feature-btn{ padding: 8px 16px; }
  .archive-head{ padding-top: 34px; }
  .archive-head h1{ font-size: 23px; }
  .pagination{ gap: 6px; }
  .pagination a, .pagination span{ min-width: 32px; height: 32px; padding: 0 9px; font-size: 12.5px; }
}

/* ── hero の演出(2026-09-25 追加。?v=2) ─────────────────────
   訪れたときに、見出し・説明・リンクが順にふわっと現れ、右上の星座の線が
   すっと描かれる(どちらも2秒ほどで終わり、読者を待たせない)。その後は
   流れ星がときどき星空を横切る。星座の形は OGP 画像と同じ5点。
   すべてCSSだけで動かしている(CSPと、assets/js/ に置けない制約のため)。
   どの演出も「最後の状態」を通常のスタイルにしてあり、アニメーションは
   backwards で最初の状態を与えるだけ。だから「動きを減らす」設定で
   animation を切ると、最初から完成した状態で表示される。 */

/* 見出し・説明・リンクが順に浮かび上がる */
.hero-inner > *{ animation: hero-rise 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }
.hero-inner > h1{ animation-delay: 0.1s; }
.hero-inner > p{ animation-delay: 0.45s; }
.hero-inner > .hero-link{ display: inline-block; animation-delay: 0.75s; }
@keyframes hero-rise{ from{ opacity: 0; transform: translateY(12px); } }

/* 右上の星座(ring の内側)。線は pathLength="1" なので dasharray 1 で描ける */
.constellation{
  position: absolute; top: 74px; right: 30px; width: 230px; height: auto;
  overflow: visible; pointer-events: none;
}
.c-line{
  fill: none; stroke: #8a8fcf; stroke-width: 1.2; stroke-opacity: 0.5;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 0;
  animation: c-draw 1.6s ease-in-out 0.7s backwards;
}
@keyframes c-draw{ from{ stroke-dashoffset: 1; } }
.c-dot{ fill: #eae6f4; opacity: 0.85; animation: c-dot 0.7s ease-out backwards; }
.c-dot:nth-of-type(1){ animation-delay: 0.55s; }
.c-dot:nth-of-type(2){ animation-delay: 0.95s; }
.c-dot:nth-of-type(3){ animation-delay: 1.3s; }
.c-dot:nth-of-type(4){ animation-delay: 1.65s; }
.c-dot:nth-of-type(5){ animation-delay: 2s; }
@keyframes c-dot{ from{ opacity: 0; } }

/* 流れ星。ふだんは見えず(opacity 0)、周期の最初の1秒ほどだけ横切る */
.meteor{
  position: absolute; width: 130px; height: 1px;
  background: linear-gradient(90deg, rgba(242,236,220,0), rgba(242,236,220,0.85));
  opacity: 0; pointer-events: none; transform-origin: 0 50%;
}
.meteor::after{
  content: ""; position: absolute; right: -1px; top: -1px; width: 3px; height: 3px;
  border-radius: 50%; background: #f2ecdc; box-shadow: 0 0 6px 1px rgba(242,236,220,0.55);
}
.meteor.m1{ top: 16%; left: 40%; animation: meteor 11s linear 2.8s infinite; }
.meteor.m2{ top: 6%; left: 64%; animation: meteor 17s linear 9s infinite; }
@keyframes meteor{
  0%{ opacity: 0; transform: rotate(24deg) translateX(0); }
  1.2%{ opacity: 1; }
  7%{ opacity: 0; transform: rotate(24deg) translateX(360px); }
  100%{ opacity: 0; transform: rotate(24deg) translateX(360px); }
}

@media (max-width: 640px){
  /* 狭い画面では見出しと重ならないよう、星座を右下(リンクの右側の空き)へ */
  .constellation{ top: auto; bottom: 16px; right: 6px; width: 120px; }
  .meteor.m1{ top: 12%; left: 30%; }
  .meteor.m2{ top: 4%; left: 55%; }
}

/* 「動きを減らす」設定では演出を止める。style.css の全体ルールは duration を
   縮めるだけで delay が残るので、ここでは animation そのものを外す */
@media (prefers-reduced-motion: reduce){
  .hero-inner > *, .c-line, .c-dot{ animation: none !important; }
  .meteor{ display: none; }
}