/* ===== アニメーション関連 ===== */

/* フェードイン */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.animate-fade-in {
  animation: fadeIn 1.8s ease-in-out forwards;
}

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

.animate-fade-in-up {
  animation: fadeInUp 0.6s ease-out forwards;
}

/* 遅延アニメーション */
.animate-delay-1 {
  animation-delay: 0.2s;
}
.animate-delay-2 {
  animation-delay: 0.4s;
}
.animate-delay-3 {
  animation-delay: 0.6s;
}
.animate-delay-4 {
  animation-delay: 0.8s;
}

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

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

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

.animate-float {
  animation: float 3s ease-in-out infinite;
}

/* パルスアニメーション */
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

.animate-pulse {
  animation: pulse 2s ease-in-out infinite;
}

/* CTA ハイライトアニメーション */
@keyframes highlightPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(var(--primary-600-rgb), 0.7);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(var(--primary-600-rgb), 0);
  }
}

.highlight-pulse {
  animation: highlightPulse 2s ease-in-out 3;
}

.scroll-highlight {
  animation: highlightPulse 1.5s ease-in-out 2;
}

/* Hero section orchid float animation */
@keyframes orchidFloat {
  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }
  33% {
    transform: translateY(-10px) rotate(1deg);
  }
  66% {
    transform: translateY(10px) rotate(-1deg);
  }
}

/* Pulse animation for mobile phone button */
.pulse-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  background: var(--color-accent-400);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: pulse 2s ease-in-out infinite;
}

/* スクロール駆動アニメーション - 既存の .hero__orchid と .hero__light を活用 */
@media (prefers-reduced-motion: reduce) {
  .hero__orchid,
  .hero__light,
  .animate-fade-in-up,
  .animate-fade-in,
  .animate-float,
  .animate-pulse,
  .highlight-pulse,
  .scroll-highlight {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}