/* =========================================================
   anim.css  —  セクションの動き（TOP の FV 以外）

   ここにある指定はすべて「JS が付けるクラス（an-◯◯）」が起点です。
   assets/js/anim.js が何もしなければ 1px も変わりません。
   「動きを減らす」設定のときは anim.js が最初に return するので、
   クラスが付かず、止まった見た目のままになります。

   外したいとき：
     ・このファイルの <link> を消す
     ・assets/js/anim.js の <script> を消す
   これだけで元に戻ります。
   ========================================================= */


/* ---------------------------------------------------------
   H) セクション見出しの罫線が左から伸びる（全ページ）
   --------------------------------------------------------- */
.js .an-rule {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1s cubic-bezier(.22, .61, .36, 1) .1s;
}

.js .an-rule.is-on { transform: none; }


/* ---------------------------------------------------------
   C) 「このページの内容」「3つの入口」のカードが順に起き上がり、
      サムネイルがゆっくり寄りから戻る
   --------------------------------------------------------- */
.js .an-pn {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .8s ease, transform .9s cubic-bezier(.22, .61, .36, 1);
}

.js .an-pn.is-on { opacity: 1; transform: none; }

.js .an-pn .pn__thumb img {
  transform: scale(1.16);
  transition: transform 1.3s cubic-bezier(.22, .61, .36, 1);
}

.js .an-pn.is-on .pn__thumb img { transform: none; }


/* ---------------------------------------------------------
   G) JUDGEとは「すること／しないこと」の箇条書きが順に入り、
      アイコンが少し遅れて浮かぶ
   --------------------------------------------------------- */
.js .an-li {
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22, .61, .36, 1);
}

.js .stance__panel--dont .an-li { transform: translateX(14px); }

.js .an-li.is-on { opacity: 1; transform: none; }

.js .an-li::before {
  opacity: 0;
  transform: scale(.5);
  transition: opacity .5s ease .15s, transform .5s cubic-bezier(.22, .61, .36, 1) .15s;
}

.js .an-li.is-on::before { opacity: 1; transform: none; }


/* ---------------------------------------------------------
   E) 手順の縦線が上から引かれる
      ・お問い合わせ … 1本の長い線（.steps::before）
      ・ご相談と料金 … 各段のあいだの短い線（.steps7 li::before）
   --------------------------------------------------------- */
.js .an-steps::before {
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 1.9s cubic-bezier(.33, .9, .3, 1) .2s;
}

.js .an-steps.is-on::before { transform: none; }

.js .an-seg::before {
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform .4s ease;
}

.js .an-seg.is-on::before { transform: none; }


/* ---------------------------------------------------------
   F) CTA の写真がゆっくり寄り引きする
      transform はホバー拡大が使っているので、こちらは scale /
      translate プロパティを使う（両方が同時に効く）
   --------------------------------------------------------- */
@keyframes anKenburns {
  0%   { scale: 1;     translate: 0 0; }
  50%  { scale: 1.075; translate: -1.2% -1.4%; }
  100% { scale: 1;     translate: 0 0; }
}

.js .an-cta.is-on .cta__bg {
  animation: anKenburns 28s ease-in-out infinite;
}


/* ---------------------------------------------------------
   D) 資料室の表紙に、金の光がゆっくりすべる
   --------------------------------------------------------- */
.js .an-cover::after {
  content: "";
  position: absolute;
  top: -60%;
  left: -135%;
  z-index: 2;
  width: 45%;
  height: 220%;
  pointer-events: none;
  transform: rotate(18deg);
  background: linear-gradient(90deg,
    rgba(232, 184, 92, 0) 0%,
    rgba(232, 184, 92, .10) 38%,
    rgba(255, 238, 200, .34) 50%,
    rgba(232, 184, 92, .10) 62%,
    rgba(232, 184, 92, 0) 100%);
}

.js .an-cover.is-on::after { animation: anSheen 7s cubic-bezier(.5, 0, .3, 1) 1.2s infinite; }

@keyframes anSheen {
  0%   { left: -135%; opacity: 0; }
  12%  { opacity: 1; }
  46%  { opacity: 1; }
  58%  { left: 150%; opacity: 0; }
  100% { left: 150%; opacity: 0; }
}


/* ---------------------------------------------------------
   A) 中立の仕組み：3本の柱を光が昇る
      anim.js が既存の柱のパスを複製して作る
   --------------------------------------------------------- */
.js .an-sparks path {
  fill: none;
  stroke: #f3d493;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: .1 .9;
  stroke-dashoffset: 1;
  opacity: 0;
}

.js .pillars.is-in .an-sparks path {
  opacity: .85;
  animation: anSpark 3.4s cubic-bezier(.45, 0, .55, 1) infinite;
}

@keyframes anSpark {
  0%   { stroke-dashoffset: 1;   opacity: 0; }
  14%  { opacity: .85; }
  70%  { opacity: .85; }
  86%  { stroke-dashoffset: .1;  opacity: 0; }
  100% { stroke-dashoffset: .1;  opacity: 0; }
}


/* ---------------------------------------------------------
   B) 22業種：コントロールタワーから3人の専門家へ信号が流れる
      描いているのは anim.js（canvas）
   --------------------------------------------------------- */
.js .an-wire {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* 図の中身は線より前に置く */
.js .an-tower .tower__inner { position: relative; z-index: 1; }


/* ---------------------------------------------------------
   I) マウスカーソルのきらきら（描いているのは anim.js）
      ヘッダー(60)やページトップ(70)より前、ローディングの幕(9999)より後ろ
   --------------------------------------------------------- */
.js .an-cursor {
  position: fixed;
  inset: 0;
  z-index: 80;
  width: 100%;
  height: 100%;
  pointer-events: none;
}



/* ---------------------------------------------------------
   J) お問い合わせ「お約束」が、上から1つずつチェックされていく
      丸の中にチェックが落ちてくるだけ。線は白のまま動かさない。
      何番目かの待ち時間は anim.js が --an-d に入れる。

      transition ではなく animation を使っている。li の
      transition-delay はスクロール表示（data-reveal-stagger）が
      先に書き込んでいて、そちらを壊さないため。
   --------------------------------------------------------- */
@keyframes anCheckPop {
  from { opacity: 0; transform: scale(.58) rotate(-16deg); }
  to   { opacity: 1; transform: none; }
}

/* JS があるときは、1つ目も他と同じ「まだ付いていない」状態から始める */
.js .an-check:first-child::before {
  background: none;
  box-shadow: inset 0 0 0 1px rgba(232, 184, 92, .6);
}

/* 丸の中に落ちてくるチェック */
.js .an-check::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  background: url("../svg/icon-first-step.svg") no-repeat center / 40px 40px;
  opacity: 0;
}

.js .an-check.is-on::after {
  animation: anCheckPop .7s cubic-bezier(.2, .9, .28, 1.4) var(--an-d, 0ms) both;
}

@media (max-width: 750px) {
  .js .an-check::after {
    width: 4.4rem;
    height: 4.4rem;
    margin-top: -2.2rem;
    background-size: 4.4rem 4.4rem;
  }
}

/* ---------------------------------------------------------
   動きを減らす設定：念のため、ここでも全部止める
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .js .an-rule,
  .js .an-pn,
  .js .an-pn .pn__thumb img,
  .js .an-li,
  .js .an-steps::before,
  .js .an-seg::before {
    opacity: 1 !important;
    transform: none !important;
  }

  .js .an-cta.is-on .cta__bg,
  .js .an-cover.is-on::after,
  .js .pillars.is-in .an-sparks path { animation: none !important; }

  .js .an-cover::after { display: none; }
  .js .an-cursor { display: none; }
  .js .an-sparks { display: none; }

  /* お約束のチェックは、動かさずに付いた状態で出す */
  .js .an-check::after,
  .js .an-check.is-on::after {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}