/* =========================================================
   hero-glass — ima studio Interactive UI
   vivalabo.imastudio.jp の hero-glass.css を踏襲。
   - canvas は表示専用 / 透明な hit-area だけが操作を受け取る
   - フォントは指定しない（テーマ側を尊重・フォント暴走を防ぐ）
   ========================================================= */

.ima-ui--hero-glass.ima-hero-glass,
.ima-hero-glass {
  --ima-hero-bg: #fafaf7;
  --ima-hero-frame-height: 550px;
  --ima-hero-stage-height: 550px;
  --ima-hero-stage-top: 0px;
  --ima-hero-hit-size: 280px;

  position: relative;
  width: 100%;
  height: var(--ima-hero-frame-height);
  overflow: hidden;
  background: var(--ima-hero-bg);
  isolation: isolate;
}

.ima-hero-glass__stage {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--ima-hero-stage-top);
  height: var(--ima-hero-stage-height);
  min-height: 0;
  transform: none;
  z-index: 0;
}

.ima-hero-glass__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* hit-area: ここだけが回転操作を受け取る。
   画面全体でスクロールを奪わないよう、幅を意図的に絞っている。 */
.ima-hero-glass__hit-area {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--ima-hero-hit-size);
  height: var(--ima-hero-hit-size);
  transform: translate(-50%, -50%);
  z-index: 3;
  pointer-events: auto;
  touch-action: none;
  cursor: grab;
  border-radius: 999px;
}

.ima-hero-glass__hit-area:active {
  cursor: grabbing;
}

.ima-hero-glass__fallback {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  z-index: 1;
}

.ima-hero-glass__fallback.is-visible {
  display: flex;
}

.ima-hero-glass__fallback img {
  max-width: min(76vw, 640px);
  max-height: 48vh;
  filter: drop-shadow(0 16px 36px rgba(43, 126, 245, 0.18));
}

/* hit-area を可視化したいデバッグ用 */
.ima-hero-glass[data-debug-hit="true"] .ima-hero-glass__hit-area {
  outline: 2px dashed rgba(255, 86, 63, 0.65);
  background: rgba(255, 86, 63, 0.08);
}