/* トップページの5つの場面（RACE → 49.58 → WORK & RUN → 宮崎 → 記録への入口）
   基本の形は「止めない・全部見える」。html.motion で現れ方を、html.pinned（パソコン幅）で画面を止める動きを足す。
   動きのリズム：走る前の静けさ（ヒーロー）→ 加速（RACE・49.58）→ 越える瞬間（赤い線）→ 余韻（宮崎） */

.scene-index{letter-spacing:.22em;color:#68737c;margin:0;font:600 12px/1 Barlow Condensed}
.scene-index.light,.scene-race .scene-index{color:#c9d1d8}
.scene-pin{position:relative}

/* A. RACE ------------------------------------------------ */
.scene-race .scene-pin{color:#fff;background:var(--navy);height:92vh;min-height:560px;overflow:hidden}
.race-photo{object-fit:cover;object-position:50% 40%;height:100%;position:absolute;inset:0}
.race-shade{background:linear-gradient(90deg,#030d18eb 0%,#030d18a6 42%,#030d1814 78%),linear-gradient(#0000 55%,#030d18b3);position:absolute;inset:0}
.race-copy{max-width:600px;position:absolute;bottom:12vh;left:7vw}
.race-copy h2{letter-spacing:-.05em;margin:26px 0 30px;font:700 clamp(56px,7vw,112px)/1.04 Noto Serif JP}
.race-text{color:#e6eaee;margin:0 0 42px;font:400 15px/2.1 Noto Serif JP}

/* B. 49.58 ------------------------------------------------ */
.scene-record{background:var(--navy);color:#fff}
.scene-record .scene-pin{align-items:center;min-height:100vh;padding:90px 7vw;display:flex}
.scene-record .scene-pin{overflow:hidden}
/* 背景の写真（両手を挙げた瞬間）。文字が読めるよう紺を重ねる */
.record-bg{position:absolute;inset:0}
.record-bg img{object-fit:cover;object-position:55% 30%;height:100%}
.record-bg:after{content:"";background:linear-gradient(90deg,#07182ae6 0%,#07182ac2 55%,#07182a99);position:absolute;inset:0}
.record-inner{position:relative}
.record-num{letter-spacing:-.05em;margin:34px 0 0;font:700 min(24vw,40vh)/.82 Barlow Condensed}
.record-num span{color:var(--red)}
.record-line{background:var(--red);transform-origin:0;width:min(680px,72vw);height:3px;margin:26px 0 22px;display:block}
.record-label{letter-spacing:.2em;color:#aeb8c2;margin:0;font:600 12px/2 Barlow Condensed}
.record-label b{letter-spacing:.08em;color:#e1e5e8;font:500 14px/2 Noto Sans JP}
.record-quote{color:#e1e5e8;margin:38px 0 0;font:500 clamp(20px,2.2vw,32px)/1.7 Noto Serif JP}
.record-quote.strong{color:#fff;margin-top:4px;font-weight:600}
.record-quote.strong .nw{background:linear-gradient(#0000 calc(100% - 2px),var(--red) 0)}
.record-next{letter-spacing:.06em;border-top:1px solid #5c6c79;max-width:680px;margin:48px 0 0;padding-top:20px;font:600 15px/1.8 Noto Serif JP}
.record-next small{color:#aeb8c2;letter-spacing:.04em;margin-top:4px;display:block;font:500 12px Noto Sans JP}

/* C. WORK & RUN ------------------------------------------- */
.scene-work{background:var(--paper)}
.scene-work .scene-pin{grid-template-columns:.9fr 1.1fr;align-items:center;gap:6vw;min-height:100vh;padding:120px 7vw;display:grid}
.work-copy h2{letter-spacing:-.05em;margin:28px 0;font:600 clamp(40px,4.6vw,68px)/1.35 Noto Serif JP}
.work-text{color:#43505b;max-width:460px;margin:0 0 34px;font:400 15px/2.15 Noto Serif JP}
.work-meter{letter-spacing:.2em;align-items:center;gap:14px;max-width:340px;margin-bottom:40px;font:600 12px Barlow Condensed;display:flex}
.work-meter i{background:var(--line);flex:1;height:2px;position:relative}
.work-meter b{background:var(--red);transform-origin:0;position:absolute;inset:0}
.work-media{grid-template-columns:1fr 1fr;gap:10px;display:grid}
.work-photo{aspect-ratio:3/4;margin:0;position:relative;overflow:hidden}
.work-photo img{object-fit:cover;height:100%}
.work-a img{object-position:50% 25%}
.work-b img{object-position:45% 60%}
.work-photo figcaption{background:var(--navy);color:#fff;letter-spacing:.22em;padding:6px 10px;font:600 11px Barlow Condensed;position:absolute;bottom:14px;left:14px}

/* D. 宮崎 -------------------------------------------------- */
.scene-miyazaki{background:var(--ivory);text-align:center;padding-top:200px;padding-bottom:200px}
.scene-miyazaki h2{letter-spacing:-.04em;margin:36px 0 44px;font:600 clamp(40px,5vw,76px)/1.4 Noto Serif JP}
.scene-miyazaki>p:not(.scene-index){color:#43505b;max-width:36em;margin:0 auto 52px;font:400 16px/2.3 Noto Serif JP}
.scene-miyazaki br.sp{display:none}

/* E. 記録への入口 ------------------------------------------ */
.entries-head h2{letter-spacing:-.04em;margin:26px 0 64px;font:600 clamp(36px,4.4vw,62px)/1.4 Noto Serif JP}
.entry-list{grid-template-columns:repeat(3,1fr);gap:36px;display:grid}
.entry{border-top:1px solid var(--ink);flex-direction:column;padding-top:16px;display:flex}
.entry-image{aspect-ratio:4/3;margin-bottom:22px;overflow:hidden}
.entry-image img{object-fit:cover;height:100%;transition:transform .6s}
.entry:hover .entry-image img{transform:scale(1.04)}
.entry small{letter-spacing:.2em;color:var(--red);font:600 11px Barlow Condensed}
.entry h3{margin:10px 0;font:600 22px/1.5 Noto Serif JP}
.entry p{color:#52606a;flex:1;margin:0 0 18px;font:400 13px/1.9 Noto Serif JP}
.entry b{letter-spacing:.15em;color:var(--red);font:600 12px Barlow Condensed}

/* 動き：現れ方（パソコン・スマホ共通） ------------------------ */
html.motion .reveal{opacity:0;transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);transform:translateY(28px)}
html.motion .reveal.on{opacity:1;transform:none}
html.motion .reveal-soft{opacity:0;transition:opacity 1.6s ease,transform 1.6s ease;transform:translateY(14px)}
html.motion .reveal-soft.on{opacity:1;transform:none}
html.motion .entry.reveal-soft:nth-child(2){transition-delay:.15s}
html.motion .entry.reveal-soft:nth-child(3){transition-delay:.3s}
/* 49.58 は数字そのものを変えずに、左から加速して入ってくる */
html.motion .record-num.reveal{transition:opacity .5s ease,transform 1s cubic-bezier(.16,1,.3,1);transform:translateX(-90px)skewX(-8deg)}
html.motion .record-num.reveal.on{transform:none}
/* 赤い線は、ハードルを越える瞬間のように一気に引く */
html.motion .record-line.reveal{opacity:1;transition:transform 1s cubic-bezier(.75,0,.2,1);transform:scaleX(0)}
html.motion .record-line.reveal.on{transform:scaleX(1)}
/* 49.58：まず写真だけがはっきり見え、ゆっくり紺に沈んでから文字が出てくる */
html.motion .record-bg img{opacity:0;transition:opacity .9s ease,transform 2.4s cubic-bezier(.2,.7,.2,1);transform:scale(1.06)}
html.motion .record-bg.on img{opacity:1;transform:none}
html.motion .record-bg:after{opacity:0;transition:opacity .4s ease}
html.motion .record-bg.on:after{opacity:1;transition:opacity 1.4s ease 1.1s}
html.motion .scene-record .scene-index.reveal.on{transition-delay:2s}
html.motion .scene-record .record-num.reveal.on{transition-delay:2.2s}
html.motion .scene-record .record-line.reveal.on{transition-delay:2.7s}
html.motion .scene-record .record-label.reveal.on{transition-delay:2.8s}
/* 走る前の静けさ：最初の写真はゆっくり落ち着く */
html.motion .hero-image{animation:hero-settle 2.6s cubic-bezier(.2,.7,.2,1) both}
html.motion .hero-copy{animation:hero-rise 1.4s cubic-bezier(.2,.7,.2,1) .35s both}
@keyframes hero-settle{from{transform:scale(1.07)}to{transform:none}}
@keyframes hero-rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* 動き：パソコン幅では場面の中で画面を止める ------------------ */
html.pinned .scene-race{height:230vh}
html.pinned .scene-record{height:240vh}
html.pinned .scene-work{height:260vh}
html.pinned .scene[data-scene] .scene-pin{height:100vh;min-height:0;position:sticky;top:0}
html.pinned .race-photo{transform-origin:60% 42%;will-change:transform;transform:scale(calc(1 + var(--p,0)*.16))}
html.pinned .race-shade{opacity:calc(.5 + var(--p,0)*.5)}
html.pinned .scene-work{--a:clamp(0,calc((var(--q,0) + .3)*3.4),1);--x:clamp(0,calc((var(--p,0) - .42)*4),1)}
html.pinned .work-media{height:72vh;display:block;position:relative}
html.pinned .work-photo{aspect-ratio:auto;will-change:opacity,transform;position:absolute;inset:0}
html.pinned .work-a{opacity:var(--a);transform:translateY(calc((1 - var(--a))*50px))}
/* 走る姿は下から幕を上げるように入れ替わる（重ね透かしにしない） */
html.pinned .work-b{clip-path:inset(calc((1 - var(--x))*100%) 0 0 0)}
html.pinned .work-b img{transform:scale(calc(1.08 - var(--x)*.08))}
html.pinned .work-meter b{transform:scaleX(var(--x))}
html.pinned .work-meter .w-work{opacity:calc(1 - var(--x)*.6)}
html.pinned .work-meter .w-run{opacity:calc(.4 + var(--x)*.6)}

/* スマホ幅：止めずに縦に読む ---------------------------------- */
@media (width<=900px){
  .scene-race .scene-pin{height:86vh;min-height:520px}
  .race-shade{background:linear-gradient(#030d1826 30%,#030d18e6 78%)}
  .race-copy{bottom:8vh;left:24px;right:24px}
  .race-copy h2{font-size:52px}
  .race-text{font-size:14px}
  .race-text br{display:none}
  .scene-record .scene-pin{min-height:0;padding:100px 24px}
  .record-num{font-size:36vw}
  .scene-work .scene-pin{grid-template-columns:1fr;gap:44px;min-height:0;padding:95px 24px}
  .scene-miyazaki{padding-top:130px;padding-bottom:130px}
  .scene-miyazaki>p:not(.scene-index){text-align:left;font-size:15px}
  .scene-miyazaki>p br{display:none}
  .entry-list{grid-template-columns:1fr;gap:54px}
}