/*
 * PRESENS v1.5.0 ─ Vision スクロールテリング（完成形）
 * 「根を歩くアニメーションの上に理念全文を載せ、スクロールで順に読ませる」（殿2026-06-14）
 * 諸葛（②③担当）。色は theme.json preset 変数を参照（墨×セピア×木目）。front-page 専用。
 *
 * 構造：
 *   .presens-vision        … 縦長(約560vh)。スクロール量＝進捗。
 *   .presens-vision__stage … sticky で根＋歩く人(2名)をビューポートに固定。進捗で根が伸び人が下る。
 *   .presens-vision__story … 理念6ブロックを stage の上に重ねて流す。各ブロックはフェードイン。
 *
 * ★文言（理念全文）は shares/2026-06-14-vision-full-text.md の通り一字一句不変・UIのみ。
 *   --vision-progress … JSがイージング済み進捗 0→1（reduced-motion時 1）
 */

/* スクロールスナップ：理念を1画面ごとに区切って読ませる（殿2026-06-15）。
   front-page専用CSSゆえ front-page のページスクロールにのみ効く。proximity＝近づくと吸着（強制スライドにはせぬ）。 */
html:has(.presens-vision) {
  scroll-snap-type: y proximity;
}

.presens-vision {
  position: relative;
  min-height: 560vh;
  background: var(--wp--preset--color--surface-alt, #F6EEE2);
  --vision-progress: 0;
}

/* ───────── 背景ステージ（根＋歩く人をビューポートに固定） ───────── */
.presens-vision__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.presens-vision__svg {
  width: min(900px, 120vw);
  height: auto;
  max-height: 88vh;
  filter: url(#presens-pencil);
  opacity: 0.96;
}

/* 根の時間差描出：種別ごとの窓(--rs〜--re)内のローカル進捗で stroke-dashoffset を詰める */
.presens-vision__root {
  fill: none;
  stroke: var(--wp--preset--color--text-primary, #26211C);   /* 墨 */
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - clamp(0, calc((var(--vision-progress) - var(--rs, 0)) / (var(--re, 1) - var(--rs, 0))), 1));
}
.presens-vision__root--main   { stroke-width: 0.5;  opacity: 0.82; --rs: 0;    --re: 0.6; }
.presens-vision__root--second { stroke-width: 0.46; opacity: 0.7;  --rs: 0.1;  --re: 0.7; }
.presens-vision__root--branch { stroke-width: 0.3;  opacity: 0.5;  --rs: 0.3;  --re: 0.85; }
.presens-vision__root--hair   { stroke-width: 0.16; opacity: 0.32; --rs: 0.6;  --re: 0.96; }

.presens-vision__ground {
  fill: none;
  stroke: var(--wp--preset--color--accent, #8A5A2C);
  stroke-width: 0.26;
  opacity: 0.4;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - clamp(0, calc(var(--vision-progress) / 0.12), 1));
}

/* 芽（根が育った後にふわりと灯る彩り。個別 --bs で時間差） */
.presens-vision__bud {
  fill: var(--wp--preset--color--highlight, #9E4A33);
  transform-box: fill-box;
  transform-origin: center bottom;
  --bloom: clamp(0, calc((var(--vision-progress) - var(--bs, 0.78)) / 0.16), 1);
  opacity: var(--bloom);
  transform: scale(calc(0.4 + var(--bloom) * 0.6));
}

/* 歩く人（2名・SVG内要素。JSが各々の根の上に配置＋接線で微傾。ボルドー赤） */
.presens-vision__figure { fill: var(--wp--preset--color--primary, #6E2C2A); }
.presens-vision__figure .bob { transform-box: fill-box; transform-origin: center bottom; }
@media (prefers-reduced-motion: no-preference) {
  .presens-vision__figure .bob { animation: presensWalkBob 1s ease-in-out infinite; }
  .presens-vision__figure--b .bob { animation-duration: 1.15s; animation-delay: -0.3s; }
}
@keyframes presensWalkBob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -0.7px; }
}

/* ───────── 理念ストーリー（根の上に流し、順にフェードイン） ───────── */
.presens-vision__story {
  position: relative;
  z-index: 2;
  margin-top: -100vh;          /* stage に重ねる */
  pointer-events: none;
}
.presens-vision__block {
  min-height: 100vh;             /* 1画面＝1節 */
  scroll-snap-align: center;     /* 各節が画面に吸着して区切られる */
  scroll-snap-stop: always;      /* 一気スクロールでも1節ずつ止める */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6vh 1.5rem;
}
.presens-vision__block-inner {
  max-width: 680px;
  text-align: center;
  /* 増えた根の上でも文字が確実に読めるよう、横長楕円の光暈でしっかり持ち上げる */
  background: radial-gradient(ellipse 135% 104% at 50% 50%,
    color-mix(in srgb, var(--wp--preset--color--surface-alt, #F6EEE2) 90%, transparent) 0%,
    color-mix(in srgb, var(--wp--preset--color--surface-alt, #F6EEE2) 74%, transparent) 46%,
    color-mix(in srgb, var(--wp--preset--color--surface-alt, #F6EEE2) 30%, transparent) 70%,
    transparent 84%);
  padding: clamp(1.4rem, 4vw, 2.8rem) clamp(1.6rem, 6vw, 3.4rem);
}

/* 理念テキストの型（文言は一字一句不変） */
.presens-vision__eyebrow {
  display: inline-block;
  font-family: var(--wp--preset--font-family--en-heading, 'Cormorant Garamond', serif);
  font-size: 0.86rem;
  letter-spacing: 0.4em;            /* 黒の小キャップ＝高級感 */
  text-transform: uppercase;
  color: var(--wp--preset--color--text-primary, #26211C);   /* 墨（黒） */
  margin-bottom: 1.3rem;
  position: relative;
  padding-bottom: 1rem;
}
/* 見出し下の細い金線（高級感の区切り） */
.presens-vision__eyebrow::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 30px;
  height: 1px;
  background: var(--wp--preset--color--accent, #8A5A2C);
  opacity: 0.7;
}
.presens-vision__sub {
  display: block;
  font-family: var(--wp--preset--font-family--en-heading, 'Cormorant Garamond', serif);
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--wp--preset--color--text-secondary, #857A6C);
  margin: 1.1rem 0 0.4rem;
}
.presens-vision__big {
  font-family: var(--wp--preset--font-family--system, 'Noto Serif JP', serif);
  font-weight: 600;
  font-size: clamp(1.4rem, 3.7vw, 2.15rem);
  line-height: 1.55;
  color: var(--wp--preset--color--text-primary, #26211C);   /* 墨（黒）主体＝高級感 */
  letter-spacing: 0.05em;
  margin: 0.2rem 0;
  text-shadow: 0 1px 8px var(--wp--preset--color--surface-alt, #F6EEE2);
}
.presens-vision__line {
  font-family: var(--wp--preset--font-family--system, 'Noto Serif JP', serif);
  font-size: clamp(0.94rem, 2.3vw, 1.12rem);
  line-height: 1.85;
  color: var(--wp--preset--color--text-primary, #26211C);
  letter-spacing: 0.03em;
  margin: 0.3rem 0;
  text-shadow: 0 1px 6px var(--wp--preset--color--surface-alt, #F6EEE2);
}
.presens-vision__line--soft { color: var(--wp--preset--color--text-secondary, #857A6C); }
/* アクセント＝唯一の差し色（ボルドー赤）。黒主体に一点だけ華 */
.presens-vision__accent {
  color: var(--wp--preset--color--primary, #6E2C2A);
  font-weight: 700;
}
.presens-vision__arrow {
  display: block;
  color: var(--wp--preset--color--accent, #8A5A2C);
  opacity: 0.6;
  font-size: 1.2rem;
  margin: 0.6rem 0;
}
.presens-vision__list {
  list-style: none;
  padding: 0;
  margin: 1.5rem auto 0;
  max-width: 420px;
  text-align: left;
}
.presens-vision__list li {
  font-family: var(--wp--preset--font-family--system, 'Noto Serif JP', serif);
  font-size: clamp(0.96rem, 2.5vw, 1.16rem);
  line-height: 1.7;
  color: var(--wp--preset--color--text-primary, #26211C);
  padding: 0.7rem 0.2rem;
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--border, #DCCFBC) 65%, transparent);
}
.presens-vision__list li:last-child { border-bottom: none; }
.presens-vision__credo {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1.6rem;
  justify-content: center;
  margin-top: 1.4rem;
  font-family: var(--wp--preset--font-family--en-heading, 'Cormorant Garamond', serif);
  font-size: clamp(1.05rem, 3vw, 1.5rem);
  letter-spacing: 0.06em;
  color: var(--wp--preset--color--text-primary, #26211C);
}

/* フェードイン（animations.js の fade-up が visible 化。なくとも下記で初期可視は保つ） */
.presens-vision__block .fade-up { transition: opacity 0.9s ease, transform 0.9s ease; }

/* スクロール誘導 cue（最初のブロックに灯す） */
.presens-vision__cue {
  position: absolute;
  left: 50%;
  bottom: 6vh;
  transform: translateX(-50%);
  z-index: 3;
  width: 1px;
  height: clamp(30px, 6vh, 50px);
  background: linear-gradient(var(--wp--preset--color--accent, #8A5A2C), transparent);
  opacity: clamp(0, calc((0.04 - var(--vision-progress)) * 26), 0.7);
}
.presens-vision__cue::after {
  content: "Scroll";
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--wp--preset--font-family--en-heading, 'Cormorant Garamond', serif);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--wp--preset--color--text-secondary, #857A6C);
  white-space: nowrap;
}
@media (prefers-reduced-motion: no-preference) {
  .presens-vision__cue { animation: presensCueBreath 2.6s ease-in-out infinite; }
}
@keyframes presensCueBreath {
  0%, 100% { transform: translateX(-50%) scaleY(0.82); opacity: 0.45; }
  50%      { transform: translateX(-50%) scaleY(1);    opacity: 0.7; }
}

/* reduced-motion：sticky を解き、根を完成状態に。理念は普通に縦読み */
@media (prefers-reduced-motion: reduce) {
  .presens-vision { --vision-progress: 1 !important; }
  .presens-vision__stage { position: relative; height: 60vh; }
  .presens-vision__story { margin-top: 0; }
  .presens-vision__cue { display: none; }
  .presens-vision__figure .bob { animation: none; }
}

@media (max-width: 600px) {
  .presens-vision__block-inner { border-radius: 32px; }
  .presens-vision__big { font-size: clamp(1.4rem, 6vw, 1.9rem); }
}