/* ========================================
   スクロール連動 フェードインアニメーション
   scroll-anim.css
   ======================================== */

/* ---- 共通の初期状態 ---- */
/* JS が .scroll-anim クラスを持つ要素を監視し、
   画面に入ったら .is-visible を付与する          */

[data-scroll] {
    opacity: 0;
    transition-property: opacity, transform;
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    transition-duration: 0.75s;
    /* ← 速さの調整はここ */
    transition-delay: var(--delay, 0s);
    /* JS が --delay をセットする場合に使用 */
}

/* 画面に入ったら表示 */
[data-scroll].is-visible {
    opacity: 1;
    transform: none !important;
    /* すべてのエフェクトを解除 */
}


/* ========================================
   エフェクト種類（data-scroll="xxx" で指定）
   ======================================== */

/* ふわっと下から（デフォルト / data-scroll="up"） */
[data-scroll],
[data-scroll="up"] {
    transform: translateY(40px);
}

/* 上から */
[data-scroll="down"] {
    transform: translateY(-40px);
}

/* 左から */
[data-scroll="left"] {
    transform: translateX(-50px);
}

/* 右から */
[data-scroll="right"] {
    transform: translateX(50px);
}

/* ズームイン */
[data-scroll="zoom"] {
    transform: scale(0.88);
}

/* フェードのみ（動かさない） */
[data-scroll="fade"] {
    transform: none;
}

/* 少し回転しながら */
[data-scroll="rotate"] {
    transform: translateY(30px) rotate(-4deg);
}


/* ========================================
   子要素を順番に表示したいとき
   親に data-scroll-group を付けると
   子の [data-scroll] に自動でディレイがかかる
   （delay は JS が付与）
   ======================================== */


/* ========================================
   アクセシビリティ：動きを減らす設定を尊重
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    [data-scroll] {
        transition: opacity 0.3s ease;
        transform: none;
    }
}



/* ========================================
   スクロールアウト（sticky scroll と連動）
   data-scroll-out="left/right/up/down" で指定
   ======================================== */

[data-scroll-out] {
  transition: opacity 0.75s cubic-bezier(0.77, 0, 0.18, 1),
              transform 0.75s cubic-bezier(0.77, 0, 0.18, 1);
}

/* アウト発火：JS が is-scroll-out を付与 */
[data-scroll-out="left"].is-scroll-out {
  opacity: 0 !important;
  transform: translateX(-110%) !important;
}
[data-scroll-out="right"].is-scroll-out {
  opacity: 0 !important;
  transform: translateX(110%) !important;
}
[data-scroll-out="up"].is-scroll-out {
  opacity: 0 !important;
  transform: translateY(-80%) !important;
}
[data-scroll-out="down"].is-scroll-out {
  opacity: 0 !important;
  transform: translateY(80%) !important;
}

/* アウト後のリセット（scroll-back 対応） */
[data-scroll-out].is-scroll-back {
  opacity: 1 !important;
  transform: translateX(0) !important;
}