/* トップ: ひとつの舞台で続く映画（views/home/_film.ejs）と、はじまりの演出。
   値（--ks・--fo など）は public/js/v2/pages/home-film.js と home-intro.js がスクロール・時間に合わせて流す */
.home { --lbh: 9svh; }
@media (max-width: 899px) { .home { --lbh: 7svh; } }

.film { position: relative; height: 1350vh; height: 1350svh; background: var(--night); }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; color: var(--on-dark); perspective: 1100px; pointer-events: none; }
/* 舞台の上で押せるのは、はじめの「ショップを見る」だけ（重なった透明な場面が押す邪魔をしない） */
.op-lead .lnk { pointer-events: auto; }
.lyr { position: absolute; inset: 0; }
.lyr--paper { background: var(--paper); opacity: var(--pb, 0); }
.grain { position: absolute; inset: 0; z-index: 10; pointer-events: none; background: url(/images/story/grain.png); opacity: .075; mix-blend-mode: overlay; }

/* 一景: 畑の字 */
.kw { display: grid; place-items: center; pointer-events: none; opacity: var(--ko, 1); }
.kw span { grid-area: 1/1; font-family: var(--f-min); font-weight: 700; font-size: min(84svh, 94vw); line-height: 1; background: url(/images/story/field.jpg) 50% 60%/cover; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; transform: scale(var(--ks, 1)); will-change: transform; }
.op-tt { position: absolute; top: calc(var(--hd) + 9svh); right: calc(var(--gr) + 8px); writing-mode: vertical-rl; font-size: clamp(30px, 4.2vw, 58px); line-height: 1.95; letter-spacing: .26em; font-weight: 600; opacity: calc(var(--to, 1) * var(--ti, 1)); clip-path: inset(-20% -60% calc((1 - var(--ti, 1)) * 100%) -60%); filter: blur(calc((1 - var(--ti, 1)) * 6px)); transform: translateY(calc((1 - var(--to, 1)) * -48px)); text-shadow: 0 0 2px rgba(0, 0, 0, .5), 0 2px 24px rgba(0, 0, 0, .6); z-index: 3; isolation: isolate; }
/* 題の後ろに薄い影を敷き、畑の字が大きくなって重なっても読めるようにする */
.op-tt::before { content: ""; position: absolute; inset: -14% -45%; z-index: -1; background: radial-gradient(closest-side, rgba(13, 16, 14, .72), rgba(13, 16, 14, .38) 55%, transparent); pointer-events: none; }
.op-lead { position: absolute; left: var(--g); bottom: 40px; font-size: 13px; line-height: 2.2; letter-spacing: .16em; color: var(--on-dark-2); opacity: calc(var(--to, 1) * var(--ti, 1)); z-index: 3; }
.op-lead .lnk { margin-top: 10px; color: var(--on-dark); }
.op-cue { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 10px; letter-spacing: .3em; color: var(--on-dark-2); opacity: calc(var(--to, 1) * var(--ti, 1)); z-index: 3; }
.op-cue i { display: block; width: 1px; height: 56px; background: linear-gradient(to bottom, transparent, var(--on-dark-2)); background-size: 1px 200%; animation: cue 2.4s var(--ease) infinite; }
@keyframes cue { 0% { background-position: 0 -100%; } 100% { background-position: 0 100%; } }
.op-say { position: absolute; z-index: 3; left: var(--g); bottom: calc(var(--lbh) + 52px); font-family: var(--f-min); font-weight: 600; font-size: clamp(26px, 3.4vw, 48px); letter-spacing: .12em; line-height: 1.7; opacity: var(--so, 0); text-shadow: 0 2px 24px rgba(0, 0, 0, .4); }
.op-say small { display: block; font-family: var(--f-sans); font-size: 13px; letter-spacing: .14em; color: var(--on-dark-2); margin-top: 14px; font-weight: 400; }

/* 引き継がれる額縁（全画面 ⇄ 輪 ⇄ 輪の上の一枚） */
.fframe { position: absolute; z-index: 2; left: 50%; top: 50%; width: var(--fw, 100vw); height: var(--fh, 100svh); border-radius: var(--fr, 0px); transform: translate(calc(-50% + var(--fx, 0px)), calc(-50% + var(--fy, 0px))); overflow: hidden; opacity: var(--fo, 0); will-change: width, height, transform; }
.fframe img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; filter: saturate(.8) contrast(1.06) brightness(.88); opacity: 0; }
.fframe img.on0 { opacity: 1; }
.fframe::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 45%, transparent 45%, rgba(5, 7, 6, .55) 100%); opacity: var(--vig, 1); }
.ringline { position: absolute; z-index: 1; left: 50%; top: 50%; width: var(--rl, 0px); height: var(--rl, 0px); transform: translate(-50%, -50%); border-radius: 50%; border: 1px solid rgba(23, 24, 27, .18); opacity: var(--rlo, 0); }

/* 二景: 拾う */
.gather { z-index: 3; pointer-events: none; opacity: var(--go, 0); }
.frag { position: absolute; left: 50%; top: 50%; border-radius: 50%; background-repeat: no-repeat; will-change: transform, opacity; box-shadow: 0 18px 40px -18px rgba(23, 24, 27, .5); filter: saturate(.85) contrast(1.05); }
.g-h { position: absolute; left: var(--g); top: calc(var(--hd) + 12svh); color: var(--ink); font-size: clamp(30px, 4.4vw, 64px); letter-spacing: .12em; line-height: 1.5; }
.g-p { position: absolute; left: var(--g); bottom: 48px; max-width: min(27em, calc(100vw - 40px)); font-size: 14px; line-height: 2.15; color: var(--ink-2); opacity: var(--gs, 0); transform: translateY(calc((1 - var(--gs, 0)) * 16px)); }

/* 三景: まちへ（横に旅する） */
.jr { z-index: 4; opacity: var(--jo, 0); }
.track { position: absolute; top: 0; left: 0; bottom: 0; display: flex; width: 300vw; transform: translate3d(calc(var(--jx, 0px) * -1), 0, 0); will-change: transform; }
.pan { position: relative; flex: 0 0 100vw; height: 100%; overflow: hidden; }
.pan img { position: absolute; top: 0; left: -8%; width: 116%; max-width: none; height: 100%; object-fit: cover; transform: translate3d(var(--px, 0px), 0, 0); filter: saturate(.78) contrast(1.07) brightness(.8); }
.pan::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(6, 8, 7, .5), transparent 28%, transparent 50%, rgba(6, 8, 7, .82)); }
.pk { position: absolute; z-index: 2; right: 8vw; top: 50%; font-family: var(--f-min); font-weight: 500; font-size: clamp(150px, 40svh, 480px); line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(236, 236, 230, .55); transform: translate3d(var(--kx, 0px), -50%, 0); }
.cap { position: absolute; z-index: 2; left: var(--g); bottom: calc(var(--lbh) + 96px); max-width: min(28em, 80vw); opacity: var(--co, 1); transform: translate3d(calc((1 - var(--co, 1)) * 40px), 0, 0); }
.cap .tm { font-size: 12px; letter-spacing: .34em; color: var(--dew); }
.cap h3 { font-size: clamp(24px, 2.6vw, 36px); letter-spacing: .12em; margin: 10px 0 12px; }
.cap p { font-size: 14px; line-height: 2.1; }
.j-h { position: absolute; z-index: 5; left: var(--g); top: calc(var(--lbh) + 72px); font-size: clamp(28px, 3.6vw, 54px); letter-spacing: .12em; line-height: 1.5; opacity: var(--jh, 1); }
.road { position: absolute; z-index: 5; left: var(--g); right: var(--gr); bottom: calc(var(--lbh) + 40px); height: 1px; background: rgba(236, 236, 230, .24); }
.road i { position: absolute; inset: 0; background: var(--on-dark); transform-origin: left; transform: scaleX(var(--rp, 0)); }
.road b { position: absolute; top: -4px; left: calc(var(--rp, 0) * 100%); width: 9px; height: 9px; margin-left: -4px; border-radius: 50%; background: var(--on-dark); box-shadow: 0 0 0 6px rgba(236, 236, 230, .14); }
.road span { position: absolute; top: 14px; font-size: 11px; letter-spacing: .2em; color: var(--on-dark-2); transform: translateX(-50%); white-space: nowrap; transition: color .4s; }
.road span.on { color: var(--on-dark); }
.road span:first-of-type { transform: none; }
.road span:last-of-type { transform: translateX(-100%); }

/* 四景: めぐる（輪が回る） */
.ring { z-index: 6; opacity: var(--ro, 0); pointer-events: none; }
.ring svg { position: absolute; left: 50%; top: 50%; overflow: visible; max-width: none; transform: translate(-50%, -50%); }
.ring ellipse { fill: none; stroke: rgba(236, 236, 230, .35); stroke-width: 1; }
.ring .flow { fill: var(--dew); }
.rcard { position: absolute; left: 0; top: 0; overflow: hidden; will-change: transform; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); }
.rcard img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.8) contrast(1.06); }
.rcard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(6, 8, 7, .75), transparent 55%); }
.rcard span { position: absolute; z-index: 1; left: 12px; bottom: 10px; font-family: var(--f-min); font-size: 15px; letter-spacing: .14em; color: var(--on-dark); }
.outro { position: absolute; z-index: 7; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; color: var(--ink); font-size: clamp(26px, 3.4vw, 48px); letter-spacing: .14em; line-height: 1.6; }
.r-tx { position: absolute; z-index: 7; left: 50%; top: calc(var(--hd) + 6svh); transform: translateX(-50%); width: min(92vw, 900px); text-align: center; }
.r-tx h2 { font-size: clamp(28px, 3.8vw, 56px); letter-spacing: .12em; line-height: 1.5; }
.r-tx p { margin-top: 14px; font-size: 14px; line-height: 2.1; color: var(--on-dark-2); }
.r-1, .r-2 { position: absolute; left: 0; right: 0; top: 0; }
.r-1 p { opacity: var(--r1p, 0); }
.r-2 p { opacity: var(--r2p, 0); }

/* 章の目印（どこまで来たか） */
.chap { position: absolute; z-index: 9; left: var(--g); top: calc(var(--hd) + 18px); display: flex; gap: 18px; font-size: 11px; letter-spacing: .22em; opacity: var(--ci, 0); color: var(--on-dark); transition: color .5s var(--ease); }
.chap.ink { color: var(--ink); }
.chap li { opacity: .4; transition: opacity .5s var(--ease); }
.chap li.on { opacity: 1; }
.chap li::before { content: ""; display: block; height: 1px; width: 30px; margin-bottom: 8px; background: linear-gradient(90deg, currentColor calc(var(--f, 0) * 100%), color-mix(in srgb, currentColor 30%, transparent) calc(var(--f, 0) * 100%)); }

/* 映画の帯（上下の黒） */
.lbar { position: absolute; left: 0; right: 0; z-index: 8; background: var(--night); height: calc(var(--lbh) * var(--lb, 0)); pointer-events: none; }
.lbar--t { top: 0; }
.lbar--b { bottom: 0; }

@media (max-width: 899px) {
  .kw { place-items: end center; padding-bottom: calc(196px + env(safe-area-inset-bottom, 0px)); }
  .kw span { font-size: min(36svh, 78vw); }
  .op-tt { top: calc(var(--hd) + 4svh); font-size: min(26px, 7vw, 3.5svh); letter-spacing: .2em; }
  .op-cue { display: none; }
  .op-lead { bottom: 28px; }
  .g-h { top: calc(var(--hd) + 9svh); }
  .pk { font-size: min(30svh, 46vw); top: 36%; right: 6vw; }
  .cap { bottom: calc(var(--lbh) + 84px); }
  .j-h { top: calc(var(--lbh) + 56px); }
  .r-tx { top: calc(var(--hd) + 6svh); }
  .rcard span { font-size: 12px; left: 8px; bottom: 6px; letter-spacing: .08em; white-space: nowrap; }
  .chap { gap: 12px; }
  .chap li::before { width: 24px; }
}

/* ---------- はじまりの演出（その日はじめて開いたときだけ）。夜明け前の畑 → 畑の字の輪郭が書き順のように描かれる
   → 日が昇るように、字の下から畑の写真で満ちる（時刻 05:12 → 05:40）→ 題・ヘッダーが現れて、今のヒーローになる ---------- */
.kw .kw-o { background: none; color: transparent; -webkit-text-fill-color: transparent; -webkit-text-stroke: 1.2px rgba(236, 236, 230, .92); opacity: var(--oo, 0); filter: drop-shadow(0 0 8px rgba(236, 236, 230, .35)); pointer-events: none;
  -webkit-mask-image: linear-gradient(var(--night) 78%, transparent), linear-gradient(var(--night) 78%, transparent); mask-image: linear-gradient(var(--night) 78%, transparent), linear-gradient(var(--night) 78%, transparent);
  -webkit-mask-size: 47% calc(var(--w1, 1) * 100%), 60% calc(var(--w2, 1) * 100%); mask-size: 47% calc(var(--w1, 1) * 100%), 60% calc(var(--w2, 1) * 100%);
  -webkit-mask-position: 0 0, 100% 0; mask-position: 0 0, 100% 0; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
html.is-intro { --rise: 0; --ti: 0; --hi: 0; --oo: 1; --w1: 0; --w2: 0; --ic: 0; }
html.is-intro .hd { opacity: var(--hi, 0); transition: none; }
html.is-intro .kw span:not(.kw-o) { -webkit-mask-image: linear-gradient(to top, var(--night) calc(var(--rise) * 120% - 12%), transparent calc(var(--rise) * 120%)); mask-image: linear-gradient(to top, var(--night) calc(var(--rise) * 120% - 12%), transparent calc(var(--rise) * 120%)); filter: brightness(calc(.42 + var(--rise) * .58)) saturate(calc(.45 + var(--rise) * .55)) sepia(calc((1 - var(--rise)) * .35)); }
html.is-intro .kw::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 55% at 50% 100%, rgba(236, 176, 104, .28), transparent 70%); opacity: calc(var(--rise) * (1 - var(--rise)) * 3.2); pointer-events: none; }
.op-intro { position: fixed; inset: 0; z-index: 91; pointer-events: none; color: var(--on-dark); }
.op-intro .ic { position: absolute; left: var(--g); bottom: calc(30px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: baseline; gap: 18px; font-size: 11px; letter-spacing: .32em; color: var(--on-dark-2); opacity: var(--ic, 0); }
.op-intro .ic b { font-family: var(--f-min); font-weight: 500; font-size: 16px; letter-spacing: .14em; color: var(--on-dark); font-variant-numeric: tabular-nums; }
.op-intro .ic i { display: block; width: 28px; height: 1px; background: currentColor; opacity: .6; }
.op-intro .iskip { position: absolute; right: var(--gr); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); pointer-events: auto; border: 0; background: none; color: var(--on-dark-2); font-size: 11px; letter-spacing: .32em; padding: 14px 4px; cursor: pointer; opacity: calc(var(--ic, 0) * .9); transition: color .3s; }
.op-intro .iskip:hover { color: var(--on-dark); }