/* ==========================================================================
   index only — Hero Geometric Art Background
   Scope: .hero--art 配下に限定
   ========================================================================== */

.hero--art .hero__bg::before {
  /* 既存の汎用ヒーロー背景（styles.cssの::before）を無効化 */
  content: none !important;
}

.hero--art .hero__bg.hero-art {
  position: absolute;
  inset: -10% -8% -8% -8%;
  /* 余白広めにしてアニメのはみ出しを隠す */
  overflow: hidden;
  z-index: -1;
  isolation: isolate;
  /* blendの独立化 */
  pointer-events: none;
}

/* Canvas層（動的：JSで描画） */
.hero--art .hero-art__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  transform: translateZ(0);
  filter: saturate(120%) contrast(105%);
}

/* 補助シェイプ（静的CSSアニメでゆっくり） */
.hero--art .hero-art__shape {
  position: absolute;
  filter: blur(6px);
  opacity: .28;
  mix-blend-mode: screen;
  will-change: transform;
}

/* 三角形（左上） */
.hero--art .hero-art__shape--tri {
  --c1: color-mix(in oklab, var(--brand-1) 80%, transparent);
  width: 58vmax;
  height: 58vmax;
  top: -18vmax;
  left: -10vmax;
  background: radial-gradient(60% 60% at 40% 38%, var(--c1), transparent 70%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  animation: art-spin-1 26s cubic-bezier(.2, .6, .2, 1) infinite alternate;
}

/* 六角形（右上） */
.hero--art .hero-art__shape--hex {
  --c2: color-mix(in oklab, var(--brand-2) 70%, transparent);
  width: 42vmax;
  height: 42vmax;
  top: -8vmax;
  right: -14vmax;
  background: radial-gradient(50% 50% at 50% 50%, var(--c2), transparent 70%);
  clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0% 50%);
  animation: art-spin-2 32s ease-in-out infinite alternate;
}

/* 輪（左下） */
.hero--art .hero-art__shape--ring {
  --c3: color-mix(in oklab, var(--brand-3) 65%, transparent);
  width: 60vmax;
  height: 60vmax;
  left: -20vmax;
  bottom: -22vmax;
  background:
    radial-gradient(closest-side, transparent 64%, var(--c3) 66% 68%, transparent 71%), radial-gradient(60% 60% at 35% 35%, color-mix(in oklab, var(--brand-1) 28%, transparent), transparent 70%);
  border-radius: 50%;
  animation: art-float 20s ease-in-out infinite alternate;
}

@keyframes art-spin-1 {
  from {
    transform: translate(-2%, 0%) rotate(0deg) scale(1);
  }

  to {
    transform: translate(2%, 3%) rotate(18deg) scale(1.06);
  }
}

@keyframes art-spin-2 {
  from {
    transform: translate(0%, 0%) rotate(-8deg) scale(1);
  }

  to {
    transform: translate(-2%, 1.5%) rotate(10deg) scale(1.05);
  }
}

@keyframes art-float {
  from {
    transform: translate(0%, 0%) scale(1);
  }

  to {
    transform: translate(4%, -2%) scale(1.04);
  }
}

/* 低モーション環境では静止させる */
@media (prefers-reduced-motion: reduce) {
  .hero--art .hero-art__shape {
    animation: none !important;
  }
}

/* レイアウトは「既存ヒーロー」をそのまま利用（hero__title などは変更なし） */

















/* =========================
   index（.hero--art）専用：Tape の前後関係を調整
   ========================= */

@media (min-width: 960px) {
  /* 1) ヒーロー全体を “後続セクションより手前、ヘッダーより奥” に */

  .hero.hero--art {
    position: relative;
    /* z-index を効かせる */
    z-index: 400;
    /* header(=500) より低く、通常セクションより高く */
    overflow: visible;
    /* tape のはみ出しを可視に（既存の clip を解除） */
  }

  /* 2) テープ自体をさらに前面に（ヒーロー内の他要素よりも少し上） */
  .hero.hero--art .tape {
    z-index: 450;
    pointer-events: none;
    /* テープ上でも下のボタンやリンクを操作可能に */
  }

  /* 参考：ヒーローの背景は引き続き“奥”へ（既存仕様の明示） */
  .hero.hero--art .hero__bg {
    z-index: -1;
  }
}

@media (max-width: 960px) {

  .tape {
    display: none;
  }
}






















/* 横スクロール防止：ヒーローは横方向を必ずクリップ */
.hero.hero--art {
  overflow-x: clip;
  /* 近代ブラウザ */
}

/* Safariなどfallback */
@supports not (overflow: clip) {
  .hero.hero--art {
    overflow-x: hidden;
  }
}