/* ============================================
   hitokiwa - Scroll Animations
   既存HTMLに影響を与えず、アニメーションのみ追加
   ============================================ */

/* ─── 基本：スクロール出現アニメーション ─── */
.anim-fade-up {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity 0.9s cubic-bezier(0.23, 1, 0.32, 1),
              transform 0.9s cubic-bezier(0.23, 1, 0.32, 1);
}
.anim-fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.anim-fade-left {
  opacity: 0;
  transform: translateX(-48px);
  transition: opacity 0.9s cubic-bezier(0.23, 1, 0.32, 1),
              transform 0.9s cubic-bezier(0.23, 1, 0.32, 1);
}
.anim-fade-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.anim-fade-right {
  opacity: 0;
  transform: translateX(48px);
  transition: opacity 0.9s cubic-bezier(0.23, 1, 0.32, 1),
              transform 0.9s cubic-bezier(0.23, 1, 0.32, 1);
}
.anim-fade-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.anim-fade-in {
  opacity: 0;
  transition: opacity 1s ease;
}
.anim-fade-in.is-visible {
  opacity: 1;
}

.anim-scale-in {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}
.anim-scale-in.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* ─── 遅延（子要素のスタッガー用） ─── */
.anim-delay-1 { transition-delay: 0.1s !important; }
.anim-delay-2 { transition-delay: 0.2s !important; }
.anim-delay-3 { transition-delay: 0.3s !important; }
.anim-delay-4 { transition-delay: 0.4s !important; }
.anim-delay-5 { transition-delay: 0.5s !important; }
.anim-delay-6 { transition-delay: 0.6s !important; }

/* ─── ヒーロー：テキスト出現 ─── */
.p-impression__text {
  opacity: 0;
  animation: heroTextReveal 1.2s cubic-bezier(0.23, 1, 0.32, 1) 0.3s both;
}
@keyframes heroTextReveal {
  0% {
    opacity: 0;
    transform: translateY(40px);
    filter: blur(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* ─── ヒーロー：背景SVG パララックス風 ─── */
.p-impression__bg {
  animation: heroBgFloat 20s ease-in-out infinite;
}
@keyframes heroBgFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-12px) scale(1.01); }
}

/* ─── セクションヘッダー：EN部分にライン演出 ─── */
.l-section-header__en {
  position: relative;
  display: inline-block;
}
.l-section-header__en.is-visible::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 2px;
  background: #6c8954;
  animation: lineExpand 0.8s cubic-bezier(0.23, 1, 0.32, 1) both;
}
@keyframes lineExpand {
  from { width: 0; }
  to { width: 100%; }
}

/* ─── サービスカード：ホバーエフェクト強化 ─── */
.p-front-service__col {
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 0.5s ease !important;
}
.p-front-service__col:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.12) !important;
}

/* ─── ボタン：ホバーアニメーション ─── */
.c-button {
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1) !important;
  position: relative;
  overflow: hidden;
}
.c-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

/* ─── 実績数字：カウントアップ時のスケール ─── */
.js-number-text {
  display: inline-block;
  transition: transform 0.3s ease;
}
.js-number-text.is-counting {
  animation: numberPulse 0.6s ease both;
}
@keyframes numberPulse {
  0% { transform: scale(0.8); opacity: 0.5; }
  60% { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}

/* ─── 実績カード（achievements列）：スタッガー出現 ─── */
.p-front-achievements__col {
  transition: transform 0.5s ease, box-shadow 0.5s ease !important;
}
.p-front-achievements__col:hover {
  transform: translateY(-4px) !important;
}

/* ─── 実績リスト：カードごとのスタッガー ─── */
.p-front-achievements__list {
  transition: transform 0.4s ease, box-shadow 0.4s ease !important;
}
.p-front-achievements__list:hover {
  transform: translateY(-4px) !important;
}

/* ─── ニュースアイテム：ホバーでスライド ─── */
.p-front-news__lists .c-item__link {
  transition: padding-left 0.3s ease, background-color 0.3s ease !important;
}
.p-front-news__lists .c-item__link:hover {
  padding-left: 12px !important;
  background-color: rgba(108, 137, 84, 0.04) !important;
}

/* ─── FAQアイテム：アコーディオン風 ─── */
.hitokiwa-faq-item {
  transition: box-shadow 0.3s ease, transform 0.3s ease !important;
}
.hitokiwa-faq-item:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
}

/* ─── 導入事例カード：ホバー演出 ─── */
.hitokiwa-case-card {
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 0.5s ease !important;
}
.hitokiwa-case-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1) !important;
}

/* ─── CTA バナー：パルスグロー ─── */
.p-cta-banner {
  position: relative;
}
.p-cta-banner::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(108,137,84,0.15), transparent, rgba(108,137,84,0.1));
  opacity: 0;
  animation: ctaGlow 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes ctaGlow {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

/* ─── フッターリンク：ホバーアニメーション ─── */
.l-footer__main a {
  transition: color 0.3s ease, padding-left 0.3s ease !important;
}
.l-footer__main a:hover {
  color: #6c8954 !important;
  padding-left: 4px;
}

/* ─── スムーズスクロールバー（Webkit） ─── */
html {
  scroll-behavior: smooth;
}

/* ─── モーション軽減設定を尊重 ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .anim-fade-up,
  .anim-fade-left,
  .anim-fade-right,
  .anim-fade-in,
  .anim-scale-in {
    opacity: 1 !important;
    transform: none !important;
  }
}