/* member-accent-v1 — メンバー詳細の左側に、その人の色の淡い光と、役割の横の短い線（2026-09-30）。
   オーナー「メンバー詳細の左側の、文字とかアイコンのエリア無地すぎるから少しデザインいじりたい」→ 3 案から B「メンバーの色」を採用（雲は増やさない）。
   色は member-accent-v1.js が V8MemberColors.forMember の primary から --mbx-line（線）・--mbx-glow（光、18%）に入れる。入るまでは出さず、入ったらふわっと出す。 */

body.mb-page--detail .mb-hero {
  position: relative;
}

/* 光：左の列（名前・CHANNELS・紹介文）の後ろ。右の絵と雲には掛けない */
body.mb-page--detail .mb-hero::before {
  content: "";
  position: absolute;
  left: -12%;
  top: -8%;
  width: 70%;
  height: 116%;
  background: radial-gradient(58% 52% at 34% 52%, var(--mbx-glow, transparent), transparent 72%);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 640ms cubic-bezier(0.25, 1, 0.5, 1);
}

body.mb-page--detail .mb-hero.mbx-ready::before {
  opacity: 1;
}

body.mb-page--detail .mb-hero > :is(.mb-head, .mb-info) {
  position: relative;
  z-index: 1;
}

/* 線：役割（STREAMER・CREATOR など）の右に同じ行で置く（下の要素を押し下げない） */
body.mb-page--detail .mb-kicker::after {
  content: "";
  display: inline-block;
  align-self: center;
  width: 56px;
  height: 3px;
  margin-left: 16px;
  vertical-align: middle;
  background: var(--mbx-line, transparent);
  opacity: 0;
  transition: opacity 640ms cubic-bezier(0.25, 1, 0.5, 1);
}

body.mb-page--detail .mb-hero.mbx-ready .mb-kicker::after {
  opacity: 1;
}

/* スマホ：左の列が上に来る組みなので、光は名前のあたりに寄せて小さく */
@media (max-width: 767px) {
  body.mb-page--detail .mb-hero::before {
    left: -24%;
    top: -6%;
    width: 110%;
    height: 60%;
    background: radial-gradient(56% 50% at 30% 40%, var(--mbx-glow, transparent), transparent 72%);
  }

  body.mb-page--detail .mb-kicker::after {
    width: 40px;
    margin-left: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.mb-page--detail .mb-hero::before,
  body.mb-page--detail .mb-kicker::after {
    transition: none;
  }
}