/* スクロールで写真が動く部品（3案共通）。--p は motion.js が 0〜1 で入れる。
   色はページ側の --bg / --text / --accent を使う。
   JS なし・動きを減らす設定では、ふつうに並んだ写真のページになる。 */

.pin { position: relative; }
.pin > .sticky { position: relative; height: 100svh; overflow: hidden; }
.mo .pin > .sticky { position: sticky; top: 0; }
.big { font-weight: 700; line-height: 1.2; letter-spacing: .02em; color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,.35); margin: 0; }

/* 文字の出かた：節に入ったら、少し遅れて下から */
.mo .rv { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform 1s cubic-bezier(.2,.8,.2,1); transition-delay: var(--d, 0s); }
.mo .in .rv { opacity: 1; transform: none; }

/* 1. 小さな窓が、画面いっぱいにひらく */
.mo .grow { height: 240svh; }
.grow img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mo .grow img {
  clip-path: inset(max(0%, calc((1 - var(--p, 0) * 1.6) * 24%)) max(0%, calc((1 - var(--p, 0) * 1.6) * 16%)) round max(0px, calc((1 - var(--p, 0) * 1.6) * 28px)));
  transform: scale(calc(1.3 - .3 * min(1, var(--p, 0) * 1.6)));
}
.grow .word { position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 14svh; font-size: clamp(48px, 14vw, 140px); }
.mo .grow .word { opacity: clamp(0, calc((var(--p, 0) - .5) * 5), 1); transform: translateY(calc(max(0, .72 - var(--p, 0)) * 160px)); }
.grow .sticky::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 50%, rgba(0,0,0,.45)); opacity: var(--p, 1); pointer-events: none; }

/* 2. 縦にスクロールすると、写真が横に流れる */
.mo .strip { height: 330svh; }
.strip .sticky { display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.strip .label { padding: 0 20px; font-size: clamp(34px, 9vw, 72px); font-weight: 700; margin: 0; line-height: 1.2; }
.strip .row { display: flex; gap: 14px; padding: 0 20px; width: max-content; }
.mo .strip .row { transform: translateX(calc(var(--p, 0) * var(--ov, 0px) * -1)); will-change: transform; }
.mo-still .strip .row, html:not(.mo):not(.mo-still) .strip .row { width: auto; overflow-x: auto; }
.strip figure { margin: 0; width: min(66vw, 380px); flex: none; }
.strip figure:nth-child(even) { margin-top: 56px; }
.strip .ph { aspect-ratio: 3 / 4; overflow: hidden; border-radius: 6px; background: rgba(127,127,127,.2); }
.strip .ph img { width: 100%; height: 100%; object-fit: cover; }
.mo .strip .ph img { transform: scale(1.18) translateX(calc((var(--p, 0) - .5) * -10%)); }
.strip figcaption { font-size: 17px; font-weight: 700; margin-top: 10px; }

/* 3. 寄った写真から、引いていく */
.zoomout { position: relative; height: 100svh; overflow: hidden; }
.zoomout img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mo .zoomout img { transform: scale(calc(1.7 - .7 * min(1, var(--p, 1) * 1.7))); }
.zoomout::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 40%, rgba(0,0,0,.6)); }
.zoomout .cap { position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 12svh; }
.zoomout .cap .big { font-size: clamp(36px, 10vw, 96px); }
.zoomout .cap small { display: block; color: #fff; font-size: 15px; margin-top: 10px; text-shadow: 0 1px 10px rgba(0,0,0,.5); }

/* 4. 大きな文字が、左右に流れる */
.marquee { overflow: hidden; padding: 14svh 0; white-space: nowrap; }
.marquee p { margin: 0; font-size: clamp(52px, 15vw, 160px); font-weight: 700; line-height: 1.15; }
.mo .marquee p { transform: translateX(calc(var(--p, .5) * -55%)); }
.mo .marquee p + p { transform: translateX(calc(-55% + var(--p, .5) * 55%)); opacity: .28; }

/* 5. 写真が下から重なってくる */
.stack > .card { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.mo-still .stack > .card, html:not(.mo) .stack > .card { position: relative; }
.stack .card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mo .stack .card img { transform: scale(calc(1.25 - .25 * min(1, var(--p, 1) * 2))); }
.stack .card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 45%, rgba(0,0,0,.55)); }
.stack .card .big { position: absolute; z-index: 2; left: 20px; bottom: 12svh; font-size: clamp(56px, 18vw, 170px); }
.stack .card + .card { box-shadow: 0 -20px 40px rgba(0,0,0,.35); }

/* 6. 丸い窓がひらく */
.mo .circle { height: 220svh; }
.circle img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mo .circle img { clip-path: circle(calc(12% + var(--p, 0) * 84%) at 50% 50%); transform: scale(calc(1.2 - .2 * var(--p, 0))); }
.circle .word { position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 14svh; font-size: clamp(40px, 11vw, 110px); }
.mo .circle .word { opacity: clamp(0, calc((var(--p, 0) - .55) * 5), 1); }
.circle .sticky::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 45%, rgba(0,0,0,.5)); opacity: var(--p, 1); pointer-events: none; }

/* 7. 写真のパララックス（中の写真だけゆっくり動く） */
.para { overflow: hidden; }
.para img { width: 100%; height: 100%; object-fit: cover; }
.mo .para img { transform: scale(1.2) translateY(calc((var(--p, .5) - .5) * -14%)); }