/* スクロールアニメーション基本スタイル */
.scroll-fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}

.scroll-fade-in.active {
  opacity: 1;
  transform: translateY(0);
}

.scroll-scale-in {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.scroll-scale-in.active {
  opacity: 1;
  transform: scale(1);
}

.scroll-rotate-in {
  opacity: 0;
  transform: perspective(1000px) rotateY(5deg);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.scroll-rotate-in.active {
  opacity: 1;
  transform: perspective(1000px) rotateY(0);
}

.scroll-bounce-in {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s ease-out,
    transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.scroll-bounce-in.active {
  opacity: 1;
  transform: translateY(0);
}

/* 遅延アニメーション */
.delay-100 {
  transition-delay: 0.15s !important;
}
.delay-200 {
  transition-delay: 0.3s !important;
}
.delay-300 {
  transition-delay: 0.45s !important;
}
.delay-400 {
  transition-delay: 0.6s !important;
}
.delay-500 {
  transition-delay: 0.75s !important;
}

/* パララックス効果 */
.parallax-bg {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transition: background-position 0.3s ease;
}

/* ホバーエフェクト強化 */
.hover-float {
  transition: transform 0.3s ease;
}

.hover-float:hover {
  transform: translateY(-5px);
}

/* アニメーション */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* フェードイン・スケール・回転・バウンスアニメーション */
.animate-in-down,
.animate-in-up,
.animate-in-left,
.animate-in-right {
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease-out, transform 1s ease-out, visibility 1s ease-out;
  will-change: opacity, transform, visibility;
}

.animate-in-down {
  transform: translate3d(0, -40px, 0);
}

.animate-in-up {
  transform: translate3d(0, 40px, 0);
}

.animate-in-left {
  transform: translate3d(-40px, 0, 0);
}

.animate-in-right {
  transform: translate3d(40px, 0, 0);
}

.animate-in-down.is-visible,
.animate-in-up.is-visible,
.animate-in-left.is-visible,
.animate-in-right.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  visibility: visible;
}

/* フロートアニメーション */
.float-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.float-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 遅延クラス */
.delay-1 {
  transition-delay: 0.3s;
}
.delay-2 {
  transition-delay: 0.6s;
}
.delay-3 {
  transition-delay: 0.9s;
}