/* ============================================================
   Lステップ導入イメージ アニメーション
   /common/css/lstep-anim.css
   ------------------------------------------------------------
   ・着火は既存の fade-in 機構に相乗り。
     親の li.fade-in に .visible が付くと 1 回だけ再生されます
     （グラフ growth-graph と同じトリガー）。
   ・専用 JS は不要です。
   ============================================================ */

.ls-anim {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}
.ls-anim svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

/* ---- 配色 ---- */
.ls-body       { fill: #1c1c1e; }
.ls-screen     { fill: #93a7c4; }
.ls-island     { fill: #000; }
.ls-navline    { stroke: #9aa6b5; stroke-width: 1.2; fill: none; stroke-linecap: round; }
.ls-bin        { fill: #ffffff; }
.ls-bout       { fill: #46d35a; }
.ls-callout    { fill: #ffffff; stroke: #f08a24; stroke-width: 2.5; }
.ls-person     { fill: #f08a24; }
.ls-cline      { stroke: #f08a24; stroke-width: 2.2; stroke-linecap: round; }
.ls-thumb      { fill: #f08a24; }
.ls-heartbadge { fill: #f0436a; }
.ls-callout-g  { fill: #ffffff; stroke: #9a9a9a; stroke-width: 2.5; }
.ls-person-g   { fill: #9a9a9a; }
.ls-thumb-g    { fill: #9a9a9a; }
.ls-arrow      { fill: #1d97d6; }

/* ---- 初期状態（着火前は止めておく） ---- */
.ls-left-phone,
.ls-left-callout,
.ls-arrow,
.ls-right-phone,
.ls-float { opacity: 0; }

/* ---- 着火：親 li.fade-in に .visible が付いたら順番に再生 ----
   左スマホ → 左吹き出し → 矢印 → 右スマホ → 右の要素が次々
*/
.fade-in.visible .ls-left-phone   { animation: ls-fadein 0.6s ease-out 0s   forwards; }
.fade-in.visible .ls-left-callout { animation: ls-fadeup 0.6s ease-out 0.8s forwards; }
.fade-in.visible .ls-arrow        { transform-origin: 286px 194px;
                                     animation: ls-arrowgrow 0.6s cubic-bezier(.5,1.6,.5,1) 1.6s forwards; }
.fade-in.visible .ls-right-phone  { animation: ls-fadein 0.6s ease-out 2.3s forwards; }

.fade-in.visible .ls-p1 { animation: ls-fadeup 0.6s ease-out 2.8s forwards; }
.fade-in.visible .ls-p2 { animation: ls-fadeup 0.6s ease-out 3.0s forwards; }
.fade-in.visible .ls-p3 { animation: ls-fadeup 0.6s ease-out 3.2s forwards; }
.fade-in.visible .ls-p4 { animation: ls-fadeup 0.6s ease-out 3.4s forwards; }
.fade-in.visible .ls-p5 { animation: ls-fadeup 0.6s ease-out 3.6s forwards; }
.fade-in.visible .ls-p6 { animation: ls-fadeup 0.6s ease-out 3.8s forwards; }
.fade-in.visible .ls-p7 { animation: ls-fadeup 0.6s ease-out 4.0s forwards; }
.fade-in.visible .ls-p8 { animation: ls-fadeup 0.6s ease-out 4.2s forwards; }

/* 歯車は登場後ずっと回転 */
.ls-gear { transform-origin: 612px 300px; }
.fade-in.visible .ls-gear { animation: ls-spin 6s linear infinite 4.5s; }

/* ---- キーフレーム ---- */
@keyframes ls-fadein   { from { opacity: 0; } to { opacity: 1; } }
@keyframes ls-fadeup   { from { opacity: 0; transform: translateY(12px); }
                         to   { opacity: 1; transform: translateY(0); } }
@keyframes ls-arrowgrow{ 0%   { opacity: 0; transform: scaleX(0); }
                         100% { opacity: 1; transform: scaleX(1); } }
@keyframes ls-spin     { to { transform: rotate(360deg); } }

/* ---- 動きを抑える設定の人には静止表示 ---- */
@media (prefers-reduced-motion: reduce) {
  .ls-left-phone, .ls-left-callout, .ls-arrow, .ls-right-phone, .ls-float {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}