/* =====================================================================
 * homepage-enhance.css
 * Frontpage polish: grid balance, title underline, CTA gradient shift,
 * card hover polish. Does NOT duplicate GSAP-driven reveals.
 * Loaded after all other styles; scoped to frontpage selectors.
 * ===================================================================== */

/* -------- 1. 自社サービス・関連企業 グリッドバランス（5+2→4+3） -------- */
@media (min-width: 1100px) {
  .services-ext-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}
@media (min-width: 700px) and (max-width: 1099.98px) {
  .services-ext-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* -------- 2. セクションタイトル下線アニメーション（スクロール連動） -------- */
.home .section-title {
  position: relative;
  display: inline-block;
}
.home .section-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -12px;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, #4ecdc4, #ff6b6b);
  border-radius: 2px;
  transform: translateX(-50%);
  transition: width 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s;
  pointer-events: none;
}
.home .section-title.hp-inview::after,
.home .section-header.hp-inview .section-title::after {
  width: 80px;
}

/* -------- 3. カードホバー強化（上質感） -------- */
.home .services-ext-card,
.home .service-card {
  transition:
    transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.home .services-ext-card:hover,
.home .service-card:hover {
  transform: translateY(-10px) scale(1.012);
}

.home .services-ext-card__img {
  transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) !important;
}
.home .services-ext-card:hover .services-ext-card__img {
  transform: scale(1.08) !important;
}

/* -------- 4. テストモニアル（お客様の声）カード強調 -------- */
.home .voice-card,
.home .testimonial-card,
.home .voice-grid > * {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.home .voice-card:hover,
.home .testimonial-card:hover,
.home .voice-grid > *:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(78,205,196,0.18);
}

/* -------- 5. CTA帯 優しいグラデシフト -------- */
.home .cta-section,
.home .cta-band,
.home #contact-cta,
.home .contact-cta-section,
.home section[class*="cta"] {
  background-size: 200% 200% !important;
  animation: hpCtaShift 16s ease-in-out infinite;
}
@keyframes hpCtaShift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* -------- 6. スクロール連動リビール（GSAP未適用要素向け） -------- */
.hp-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.8s cubic-bezier(0.2, 0.6, 0.2, 1),
    transform 0.8s cubic-bezier(0.2, 0.6, 0.2, 1);
  will-change: opacity, transform;
}
.hp-reveal.hp-inview {
  opacity: 1;
  transform: translateY(0);
}

/* -------- 7. 自社サービスカードのステッガー登場 -------- */
.home .services-ext-grid > .services-ext-card {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.7s cubic-bezier(0.2, 0.6, 0.2, 1),
    transform 0.7s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.home .services-ext-grid.hp-inview > .services-ext-card {
  opacity: 1;
  transform: translateY(0);
}
.home .services-ext-grid.hp-inview > .services-ext-card:nth-child(1) { transition-delay: 0.05s; }
.home .services-ext-grid.hp-inview > .services-ext-card:nth-child(2) { transition-delay: 0.12s; }
.home .services-ext-grid.hp-inview > .services-ext-card:nth-child(3) { transition-delay: 0.19s; }
.home .services-ext-grid.hp-inview > .services-ext-card:nth-child(4) { transition-delay: 0.26s; }
.home .services-ext-grid.hp-inview > .services-ext-card:nth-child(5) { transition-delay: 0.33s; }
.home .services-ext-grid.hp-inview > .services-ext-card:nth-child(6) { transition-delay: 0.40s; }
.home .services-ext-grid.hp-inview > .services-ext-card:nth-child(7) { transition-delay: 0.47s; }

/* -------- 8. 数値横に浮かぶ小さなアクセント -------- */
.home .hero-stat-num,
.home .about-stat-number {
  background: linear-gradient(135deg, #4ecdc4, #78c7ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* -------- 9. モーション軽減 -------- */
@media (prefers-reduced-motion: reduce) {
  .home .section-title::after { width: 80px !important; transition: none !important; }
  .hp-reveal,
  .home .services-ext-grid > .services-ext-card {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .home .cta-section,
  .home .cta-band,
  .home #contact-cta,
  .home .contact-cta-section { animation: none !important; }
}