@charset "utf-8";
/* ============================================================
   animation.css — アニメーション定義
   ※ 中身のテキスト/画像が変わっても同じ動きが適用されるよう、
     すべて「クラス + --delay 変数」だけで完結させています。
   ============================================================ */

/* --- バウンス表示 -------------------------------------------- */
@keyframes lp-bounce-in{
  0%   { opacity:0; transform: translateY(-38px) scale(.86); }
  55%  { opacity:1; transform: translateY(10px)  scale(1.04); }
  75%  {            transform: translateY(-5px)  scale(.985); }
  90%  {            transform: translateY(2px)   scale(1.005); }
  100% { opacity:1; transform: translateY(0)     scale(1); }
}

/* --- ふわっと表示（スクロール出現用） ------------------------ */
@keyframes lp-fade-up{
  from { opacity:0; transform: translateY(28px); }
  to   { opacity:1; transform: translateY(0); }
}

/* 発火前の初期状態。JSで .is-in が付くと再生される */
[data-anim]{ opacity:0; will-change: transform, opacity; }
[data-anim].is-in{ animation-delay: var(--delay, 0s); animation-fill-mode: both; }

[data-anim="bounce"].is-in{ animation-name: lp-bounce-in; animation-duration:.9s;  animation-timing-function: var(--ease-bounce); }
[data-anim="fade-up"].is-in{ animation-name: lp-fade-up;  animation-duration:.7s;  animation-timing-function: var(--ease-bounce); }

/* --- ボタンホバー（ゆっくり・ふんわり拡大） ------------------ */
.c-btn{ transition: transform .45s var(--ease-soft), filter .45s ease; }
@media (hover:hover){
  .c-btn:hover{ transform: scale(1.06); filter: brightness(1.04); }
}

/* --- モーション低減設定への配慮 ------------------------------ */
@media (prefers-reduced-motion: reduce){
  [data-anim]{ opacity:1 !important; animation:none !important; }
  .c-btn{ transition:none }
  .c-btn:hover{ transform:none }
}