/**
 * Scroll Animations CSS
 * ページロードとスクロールに連動したアニメーション
 * 
 * 重要: このCSSはJavaScriptと連携して動作します
 * JSが.animate-readyクラスをbodyに追加するまで、要素は通常表示されます
 */

/* ========================================
   ヒーローセクション アニメーション
   ======================================== */

/* JSが準備完了したら初期状態を設定 */
body.animate-ready .hero-animate {
  opacity: 0;
  transform: translateY(30px);
  will-change: opacity, transform;
}

/* アニメーション実行 */
body.animate-ready .hero-animate.hero-animate-in {
  animation: heroFadeIn 2000ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes heroFadeIn {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ヒーロー画像は特別なアニメーション */
body.animate-ready .hero-image.hero-animate.hero-animate-in {
  animation: heroImageReveal 2000ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes heroImageReveal {
  0% {
    opacity: 0;
    transform: translateY(40px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ========================================
   スクロール連動 アニメーション
   ======================================== */

/* JSが準備完了したら初期状態を設定 - 方向別 */
body.animate-ready .scroll-animate {
  opacity: 0;
  will-change: opacity, transform;
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 上から */
body.animate-ready .scroll-animate[data-direction="up"] {
  transform: translateY(60px);
}

/* 下から */
body.animate-ready .scroll-animate[data-direction="down"] {
  transform: translateY(-60px);
}

/* 左から */
body.animate-ready .scroll-animate[data-direction="left"] {
  transform: translateX(-60px);
}

/* 右から */
body.animate-ready .scroll-animate[data-direction="right"] {
  transform: translateX(60px);
}

/* スタッガー上 */
body.animate-ready .scroll-animate[data-direction="stagger-up"] {
  transform: translateY(40px);
}

/* スタッガーフェード */
body.animate-ready .scroll-animate[data-direction="stagger-fade"] {
  transform: translateY(30px) scale(0.98);
}

/* スケール付き */
body.animate-ready .scroll-animate[data-scale="true"] {
  transform: scale(0.9);
}

body.animate-ready .scroll-animate[data-direction="left"][data-scale="true"] {
  transform: translateX(-40px) scale(0.9);
}

body.animate-ready .scroll-animate[data-direction="right"][data-scale="true"] {
  transform: translateX(40px) scale(0.9);
}

/* アニメーション実行状態 */
body.animate-ready .scroll-animate.scroll-animate-in {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
}

/* ========================================
   カード類の特別なホバーエフェクト
   ======================================== */

.routine-card,
.research-card,
.feature-card,
.icd-feature {
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s ease !important;
}

.routine-card:hover,
.research-card:hover,
.feature-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1) !important;
}

.icd-feature:hover {
  transform: translateX(8px) !important;
}

/* ========================================
   ハイライトテキストのグラデーションアニメーション
   ======================================== */

.highlight {
  background: linear-gradient(
    120deg,
    #2E8B57 0%,
    #3CB371 50%,
    #2E8B57 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: highlightShimmer 3s ease-in-out infinite;
}

/* ICD セクションのハイライトはオレンジ */
.icd-content .highlight {
  background: linear-gradient(
    120deg,
    #FE903A 0%,
    #FFB347 50%,
    #FE903A 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes highlightShimmer {
  0%, 100% {
    background-position: 0% center;
  }
  50% {
    background-position: 100% center;
  }
}

/* ========================================
   ストアボタンのホバーエフェクト
   ======================================== */

.store-btn {
  position: relative;
  overflow: hidden;
}

.store-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease;
}

.store-btn:hover::after {
  width: 300px;
  height: 300px;
}

/* ========================================
   アイコンの浮遊アニメーション
   ======================================== */

.routine-card-icon,
.icd-feature-icon,
.feature-card-icon,
.research-card-icon {
  transition: transform 0.3s ease;
}

.routine-card:hover .routine-card-icon,
.feature-card:hover .feature-card-icon,
.research-card:hover .research-card-icon {
  transform: translateY(-4px) scale(1.1);
}

.icd-feature:hover .icd-feature-icon {
  transform: scale(1.15);
}

/* Family アイコンの回転アニメーション */
.family-icon {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.family-icons-wrapper:hover .family-icon:nth-child(1) {
  transform: rotate(-5deg) scale(1.05);
}

.family-icons-wrapper:hover .family-icon:nth-child(2) {
  transform: rotate(5deg) scale(1.1);
}

.family-icons-wrapper:hover .family-icon:nth-child(3) {
  transform: rotate(-3deg) scale(1.05);
}

/* ========================================
   パフォーマンス最適化
   ======================================== */

/* GPU アクセラレーション */
body.animate-ready .hero-animate,
body.animate-ready .scroll-animate {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Reduced motion対応 */
@media (prefers-reduced-motion: reduce) {
  body.animate-ready .hero-animate,
  body.animate-ready .scroll-animate,
  .highlight,
  .routine-card,
  .research-card,
  .feature-card,
  .icd-feature {
    animation: none !important;
    transition: opacity 0.3s ease !important;
    transform: none !important;
  }
  
  body.animate-ready .hero-animate {
    opacity: 1 !important;
  }
  
  body.animate-ready .scroll-animate {
    opacity: 1 !important;
  }
}