/* 立花律の擬似3D上半身（ヒーロー中央の丸窓・2軸フレームスクラブ方式）
 * - 丸窓(.hero-main-icon)の大きさ・グロー・周回アイコンは style.css のまま
 * - .hero-bust は丸窓の 1.3 倍幅×1.95 倍高さの canvas。
 *   下部は丸窓の円でマスクし、頭は円の上にはみ出せる */
.hero-orbit-container {
  --bust-window: 300px; /* style.css「14. Hero Icon Adjustments」の丸窓サイズと同じ値 */
}

@media (max-width: 767px) {
  .hero-orbit-container { --bust-window: 190px; }
}

.hero-bust {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--bust-window) * 1.3);
  height: calc(var(--bust-window) * 1.95);
  transform: translate(-50%, -46%);
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  opacity: 0;
  transition: opacity 0.7s ease;
  /* 円（直径=丸窓）＋上部領域。肩は窓の縁で切れ、頭は外へはみ出せる
   * closest-side = 195px（=300*1.3/2）に対して窓半径 150px = 76.9% ≈ 77% */
  -webkit-mask-image:
    radial-gradient(circle closest-side at 50% 46%, #000 77%, transparent 78.5%),
    linear-gradient(to bottom, #000 0%, #000 50%, transparent 60%);
  mask-image:
    radial-gradient(circle closest-side at 50% 46%, #000 77%, transparent 78.5%),
    linear-gradient(to bottom, #000 0%, #000 50%, transparent 60%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.hero-bust canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* 2軸フレームスクラブが有効化されたら静止画を隠す */
.hero-orbit-container.is-bust-live .hero-bust { opacity: 1; }
.hero-orbit-container.is-bust-live .hero-main-icon {
  background: radial-gradient(circle at 50% 38%, #ffffff 0%, #e7f6ee 55%, #cdeedd 100%);
}
.hero-orbit-container.is-bust-live .hero-main-icon img {
  opacity: 0;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero-bust { display: none; }
}