/* ============================================================
   モーション（採用案のみ）

   すべて「読み込み時に1回」か「操作への反応」。常時ループは使わない。
   ※ c-base → c-shell → c-error → c-form → c-blocks → c-layout-full の後に読み込むこと
   ============================================================ */

/* ============================================================
   1. 入力欄のフォーカス：緑のリングが広がる
   ============================================================ */
.l-form input[type='text'],
.l-form input[type='tel'],
.l-form input[type='email'],
.l-form input[type='date'],
.c-question input[type='text'],
.c-question textarea {
  transition:
    border-color 0.18s,
    background-color 0.18s,
    box-shadow 0.18s;
}

.l-form input:focus,
.c-question input[type='text']:focus,
.c-question textarea:focus {
  box-shadow: 0 0 0 4px rgba(60, 180, 100, 0.14);
}

/* ============================================================
   2. 選択肢の押し込み
   ============================================================ */
.l-form__col-2 label,
.c-question input[type='checkbox'] + label {
  transition:
    border-color 0.16s,
    background-color 0.16s,
    color 0.16s,
    transform 0.1s,
    box-shadow 0.16s;
}

.l-form__col-2 label:active,
.c-question input[type='checkbox'] + label:active {
  transform: scale(0.97);
}

/* ============================================================
   3. ステッパー
   現在のステップへ向かうバーだけが伸びる。
   すでに通過した区間のバーは最初から表示されたまま
   ============================================================ */
.c-stepper li.c-stepper__wip::after {
  transform-origin: left center;
  animation: om-bar-grow 0.55s cubic-bezier(0.25, 0.8, 0.3, 1) both;
}

@keyframes om-bar-grow {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* 現在地の丸：1度だけリングが広がって止まる */
.c-stepper li.c-stepper__wip::before {
  animation: om-ring 0.6s ease-out 0.45s both;
}

@keyframes om-ring {
  from {
    box-shadow: 0 0 0 0 rgba(60, 180, 100, 0.34);
  }
  60% {
    box-shadow: 0 0 0 11px rgba(60, 180, 100, 0.1);
  }
  to {
    box-shadow: 0 0 0 6px rgba(60, 180, 100, 0.16);
  }
}

/* ============================================================
   4. カードが下からフェードイン（読み込み時に1回）
   ============================================================ */
.l-form__container,
.c-question,
.l-thanks__container {
  animation: om-rise 0.42s cubic-bezier(0.25, 0.8, 0.3, 1) both;
}

.l-form__container:nth-of-type(2) {
  animation-delay: 0.07s;
}
.l-form__container:nth-of-type(3) {
  animation-delay: 0.14s;
}

.l-info,
.l-submit {
  animation: om-rise 0.42s cubic-bezier(0.25, 0.8, 0.3, 1) 0.18s both;
}

@keyframes om-rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
   5. 完了アイコン：STEP4の封筒もSTEP6と同じ動きに
   ============================================================ */
.l-thanks--pending .l-thanks__title::before {
  animation: om-pop 0.5s cubic-bezier(0.2, 1.5, 0.4, 1) 0.1s both;
}

@keyframes om-pop {
  from {
    transform: scale(0.4);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* ============================================================
   6. ツールチップは下から少し持ち上がって出る
   ============================================================ */
.tooltip .tooltiptext {
  transform: translateX(-50%) translateY(3px);
  transition:
    opacity 0.16s,
    visibility 0.16s,
    transform 0.16s;
}

.tooltip:hover .tooltiptext {
  transform: translateX(-50%) translateY(0);
}

/* ============================================================
   7. 動きを控える設定の環境ではすべて無効化
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}