/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   front-page.css — トップページ専用スタイル
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── ファーストビュー ──────────────────────── */
.fv {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--space-xl) var(--space-md);
  padding-top: calc(var(--header-height) + var(--space-xl));
}

.fv__content {
  text-align: center;
  max-width: 600px;
}

.fv__title {
  margin-bottom: var(--space-lg);
}

.fv__title-line--main {
  display: block;
  font-family: var(--font-serif-b);
  font-size: var(--text-4xl);
  font-weight: 800;
  letter-spacing: 0.12em;
  opacity: 0;
  animation: fv-title-in 1.2s var(--ease-out) 0.3s forwards;
}

.fv__copy {
  margin-bottom: var(--space-md);
}

.fv__copy-line {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: var(--leading-loose);
  color: var(--color-text);
  opacity: 0;
  animation: fv-line-in 0.9s var(--ease-out) forwards;
}

.fv__copy-line:nth-child(1) { animation-delay: 0.8s; }
.fv__copy-line:nth-child(2) { animation-delay: 1.1s; }
.fv__copy-line:nth-child(3) { animation-delay: 1.4s; }

.fv__tagline {
  font-family: var(--font-serif);
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
  opacity: 0;
  animation: fv-line-in 0.9s var(--ease-out) 2s forwards;
}

/* スクロールインジケーター */
.fv__scroll-indicator {
  position: absolute;
  bottom: var(--space-lg);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  opacity: 0;
  animation: fv-line-in 0.6s var(--ease-out) 2.6s forwards;
}

.fv__scroll-text {
  font-family: var(--font-accent);
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-light);
}

.fv__scroll-line {
  display: block;
  width: 1px;
  height: 48px;
  background: linear-gradient(
    to bottom,
    var(--color-text-light),
    transparent
  );
  animation: scroll-pulse 2s var(--ease-in-out) infinite;
}

/* FVアニメーション */
@keyframes fv-title-in {
  from {
    opacity: 0;
    transform: translateY(16px);
    letter-spacing: 0.2em;
  }
  to {
    opacity: 1;
    transform: translateY(0);
    letter-spacing: 0.12em;
  }
}

@keyframes fv-line-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scroll-pulse {
  0%, 100% { opacity: 0.3; transform: scaleY(0.7); }
  50%      { opacity: 1;   transform: scaleY(1); }
}


/* ── タイムライン ──────────────────────────── */
.timeline {
  position: relative;
  padding: var(--space-2xl) 0;
  overflow: hidden;
}

.timeline__svg {
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  transform: translateX(-50%);
  pointer-events: none;
}

.timeline__path {
  fill: none;
  stroke: var(--color-border);
  stroke-width: 2;
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  transition: stroke-dashoffset 0.05s linear;
}

/* エラベル（旅人時代 / 協力隊時代） */
.timeline__era {
  position: relative;
  max-width: var(--content-wide);
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md) var(--space-xs);
  text-align: center;
}

.timeline__era-label {
  display: inline-block;
  font-family: var(--font-serif);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.15em;
  color: var(--color-text-light);
  padding: 0.5em 1.6em;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  position: relative;
  z-index: 3;
}

.timeline__era--jocv .timeline__era-label {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* タイムラインのノード */
.timeline__node {
  position: relative;
  max-width: var(--content-wide);
  margin: 0 auto;
  padding: var(--space-xl) var(--space-md);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  align-items: start;
}

.timeline__node:nth-child(even) .timeline__content {
  grid-column: 2;
}

.timeline__node:nth-child(odd) .timeline__content {
  grid-column: 1;
}

/* ドット */
.timeline__dot {
  position: absolute;
  left: 50%;
  top: var(--space-xl);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--dot-color, var(--color-accent));
  transform: translate(-50%, 0) scale(0);
  transition: transform var(--duration-mid) var(--ease-out);
  z-index: 2;
}

.timeline__node.is-visible .timeline__dot {
  transform: translate(-50%, 0) scale(1);
}

/* 現在地のパルス */
.timeline__dot--pulse {
  box-shadow: 0 0 0 0 rgba(139, 107, 85, 0.4);
}

.timeline__node.is-visible .timeline__dot--pulse {
  animation: dot-pulse 2s var(--ease-in-out) infinite;
}

@keyframes dot-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(139, 107, 85, 0.4); }
  70%  { box-shadow: 0 0 0 20px rgba(139, 107, 85, 0); }
  100% { box-shadow: 0 0 0 0 rgba(139, 107, 85, 0); }
}

/* コンテンツ */
.timeline__heading {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: 600;
  margin-bottom: 0.3em;
}

.timeline__subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
}

.timeline__story {
  font-size: var(--text-base);
  line-height: var(--leading-loose);
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
}

/* 写真（不規則配置） */
.timeline__photos {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.timeline__photo {
  background: var(--color-bg-alt);
  overflow: hidden;
  position: relative;
}

.timeline__photo--1 {
  width: 240px;
  height: 320px;
  transform: rotate(-2deg);
}

.timeline__photo--2 {
  width: 200px;
  height: 260px;
  transform: rotate(1.5deg);
  margin-top: 40px;
}

.timeline__photo--3 {
  width: 280px;
  height: 200px;
  transform: rotate(1deg);
}

.timeline__photo--4 {
  width: 260px;
  height: 300px;
  transform: rotate(-1.5deg);
}

.timeline__photo--5 {
  width: 240px;
  height: 280px;
  transform: rotate(2deg);
}

.timeline__photo--6 {
  width: 260px;
  height: 340px;
  transform: rotate(-1deg);
}

.timeline__photo--7 {
  width: 200px;
  height: 280px;
  transform: rotate(2.5deg);
  margin-top: 30px;
}

.timeline__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 写真プレースホルダー（写真未設定時） */
.timeline__photo::after {
  content: attr(data-placeholder);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: var(--text-xs);
  color: var(--color-text-light);
  background: var(--color-bg-alt);
  border: 1px dashed var(--color-border);
}

/* 写真が設定されたらプレースホルダーを非表示 */
.timeline__photo:has(img)::after {
  display: none;
}

/* リンク */
.timeline__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-accent);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--color-border);
  transition: border-color var(--duration-fast) var(--ease-out);
}

.timeline__link:hover {
  opacity: 1;
  border-bottom-color: var(--color-text);
}

.timeline__link-arrow {
  transition: transform var(--duration-fast) var(--ease-out);
}

.timeline__link:hover .timeline__link-arrow {
  transform: translateX(4px);
}


/* ── タイムライン レスポンシブ ──────────────── */
@media (max-width: 768px) {
  .timeline__svg {
    left: 24px;
  }

  .timeline__node {
    display: block;
    padding-left: 56px;
    padding-right: var(--space-sm);
  }

  .timeline__dot {
    left: 24px;
  }

  .timeline__era {
    padding-left: 56px;
    text-align: left;
  }

  .timeline__photos {
    flex-wrap: wrap;
  }

  .timeline__photo {
    width: 100% !important;
    height: 200px !important;
    transform: rotate(0) !important;
    margin-top: 0 !important;
  }
}


/* ── セクション共通 ────────────────────────── */
.section-header {
  text-align: center;
  margin-bottom: var(--space-lg);
}

.section-header__title {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: 600;
  margin-top: 0.3em;
  margin-bottom: 0.3em;
}

.section-header__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.container--full {
  max-width: 100%;
  padding: 0 var(--space-md);
}


/* ── 新着記事（横スクロール） ────────────────── */
.recent-posts__scroll-wrapper {
  position: relative;
  margin: 0 calc(-1 * var(--space-md));
  padding: 0 var(--space-md);
  overflow: hidden;
}

.recent-posts__scroll {
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--space-sm);
  scrollbar-width: none;
}

.recent-posts__scroll::-webkit-scrollbar {
  display: none;
}

.post-card--scroll {
  flex: 0 0 280px;
  scroll-snap-align: start;
  min-width: 280px;
}

.post-card--scroll .post-card__thumbnail {
  height: 180px;
}

.post-card--scroll .post-card__title {
  font-size: var(--text-sm);
  line-height: var(--leading-tight);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (min-width: 769px) {
  .post-card--scroll {
    flex: 0 0 calc((100% - var(--space-md) * 4) / 5);
    min-width: 220px;
  }
}

.recent-posts__more {
  text-align: center;
  margin-top: var(--space-lg);
}

.more-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-accent);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  padding: 0.6em 1.6em;
  border: 1px solid var(--color-border);
  transition:
    background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

.more-link:hover {
  opacity: 1;
  background: var(--color-text);
  color: var(--color-bg);
  border-color: var(--color-text);
}

.more-link__arrow {
  transition: transform var(--duration-fast) var(--ease-out);
}

.more-link:hover .more-link__arrow {
  transform: translateX(4px);
}


/* ── note埋め込み（横スクロール） ──────────────── */
.note-embed__scroll-wrapper {
  position: relative;
  margin: 0 calc(-1 * var(--space-md));
  padding: 0 var(--space-md);
  overflow: hidden;
}

.note-embed__scroll {
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--space-sm);
  scrollbar-width: none;
}

.note-embed__scroll::-webkit-scrollbar {
  display: none;
}

.note-card-scroll {
  flex: 0 0 280px;
  scroll-snap-align: start;
  min-width: 280px;
  padding: var(--space-md);
  background: var(--color-bg-alt);
  border-left: 3px solid var(--color-border);
  display: flex;
  flex-direction: column;
  transition:
    border-color var(--duration-fast) var(--ease-out),
    transform var(--duration-mid) var(--ease-out);
}

.note-card-scroll:hover {
  opacity: 1;
  border-left-color: var(--color-text);
  transform: translateY(-3px);
}

.note-card-scroll__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.6em;
}

.note-card-scroll__date {
  font-family: var(--font-accent);
  font-size: var(--text-xs);
  color: var(--color-text-light);
}

.note-card-scroll__badge {
  font-family: var(--font-accent);
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
  color: var(--color-accent);
  text-transform: uppercase;
}

.note-card-scroll__title {
  font-family: var(--font-serif);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: var(--leading-tight);
  margin-bottom: 0.8em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.note-card-scroll__excerpt {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (min-width: 769px) {
  .note-card-scroll {
    flex: 0 0 calc((100% - var(--space-md) * 4) / 5);
    min-width: 220px;
  }
}

.note-embed__more {
  text-align: center;
  margin-top: var(--space-lg);
}

.note-embed__loading {
  width: 100%;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-light);
  font-family: var(--font-serif);
  padding: var(--space-lg) 0;
}


/* ── Podcast ──────────────────────────────── */
.podcast__embed {
  max-width: 600px;
  margin: 0 auto;
}


/* ── SNSリンクバー ────────────────────────── */
.sns-bar {
  border-top: 1px solid var(--color-border);
}

.sns-bar__inner {
  text-align: center;
}

.sns-bar__label {
  font-size: var(--text-sm);
  color: var(--color-text-light);
  letter-spacing: 0.1em;
  margin-bottom: var(--space-md);
}

.sns-bar__links {
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.sns-bar__link {
  font-family: var(--font-accent);
  font-size: var(--text-md);
  letter-spacing: 0.04em;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-fast) var(--ease-out);
}

.sns-bar__link:hover {
  opacity: 1;
  border-bottom-color: var(--color-text);
}

/* サムネイルプレースホルダー */
.post-card__thumbnail-placeholder {
  width: 100%;
  height: 100%;
  background: var(--color-bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
}