/*アニメーションの@keyframes用のCSSコードを書く*/

/**
 * Cocoon Child Theme - Keyframes v3.0
 * 幾何学アニメーション対応
 */

/* 幾何学フロートアニメーション */
@keyframes geoFloat {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-30px) rotate(5deg);
  }
  50% {
    transform: translateY(0) rotate(0deg);
  }
  75% {
    transform: translateY(30px) rotate(-5deg);
  }
}

/* ライン横移動 */
@keyframes lineSlideH {
  0% {
    left: -200px;
    opacity: 0;
  }
  5% {
    opacity: 0.6;
  }
  95% {
    opacity: 0.6;
  }
  100% {
    left: 110%;
    opacity: 0;
  }
}

/* ライン縦移動 */
@keyframes lineSlideV {
  0% {
    top: -200px;
    opacity: 0;
  }
  5% {
    opacity: 0.5;
  }
  95% {
    opacity: 0.5;
  }
  100% {
    top: 110%;
    opacity: 0;
  }
}

/* ライン斜め移動 */
@keyframes lineSlideDiag {
  0% {
    top: -200px;
    left: -10%;
    opacity: 0;
  }
  5% {
    opacity: 0.4;
  }
  95% {
    opacity: 0.4;
  }
  100% {
    top: 110%;
    left: 110%;
    opacity: 0;
  }
}

/* シマーエフェクト */
@keyframes shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* グラデーション移動 */
@keyframes gradient-move {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* バウンス横 */
@keyframes bounce-x {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(8px); }
}

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

/* パルス */
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* 回転 */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* リップル */
@keyframes rippleEffect {
  to {
    width: 300px;
    height: 300px;
    opacity: 0;
  }
}

/* フロート */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

/* グロー */
@keyframes glow {
  0%, 100% { box-shadow: 0 0 20px rgba(255, 64, 129, 0.4); }
  50% { box-shadow: 0 0 40px rgba(255, 64, 129, 0.6); }
}

/* サイドバーアイコン用の微細な浮遊・回転 */
@keyframes geoIconFloat {
  0%, 100% {
    transform: translateY(-50%) rotate(0deg) scale(1);
  }
  50% {
    transform: translateY(-65%) rotate(180deg) scale(1.1);
  }
}

/* ネオンライン移動 */
@keyframes neonLineMove {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* フェードイン要素 */
.fade-in-element {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in-element.fade-in-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .geometric-bg,
  .animated-lines-container {
    display: none !important;
  }
  
  .fade-in-element {
    opacity: 1;
    transform: none;
  }
}