/* 想いの物語の舞台: 壱 はじまり（育てる・届ける・味わう → 畑から店への道 → 光を放つ野菜 → 寄りかかり合う三枚）
   → 輪が閉じる → 結（光の種が畑に落ちる）。弐 これから は about-map.css。
   舞台はどれも「高さのある箱 + 中で貼りつく画面」。進み具合を about-story.js が CSS 変数に流す */

/* 舞台の共通 */
.st-stage { position: relative; }   /* 舞台（状態の印の .st とは別） */
.ab-story svg { max-width: none; }
.st-in { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.sc { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: calc(var(--hd) + env(safe-area-inset-top, 0px) + 20px) var(--gr) 32px var(--g); opacity: var(--o, 0); visibility: var(--vis, hidden); text-align: center; }
/* 結の言葉: 読み進めた分だけ字が濃くなる（--r を JS が流す。字は about.js が .k に分ける） */
.ink .k { opacity: clamp(.13, calc((var(--r, 1) * (var(--n, 10) + 26) - var(--i, 0)) / 26), 1); }

/* 壱 はじまり */
.st-begin { height: 820svh; }
.s1-dk { position: absolute; inset: 0; background: var(--night); opacity: var(--dk, 0); }
.s1t h2 { margin-top: clamp(28px, 5svh, 56px); font-size: clamp(24px, min(2.6vw, 4.4svh), 40px); line-height: 2; letter-spacing: .14em; writing-mode: vertical-rl; }
.s1t h2 em { font-style: normal; color: var(--moss); }
.tri-w { position: relative; --tph: min(44svh, 440px); }
.tri { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc((1 - var(--m, 0)) * clamp(10px, 1.6vw, 24px)); width: min(70vw, 1040px); transform: scale(calc(1 + var(--m, 0) * .04)); }
.trp { margin: 0; min-width: 0; opacity: var(--a, 0); transform: translateY(calc((1 - var(--a, 0)) * 60px)); }
.trp-ph { position: relative; height: var(--tph); overflow: hidden; background: var(--mist); clip-path: inset(calc((1 - var(--a, 0)) * 100%) 0 0 0); }
.trp-ph img, .tri-all img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; filter: saturate(.85) contrast(1.04); }
.trp-ph img { transform: scale(calc(1.25 - var(--a, 0) * .15)); }
.trp figcaption { margin-top: 18px; font-family: var(--f-min); font-weight: 500; font-size: clamp(15px, 1.5vw, 22px); letter-spacing: .1em; opacity: calc(1 - var(--m, 0)); }
.tri-all { position: absolute; left: 0; right: 0; top: 0; height: var(--tph); overflow: hidden; opacity: var(--m, 0); }
.tri-all img { transform: scale(calc(1.12 - var(--m, 0) * .08)); }
.s1a-t { position: absolute; left: -10vw; right: -10vw; top: calc(var(--tph) * 1.04 + 22px); font-family: var(--f-min); font-weight: 500; font-size: clamp(17px, 1.9vw, 28px); letter-spacing: .1em; line-height: 1.9; opacity: var(--t, 0); transform: translateY(calc((1 - var(--t, 0)) * 20px)); }
.s1a-t strong { font-weight: 700; background: linear-gradient(transparent 62%, color-mix(in srgb, var(--dew) 90%, transparent) 62%) no-repeat 0 0 / calc(var(--hl, 0) * 100%) 100%; }

/* 畑から店への道（線と点は about-story.js が描く） */
.s2-t { font-family: var(--f-min); font-weight: 500; font-size: clamp(17px, 1.8vw, 27px); line-height: 2; letter-spacing: .08em; max-width: 30em; }
.s2-t span { opacity: var(--x, 0); transition: opacity .2s; }
.route { width: min(84vw, 1000px); height: auto; margin-top: clamp(20px, 4svh, 48px); overflow: visible; }
.route .bg { fill: none; stroke: var(--rule); stroke-width: 1.2; stroke-dasharray: 3 7; }
.route .ln { fill: none; stroke: var(--moss); stroke-width: 1.8; stroke-dasharray: 1; }
.route .ln.in { stroke-dashoffset: calc(1 - var(--d1, 0)); }
.route .ln.out { stroke: var(--nasu); stroke-dashoffset: calc(1 - var(--d2, 0)); }
.route .farm { fill: var(--dew); stroke: var(--moss); stroke-width: 1.4; opacity: var(--fa, 0); }
.route .shop { fill: var(--nasu); opacity: var(--sa, 0); }
.route .hub { fill: var(--paper); stroke: var(--ink); stroke-width: 1.4; opacity: var(--ha, 0); }
.route .pt { fill: var(--moss); }
.route .pt.o { fill: var(--nasu); }
.route text { font-family: var(--f-sans); font-size: 19px; letter-spacing: .12em; fill: var(--ink-2); }
.route .lbf { opacity: var(--fa, 0); }
.route .lbs { opacity: var(--sa, 0); }
.route .hubl { font-family: var(--f-min); font-size: 21px; fill: var(--ink); opacity: var(--ha, 0); }

/* 暗がりの野菜に光 */
.s3 { color: var(--on-dark); }
.orb { position: relative; width: min(44svh, 64vw); aspect-ratio: 1; flex: none; }
.orb-glow { position: absolute; inset: -35%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--glow) 62%, transparent), transparent 62%); opacity: var(--L, 0); transform: scale(calc(.7 + var(--L, 0) * .3)); pointer-events: none; }
.orb-a, .orb-b { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; }
.orb img { width: 100%; height: 100%; object-fit: cover; max-width: none; transform: scale(calc(1.15 - var(--L, 0) * .1)); }
.orb-a img { filter: grayscale(1) brightness(.34) contrast(1.1); }
.orb-b { -webkit-mask-image: radial-gradient(circle at 50% 56%, black calc(var(--L, 0) * 94% - 22%), transparent calc(var(--L, 0) * 94%)); mask-image: radial-gradient(circle at 50% 56%, black calc(var(--L, 0) * 94% - 22%), transparent calc(var(--L, 0) * 94%)); }
.orb-b img { filter: saturate(1.05) brightness(1.04); }
.orb-ring { position: absolute; inset: -8%; width: 116%; height: 116%; max-width: none; transform: rotate(-90deg); overflow: visible; }
.orb-ring circle { fill: none; stroke: var(--dew); stroke-width: .35; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--c, 0)); }
.s3-t { margin-top: clamp(30px, 5svh, 56px); font-family: var(--f-min); font-weight: 500; font-size: clamp(17px, 1.8vw, 27px); line-height: 1.9; letter-spacing: .1em; }
.s3-t span { opacity: var(--x, 0); }
.s3-c { margin-top: 12px; font-size: clamp(13px, 1.1vw, 16px); line-height: 2; letter-spacing: .1em; color: var(--on-dark-2); opacity: var(--x, 0); transform: translateY(calc((1 - var(--x, 0)) * 12px)); }

/* 支え合い: 三枚の写真が両側から寄ってきて、寄りかかり合う */
.lean { position: relative; --W: min(23svh, 17vw); width: calc(var(--W) * 4.2); height: calc(var(--W) * 1.5 + 40px); flex: none; }
.lc { position: absolute; left: 50%; bottom: 40px; width: var(--W); margin: 0 0 0 calc(var(--W) * -.5); transform-origin: 50% 100%; opacity: var(--vo, 0); transform: translateX(calc(var(--k) * var(--W) * (1.9 - var(--v, 0) * 1.18))) rotate(calc(var(--k) * var(--v, 0) * -9deg)); z-index: 2; }
.lc.mid { z-index: 1; transform: scale(calc(1 - var(--v, 0) * .1)); filter: brightness(calc(1 - var(--v, 0) * .2)); }
.lc-ph { aspect-ratio: 2 / 3; overflow: hidden; background: var(--mist); box-shadow: 0 34px 50px -30px color-mix(in srgb, var(--night) 60%, transparent); }
.lc-ph img { width: 100%; height: 100%; object-fit: cover; max-width: none; filter: saturate(.85) contrast(1.04); }
.lc figcaption { position: absolute; left: -20%; right: -20%; top: calc(100% + 14px); font-family: var(--f-min); font-weight: 600; font-size: clamp(13px, 1.2vw, 16px); letter-spacing: .26em; transform: rotate(calc(var(--k) * var(--v, 0) * 9deg)); }
.lean-glow { position: absolute; z-index: 0; left: 50%; bottom: calc(40px + var(--W) * 1.4); width: calc(var(--W) * 1.9); aspect-ratio: 1; translate: -50% 50%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--glow) 100%, transparent), transparent 64%); opacity: var(--g, 0); transform: scale(calc(.6 + var(--g, 0) * .4)); }
.lean-floor { position: absolute; z-index: 0; left: 50%; bottom: 30px; width: calc(var(--W) * 2.8); height: 20px; translate: -50% 0; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--night) 25%, transparent), transparent); opacity: var(--v, 0); }
.s4-a { margin-top: clamp(26px, 4svh, 46px); font-size: clamp(13px, 1.15vw, 16px); letter-spacing: .14em; color: var(--ink-2); opacity: var(--x, 0); }
.s4-b { margin-top: 12px; max-width: 32em; font-family: var(--f-min); font-weight: 500; font-size: clamp(16px, 1.6vw, 24px); line-height: 2; letter-spacing: .08em; }
.s4-b strong { display: block; margin-bottom: 12px; font-weight: 600; font-size: clamp(24px, 2.6vw, 40px); line-height: 1.6; letter-spacing: .14em; }
.s4-b .rest { opacity: var(--y, 0); }

/* 輪が閉じる */
.st-ring { height: 340svh; }
.s-ring { background: var(--night); color: var(--on-dark); }
.rg { position: absolute; left: 50%; top: 50%; width: calc(var(--RR, 300px) * 2); height: calc(var(--RR, 300px) * 2); max-width: none; translate: -50% -50%; transform: rotate(-90deg); overflow: visible; }
.rg circle { fill: none; stroke-width: .3; }
.rg .t { stroke: color-mix(in srgb, var(--on-dark) 10%, transparent); }
.rg .f { stroke: var(--dew); stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--s, 0)); filter: drop-shadow(0 0 calc(var(--done, 0) * 2px) color-mix(in srgb, var(--dew) 90%, transparent)); }
.rg-dot { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--dew); box-shadow: 0 0 18px 5px color-mix(in srgb, var(--dew) 55%, transparent); transform: translate(var(--dx, 0px), var(--dy, 0px)); opacity: var(--do, 0); }
.rg-w { position: absolute; left: 50%; top: 50%; margin: 0; padding: 4px 10px; white-space: nowrap; background: var(--night); font-family: var(--f-min); font-weight: 600; font-size: clamp(22px, 2.6vw, 40px); letter-spacing: .14em; transform: translate(calc(-50% + var(--x, 0px)), calc(-50% + var(--y, 0px))); opacity: var(--a, 0); }
.rg-sub { position: absolute; left: 0; right: 0; top: calc(50% + var(--subY, 70px)); margin: 0; padding: 0 var(--gr) 0 var(--g); text-align: center; font-size: clamp(14px, 1.2vw, 17px); line-height: 2.3; letter-spacing: .08em; color: var(--on-dark-2); opacity: var(--b, 0); transform: translateY(calc((1 - var(--b, 0)) * 16px)); }

/* 結（光の種が畑に落ち、そこから畑が明るくなる） */
.st-end { height: 300svh; }
.s-end { background: var(--night); color: var(--on-dark); }
.end-bg, .end-a, .end-b { position: absolute; inset: 0; }
.end-bg img { width: 100%; height: 100%; object-fit: cover; max-width: none; object-position: 50% 72%; transform: scale(calc(1.12 - var(--L, 0) * .06)); }
.end-a img { filter: grayscale(1) brightness(.2) contrast(1.1); }
.end-b { -webkit-mask-image: radial-gradient(ellipse 130% 95% at 50% 82%, black calc(var(--L, 0) * 100% - 30%), transparent calc(var(--L, 0) * 100%)); mask-image: radial-gradient(ellipse 130% 95% at 50% 82%, black calc(var(--L, 0) * 100% - 30%), transparent calc(var(--L, 0) * 100%)); }
.end-b img { filter: saturate(.95) sepia(.12) brightness(.8); }
.end-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--night) 94%, transparent), color-mix(in srgb, var(--night) 62%, transparent) 46%, color-mix(in srgb, var(--night) 5%, transparent) 80%); }
.end-in { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; padding: calc(var(--hd) + env(safe-area-inset-top, 0px) + 10svh) var(--gr) 0 var(--g); }
.end-t { font-family: var(--f-min); font-weight: 500; font-size: clamp(18px, 1.9vw, 28px); line-height: 2.25; letter-spacing: .08em; }
.end-t strong { font-weight: 600; color: var(--surface); }
.s-end .chno { position: absolute; z-index: 2; left: 0; right: 0; bottom: clamp(20px, 4svh, 40px); color: var(--on-dark-2); }
.s-end .chno b { color: var(--on-dark); }
.seed { position: absolute; z-index: 3; left: 50%; top: 0; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--seed); box-shadow: 0 0 12px 3px color-mix(in srgb, var(--seed) 70%, transparent), 0 0 44px 12px color-mix(in srgb, var(--seed) 22%, transparent); transform: translateY(var(--sy, 0px)); opacity: var(--so, 0); }
.seed::before { content: ""; position: absolute; left: 50%; bottom: 50%; width: 1px; height: var(--tl, 0px); translate: -50% 0; background: linear-gradient(transparent, color-mix(in srgb, var(--seed) 70%, transparent)); }
.end-rip { position: absolute; z-index: 1; left: 50%; top: 80%; width: 0; height: 0; }
.end-rip i { position: absolute; left: 0; top: 0; width: min(84vw, 980px); height: min(13vw, 130px); border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--seed) 85%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--seed) 25%, transparent), inset 0 0 18px color-mix(in srgb, var(--seed) 15%, transparent); translate: -50% -50%; transform: scale(var(--q, 0)); opacity: calc(1 - var(--q, 0)); }

@media (max-width: 899px) {
  .s1t h2 { writing-mode: horizontal-tb; font-size: 24px; line-height: 1.9; }
  .tri-w { --tph: 30svh; }
  .tri { width: 92vw; }
  .trp figcaption { font-size: 12px; letter-spacing: .02em; margin-top: 10px; line-height: 1.6; }
  .s1a-t { left: 0; right: 0; font-size: 17px; }
  .route { width: 94vw; }
  .route text, .route .hubl { font-size: 30px; }
  .orb { width: min(40svh, 70vw); }
  .s3-t { font-size: 17px; }
  .lean { --W: min(17svh, 25vw); }
  .s4-b strong { font-size: 22px; }
  .s4-b { font-size: 16px; }
  .end-in { padding-top: calc(var(--hd) + env(safe-area-inset-top, 0px) + 5svh); }
  .end-t { font-size: 17px; }
}