/*▼オブジェクトモーション▼*/

[class*="anim-"] {opacity: 0;will-change: opacity, transform;}
[class*="anim-"].is-active {opacity: 1; transition: opacity 0.4s ease-out, transform 0.4s ease-out; }
.anim-slide-left.is-active  { animation: slideInLeft 2s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.anim-slide-right.is-active { animation: slideInRight 2s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.anim-slide-up.is-active    { animation: slideInUp 2s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.anim-slide-down.is-active  { animation: slideInDown 2s cubic-bezier(0.22, 1, 0.36, 1) forwards; }

@keyframes slideInLeft {
  0%   { transform: translateX(-110vw); opacity: 1; }
  100% { transform: translateX(0);      opacity: 1; }
}
@keyframes slideInRight {
  0%   { transform: translateX(110vw); opacity: 1; }
  100% { transform: translateX(0);      opacity: 1; }
}
@keyframes slideInUp {
  0%   { transform: translateY(110vh); opacity: 1; }
  100% { transform: translateY(0);      opacity: 1; }
}
@keyframes slideInDown {
  0%   { transform: translateY(-110vh); opacity: 1; }
  100% { transform: translateY(0);      opacity: 1; }
}
.anim-fade-left  { transform: translateX(-30px); }
.anim-fade-right { transform: translateX(30px); }
.anim-fade-up    { transform: translateY(30px); }
.anim-fade-down  { transform: translateY(-30px); }
.anim-fade-left.is-active,
.anim-fade-right.is-active,
.anim-fade-up.is-active,
.anim-fade-down.is-active {transform: translate(0, 0);}
.anim-flip-up.is-active {animation: flipInX 1s forwards;backface-visibility: visible !important;}
.anim-flip-down.is-active {animation: flipInXReverse 1s forwards;backface-visibility: visible !important;}
@keyframes flipInX {
  0%   { transform: perspective(600px) rotateX(90deg); opacity: 0; }
  100% { transform: perspective(600px) rotateX(0deg);  opacity: 1; }
}
@keyframes flipInXReverse {
  0%   { transform: perspective(600px) rotateX(-90deg); opacity: 0; }
  100% { transform: perspective(600px) rotateX(0deg);   opacity: 1; }
}

/* =========================================================
 * 常時アニメーション負荷対策
 * 初期状態は動かし、画面外に出た時だけ停止
========================================================= */

(() => {
  document.addEventListener('DOMContentLoaded', () => {
    const motionTargets = document.querySelectorAll(
      '.be-main-visual, .be-loop-hero, .fc_area'
    );

    if (!motionTargets.length) return;

    const motionObserver = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          entry.target.classList.remove('is-outview');
        } else {
          entry.target.classList.add('is-outview');
        }
      });
    }, {
      root: null,
      rootMargin: '200px 0px 200px 0px',
      threshold: 0
    });

    motionTargets.forEach((target) => {
      motionObserver.observe(target);
    });
  });
})();