/* ============================================================================
   anim.css — 動きの強化室（後載せ層・竹案）
   すべてのセレクタは anim.js が付与する data-anim* 属性か .anim- 接頭辞クラスに
   限定する。素のセレクタで既存要素を隠さない＝ anim.js を外せば何も当たらず元通り。
   イージングは2種だけ: 署名 = サイト既存の cubic-bezier(.22,1,.36,1) / 機能 = ease。
   ========================================================================== */

:root {
  --anim-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --anim-dur: 0.6s;
  --anim-accent: #3783d7;
  --anim-navy: #1b4f8f;
}

/* ---- 1. ナビ: スクロール進捗の2px線（anim.js が body 末尾に生成） ---------- */
.anim-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 60;
  pointer-events: none;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--anim-accent), var(--anim-navy));
}

/* ---- 2. ナビ: リンク下線が左から伸びる（hover:hover 端末のみ） ------------- */
[data-anim='link'] {
  position: relative;
}
[data-anim='link']::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 1.5px;
  background: var(--anim-accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.35s var(--anim-ease);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  [data-anim='link']:hover::after,
  [data-anim='link']:focus-visible::after {
    transform: scaleX(1);
  }
}

/* ---- 3. ヒーロー: 見出しの type-reveal に続く二段目（eyebrow/pills→棚→本文→CTA） */
@keyframes anim-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
[data-anim='hero'] {
  animation: anim-rise 0.8s var(--anim-ease) both;
  animation-delay: var(--anim-d, 0s);
}

/* ---- 4. 節見出し: eyebrow の線が伸び、説明文が一拍遅れて着地 ---------------
   発火は既存 Reveal の .reveal-visible（読むだけ。書き込まない）。 */
[data-anim='rule'] {
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.6s var(--anim-ease) 0.25s;
}
.reveal-visible [data-anim='rule'] {
  transform: none;
}
[data-anim='desc'] {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity var(--anim-dur) var(--anim-ease) 0.18s,
    transform var(--anim-dur) var(--anim-ease) 0.18s;
}
.reveal-visible [data-anim='desc'] {
  opacity: 1;
  transform: none;
}

/* ---- 5. 塊で出ていたリスト/グリッドの子要素を 55ms ずつ順に着地 -------------
   対象: Pricing（入っているもの・必要な環境）/ FAQ / MadeWith 使った動き / Footer */
[data-anim-item] {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--anim-dur) var(--anim-ease),
    transform var(--anim-dur) var(--anim-ease);
  transition-delay: calc(var(--anim-i, 0) * 55ms);
}
[data-anim-in] [data-anim-item] {
  opacity: 1;
  transform: none;
}

/* ---- 6. CTA: ホバーで光の帯が左→右に一度だけ走る ----------------------------
   .cta-grad が付いている間だけ効く（状態でクラスが外れる要素には当たらない）。 */
[data-anim='cta'].cta-grad {
  position: relative;
  overflow: hidden;
}
[data-anim='cta'].cta-grad::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 36%;
  background: linear-gradient(
    100deg,
    rgba(254, 254, 254, 0) 0%,
    rgba(254, 254, 254, 0.38) 50%,
    rgba(254, 254, 254, 0) 100%
  );
  transform: translateX(-140%) skewX(-18deg);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  [data-anim='cta'].cta-grad:hover::after {
    transform: translateX(420%) skewX(-18deg);
    transition: transform 0.75s ease;
  }
}

/* ---- 動きを減らす設定: この層は全停止（anim.js 側も属性を付けない二重ガード） */
@media (prefers-reduced-motion: reduce) {
  .anim-progress {
    display: none;
  }
  [data-anim],
  [data-anim-item] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  [data-anim='link']::after,
  [data-anim='cta'].cta-grad::after {
    display: none;
  }
}