/* =========================================
   Inview Animation
   JS依存なし（IntersectionObserver前提）
   ========================================= */

/* -----------------------------------------
   Trigger（JS連携）
----------------------------------------- */
.js-inview {
  will-change: opacity, transform;
}

/* -----------------------------------------
   Base（共通の初期状態）
----------------------------------------- */
.inview {
  opacity: 0;
}

/* 表示状態 */
.inview.is-inview {
  opacity: 1;
}

/* -----------------------------------------
   Fade
----------------------------------------- */
.inview--fade {
  transition: opacity 0.8s ease;
}

/* -----------------------------------------
   Slide Up
----------------------------------------- */
.inview--up {
  transform: translateY(40px);
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}

.inview--up.is-inview {
  transform: translateY(0);
}

/* -----------------------------------------
   Fade + Slide Up
----------------------------------------- */
.inview--fade-up {
  transform: translateY(60px);
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}

.inview--fade-up.is-inview {
  transform: translateY(0);
}

/* -----------------------------------------
   Zoom
----------------------------------------- */
.inview--zoom {
  transform: scale(0.8);
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}

.inview--zoom.is-inview {
  transform: scale(1);
}

/* -----------------------------------------
   Slide Left
----------------------------------------- */
.inview--left {
  transform: translateX(-40px);
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}

.inview--left.is-inview {
  transform: translateX(0);
}

/* -----------------------------------------
   Slide Right
----------------------------------------- */
.inview--right {
  transform: translateX(40px);
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}

.inview--right.is-inview {
  transform: translateX(0);
}