/* ==========================================================
   nail hug 動き版（motion）
   本線 index-f.html に後から差し込む。内容・色・文字は変えない。
   ・html に .mo が付いているときだけ動く（JSが読めなければ静止画のまま全部見える）
   ・4秒たっても動きが始まらなければ .mo-done で全部表示する（保険）
   ・端末で「視差効果を減らす」設定のときは動かさない
   ========================================================== */

/* ---- 共通の動き ---- */
@keyframes mo-up   { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes mo-pop  { from { opacity: 0; transform: translateY(10px) scale(.86); } to { opacity: 1; transform: none; } }
@keyframes mo-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mo-track{ from { opacity: 0; letter-spacing: .9em; } to { opacity: 1; letter-spacing: .34em; } }
@keyframes mo-sway { 0%,100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes mo-grow { from { opacity: 0; transform: scale(.3) rotate(-40deg); } to { opacity: 1; transform: none; } }
@keyframes mo-heroin { from { opacity: 0; transform: scale(1.12); } to { opacity: 1; transform: scale(1); } }
@keyframes mo-kb   { from { transform: scale(1); } to { transform: scale(1.07) translate(-1%, -1%); } }

/* ---- 舞う葉っぱ（ページ全体の後ろ側） ---- */
.mo-leaves { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.mo-leaves .lf { position: absolute; top: -8vh; left: var(--x); width: var(--s); animation: mo-fall var(--t) linear var(--d) infinite; }
.mo-leaves .lf i { display: block; color: var(--c); opacity: var(--o); animation: mo-drift var(--w) ease-in-out var(--d) infinite alternate; }
.mo-leaves .lf svg { display: block; width: 100%; height: auto; }
@keyframes mo-fall  { from { transform: translateY(0); } to { transform: translateY(118vh); } }
@keyframes mo-drift { from { transform: translateX(calc(var(--a) * -1)) rotate(-28deg); } to { transform: translateX(var(--a)) rotate(32deg); } }
/* 中身は葉っぱより手前に（白いカードの後ろを葉っぱがくぐる） */
.mo main, .mo footer { position: relative; z-index: 2; }

/* ---- 上部のスクロール進み具合 ---- */
.mo-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 40; pointer-events: none;
  background: linear-gradient(90deg, var(--leaf), var(--green)); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }

/* ---- トップ：写真がゆっくり寄ってから、文字が1行ずつ ---- */
/* ズームで写真が枠の下にはみ出すと、白いぼかしの外に帯が出るので枠で切る */
.mo .hero .photo { overflow: hidden; }
/* 写真が大きい状態から縮む速さ（10/10 ゆっくりに：1.8s → 4s。動きの始まりと終わりをなめらかに） */
.mo .hero .photo img { animation: mo-heroin 4s cubic-bezier(.3,.1,.25,1) both, mo-kb 24s ease-in-out 4s infinite alternate; transform-origin: 60% 45%; }
/* 文字は、最初の画面で見えているものは順に登場、画面の下にはみ出しているものはスクロールして見えたときに出す（JSが .hin を付ける） */
.mo .hero .wrap > *, .mo .hero h1 .nw { opacity: 0; }
.mo .hero .wrap > h1              { opacity: 1; }
.mo .hero .wrap .hin              { opacity: 1; animation: mo-up .95s cubic-bezier(.2,.7,.2,1) var(--hd, 0s) backwards; }   /* ほかの要素（.in）と同じ速さ・同じ曲線（10/10 ユーザー指定） */

/* ---- 見えてきたら、ふわっと（JSが .in を付ける） ---- */
/* :where() で優先度を .mo だけにしておく（.in で必ず上書きできるように） */
.mo :where(.lbl, .sec-title, .sec-sub, .story-grid .col > *, .story-grid .media,
  .vcard, .step, .acard, .leader > *, .mc, .join-welcome, .faq details, .contact-box, .rcard, .mitem, .car-nav, .tags li) { opacity: 0; }

.mo .in { opacity: 1; animation: mo-up .95s cubic-bezier(.2,.7,.2,1) var(--d, 0s) backwards; }
.mo .tags li.in { animation-name: mo-pop; animation-duration: .6s; }

/* 英字の小見出しは、字間がほどけるように */
.mo .lbl.in .en { animation: mo-track 1.3s cubic-bezier(.2,.7,.2,1) .15s backwards; }
/* 葉のマークは、ぴょこっと出て、そのあとずっと小さく揺れる */
.mo .lbl .leaf { transform-origin: 50% 85%; }
.mo .lbl.in .leaf { animation: mo-grow .9s cubic-bezier(.3,1.5,.5,1) backwards, mo-sway 4.8s ease-in-out .9s infinite; }

/* 見出しの下に、細い線がすっと伸びる */
.mo .sec-title::after { content: ""; display: block; width: 44px; height: 2px; margin: 14px auto 0; border-radius: 2px;
  background: var(--leaf); transform: scaleX(0); transition: transform 1s cubic-bezier(.2,.7,.2,1) .35s; }
.mo .sec-title.in::after { transform: scaleX(1); }

/* 想いの引用は、左の線が上から下へ描かれる */
.mo .quote { position: relative; border-left-color: transparent; }
.mo .quote::before { content: ""; position: absolute; left: -2px; top: 0; bottom: 0; width: 2px; background: var(--leaf);
  transform: scaleY(0); transform-origin: top; transition: transform 1.2s cubic-bezier(.2,.7,.2,1) .45s; }
.mo .quote.in::before { transform: scaleY(1); }


/* スマホなど指でさわる端末：押した瞬間に白いボタンを緑に（マウスを乗せる動きは出ないため） */
.mo .btn.line:active { background: var(--green); color: #fff; transform: translateY(-2px); }
/* ---- さわったときの反応（マウスのある端末だけ） ---- */
@media (hover: hover) {
  /* 白いボタン（メンバーを見る）は、乗せると少し浮いて緑に変わる */
  .mo .btn.line { transition: transform .35s cubic-bezier(.2,.7,.2,1), background-color .35s ease, color .35s ease, box-shadow .35s ease; }
  .mo .btn.line:hover { opacity: 1; transform: translateY(-3px); background: var(--green); color: #fff; box-shadow: 0 14px 26px -16px rgba(59, 99, 53, .55); }
  /* 緑のボタンも、乗せると少し浮く */
  .mo .btn:not(.line):not(.small) { transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, opacity .25s ease; }
  .mo .btn:not(.line):not(.small):hover { transform: translateY(-3px); box-shadow: 0 14px 26px -16px rgba(59, 99, 53, .55); }
  .mo :is(.vcard, .step, .acard, .mc, .rcard, .mitem) { transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease; }
  .mo :is(.vcard, .mc, .rcard, .mitem):hover { transform: translateY(-5px); box-shadow: 0 18px 34px -22px rgba(59, 99, 53, .45); }
  .mo :is(.step, .acard):hover { transform: translateY(-4px); }
  .mo :is(.step, .acard) .ph img { transition: transform 1s cubic-bezier(.2,.7,.2,1); }
  .mo :is(.step, .acard):hover .ph img { transform: scale(1.05); }
  .mo .tags li { transition: transform .3s ease, color .3s ease; }
  .mo .tags li:hover { transform: translateY(-2px); color: var(--green-deep); }
}

/* 想いの写真は、スクロールに合わせて少しだけ動く（JSが --py を入れる） */
.mo .story-grid .media img { transform: translateY(var(--py, 0px)) scale(1.08); will-change: transform; }

/* ---- 出てきたあとも、見えている間は小さく動き続ける（10/4 追加・案2） ---- */
/* transform ではなく scale / translate を使い、マウスを乗せたときの寄り・想いの写真の視差と重ねられるようにする */
@keyframes mo-breathe { from { scale: 1; } to { scale: 1.06; } }
@keyframes mo-line    { 0%,100% { scale: 1 1; } 50% { scale: 2.2 1; } }
/* 写真はゆっくり息をするように寄ったり引いたり（枠はどれも overflow:hidden なので、はみ出さない） */
.mo :is(.acard .ph, .leader .media, .story-grid .media) img { animation: mo-breathe 14s ease-in-out var(--ld, 0s) infinite alternate; }
/* 見出しの下の線は、ゆっくり伸び縮み */
.mo .sec-title.in::after { animation: mo-line 5s ease-in-out 1.4s infinite; }
/* 画面の外にあるあいだは止めておく（JSが .mo-off を付ける） */
.mo .mo-off, .mo .mo-off img, .mo .mo-off::after { animation-play-state: paused !important; }

/* ---- 保険と、動きを減らす設定 ---- */
.mo-done :is(.lbl, .sec-title, .sec-sub, .story-grid .col > *, .story-grid .media, .vcard, .step, .acard,
  .leader > *, .mc, .join-welcome, .faq details, .contact-box, .rcard, .mitem, .car-nav, .tags li, .hero .wrap > *, .hero h1 .nw) { opacity: 1 !important; }
@media (prefers-reduced-motion: reduce) {
  .mo *, .mo *::before, .mo *::after { animation: none !important; transition: none !important; }
  .mo :is(.lbl, .sec-title, .sec-sub, .story-grid .col > *, .story-grid .media, .vcard, .step, .acard,
    .leader > *, .mc, .join-welcome, .faq details, .contact-box, .rcard, .mitem, .car-nav, .tags li, .hero .wrap > *, .hero h1 .nw) { opacity: 1 !important; }
  .mo .sec-title::after, .mo .quote::before { transform: none; }
  .mo-leaves, .mo-progress { display: none; }
  .mo .story-grid .media img { transform: none; }
}