/* =============================================================
   experience.css — Experience layer for MedakaService
   高品質 CSS 3D + スクロール演出 + メリハリ
   - 外部依存ゼロ（自作）
   - baseline-ui 準拠：transform / opacity のみアニメ、ease-out、
     単一アクセント色、紫/多色グラデ不使用、prefers-reduced-motion 尊重
   - 既存テーマ(GSAP/SplitText)のアニメ要素には触れない
   ============================================================= */

:root {
  --fx-accent: #43BAFF;          /* 既存テーマ --primary に揃える（単一アクセント） */
  --fx-ease: cubic-bezier(0.22, 1, 0.36, 1);  /* ease-out 系 */
  --fx-z-progress: 1040;         /* 固定 z-index スケール（ヘッダー1030の上） */
}

/* ---- スクロール進捗バー（上部・ブランドアクセント） ---- */
.fx-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--fx-accent);
  z-index: var(--fx-z-progress);
  pointer-events: none;
  will-change: transform;
}
.fx-progress::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 64px;
  background: var(--fx-accent);
  filter: blur(6px);
  opacity: 0.5;
}

/* =============================================================
   スクロールリビール（メリハリ＝方向の出し分け＋ステージング）
   要素は JS が「ビューポート下にある時だけ」 .fx-in を付与する。
   → JS 不在/失敗時は何も隠れない（堅牢）。上部要素は隠さない（チラつき防止）。
   ============================================================= */
.fx-in {
  opacity: 0;
  transform: translate3d(0, 32px, 0);
  transition:
    opacity 0.7s var(--fx-ease),
    transform 0.7s var(--fx-ease);
  transition-delay: calc(var(--fx-i, 0) * 90ms);
  will-change: transform, opacity;
}
.fx-in.fx-from-left  { transform: translate3d(-40px, 0, 0); }
.fx-in.fx-from-right { transform: translate3d(40px, 0, 0); }
.fx-in.fx-zoom       { transform: scale(0.92); }
.fx-in.fx-rise-lg    { transform: translate3d(0, 56px, 0); }

.fx-in.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}
/* リビール完了後は will-change を解放（baseline-ui: アクティブ時のみ） */
.fx-in.is-done { will-change: auto; }

/* =============================================================
   3D ティルト（カードの立体ホバー）
   親 .fx-tilt が perspective を持ち、内側 .fx-tilt__inner を回転。
   JS が --rx / --ry / --tz を更新（pointer:fine のみ）。
   ============================================================= */
.fx-tilt {
  perspective: 900px;
}
.fx-tilt__inner {
  transition: transform 0.25s var(--fx-ease), box-shadow 0.25s var(--fx-ease);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
  transform-style: preserve-3d;
}
.fx-tilt.is-tilting .fx-tilt__inner {
  transition: box-shadow 0.25s var(--fx-ease); /* 回転は即時追従 */
  box-shadow: 0 24px 50px -18px rgba(0, 0, 0, 0.55);
}
/* 内部に奥行きを与えたい要素 */
.fx-tilt__inner [data-fx-depth] {
  transform: translateZ(var(--fx-depth, 28px));
  transition: transform 0.25s var(--fx-ease);
}

/* カード共通のホバーリフト（テーマカードに上乗せ） */
.services-item,
.section-project .swiper-slide .image,
.fx-card {
  transition: transform 0.25s var(--fx-ease), box-shadow 0.25s var(--fx-ease);
}
@media (hover: hover) and (pointer: fine) {
  .services-item:hover {
    transform: translateY(-6px);
  }
}

/* =============================================================
   磁石ボタン（ポインタに微追従）。transform のみ。
   ============================================================= */
.fx-magnetic {
  transition: transform 0.2s var(--fx-ease);
  will-change: transform;
}

/* =============================================================
   パララックス（装飾マスクの奥行き）。JS が translate3d を更新。
   ============================================================= */
.fx-parallax {
  will-change: transform;
}

/* =============================================================
   セクション・インデックス（メリハリのある“配置”アクセント）
   見出し横に淡い連番を添えてリズムを作る。
   ============================================================= */
.fx-index {
  display: inline-block;
  font-family: 'DM Sans', 'Inter', sans-serif;
  font-weight: 700;
  font-size: clamp(16px, 1.4vw, 22px);
  letter-spacing: 0.18em;
  color: var(--fx-accent);
  opacity: 0.85;
  margin-bottom: 10px;
}
.fx-index::before {
  content: "";
  display: inline-block;
  width: 34px;
  height: 2px;
  background: var(--fx-accent);
  vertical-align: middle;
  margin-right: 12px;
  opacity: 0.6;
}

/* =============================================================
   キーボードフォーカスの可視化（fixing-accessibility 準拠）
   アウトラインを消さず、ブランド色で明示。
   ============================================================= */
.fx-magnetic:focus-visible,
.services-item a:focus-visible,
a.tf-btn:focus-visible,
.tf-btn-readmore:focus-visible {
  outline: 2px solid var(--fx-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* =============================================================
   prefers-reduced-motion：非必須モーションを全停止
   （リビールは即表示、ティルト/パララックス/進捗バー無効）
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .fx-in,
  .fx-in.fx-from-left,
  .fx-in.fx-from-right,
  .fx-in.fx-zoom,
  .fx-in.fx-rise-lg {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .fx-progress { display: none; }
  .fx-tilt__inner,
  .fx-tilt__inner [data-fx-depth],
  .fx-magnetic,
  .fx-parallax {
    transform: none !important;
    transition: none !important;
  }
}