/* ========================================
   brand-introセクション 最適化版
   - 背景パララックス: 維持
   - ダイヤモンド: フワッと表示のみ（パララックス削除）
   - ロゴ: シンプルな浮遊アニメーションのみ（光彩・ぼかし削除）
   ======================================== */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   1. ロゴの光彩・ぼかしエフェクトを削除
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 背景グローを削除 */
.brand-intro__logo-float::before {
  display: none !important;
}

/* フレアエフェクトを削除 */
.brand-intro__logo-float::after {
  display: none !important;
}

/* ロゴのdrop-shadowを最小限に（モバイル） */
@media (max-width: 599px) {
  .brand-intro__logo-float img {
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.4)) !important;
    animation: mobileLogoFloat 3s ease-in-out infinite !important;
  }
}

/* ロゴのdrop-shadowを最小限に（タブレット以上） */
@media (min-width: 600px) {
  .brand-intro__logo-float img {
    filter: drop-shadow(0 20px 50px rgba(0, 0, 0, 0.5)) !important;
    animation: logoGlowPulse 4s ease-in-out infinite !important;
  }

  /* 光のパルスアニメーションを削除（単純な浮遊のみ） */
  @keyframes logoGlowPulse {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-15px);
    }
  }
}

/* PC以上もシンプルに */
@media (min-width: 960px) {
  .brand-intro__logo-float img {
    filter: drop-shadow(0 20px 50px rgba(0, 0, 0, 0.5)) !important;
    animation: logoSimpleFloat 4s ease-in-out infinite !important;
  }

  @keyframes logoSimpleFloat {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-20px);
    }
  }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   2. ダイヤモンドのパララックスを無効化
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ダイヤモンドは初期表示アニメーションのみ（スクロール連動なし） */
.diamond-grid__item {
  will-change: auto !important; /* GPU負荷削減 */
}

/* スクロール後は固定（動かさない） */
.diamond-grid__item.animated {
  transform: translateX(0) translateY(0) scale(1) !important;
}

/* ホバーエフェクトも軽量化 */
.diamond:hover {
  transform: rotate(45deg) translateZ(0) scale(1.02) !important;
  transition: transform 0.3s ease !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   3. PC版の中央ダイヤモンドロゴの光彩削除
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (min-width: 960px) {
  .diamond.diamond--logo {
    /* 光彩を削除したシンプルな白背景 */
    background: linear-gradient(135deg,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, 1) 100%
    ) !important;

    /* シャドウを最小限に */
    box-shadow:
      0 20px 60px rgba(0, 0, 0, 0.3),
      0 10px 30px rgba(0, 0, 0, 0.2) !important;

    /* ボーダーを削除 */
    border: none !important;

    /* 浮遊アニメーションのみ */
    animation: logoSimpleFloat 4s ease-in-out infinite 1.8s !important;
  }

  /* グラデーションオーバーレイを削除 */
  .diamond.diamond--logo::before {
    display: none !important;
  }

  /* ハイライトを削除 */
  .diamond.diamond--logo::after {
    display: none !important;
  }

  /* ロゴ画像のエフェクトを最小限に */
  .diamond.diamond--logo img {
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.3)) !important;
    animation: none !important; /* 画像自体のアニメーション削除 */
  }

  /* 浮遊アニメーション（シンプル版） */
  @keyframes logoSimpleFloat {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-20px);
    }
  }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   4. パフォーマンス最適化
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* GPU加速を最適化 */
.brand-intro__logo-float img {
  will-change: transform;
  transform: translateZ(0); /* GPU加速有効化 */
}

/* 背景パララックスは維持（JavaScriptで制御） */
.parallax-bg-color,
.parallax-bg-image {
  will-change: transform;
  /* transitionを削除してパフォーマンス向上 */
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   5. モバイル版の最適化
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 599px) {
  /* モバイルではさらに軽量化 */
  .brand-intro__logo-float img {
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.4)) !important;
    animation: mobileLogoFloat 3s ease-in-out infinite !important;
  }

  @keyframes mobileLogoFloat {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-15px);
    }
  }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   6. ロゴ: 消えた状態からゆっくりはっきり現れ、ゆっくり浮遊
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 初期状態: 非表示 */
.brand-intro__logo-float img {
  opacity: 0;
  animation: none !important;
  will-change: transform;
}

/* .logo-visible クラスが付いたら現れる + 浮遊開始 */
.brand-intro__logo-float.logo-visible img {
  animation:
    logoReveal 3s ease-out forwards,
    logoSlowFloat 8s ease-in-out 3s infinite !important;
  filter: drop-shadow(0 15px 40px rgba(0, 0, 0, 0.5)) !important;
}

/* ぼかし → くっきり現れるアニメーション */
@keyframes logoReveal {
  0% {
    opacity: 0;
    filter: blur(14px) drop-shadow(0 15px 40px rgba(0, 0, 0, 0.5));
  }
  60% {
    opacity: 0.85;
    filter: blur(3px) drop-shadow(0 15px 40px rgba(0, 0, 0, 0.5));
  }
  100% {
    opacity: 1;
    filter: blur(0) drop-shadow(0 15px 40px rgba(0, 0, 0, 0.5));
  }
}

/* ゆっくり浮遊アニメーション（8秒） */
@keyframes logoSlowFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-18px);
  }
}