/* ============================================================
   motion.css — LP共通モーション一式  v1.0 (2026-09-03)
   使い方：このファイルをそのままコピーし、HTMLにクラスを付けるだけ。
   方針：アニメは transform / opacity のみ。will-change・backdrop-filter・
        background-attachment:fixed は使わない。スクロール中は常時アニメを止める。
   Safari 26 / Chrome 115 以降は CSSだけのスクロール連動（animation-timeline）で動き、
   それ以前は motion.js の IntersectionObserver に自動で切り替わる。
   ============================================================ */

:root{
  --m-ease:cubic-bezier(.22,.61,.36,1);
  --m-dur:.95s;
  --m-dist:26px;          /* 登場時の移動量 */
  --m-accent:currentColor;
}

/* ============================================================
   1. スクロールで現れる（登場）  ★どのLPでも最初に使う
   <div class="anim">…</div>            ふわっと下から
   <div class="anim anim--left">…</div> 左から
   data-d="1"〜"6" で遅らせて順番に出す（stagger）
   ============================================================ */
.anim{opacity:0;transform:translate3d(0,var(--m-dist),0);
      transition:opacity var(--m-dur) var(--m-ease),transform var(--m-dur) var(--m-ease)}
.anim.is-in{opacity:1;transform:none}

.anim--left {transform:translate3d(calc(var(--m-dist) * -1.4),0,0)}
.anim--right{transform:translate3d(calc(var(--m-dist) *  1.4),0,0)}
.anim--zoom {transform:scale(.94)}
.anim--blur {filter:blur(9px)}                 /* ※blurは重い。小さい要素だけに */
.anim--blur.is-in{filter:none;transition:opacity var(--m-dur) var(--m-ease),filter var(--m-dur) var(--m-ease)}
.anim--still{transform:none}                   /* フェードだけ（最も上品・最も軽い） */

.anim[data-d="1"]{transition-delay:.10s}
.anim[data-d="2"]{transition-delay:.20s}
.anim[data-d="3"]{transition-delay:.30s}
.anim[data-d="4"]{transition-delay:.40s}
.anim[data-d="5"]{transition-delay:.50s}
.anim[data-d="6"]{transition-delay:.60s}

/* 子要素を自動で順番に出す（リスト・カード並びに便利） */
.stagger > *{opacity:0;transform:translate3d(0,var(--m-dist),0);
             transition:opacity var(--m-dur) var(--m-ease),transform var(--m-dur) var(--m-ease)}
.stagger.is-in > *{opacity:1;transform:none}
.stagger.is-in > :nth-child(1){transition-delay:.05s}
.stagger.is-in > :nth-child(2){transition-delay:.13s}
.stagger.is-in > :nth-child(3){transition-delay:.21s}
.stagger.is-in > :nth-child(4){transition-delay:.29s}
.stagger.is-in > :nth-child(5){transition-delay:.37s}
.stagger.is-in > :nth-child(6){transition-delay:.45s}
.stagger.is-in > :nth-child(n+7){transition-delay:.53s}

/* ============================================================
   2. 写真の見せ方
   .rv       … マスクから開く（枠は動かず、中の写真のズームが解ける）
   .rv--wipe … 幕がスッと開く（transformだけで作る。clip-pathは使わない）
   .kb       … ゆっくり寄る（ケンバーンズ）
   ============================================================ */
.rv{overflow:hidden}
.rv img{transform:scale(1.14);transition:transform 1.3s var(--m-ease)}
.rv.is-in img{transform:scale(1)}

.rv--wipe{position:relative;overflow:hidden}
.rv--wipe::after{content:"";position:absolute;inset:0;background:var(--paper,#fff);
                 transform-origin:right;transition:transform 1.05s var(--m-ease)}
.rv--wipe.is-in::after{transform:scaleX(0)}

.kb{overflow:hidden}
.kb img{animation:m-kb 14s linear infinite alternate}
@keyframes m-kb{from{transform:scale(1.02)}to{transform:scale(1.12)}}

/* ============================================================
   3. 視差（パララックス）／横流れ  ※motion.js が動かす
   <figure data-speed="-1.4"> … 写真ごとに別の速さで流れる
   <div class="band"><div class="band__track" data-drift="-230">…
   ============================================================ */
.band{overflow:hidden}
.band__track{display:flex;gap:clamp(10px,1.6vw,22px);width:max-content;padding-left:6vw}
.band__track > *{flex:none;width:clamp(150px,20vw,270px);aspect-ratio:1/1;overflow:hidden}
.band__track img{width:100%;height:100%;object-fit:cover}

/* 無限ティッカー（スクロールと無関係にゆっくり流す）
   <div class="marquee"><div class="marquee__t">…同じ内容を2回並べる…</div></div> */
.marquee{overflow:hidden}
.marquee__t{display:flex;width:max-content;animation:m-marq 38s linear infinite}
@keyframes m-marq{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* ============================================================
   4. 文字の演出
   .line-up … 行が下から迫り上がる（高級感。見出しに効く）
       <h2 class="line-up"><span>1行目</span><span>2行目</span></h2>
   .chars   … 1文字ずつ（motion.js が自動で span に割る）
       <h2 class="chars">同じ一冊は、</h2>
   ============================================================ */
.line-up span{display:block;overflow:hidden}
.line-up span > i{display:block;font-style:inherit;transform:translate3d(0,105%,0);
                  transition:transform .95s var(--m-ease)}
.line-up.is-in span > i{transform:none}
.line-up span:nth-child(2) > i{transition-delay:.09s}
.line-up span:nth-child(3) > i{transition-delay:.18s}
.line-up span:nth-child(4) > i{transition-delay:.27s}

.chars i{display:inline-block;font-style:inherit;opacity:0;transform:translate3d(0,.5em,0);
         transition:opacity .5s var(--m-ease),transform .5s var(--m-ease)}
.chars.is-in i{opacity:1;transform:none}

/* ============================================================
   5. 数字・線
   <span class="count" data-to="1918" data-dur="1400">0</span>
   <svg class="draw">…<path>…   線が描かれる（小さい図版だけ）
   ============================================================ */
.draw path,.draw line,.draw circle{stroke-dasharray:var(--len,1000);stroke-dashoffset:var(--len,1000);
                                   transition:stroke-dashoffset 1.6s var(--m-ease)}
.draw.is-in path,.draw.is-in line,.draw.is-in circle{stroke-dashoffset:0}

/* 読了プログレスバー（CSSだけ。対応ブラウザのみ自動で出る） */
.progress{position:fixed;left:0;top:0;height:2px;width:100%;transform:scaleX(0);
          transform-origin:left;background:var(--m-accent);z-index:99;pointer-events:none;display:none}
@supports (animation-timeline:scroll()){
  .progress{display:block;animation:m-prog linear;animation-timeline:scroll()}
}
@keyframes m-prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ============================================================
   6. スクロール上級（レイアウトで魅せる。JS不要）
   .pin      … 画面に固定したまま、右の内容だけ切り替わる（scrollytelling）
   .stack    … セクションが重なって積み上がる
   .snap     … 1画面ずつピタッと止まるギャラリー
   .scroll-x … 横スクロールの帯（指で払う）
   ============================================================ */
.pin{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:start}
.pin__fix{position:sticky;top:clamp(60px,12vh,110px)}
@media (max-width:900px){.pin{grid-template-columns:1fr}.pin__fix{position:static}}

.stack > *{position:sticky;top:clamp(48px,9vh,96px)}

.snap{display:flex;gap:clamp(12px,2vw,24px);overflow-x:auto;scroll-snap-type:x mandatory;
      -webkit-overflow-scrolling:touch;scrollbar-width:none}
.snap::-webkit-scrollbar{display:none}
.snap > *{flex:none;scroll-snap-align:center}

.scroll-x{display:flex;gap:clamp(12px,2vw,24px);overflow-x:auto;-webkit-overflow-scrolling:touch;
          scrollbar-width:none;padding-inline:var(--gut,20px)}
.scroll-x::-webkit-scrollbar{display:none}
.scroll-x > *{flex:none}

/* ============================================================
   7. ホバー（PCだけ。指で触る端末では出さない）
   ============================================================ */
@media (hover:hover){
  .hv-lift{transition:transform .35s var(--m-ease)}
  .hv-lift:hover{transform:translate3d(0,-3px,0)}

  .hv-zoom{overflow:hidden}
  .hv-zoom img{transition:transform .9s var(--m-ease)}
  .hv-zoom:hover img{transform:scale(1.05)}

  .hv-line{position:relative;display:inline-block}
  .hv-line::after{content:"";position:absolute;left:0;bottom:-3px;width:100%;height:1px;
                  background:var(--m-accent);transform:scaleX(0);transform-origin:left;
                  transition:transform .35s var(--m-ease)}
  .hv-line:hover::after{transform:scaleX(1)}
}

/* ============================================================
   8. HERO（写真のクロスフェード）
   ============================================================ */
.hero__slide{position:absolute;inset:0;opacity:0;transition:opacity 1.5s var(--m-ease)}
.hero__slide.is-on{opacity:1}
.hero__slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.06)}
.hero__slide.is-on img{animation:m-hero 9s linear forwards}
@keyframes m-hero{from{transform:scale(1.02)}to{transform:scale(1.11)}}

/* ============================================================
   9. ★カクつき対策：スクロール中は常時ループのアニメを止める
   ============================================================ */
.is-scrolling .kb img,
.is-scrolling .marquee__t,
.is-scrolling .hero__slide.is-on img{animation-play-state:paused}

/* スマホでは装飾を間引く */
@media (max-width:600px){
  .thin-only{display:none}
}

/* ============================================================
   10. 「視差効果を減らす」がONのとき
   ★完全停止にはしない。フェードとその場の動きは残し、大きな移動だけ小さくする。
     （視差・横流れの移動量は motion.js 側で 0.6倍に落とす）
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  :root{--m-dist:14px}
  .anim--left,.anim--right{transform:translate3d(0,14px,0)}
  .line-up span > i{transform:translate3d(0,40%,0)}
  .kb img{animation-duration:26s}
  .marquee__t{animation-duration:70s}
  .hero__slide.is-on img{animation-duration:16s}
}