/* ═══ 제작대 무대 — 진 · 그릇의 물질 (benchstage.js · 목업 project plan/mockups/261014_craft_stage) ═══
   .jin.bs일 때만 듣는다. ?perf '옛 진 · 그릇'(새로고침)이면 .bs가 붙지 않아 예전 선 · 돌 그릇 그대로이다 */

/* 순서 흔적 · 바닥 빛 — 진 viewBox 위의 겹. 쉬는 상태에서는 옅다 */
.jin.bs .bs-layer { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; opacity: .55; transition: opacity var(--t-state, .4s); }
.hb[data-state="craft"] .jin.bs .bs-layer { opacity: 1; }
.jin.bs .bs-trail.fresh > path { animation: bs-in .55s ease-out var(--d, 0ms) backwards; }   /* 새 흔적 — 앞 재료 쪽에서부터 차례로 맺힌다 */
@keyframes bs-in { from { opacity: 0; } }

/* 그릇 = 사상의 지평선. 돌 도가니 · 테 실선 · 차오름 실선을 걷는다. 버튼은 누르는 자리로 남는다 */
.jin.bs .jin-core.vessel { background: none; box-shadow: none; }
.jin.bs .jin-core.vessel::before, .jin.bs .jin-core.vessel > .bowl-fill { display: none; }
.jin.bs .jin-core.vessel.rest > span:not(.bs-field) { opacity: .35; }
.bs-field { position: absolute; left: 50%; top: 50%; width: 168px; height: 168px; translate: -50% -50%; pointer-events: none; }
/* 빈 그릇의 마름모 규칙(base.css .jin-core.vessel.rest span · > span)이 그릇 겹까지 줄이지 않게 */
.jin-core.vessel.rest > .bs-field { position: absolute; width: 168px; height: 168px; flex: none; z-index: 0; }
.jin-core.vessel.rest .bs-field, .jin-core.vessel.rest .bs-field span { transform: none; border: 0; opacity: 1; }
.jin-core.vessel.rest .bs-swirl { width: auto; height: auto; }
/* 안 — 칠흑. 경계까지 거의 단단하게 검다 */
.bs-void { position: absolute; left: 50%; top: 50%; width: 128px; height: 128px; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(closest-side, #000 0 70%, rgba(0,0,0,.9) 73%, rgba(0,0,0,.3) 76%, transparent 79%); }
.jin-core.vessel.rest .bs-void { width: 128px; height: 128px; opacity: .8; }
/* 바깥 — 결정 먼지가 나선으로 감겨 들며 돈다. 안쪽 띠 26초, 바깥 팔 70초. 길게 누르면(--hf) 지평선 쪽으로 조여 들고 밝아진다 */
.bs-swirl { position: absolute; inset: 0; will-change: transform;
  scale: calc(1 - var(--hf, 0) * var(--hf, 0) * .14); opacity: calc(.7 + var(--load, 0) * .2 + var(--hf, 0) * .3); }
.bs-swirl img, .bs-lit { position: absolute; inset: 0; width: 100%; height: 100%; }
.bs-sw-in { animation: bs-turn 26s linear infinite; }
.bs-sw-out { animation: bs-turn 70s linear infinite; }
@keyframes bs-turn { to { transform: rotate(360deg); } }
/* 경계 빛 — 원소를 향한 쪽만. 부하(--load)에 같은 겹이 더해져 달아오르고, 폭주 직전엔 맥동한다 */
.bs-lit { opacity: .9; }
.bs-lit.bs-hot { opacity: min(1, calc(var(--load, 0) * .25 + var(--hf, 0) * .6)); }
.jin.brink .bs-lit.bs-hot { animation: bs-brink 1.6s ease-in-out infinite; }
@keyframes bs-brink { 0%, 100% { opacity: .35; } 45% { opacity: .7; } }
.bs-field.rest .bs-swirl { opacity: .9; }
.bs-field.rest .bs-hot { opacity: 0; }

/* 그릇 위 기운 — 지평선 바깥 먼지 띠에서 아주 옅게 함께 돈다(craft.js kiPoolHtml이 띠 반지름에 놓는다) */
.jin.bs .bowl-hover { animation: bs-turn 26s linear infinite; opacity: .4; }

/* 노드 글자(성 · 출처 · 남은 수) — 아주 연하게. 올리거나 고른 노드만 진하게, 보유가 모자라면 경고라 반쯤 남긴다 */
.jin.bs .jin-node .hb-lab { opacity: .2; transition: opacity .25s ease; }
.jin.bs .jin-node.short .hb-lab { opacity: .6; }
.jin.bs .jin-node:is(.active, :focus-visible) .hb-lab { opacity: 1; }
@media (hover: hover) { .jin.bs .jin-node:hover .hb-lab { opacity: 1; transition-duration: .12s; } }

/* 멈춤 — 연출 줄이기 · 동작 줄이기 */
.hb.lite .jin.bs :is(.bs-swirl, .bs-hot, .bowl-hover, .bs-trail > path) { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .jin.bs :is(.bs-swirl, .bs-hot, .bowl-hover, .bs-trail > path) { animation: none !important; } }
.reduce-motion .jin.bs :is(.bs-swirl, .bs-hot, .bowl-hover, .bs-trail > path) { animation: none !important; }