/* =========================================================================
   Herci — how.css  [SIR#86 FB-C Stage B]
   /about の「How it works」パーシャル(partials/how_it_works.html)が使う
   約20分先回り検知図(#herci-dia)のアニメーションCSS。
   ★これは lp-new.html のインライン<style>(21-89行)からの転記(複製)。
   LP は byte一致維持のためインラインCSSをそのまま保持し、本ファイルは /about 専用に読込む。
   図のHTML/数値/注記の SSoT は partials/how_it_works.html(HTML)側。CSSアニメは安定のため複製で許容。
   JSトリガー(herci-dia-anim/play付与)は base.html 共通JS(initDiagram)が担当。
   ========================================================================= */
.herci-dia-sp { display: block; }
  .herci-dia-pc { display: none; }
  @media (min-width: 760px) {
    .herci-dia-sp { display: none; }
    .herci-dia-pc { display: block; }
  }
  /* [SIR#86 v3・FB②-⑧] SP(図はSP版svg)で図下※注記が図内svg文字より大きく見えるため縮小。インラインfont-size:12pxを上書き。 */
  @media (max-width: 759px) {
    .herci-dia-note { font-size: 10.5px !important; }
  }
  @keyframes herciPing {
    0%   { transform: scale(.6); opacity: .55; }
    70%  { opacity: 0; }
    100% { transform: scale(2.2); opacity: 0; }
  }
  @keyframes herciDot {
    0%, 100% { opacity: 1; }
    50%      { opacity: .35; }
  }
  @keyframes herciTileReveal {
    0%, 14%  { opacity: 0; transform: translateY(10px) scale(.96); }
    30%, 86% { opacity: 1; transform: translateY(0) scale(1); }
    100%     { opacity: 0; transform: translateY(10px) scale(.96); }
  }
  @keyframes herciDetectFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
  }
  @keyframes herciGlow {
    0%, 100% { box-shadow: 0 14px 28px rgba(0,0,0,.32), 0 0 0 2px rgba(245,146,30,.5); }
    50%      { box-shadow: 0 14px 28px rgba(0,0,0,.32), 0 0 0 3px rgba(245,146,30,.9); }
  }
  @media (prefers-reduced-motion: no-preference) {
    .herci-anim-msg { animation: herciDetectFloat 3.2s ease-in-out infinite, herciGlow 2.6s ease-in-out infinite; }
  }
  @keyframes herciStageIn {
    from { opacity: 0; transform: translateY(7px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  /* [SIR#86 v3・FB4] 通常フェード(opacityのみ・上昇なし)。hs3b(○)/hs3c(手遅れテキスト)で使用 */
  @keyframes herciFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  @keyframes herciPopIn {
    0%   { opacity: 0; transform: scale(.5); }
    72%  { transform: scale(1.12); }
    100% { opacity: 1; transform: scale(1); }
  }
  @keyframes herciPingOnce {
    0%   { transform: scale(.55); opacity: .6; }
    100% { transform: scale(2.4); opacity: 0; }
  }
  @keyframes herciDotPulse {
    0%, 100% { transform: scale(1);    opacity: 1; }
    50%      { transform: scale(1.22); opacity: .65; }
  }
  @keyframes herciWipeRight {
    from { clip-path: inset(-20% 100% -20% 0); }
    to   { clip-path: inset(-20% 0 -20% 0); }
  }
  @media (prefers-reduced-motion: no-preference) {
    #herci-dia.herci-dia-anim .hstage,
    #herci-dia.herci-dia-anim .hping { opacity: 0; }
    #herci-dia.herci-dia-anim .hdraw { clip-path: inset(-20% 100% -20% 0); }
    #herci-dia.herci-dia-play .hs1   { animation: herciStageIn .7s ease both; }
    #herci-dia.herci-dia-play .hs2   { animation: herciStageIn .7s ease .95s both; }
    #herci-dia.herci-dia-play .hs2b  { animation: herciStageIn .7s ease 1.85s both; }
    #herci-dia.herci-dia-play .hs3   { animation: herciStageIn .7s ease 2.85s both; }
    #herci-dia.herci-dia-play .hdraw { animation: herciWipeRight 1.3s ease-in-out 3.45s both; }
    /* [SIR#86 v3・FB4] hs3b=○(到達点)のみに縮小し通常フェード(herciFadeIn)化。開始4.95s→4.75s / .7s→.55s。手遅れテキストはhs3cへ分離 */
    #herci-dia.herci-dia-play .hs3b  { animation: herciFadeIn .55s ease 4.75s both; }
    /* [SIR#86 v3・FB4] hs3c=手遅れテキスト。○の後に通常フェード(開始5.35s / .6s) */
    #herci-dia.herci-dia-play .hs3c  { animation: herciFadeIn .6s ease 5.35s both; }
    #herci-dia.herci-dia-play .hs4   { animation: herciStageIn .7s ease 5.95s both; }
    #herci-dia.herci-dia-play .hs4b  { animation: herciStageIn .7s ease 6.85s both; }
    #herci-dia.herci-dia-play .hs5   { animation: herciStageIn .7s ease 8.1s both; }
    #herci-dia.herci-dia-play .hs6   { animation: herciPopIn .6s cubic-bezier(.34,1.56,.64,1) 9.05s both; transform-box: fill-box; transform-origin: center; }
    #herci-dia.herci-dia-play .hping { animation: herciPingOnce 1.7s ease-out 7.6s infinite both; transform-box: fill-box; transform-origin: center; }
    #herci-dia.herci-dia-play .hdot  { animation: herciDotPulse 1.5s ease-in-out 7.6s infinite both; transform-box: fill-box; transform-origin: center; }
  }