/* ==========================================================================
 * 3D Cubes Background
 * ========================================================================== */

.c-3d-cubes-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.c-3d-cubes-bg canvas {
  width: 100%;
  height: 100%;
  display: block;
}


/* ==========================================================================
 * Morphing 3D Background (Legacy)
 * ==========================================================================
 * 「進化（Shinka）」を表現するモーフィング3Dオブジェクト
 * ページ背景に固定配置され、連続的に変形し続ける有機的な形状
 *
 * CSS カスタムプロパティ --mouse-x, --mouse-y を JavaScript から設定することで
 * マウス追従のパララックス効果を実現する
 * ========================================================================== */

/* --------------------------------------------------------------------------
 * コンテナ — 全画面固定・イベント透過
 * -------------------------------------------------------------------------- */
.c-morphing-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
 * プライマリオブジェクト — メインのモーフィング形状
 * -------------------------------------------------------------------------- */
.c-morphing-bg__object {
  position: absolute;
  top: 50%;
  right: -10%;
  transform: translateY(-50%);
  width: 50vw;
  height: 50vw;
  max-width: 700px;
  max-height: 700px;
  background: linear-gradient(
    249deg,
    rgba(33, 122, 254, 0.12) 10%,
    rgba(140, 82, 255, 0.12) 100%
  );
  filter: blur(60px);
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  transform-style: preserve-3d;
  will-change: transform, border-radius;

  /* アニメーション合成 — 回転・形状変形・スケール */
  animation:
    morph-rotate 20s infinite linear,
    morph-shape 10s infinite ease-in-out,
    morph-scale 15s infinite ease-in-out;

  /* マウス追従トランジション */
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------------------
 * セカンダリオブジェクト — 補助的な小さい形状（グラデーション反転）
 * -------------------------------------------------------------------------- */
.c-morphing-bg__object--secondary {
  top: auto;
  right: auto;
  bottom: 10%;
  left: -5%;
  width: 30vw;
  height: 30vw;
  max-width: 400px;
  max-height: 400px;
  background: linear-gradient(
    249deg,
    rgba(140, 82, 255, 0.08) 10%,
    rgba(33, 122, 254, 0.08) 100%
  );
  filter: blur(80px);
  opacity: 0.6;
  transform: translateY(0);

  /* アニメーション — プライマリと異なるデュレーション・ディレイで非同期に動作 */
  animation:
    morph-rotate 25s infinite linear -5s,
    morph-shape 12s infinite ease-in-out -3s,
    morph-scale 18s infinite ease-in-out -7s;
}

/* --------------------------------------------------------------------------
 * マウスインタラクション
 * --------------------------------------------------------------------------
 * JavaScript 側で document.documentElement.style に
 *   --mouse-x: -1 ～ 1（水平方向、中央が 0）
 *   --mouse-y: -1 ～ 1（垂直方向、中央が 0）
 * を設定すると、オブジェクトが緩やかに追従する
 * -------------------------------------------------------------------------- */
.c-morphing-bg__object {
  transform:
    translateY(-50%)
    translate(
      calc(var(--mouse-x, 0) * 30px),
      calc(var(--mouse-y, 0) * 20px)
    );
}

.c-morphing-bg__object--secondary {
  transform:
    translate(
      calc(var(--mouse-x, 0) * -20px),
      calc(var(--mouse-y, 0) * -15px)
    );
}

/* ==========================================================================
 * キーフレーム
 * ========================================================================== */

/* --------------------------------------------------------------------------
 * morph-rotate — 多軸回転（3D空間での連続回転）
 * -------------------------------------------------------------------------- */
@keyframes morph-rotate {
  0% {
    transform:
      translateY(-50%)
      translate(calc(var(--mouse-x, 0) * 30px), calc(var(--mouse-y, 0) * 20px))
      rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }

  25% {
    transform:
      translateY(-50%)
      translate(calc(var(--mouse-x, 0) * 30px), calc(var(--mouse-y, 0) * 20px))
      rotateX(90deg) rotateY(90deg) rotateZ(90deg);
  }

  50% {
    transform:
      translateY(-50%)
      translate(calc(var(--mouse-x, 0) * 30px), calc(var(--mouse-y, 0) * 20px))
      rotateX(180deg) rotateY(180deg) rotateZ(180deg);
  }

  75% {
    transform:
      translateY(-50%)
      translate(calc(var(--mouse-x, 0) * 30px), calc(var(--mouse-y, 0) * 20px))
      rotateX(270deg) rotateY(270deg) rotateZ(270deg);
  }

  100% {
    transform:
      translateY(-50%)
      translate(calc(var(--mouse-x, 0) * 30px), calc(var(--mouse-y, 0) * 20px))
      rotateX(360deg) rotateY(360deg) rotateZ(360deg);
  }
}

/* --------------------------------------------------------------------------
 * morph-shape — 有機的なブロブ形状間のモーフィング
 * 8値 border-radius 記法で複雑な曲線を表現
 * -------------------------------------------------------------------------- */
@keyframes morph-shape {
  0% {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  }

  25% {
    border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
  }

  50% {
    border-radius: 50% 60% 30% 60% / 30% 50% 70% 50%;
  }

  75% {
    border-radius: 40% 60% 50% 40% / 60% 40% 60% 30%;
  }

  100% {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  }
}

/* --------------------------------------------------------------------------
 * morph-scale — 呼吸するようなスケール変動
 * -------------------------------------------------------------------------- */
@keyframes morph-scale {
  0% {
    scale: 1;
  }

  50% {
    scale: 1.1;
  }

  100% {
    scale: 1;
  }
}

/* ==========================================================================
 * レスポンシブ — モバイル対応
 * ========================================================================== */
@media (max-width: 767px) {
  /* プライマリ — サイズ拡大・ブラー軽減でパフォーマンス向上 */
  .c-morphing-bg__object {
    width: 60vw;
    height: 60vw;
    filter: blur(40px);
  }

  /* セカンダリ — モバイルでも存在感を維持 */
  .c-morphing-bg__object--secondary {
    width: 40vw;
    height: 40vw;
    filter: blur(60px);
  }
}

/* ==========================================================================
 * アクセシビリティ — モーション軽減設定への対応
 * ユーザーが「視差効果を減らす」を有効にしている場合、
 * すべてのアニメーションを停止し静的な形状を表示する
 * ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .c-morphing-bg__object,
  .c-morphing-bg__object--secondary {
    animation: none;
    transition: none;
  }

  .c-morphing-bg__object {
    transform: translateY(-50%);
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    scale: 1;
  }

  .c-morphing-bg__object--secondary {
    transform: none;
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    scale: 1;
  }
}