/**
 * animation.css
 * スクロール連動アニメーション用 共通CSS
 * animation.js とセットで使用
 */

/* ===============================
   初期状態（トリガー）
================================ */
.fadeUpTrigger,
.fadeUpTrigger-sp,
.fadeDwTrigger,
.fadeLeftTrigger,
.fadeRightTrigger,
.RightTrigger,
.strongTrigger,
.rotateRightZTrigger,
.slideInLeft-trig {
  opacity: 0;
  transform: translateZ(0);
  will-change: opacity, transform;
}

/* ===============================
   Fade Up
================================ */
.fadeUp {
  animation: fadeUp 1s ease forwards;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* SP用（必要なら duration 違いに） */
.fadeUp-sp {
  animation: fadeUp 1s ease forwards;
}

/* ===============================
   Fade Down
================================ */
.fadeDw {
  animation: fadeDw 1s ease forwards;
}

@keyframes fadeDw {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===============================
   Fade Left / Right
================================ */
.fadeLeft {
  animation: fadeLeft 1s ease forwards;
}

@keyframes fadeLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.fadeRight {
  animation: fadeRight 1s ease forwards;
}

@keyframes fadeRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ===============================
   Blur Fade
================================ */
.fadeBlur {
  animation: fadeBlur 1.2s ease forwards;
}

@keyframes fadeBlur {
  from {
    opacity: 0;
    filter: blur(15px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}

/* ===============================
   Rotate Z
================================ */
.rotateRightZ {
  animation: rotateRightZ 2.5s ease forwards;
}

@keyframes rotateRightZ {
  from {
    opacity: 0;
    transform: rotateZ(0deg);
  }
  to {
    opacity: 1;
    transform: rotateZ(360deg);
  }
}

/* ===============================
   Slide In Left（背景・見出し用）
================================ */
.slideInLeft {
  animation: slideInLeft 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}

/* ===============================
   motion軽減対応
================================ */
@media (prefers-reduced-motion: reduce) {
  .fadeUp,
  .fadeUp-sp,
  .fadeDw,
  .fadeLeft,
  .fadeRight,
  .fadeBlur,
  .rotateRightZ,
  .slideInLeft {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}