/* ==========================================================================
   Animations - 軽量版
   スクロール時の演出はすべて削除し、以下のみ保持：
   - 初回ロード オーバーレイ
   - SplitText ハイブリッドホバー
   - マグネティック風 CTA
   - service-card / value / FAQ のホバー質感
   ========================================================================== */

/* ==========================================================================
   1. Page Intro Overlay（初回ロード演出 - 最初の1回だけ）
   ========================================================================== */
.page-intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #1a1612;
  display: grid;
  place-items: center;
  pointer-events: none;
  transition: clip-path 0.9s cubic-bezier(0.76, 0, 0.24, 1);
  clip-path: inset(0 0 0 0);
  will-change: clip-path;
}
.page-intro.is-out {
  clip-path: inset(0 0 100% 0);
}
.page-intro__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  color: var(--color-maple);
}
.page-intro__mark {
  opacity: 0;
  transform: translateY(20px) scale(0.9);
  animation: introMarkIn 0.7s var(--ease-out) 0.1s forwards;
}
.page-intro__text {
  font-family: var(--font-display-en);
  font-size: var(--fs-xl);
  letter-spacing: var(--tracking-widest);
  color: var(--color-white);
  opacity: 0;
  transform: translateY(12px);
  animation: introTextIn 0.7s var(--ease-out) 0.3s forwards;
}
@keyframes introMarkIn {
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes introTextIn {
  to { opacity: 1; transform: translateY(0); }
}

body.intro-locking { overflow: hidden; }

/* ==========================================================================
   2. SplitText ハイブリッドホバー
   ========================================================================== */
.split-text {
  position: relative;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
}

.split-text__inner,
.split-text .btn__label {
  display: inline-block;
  position: relative;
  overflow: hidden;
  line-height: 1.2;
}

.split-char {
  display: inline-block;
  position: relative;
  transition: transform 0.55s cubic-bezier(0.76, 0, 0.24, 1);
  transition-delay: calc(var(--split-i, 0) * 18ms);
  will-change: transform;
}
.split-char::after {
  content: attr(data-char);
  position: absolute;
  left: 0;
  top: 100%;
  transition: transform 0.55s cubic-bezier(0.76, 0, 0.24, 1);
  transition-delay: calc(var(--split-i, 0) * 18ms);
}

.split-text:hover .split-char,
.split-text:focus-visible .split-char {
  transform: translateY(-100%);
}

.split-char.is-space {
  width: 0.28em;
}

/* ==========================================================================
   3. service-card / value-item ホバー強化
   ========================================================================== */
.service-card {
  position: relative;
  overflow: hidden;
}
.service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(178, 58, 42, 0.06), transparent 60%);
  opacity: 0;
  transition: opacity 0.6s var(--ease-out);
  pointer-events: none;
}
.service-card:hover::before {
  opacity: 1;
}
.service-card__num {
  position: relative;
  display: inline-block;
}
.service-card__num::after {
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  width: 0;
  height: 1px;
  background: var(--color-maple);
  transition: width 0.5s var(--ease-out);
}
.service-card:hover .service-card__num::after {
  width: 28px;
}

.value__num {
  position: relative;
  transition: transform 0.6s var(--ease-out), color 0.4s var(--ease-out);
}
.value__item:hover .value__num {
  transform: translateX(-6px);
}

/* ==========================================================================
   4. マグネティック風 CTA
   ========================================================================== */
.btn--primary {
  position: relative;
  overflow: hidden;
}
.btn--primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-maple-deep);
  transform: translateY(101%);
  transition: transform 0.55s cubic-bezier(0.76, 0, 0.24, 1);
  z-index: 0;
}
.btn--primary:hover::before {
  transform: translateY(0);
}
.btn--primary > * {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   5. FAQ ホバー質感
   ========================================================================== */
.faq-item__q {
  transition: padding-left 0.4s var(--ease-out), color 0.4s var(--ease-out);
}
.faq-item__q:hover {
  padding-left: var(--space-2);
  color: var(--color-maple);
}
.faq-item__q:hover .faq-item__q-mark {
  transform: translateX(2px);
}
.faq-item__q-mark {
  transition: transform 0.4s var(--ease-out);
}

/* ==========================================================================
   6. prefers-reduced-motion 対応
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .page-intro {
    display: none !important;
  }
  .split-char,
  .split-char::after,
  .btn--primary::before,
  .service-card::before,
  .service-card__num::after,
  .value__num,
  .faq-item__q,
  .faq-item__q-mark {
    transition: none !important;
  }
}