/**
 * Animations CSS
 * 全アニメーション定義を集約
 */

/* ============================================
   Keyframe Animations
   ============================================ */

/* Gradient Shift (背景グラデーションアニメーション) */
@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Pulse (パルスアニメーション) */
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.05);
    opacity: 1;
  }
}

/* Float (浮遊アニメーション) */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

/* Glow Pulse (グロー光彩アニメーション) */
@keyframes glowPulse {
  0%, 100% {
    box-shadow:
      0 0 20px rgba(0, 229, 255, 0.3),
      0 0 40px rgba(0, 229, 255, 0.2),
      0 0 60px rgba(0, 229, 255, 0.1);
  }
  50% {
    box-shadow:
      0 0 30px rgba(0, 229, 255, 0.5),
      0 0 60px rgba(0, 229, 255, 0.3),
      0 0 90px rgba(0, 229, 255, 0.2);
  }
}

/* Rotate Arrow (矢印回転) */
@keyframes rotateArrow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Category Gradient (カテゴリバッジグラデーション) */
@keyframes categoryGradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Ripple (リップルエフェクト) */
@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}

/* Fade In Up (フェードインアップ) */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade In Left (フェードインレフト) */
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Slide In Right (スライドインライト) */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Scale In (スケールイン) */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Shimmer (シマー効果) */
@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

/* Mesh Float (メッシュ浮遊) */
@keyframes meshFloat {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 0.3;
  }
  33% {
    transform: translate(5px, -5px) rotate(1deg);
    opacity: 0.5;
  }
  66% {
    transform: translate(-5px, 5px) rotate(-1deg);
    opacity: 0.4;
  }
}

/* Scroll Line (スクロールインジケーター線) */
@keyframes scrollLine {
  0% {
    transform: scaleY(0);
    transform-origin: top;
  }
  50% {
    transform: scaleY(1);
    transform-origin: top;
  }
  51% {
    transform: scaleY(1);
    transform-origin: bottom;
  }
  100% {
    transform: scaleY(0);
    transform-origin: bottom;
  }
}

/* Particle Float (粒子浮遊) */
@keyframes particleFloat {
  0%, 100% {
    transform: translateY(0) translateX(0);
  }
  25% {
    transform: translateY(-20px) translateX(10px);
  }
  50% {
    transform: translateY(-40px) translateX(-5px);
  }
  75% {
    transform: translateY(-20px) translateX(-10px);
  }
}

/* ============================================
   Utility Animation Classes
   ============================================ */

/* GPU加速ヒント */
.gpu-accelerated {
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .gpu-accelerated {
    will-change: auto;
  }
}

/* Hover Lift */
.hover-lift {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-lift:hover {
  transform: translateY(-8px);
}

/* Hover Glow */
.hover-glow {
  transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-glow:hover {
  box-shadow: 0 0 30px rgba(0, 229, 255, 0.5);
}

/* Stagger Delay Classes */
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }
.stagger-5 { animation-delay: 0.5s; }