/**
 * 久留米工業大学 LP - アニメーションCSS
 * 
 * スクロールアニメーション、フェードイン効果、ホバーエフェクトを定義
 */

/* =====================================================
   1. フェードインアニメーション
   ===================================================== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

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

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

/* =====================================================
   2. アニメーションクラス
   ===================================================== */
.animate-fade-in {
  opacity: 0;
  animation: fadeInUp 0.6s ease-out forwards;
}

.animate-fade {
  opacity: 0;
  animation: fadeIn 0.6s ease-out forwards;
}

.animate-scale {
  opacity: 0;
  animation: fadeInScale 0.6s ease-out forwards;
}

.animate-slide-left {
  opacity: 0;
  animation: slideInLeft 0.6s ease-out forwards;
}

.animate-slide-right {
  opacity: 0;
  animation: slideInRight 0.6s ease-out forwards;
}

/* =====================================================
   3. スタガー遅延（遅延アニメーション）
   ===================================================== */
.animate-delay-1 { animation-delay: 0.1s; }
.animate-delay-2 { animation-delay: 0.2s; }
.animate-delay-3 { animation-delay: 0.3s; }
.animate-delay-4 { animation-delay: 0.4s; }
.animate-delay-5 { animation-delay: 0.5s; }
.animate-delay-6 { animation-delay: 0.6s; }

/* =====================================================
   4. スクロールアニメーション準備
   ===================================================== */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

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

/* =====================================================
   5. カードスタガーアニメーション
   ===================================================== */
.stagger-container .stagger-item {
  opacity: 0;
  transform: translateY(20px);
}

.stagger-container.is-visible .stagger-item {
  animation: fadeInUp 0.6s ease-out forwards;
}

.stagger-container.is-visible .stagger-item:nth-child(1) { animation-delay: 0s; }
.stagger-container.is-visible .stagger-item:nth-child(2) { animation-delay: 0.1s; }
.stagger-container.is-visible .stagger-item:nth-child(3) { animation-delay: 0.2s; }
.stagger-container.is-visible .stagger-item:nth-child(4) { animation-delay: 0.3s; }
.stagger-container.is-visible .stagger-item:nth-child(5) { animation-delay: 0.4s; }
.stagger-container.is-visible .stagger-item:nth-child(6) { animation-delay: 0.5s; }

/* =====================================================
   6. ホバーエフェクト
   ===================================================== */
/* カードホバー拡張 */
.hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

/* 画像拡大効果 */
.hover-zoom {
  overflow: hidden;
}

.hover-zoom img {
  transition: transform 0.5s ease;
}

.hover-zoom:hover img {
  transform: scale(1.05);
}

/* ボタンアニメーション */
.btn-animate {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-animate:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.btn-animate:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* リンクアンダーラインアニメーション */
.link-animate {
  position: relative;
}

.link-animate::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: currentColor;
  transition: width 0.3s ease;
}

.link-animate:hover::after {
  width: 100%;
}

/* =====================================================
   7. Reduced Motion対応（アクセシビリティ）
   ===================================================== */
@media (prefers-reduced-motion: reduce) {
  .animate-fade-in,
  .animate-fade,
  .animate-scale,
  .animate-slide-left,
  .animate-slide-right,
  .stagger-item {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  
  .animate-on-scroll,
  .animate-on-scroll.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
  
  .hover-lift,
  .hover-zoom img,
  .btn-animate,
  .link-animate::after {
    transition: none !important;
  }
  
  .hover-lift:hover {
    transform: none;
  }
  
  .hover-zoom:hover img {
    transform: none;
  }
  
  .btn-animate:hover,
  .btn-animate:active {
    transform: none;
  }
}

/* =====================================================
   8. レスポンシブ調整
   ===================================================== */
@media screen and (max-width: 768px) {
  .animate-fade-in,
  .animate-fade,
  .animate-scale,
  .animate-slide-left,
  .animate-slide-right {
    animation-duration: 0.4s;
  }
  
  .stagger-container.is-visible .stagger-item {
    animation-duration: 0.4s;
  }
}

/* =====================================================
   9. Utility Classes for Quick Use
   ===================================================== */
.animate-none {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

.animate-instant {
  animation-duration: 0.1s !important;
}

.animate-slow {
  animation-duration: 1s !important;
}

/* 可視状態（JSで制御用） */
.is-animated {
  opacity: 1 !important;
  transform: none !important;
}