/* =========================================================
   HP制作テンプレート アニメーション基盤 CSS
   ease curves: cubic-bezier(.2,.8,.2,1) を主軸に「AI感のない」滑らかさへ
   ========================================================= */

/* ---------- 1. 文字スタガー ---------- */
.anim-stagger > span {
  opacity: 0;
  transform: translateY(20px) scale(0.92);
  transition:
    opacity 0.7s cubic-bezier(.2,.8,.2,1),
    transform 0.8s cubic-bezier(.2,.8,.2,1);
  will-change: transform, opacity;
}
.anim-stagger.is-in > span {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ---------- 2. スクロールReveal ---------- */
.anim-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.9s cubic-bezier(.2,.8,.2,1),
    transform 0.9s cubic-bezier(.2,.8,.2,1);
  will-change: transform, opacity;
}
.anim-reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- 3. 数値カウントアップ ---------- */
.anim-count {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  display: inline-block;
}

/* ---------- 4. Magnetic Hover ---------- */
.magnetic-hover {
  transition: transform 0.25s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}

/* ---------- 5. カスタムカーソル ---------- */
.cursor-follow {
  position: fixed;
  top: 0;
  left: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid rgba(20, 20, 20, 0.85);
  background: transparent;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition:
    opacity 0.25s ease,
    width 0.25s cubic-bezier(.2,.8,.2,1),
    height 0.25s cubic-bezier(.2,.8,.2,1),
    background-color 0.25s ease,
    border-color 0.25s ease;
  mix-blend-mode: difference;
  will-change: transform;
}
.cursor-follow.is-on { opacity: 1; }
.cursor-follow.is-hover {
  width: 56px;
  height: 56px;
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.9);
}

/* タッチデバイスではカーソル非表示 */
@media (pointer: coarse) {
  .cursor-follow { display: none !important; }
}

/* ---------- アクセシビリティ ---------- */
@media (prefers-reduced-motion: reduce) {
  .anim-stagger > span,
  .anim-reveal,
  .magnetic-hover,
  .cursor-follow {
    transition: none !important;
    animation: none !important;
  }
  .anim-stagger > span { opacity: 1; transform: none; }
  .anim-reveal { opacity: 1; transform: none; }
  .cursor-follow { display: none !important; }
}