/* =============================================
   SCROLL ANIMATIONS - クールなスクロールエフェクト
============================================= */

/* ===== 基本設定 ===== */
.blur-in,
.scale-in,
.slide-in-left,
.slide-in-right,
.flip-up,
.flip-in,
.spring-up,
.zoom-out-in,
.glow-in,
.shake-in,
.cascade-in,
.ripple-in,
.stretch-in,
.rotate-in,
.bounce-in {
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== アニメーション遅延（stagger効果） ===== */
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }
.stagger-5 { transition-delay: 0.5s; }

/* ===== 各アニメーションの初期状態 ===== */

/* ブラーイン - ぼかしから鮮明に */
.blur-in {
  filter: blur(20px);
  transform: scale(0.95);
}

/* スケールイン - 小さい状態から拡大 */
.scale-in {
  transform: scale(0.8);
}

/* 左からスライドイン */
.slide-in-left {
  transform: translateX(-80px);
}

/* 右からスライドイン */
.slide-in-right {
  transform: translateX(80px);
}

/* 下から上へフリップ */
.flip-up {
  transform: translateY(60px) rotateX(15deg);
  transform-origin: bottom center;
}

/* フリップイン（カード回転） */
.flip-in {
  transform: perspective(1000px) rotateY(-30deg);
  transform-origin: left center;
}

/* スプリングアップ（弾むように上昇） */
.spring-up {
  transform: translateY(100px) scale(0.9);
}

/* ズームアウトイン（大きい状態から縮小） */
.zoom-out-in {
  transform: scale(1.2);
  filter: blur(10px);
}

/* グローイン（光りながら出現） */
.glow-in {
  transform: scale(0.9);
  text-shadow: 0 0 0 transparent;
}

/* シェイクイン（振動しながら出現） */
.shake-in {
  transform: translateX(-20px);
}

/* カスケードイン（連鎖的に出現） */
.cascade-in {
  transform: translateY(40px) translateX(-20px);
}

/* リップルイン（波紋のように出現） */
.ripple-in {
  transform: scale(0.5);
}

/* ストレッチイン（伸びて出現） */
.stretch-in {
  transform: scaleX(0.5);
  transform-origin: left center;
}

/* 回転して出現 */
.rotate-in {
  transform: rotate(-10deg) scale(0.9);
}

/* バウンスイン（跳ねて出現） */
.bounce-in {
  transform: translateY(-50px);
}

/* ===== アニメーション後の状態（.animated クラス追加時） ===== */

.blur-in.animated,
.scale-in.animated,
.slide-in-left.animated,
.slide-in-right.animated,
.flip-up.animated,
.flip-in.animated,
.spring-up.animated,
.zoom-out-in.animated,
.glow-in.animated,
.shake-in.animated,
.cascade-in.animated,
.ripple-in.animated,
.stretch-in.animated,
.rotate-in.animated,
.bounce-in.animated {
  opacity: 1;
  transform: none;
  filter: none;
}

/* グローインの特殊効果 */
.glow-in.animated {
  animation: glowPulse 0.6s ease-out;
}

@keyframes glowPulse {
  0% { text-shadow: 0 0 0 transparent; }
  50% { text-shadow: 0 0 30px rgba(0, 245, 255, 0.8), 0 0 60px rgba(0, 245, 255, 0.4); }
  100% { text-shadow: 0 0 20px rgba(0, 245, 255, 0.3); }
}

/* バウンスインの特殊効果 */
.bounce-in.animated {
  animation: bounceIn 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes bounceIn {
  0% { opacity: 0; transform: translateY(-50px); }
  60% { opacity: 1; transform: translateY(10px); }
  80% { transform: translateY(-5px); }
  100% { transform: translateY(0); }
}

/* スプリングアップの特殊効果 */
.spring-up.animated {
  animation: springUp 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes springUp {
  0% { opacity: 0; transform: translateY(100px) scale(0.9); }
  60% { opacity: 1; transform: translateY(-10px) scale(1.02); }
  100% { transform: translateY(0) scale(1); }
}

/* シェイクインの特殊効果 */
.shake-in.animated {
  animation: shakeIn 0.6s ease-out;
}

@keyframes shakeIn {
  0% { opacity: 0; transform: translateX(-20px); }
  20% { transform: translateX(15px); }
  40% { transform: translateX(-10px); }
  60% { transform: translateX(5px); }
  80% { transform: translateX(-2px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* ===== ホバー3D効果 ===== */
.hover-3d {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  transform-style: preserve-3d;
}

.hover-3d:hover {
  transform: translateY(-8px) rotateX(5deg) rotateY(-5deg);
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.15),
    0 0 30px rgba(0, 245, 255, 0.1);
}

/* ===== セクションタイトル専用アニメーション ===== */
.section-header {
  overflow: visible;
}

.section-tag {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease;
}

.section-title {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease 0.15s;
}

.section-desc,
.section-subtitle {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease 0.3s;
}

.section-header.animated .section-tag,
.section-header.animated .section-title,
.section-header.animated .section-desc,
.section-header.animated .section-subtitle {
  opacity: 1;
  transform: translateY(0);
}

/* タイトル下線アニメーション */
.section-title::after {
  content: '';
  display: block;
  width: 80px;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--neon-cyan));
  margin: 16px auto 0;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.6s ease 0.4s;
}

.section-header.animated .section-title::after {
  transform: scaleX(1);
}

/* ダークセクション用 */
.section-title--gradient::after {
  background: linear-gradient(90deg, var(--neon-cyan), var(--neon-purple));
}

/* ===== カード連続出現アニメーション ===== */
.trust-grid .trust-card,
.problem-grid .problem-card,
.service-grid .service-card,
.pricing-grid .pricing-card,
.case-grid .case-card {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.trust-grid .trust-card:nth-child(1) { transition-delay: 0.1s; }
.trust-grid .trust-card:nth-child(2) { transition-delay: 0.2s; }
.trust-grid .trust-card:nth-child(3) { transition-delay: 0.3s; }

.problem-grid .problem-card:nth-child(1) { transition-delay: 0.1s; }
.problem-grid .problem-card:nth-child(2) { transition-delay: 0.2s; }
.problem-grid .problem-card:nth-child(3) { transition-delay: 0.3s; }
.problem-grid .problem-card:nth-child(4) { transition-delay: 0.4s; }

.service-grid .service-card:nth-child(1) { transition-delay: 0.1s; }
.service-grid .service-card:nth-child(2) { transition-delay: 0.2s; }
.service-grid .service-card:nth-child(3) { transition-delay: 0.3s; }
.service-grid .service-card:nth-child(4) { transition-delay: 0.4s; }

.pricing-grid .pricing-card:nth-child(1) { transition-delay: 0.1s; }
.pricing-grid .pricing-card:nth-child(2) { transition-delay: 0.2s; }
.pricing-grid .pricing-card:nth-child(3) { transition-delay: 0.3s; }

.case-grid .case-card:nth-child(1) { transition-delay: 0.1s; }
.case-grid .case-card:nth-child(2) { transition-delay: 0.3s; }
.case-grid .case-card:nth-child(3) { transition-delay: 0.5s; }

/* グリッドがアニメーション時にカードを表示 */
.trust-grid.animated .trust-card,
.problem-grid.animated .problem-card,
.service-grid.animated .service-card,
.pricing-grid.animated .pricing-card,
.case-grid.animated .case-card {
  opacity: 1;
  transform: translateY(0);
}

/* ===== フローステップアニメーション ===== */
.flow-steps .flow-step {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.5s ease;
}

.flow-steps .flow-step:nth-child(1) { transition-delay: 0.1s; }
.flow-steps .flow-step:nth-child(2) { transition-delay: 0.2s; }
.flow-steps .flow-step:nth-child(3) { transition-delay: 0.3s; }
.flow-steps .flow-step:nth-child(4) { transition-delay: 0.4s; }
.flow-steps .flow-step:nth-child(5) { transition-delay: 0.5s; }

.flow-steps.animated .flow-step {
  opacity: 1;
  transform: translateY(0);
}

/* フローライン伸びるアニメーション */
.flow-line {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1s ease 0.3s;
}

.flow-timeline.animated .flow-line {
  transform: scaleX(1);
}

/* ===== FAQアコーディオンアニメーション ===== */
.faq-list .faq-item {
  opacity: 0;
  transform: translateX(-30px);
  transition: all 0.5s ease;
}

.faq-list .faq-item:nth-child(odd) {
  transform: translateX(-30px);
}

.faq-list .faq-item:nth-child(even) {
  transform: translateX(30px);
}

.faq-list .faq-item:nth-child(1) { transition-delay: 0.1s; }
.faq-list .faq-item:nth-child(2) { transition-delay: 0.15s; }
.faq-list .faq-item:nth-child(3) { transition-delay: 0.2s; }
.faq-list .faq-item:nth-child(4) { transition-delay: 0.25s; }
.faq-list .faq-item:nth-child(5) { transition-delay: 0.3s; }

.faq-list.animated .faq-item {
  opacity: 1;
  transform: translateX(0);
}

/* ===== エリアセクションアニメーション ===== */
.area-content .area-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: all 0.8s ease;
}

.area-content .area-right {
  opacity: 0;
  transform: translateX(50px);
  transition: all 0.8s ease 0.2s;
}

.area-content.animated .area-left,
.area-content.animated .area-right {
  opacity: 1;
  transform: translateX(0);
}

/* マップピンのバウンス */
.area-content.animated .pin-bounce {
  animation: pinBounce 1.8s ease-in-out infinite;
}

/* ===== ブログセクションアニメーション ===== */
.blog-grid .blog-column {
  opacity: 0;
  transition: all 0.6s ease;
}

.blog-grid .blog-column:first-child {
  transform: translateX(-40px);
}

.blog-grid .blog-column:last-child {
  transform: translateX(40px);
  transition-delay: 0.2s;
}

.blog-grid.animated .blog-column {
  opacity: 1;
  transform: translateX(0);
}

/* ===== CTAセクションアニメーション ===== */
.cta-section .cta-inner {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s ease;
}

.cta-section.animated .cta-inner {
  opacity: 1;
  transform: translateY(0);
}

.cta-box {
  opacity: 0;
  transform: scale(0.95);
  transition: all 0.6s ease 0.3s;
}

.cta-section.animated .cta-box {
  opacity: 1;
  transform: scale(1);
}

/* ===== 数字カウントアップ風アニメーション ===== */
.hero-numbers .hero-number-item {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.5s ease;
}

.hero-numbers .hero-number-item:nth-child(1) { transition-delay: 0.1s; }
.hero-numbers .hero-number-item:nth-child(2) { transition-delay: 0.2s; }
.hero-numbers .hero-number-item:nth-child(3) { transition-delay: 0.3s; }
.hero-numbers .hero-number-item:nth-child(4) { transition-delay: 0.4s; }

.hero-numbers.animated .hero-number-item {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Future Metrics アニメーション ===== */
.future-metrics {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s ease;
}

.future-metrics.visible {
  opacity: 1;
  transform: translateY(0);
}

.metrics-compare-grid .metric-compare-item {
  opacity: 0;
  transform: translateY(30px) scale(0.95);
  transition: all 0.6s ease;
}

.metrics-compare-grid .metric-compare-item:nth-child(1) { transition-delay: 0.2s; }
.metrics-compare-grid .metric-compare-item:nth-child(2) { transition-delay: 0.4s; }
.metrics-compare-grid .metric-compare-item:nth-child(3) { transition-delay: 0.6s; }

.future-metrics.visible .metric-compare-item {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ===== スムーススクロール ===== */
html {
  scroll-behavior: smooth;
}

/* ===== パフォーマンス最適化 ===== */
.blur-in,
.scale-in,
.slide-in-left,
.slide-in-right,
.flip-up,
.flip-in,
.spring-up,
.zoom-out-in,
.glow-in,
.shake-in,
.cascade-in,
.ripple-in,
.stretch-in,
.rotate-in,
.bounce-in,
.hover-3d {
  will-change: transform, opacity;
}

/* アニメーション完了後はwill-changeを解除 */
.animated {
  will-change: auto;
}

/* ===== プリファレンス対応（アニメーション軽減設定） ===== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .blur-in,
  .scale-in,
  .slide-in-left,
  .slide-in-right,
  .flip-up,
  .flip-in,
  .spring-up,
  .zoom-out-in,
  .glow-in,
  .shake-in,
  .cascade-in,
  .ripple-in,
  .stretch-in,
  .rotate-in,
  .bounce-in {
    opacity: 1;
    transform: none;
    filter: none;
  }
}