/* =========================================================================
   scroll-fx.css — スクロール連動アニメ＆パララックスを“死ぬほど”盛る層
   方式：CSS scroll-driven animations（animation-timeline: view()/scroll()）。
   → 各要素が自分のビュー進度で動く＝自然なスタッガ。JSスクロールハンドラ不使用＝軽い。
   非対応ブラウザ／prefers-reduced-motion では一切動かず“最初から見える”（崩れない）。
   読み込みはページ最後（ベースCSSの後）。要素にクラスを付けるか、下の自動対象に任せる。
   ========================================================================= */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){

  /* ===== 自動対象：主要ブロックがビュー入りでフワッと（個別タイムライン＝勝手にズレて出る） ===== */
  .ev-ey,.ev-h,.ev-lead,.ev-anchor,
  .card,.offer .o,.ev-svc .s,.ev-voice,.faq details,.flow .st,.todo,
  .ticket,.ev-photo,.w2a,.case .shotframe,.case .ba,
  .ev-cta h2,.ev-cta .ev-lead,.ev-org,
  .sfx{
    animation:sfx-up both;
    animation-timeline:view();
    animation-range:entry 2% entry 46%;
  }
  @keyframes sfx-up{from{opacity:0;transform:translateY(54px)}to{opacity:1;transform:none}}

  /* ===== 方向・効果ちがいユーティリティ（手で付ける） ===== */
  .sfx-l{animation:sfx-l both;animation-timeline:view();animation-range:entry 2% entry 50%}
  @keyframes sfx-l{from{opacity:0;transform:translateX(-70px)}to{opacity:1;transform:none}}
  .sfx-r{animation:sfx-r both;animation-timeline:view();animation-range:entry 2% entry 50%}
  @keyframes sfx-r{from{opacity:0;transform:translateX(70px)}to{opacity:1;transform:none}}
  .sfx-zoom{animation:sfx-zoom both;animation-timeline:view();animation-range:entry 0% entry 55%}
  @keyframes sfx-zoom{from{opacity:0;transform:scale(.78)}to{opacity:1;transform:none}}
  .sfx-blur{animation:sfx-blur both;animation-timeline:view();animation-range:entry 0% cover 18%}
  @keyframes sfx-blur{from{opacity:0;filter:blur(16px);transform:scale(1.05)}to{opacity:1;filter:none;transform:none}}
  .sfx-rot{animation:sfx-rot both;animation-timeline:view();animation-range:entry 0% entry 55%}
  @keyframes sfx-rot{from{opacity:0;transform:rotate(-7deg) translateY(46px)}to{opacity:1;transform:none}}
  .sfx-clip{animation:sfx-clip both;animation-timeline:view();animation-range:entry 0% entry 60%}
  @keyframes sfx-clip{from{clip-path:inset(0 100% 0 0);opacity:.2}to{clip-path:inset(0 0 0 0);opacity:1}}
  .sfx-flip{animation:sfx-flip both;animation-timeline:view();animation-range:entry 0% entry 55%;transform-origin:bottom}
  @keyframes sfx-flip{from{opacity:0;transform:perspective(900px) rotateX(28deg) translateY(40px)}to{opacity:1;transform:none}}

  /* ===== 激しめ（スクロールインサート系） ===== */
  .sfx-inL{animation:sfx-inL both;animation-timeline:view();animation-range:entry 0% entry 50%}
  @keyframes sfx-inL{from{opacity:0;transform:translateX(-120px) rotate(-4deg)}to{opacity:1;transform:none}}
  .sfx-inR{animation:sfx-inR both;animation-timeline:view();animation-range:entry 0% entry 50%}
  @keyframes sfx-inR{from{opacity:0;transform:translateX(120px) rotate(4deg)}to{opacity:1;transform:none}}
  .sfx-pop{animation:sfx-pop both;animation-timeline:view();animation-range:entry 0% entry 62%}
  @keyframes sfx-pop{0%{opacity:0;transform:scale(.5)}70%{opacity:1;transform:scale(1.09)}100%{transform:scale(1)}}
  .sfx-skew{animation:sfx-skew both;animation-timeline:view();animation-range:entry 0% entry 50%}
  @keyframes sfx-skew{from{opacity:0;transform:translateY(60px) skewY(7deg)}to{opacity:1;transform:none}}
  .sfx-rise{animation:sfx-rise both;animation-timeline:view();animation-range:entry 0% entry 58%}
  @keyframes sfx-rise{from{opacity:0;transform:translateY(90px) scale(.92)}to{opacity:1;transform:none}}

  /* ===== スクロールで線が描かれる（path に pathLength="1" を付ける） ===== */
  .sfx-draw{stroke-dasharray:1;stroke-dashoffset:1;animation:sfx-draw linear both;animation-timeline:view();animation-range:entry 0% cover 60%}
  @keyframes sfx-draw{to{stroke-dashoffset:0}}
  .scrollline path{stroke-dasharray:1;stroke-dashoffset:1;animation:sfx-draw linear both;animation-timeline:scroll(root);animation-range:0 90%}

  /* ===== パララックス（ビュー横断でゆっくり上下／scroll-linked） ===== */
  .px{animation:px-y linear both;animation-timeline:view();animation-range:cover}
  @keyframes px-y{from{transform:translateY(-12%)}to{transform:translateY(12%)}}
  .px-slow{animation:px-slow linear both;animation-timeline:view();animation-range:cover}
  @keyframes px-slow{from{transform:translateY(-7%)}to{transform:translateY(7%)}}
  .px-fast{animation:px-fast linear both;animation-timeline:view();animation-range:cover}
  @keyframes px-fast{from{transform:translateY(-26%)}to{transform:translateY(26%)}}
  .px-zoom{animation:px-zoom linear both;animation-timeline:view();animation-range:cover}
  @keyframes px-zoom{from{transform:scale(1.18)}to{transform:scale(1)}}

  /* ===== ページscroll連動（ルート） ＝ ヒーローの仕掛け ===== */
  .sfx-herodate{animation:herodate linear both;animation-timeline:scroll(root);animation-range:0 70vh}
  @keyframes herodate{to{transform:scale(1.3) translateY(-12%);opacity:.18;letter-spacing:.08em}}
  .sfx-herofade{animation:herofade linear both;animation-timeline:scroll(root);animation-range:0 46vh}
  @keyframes herofade{to{opacity:0;transform:translateY(-26px)}}
  .sfx-floatA{animation:floatA linear both;animation-timeline:scroll(root);animation-range:0 110vh}
  @keyframes floatA{to{transform:translateY(46vh) rotate(48deg)}}
  .sfx-floatB{animation:floatB linear both;animation-timeline:scroll(root);animation-range:0 110vh}
  @keyframes floatB{to{transform:translateY(64vh) rotate(-40deg)}}

  }
}