/* =============================================
   animations.css  —  RELIEF WordPress Theme
   ============================================= */

/* ── bgSimpleLoop — Benesse参考サイト同等の背景変化アニメーション ── */
@keyframes bgSimpleLoop {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── フェードイン（スクロールトリガー） ── */
.fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .7s ease, transform .7s ease;
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── ディレイクラス ── */
.delay-1 { transition-delay: .18s; }
.delay-2 { transition-delay: .36s; }
.delay-3 { transition-delay: .54s; }
.delay-4 { transition-delay: .72s; }

/* ── Hero スライドイン ── */
.swiper-slide-active .fade-up {
  animation: heroFadeUp .9s ease forwards;
}
.swiper-slide-active .delay-1.fade-up { animation-delay: .2s; }
.swiper-slide-active .delay-2.fade-up { animation-delay: .4s; }

@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── カウンターアニメーション（数字） ── */
.count-up {
  display: inline-block;
  color: var(--color-accent);
}

/* ── パーティクルキャンバス ── */
#hero-particles canvas {
  position: absolute !important;
  inset: 0;
  z-index: 1;
}

/* ── ホバーライン（サービスカード・ナビ） ── */
.nav-list a::after {
  content: '';
  display: block;
  width: 0;
  height: 2px;
  background: var(--color-accent);
  transition: width .3s ease;
  margin-top: 2px;
}
.nav-list a:not(.btn-nav)::after { display: block; }
.nav-list a:not(.btn-nav):hover::after { width: 100%; }

/* ── スクロールインジケーター（ヘッダー背景）── */
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.site-header { animation: fadeInDown .6s ease .3s both; }

/* ── ページ遷移フェード ── */
body { animation: pageFadeIn .5s ease; }
@keyframes pageFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── ボタン ripple ── */
.btn-hero, .btn-primary, .btn-nav {
  position: relative;
  overflow: hidden;
}
.btn-hero::before, .btn-primary::before, .btn-nav::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  background: rgba(255,255,255,.15);
  border-radius: 50%;
  transform: translate(-50%,-50%);
  transition: width .5s ease, height .5s ease, opacity .5s ease;
  opacity: 0;
}
.btn-hero:active::before, .btn-primary:active::before, .btn-nav:active::before {
  width: 300px; height: 300px; opacity: 1;
}