/* =========================================
   _inview.scss
   Inview Animation (Sass版)
   JS依存なし（IntersectionObserver前提）
   ========================================= */

// 変数
$inview-transition: 0.8s;
$inview-ease: ease;
$inview-opacity-hidden: 0;
$inview-opacity-visible: 1;
$inview-slide-y-up: 40px;
$inview-slide-y-fade: 60px;
$inview-slide-x-left: -40px;
$inview-slide-x-right: 40px;
$inview-scale-zoom: 0.8;

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

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

.inview.is-inview {
  opacity: $inview-opacity-visible;
}

// -----------------------------------------
// Fade
// -----------------------------------------
.inview--fade {
  transition: opacity $inview-transition $inview-ease;
}

// -----------------------------------------
// Slide Up
// -----------------------------------------
.inview--up {
  transform: translateY($inview-slide-y-up);
  transition:
    opacity $inview-transition $inview-ease,
    transform $inview-transition $inview-ease;
}

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

// -----------------------------------------
// Fade + Slide Up
// -----------------------------------------
.inview--fade-up {
  transform: translateY($inview-slide-y-fade);
  transition:
    opacity $inview-transition $inview-ease,
    transform $inview-transition $inview-ease;
}

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

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

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

// -----------------------------------------
// Slide Left
// -----------------------------------------
.inview--left {
  transform: translateX($inview-slide-x-left);
  transition:
    opacity $inview-transition $inview-ease,
    transform $inview-transition $inview-ease;
}

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

// -----------------------------------------
// Slide Right
// -----------------------------------------
.inview--right {
  transform: translateX($inview-slide-x-right);
  transition:
    opacity $inview-transition $inview-ease,
    transform $inview-transition $inview-ease;
}

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