/* service-icons.css
 * 事業内容アイコン（細線アウトライン／ピンク・緑・白）の表示と、内容に沿った発火アニメーション。
 *
 * - サイズは --svc-icon-size（既定 72px、index 等で上書き可）。
 * - 配色: 既定の線はピンク(--pink)。.c-green=緑の線 / .f-green=緑塗り / .f-white=白塗り(枠線はピンク)。
 * - JS(assets/js/service-icons.js)が初期化時に各 .lottie-icon へ .anim-ready を付与し、
 *   画面内で .in-view を付与。開始状態は .anim-ready 配下のみに定義するため、JS無効時は
 *   完成状態で静止表示される（壊れない）。reduced-motion 時は JS が付与せず全アニメ無効。
 * - Lottie JSON 配置時は .lottie-ready が付き、静止SVGは隠れて Lottie に切替。
 */

/* ---- 表示 ---- */
.service-visual .lottie-icon { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.service-visual .lottie-fallback,
.service-visual .lottie-icon dotlottie-player { width: calc(var(--svc-icon-scale, 0.78) * 100%); height: calc(var(--svc-icon-scale, 0.78) * 100%); }
.service-visual .lottie-icon.lottie-ready .lottie-fallback { display: none; }

/* ---- 線スタイル / 配色（常時適用）---- */
.lottie-fallback { fill: none; stroke: var(--pink); stroke-width: var(--svc-stroke, 0.65); stroke-linecap: round; stroke-linejoin: round; }
.lottie-fallback .f-white { fill: #fff; }
.lottie-fallback .f-green { fill: var(--green); stroke: none; }
.lottie-fallback .f-amber { fill: rgba(230,152,10,.9); stroke: none; }
.lottie-fallback .c-green { stroke: var(--green); }
.ic-plan .plan-doc { transform-box: fill-box; transform-origin: center; }
.ic-plan .plan-shine { opacity: 0; }
.ic-plan .bubble { transform-box: fill-box; transform-origin: left center; }
.ic-dev .click-ring { transform-box: fill-box; transform-origin: center; opacity: 0; }
.ic-ops .wave-dot { transform-box: view-box; }
.lottie-fallback .kbd-line { stroke: rgba(36,48,64,.16); }
.ic-dev .key-a1, .ic-dev .key-a3 { fill: var(--pink); stroke: none; }
.ic-dev .key-a2 { fill: var(--green); stroke: none; }


@media (prefers-reduced-motion: no-preference) {

  /* ---- hover: グロー + アイコン持ち上げ ---- */
  .service-visual .lottie-fallback {
    transition: transform .45s cubic-bezier(.34,1.56,.64,1), filter .3s ease;
  }
  .service-visual:hover .lottie-fallback {
    transform: translateY(-5px);
    filter: drop-shadow(0 6px 14px rgba(212,99,126,.22));
  }

  /* ---- 開始状態（.anim-ready 付与時のみ隠す）---- */

  /* ic-dev: pathLength="1" を利用した stroke-dashoffset ドロー効果 */
  .lottie-icon.anim-ready .ic-dev .code-line {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
  }
  .lottie-icon.anim-ready .ic-dev .key-a { opacity: 0; }
  /* ic-plan: チェックマークを非表示（描画アニメ開始前） */
  .lottie-icon.anim-ready .ic-plan .chk-mark { stroke-dasharray: 1; stroke-dashoffset: 1; }
  /* ic-plan: 吹き出しを非表示（会話ポップ開始前） */
  .lottie-icon.anim-ready .ic-plan .bubble { opacity: 0; transform: scale(0); }

  /* ic-ops: 波形パスを非表示（初回スクロールで描画、pathLength="1" 前提） */
  .lottie-icon.anim-ready .ic-ops .wave {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
  }

  /* ==========================================
     企画・要件定義 — ボード右で人が会話（吹き出しが交互ポップ）、会話に連れて4つのチェックが入る
  ========================================== */
  .lottie-icon.in-view .ic-plan .plan-doc { animation: plan-float 4s ease-in-out infinite; }
  .lottie-icon.in-view .ic-plan .plan-shine { animation: plan-shine 3s ease-in-out infinite; }
  /* 会話：2人の吹き出しが交互にポップ（ループ） */
  .lottie-icon.anim-ready.in-view .ic-plan .bubA { animation: svc-pop 3.4s cubic-bezier(.34,1.56,.64,1) .3s infinite; }
  .lottie-icon.anim-ready.in-view .ic-plan .bubB { animation: svc-pop 3.4s cubic-bezier(.34,1.56,.64,1) 1.7s infinite; }
  /* 会話に連れてチェックが入る（A発話→2件 / B発話→2件、描き終わったら保持） */
  .lottie-icon.anim-ready.in-view .ic-plan .chk-1 { animation: chk-draw .45s ease-out .6s both; }
  .lottie-icon.anim-ready.in-view .ic-plan .chk-2 { animation: chk-draw .45s ease-out 1.1s both; }
  .lottie-icon.anim-ready.in-view .ic-plan .chk-3 { animation: chk-draw .45s ease-out 2.0s both; }
  .lottie-icon.anim-ready.in-view .ic-plan .chk-4 { animation: chk-draw .45s ease-out 2.5s both; }

  /* ==========================================
     設計・開発 — コード行が順次描かれ、カーソルが移動してクリック
  ========================================== */
  .lottie-icon.anim-ready.in-view .ic-dev .code-line {
    animation: svc-line-draw .65s cubic-bezier(.4, 0, .2, 1) both;
  }
  .lottie-icon.anim-ready.in-view .ic-dev .cl1 { animation-delay: 0s; }
  .lottie-icon.anim-ready.in-view .ic-dev .cl2 { animation-delay: .38s; }
  .lottie-icon.anim-ready.in-view .ic-dev .cl3 { animation-delay: .72s; }
  /* キーフラッシュ: コード行描画と同タイミング */
  .lottie-icon.anim-ready.in-view .ic-dev .key-a1 { animation: key-tap .65s ease-out 0s both; }
  .lottie-icon.anim-ready.in-view .ic-dev .key-a2 { animation: key-tap .65s ease-out .38s both; }
  .lottie-icon.anim-ready.in-view .ic-dev .key-a3 { animation: key-tap .65s ease-out .72s both; }
  .lottie-icon.in-view .ic-dev .mouse  { animation: dev-cursor 4s cubic-bezier(.4, 0, .2, 1) 1.2s infinite; }
  .lottie-icon.in-view .ic-dev .click-ring { animation: svc-click 4s ease-in-out 1.2s infinite; }

  /* ==========================================
     保守・運用 — 波形パスが描画 → ドットが走る → LED 明滅
  ========================================== */
  .lottie-icon.anim-ready.in-view .ic-ops .wave {
    animation: svc-wave-draw 1s cubic-bezier(.4, 0, .2, 1) .2s both;
  }
  .lottie-icon.in-view .ic-ops .wave-dot { animation: ops-wave 2.4s linear 1.3s infinite; }
  .lottie-icon.in-view .ic-ops .led  { animation: svc-led 1.8s ease-in-out 1.4s infinite; }
  .lottie-icon.in-view .ic-ops .led2 { animation: svc-led-amber 1.8s ease-in-out 2.3s infinite; }
}

/* ======================
   keyframes
====================== */

/* キータップ: 点灯してわずかに残る */
@keyframes key-tap {
  0%   { opacity: 0; }
  12%  { opacity: 0.85; }
  50%  { opacity: 0.18; }
  100% { opacity: 0.12; }
}

/* チェックマークを描く（pathLength="1" 前提） */
@keyframes chk-draw {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}

/* クリップボードがふわふわ浮遊（上下＋わずかな回転、4s無限ループ） */
@keyframes plan-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-12px) rotate(1deg); }
}

/* 用紙の光沢が点滅（透明→15%→透明、3s無限ループ） */
@keyframes plan-shine {
  0%, 100% { opacity: 0; }
  50%      { opacity: 0.15; }
}

/* コード行を左→右へ描く（pathLength="1" 前提） */
@keyframes svc-line-draw {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}

/* 波形パスを描き出す（初回のみ、pathLength="1" 前提） */
@keyframes svc-wave-draw {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}

/* 吹き出しが下から浮き上がってポップ（スプリング感） */
@keyframes svc-pop {
  0%        { opacity: 0;   transform: scale(0)    translateY(3px); }
  10%       { opacity: 1;   transform: scale(1.14) translateY(-1px); }
  20%       { opacity: 1;   transform: scale(0.97) translateY(0); }
  28%, 44%  { opacity: 1;   transform: scale(1)    translateY(0); }
  55%       { opacity: 0;   transform: scale(.72)  translateY(2px); }
  100%      { opacity: 0;   transform: scale(.72)  translateY(2px); }
}

/* iMac画面内のカーソル移動（小さい画面に合わせて控えめな移動量） */
@keyframes dev-cursor {
  0%,  14%  { transform: translate(0, 0); }
  28%, 48%  { transform: translate(1.5px, 2px); }
  62%, 100% { transform: translate(0, 0); }
}

/* カーソル移動（2回の往復、オーバーシュート気味） */
@keyframes svc-cursor {
  0%,  14%  { transform: translate(0, 0); }
  28%, 48%  { transform: translate(2px, 4px); }
  62%, 100% { transform: translate(0, 0); }
}

/* クリック波紋（3回、間隔にリズム感） */
@keyframes svc-click {
  0%,  8%  { transform: scale(.3); opacity: 0; }
  12%      { opacity: .7; }
  24%      { transform: scale(2.4); opacity: 0; }
  38%, 46% { transform: scale(.3); opacity: 0; }
  50%      { opacity: .65; }
  63%      { transform: scale(2.4); opacity: 0; }
  75%, 82% { transform: scale(.3); opacity: 0; }
  86%      { opacity: .45; }
  94%      { transform: scale(2.0); opacity: 0; }
  100%     { transform: scale(.3); opacity: 0; }
}

/* 緑ドットが滑らか波形を走る（パーセント単位でスケール対応: x=3→25, viewBox 28×26） */
@keyframes ops-wave {
  0%   { transform: translate(0, 0);                  opacity: 0; }
  5%   { opacity: 1; }
  14%  { transform: translate(10.7%, 0); }
  28%  { transform: translate(23.2%, -9.6%); }
  43%  { transform: translate(35.7%, 11.5%); }
  51%  { transform: translate(42.9%, 0); }
  94%  { transform: translate(78.6%, 0);               opacity: 1; }
  100% { transform: translate(78.6%, 0);               opacity: 0; }
}

/* 緑ドットが波形路線を走る（旧・未使用） */
@keyframes svc-wave {
  0%   { transform: translate(0, 0);     opacity: 0; }
  6%   { opacity: 1; }
  25%  { transform: translate(3.5px, 0); }
  36%  { transform: translate(5px,  -2.5px); }
  46%  { transform: translate(6.4px, 2.3px); }
  55%  { transform: translate(7.7px, 0); }
  94%  { transform: translate(14px,  0);     opacity: 1; }
  100% { transform: translate(14px,  0);     opacity: 0; }
}

/* LED 明滅（グロー付き） */
@keyframes svc-led {
  0%, 100% { opacity: 1;   filter: drop-shadow(0 0 1.5px var(--green)); }
  50%      { opacity: .18; filter: none; }
}

/* アンバーLED 明滅（警告ステータス色） */
@keyframes svc-led-amber {
  0%, 100% { opacity: 1;   filter: drop-shadow(0 0 1.5px rgba(230,152,10,.9)); }
  50%      { opacity: .18; filter: none; }
}