/* ZQ STAGE4 手応え — レーザー連結 v1.19.3（2026-08-25 / Ryu「カードがレーザーで繋がって攻撃する」）
 *
 * ★stage4-combo.css / stage4-combo-fx.css の上に**足すだけ**。外せば元に戻ります。
 *
 * ────────────────────────────────────────────
 * 何をするか
 * ────────────────────────────────────────────
 *   ① つながった札が**帯電**する（枠が光り、わずかに浮く）
 *   ② 札と札のあいだに**レーザーが走る**（片方からもう片方へ伸びる）
 *   ③ そのレーザーが**束になって王者へ収束**する
 *   ④ 直撃 ＝ これまでの層（リング・放射線・火花・揺れ・数字・CHAIN）
 *
 * ★「線を引く」のではなく「伸びる」のが肝です。
 *   一瞬で出す線は図解に見えます。**根元から先へ伸びると武器に見えます。**
 *
 * ────────────────────────────────────────────
 * レーザーの作り
 * ────────────────────────────────────────────
 * 1本を3層で描きます。市販ゲームのビームはほぼ全部この構成です。
 *
 *   芯   … 細く白い。いちばん明るい。ここが「熱」に見える
 *   胴   … 太く色つき。芯を包む
 *   燐光 … さらに外側のぼかし。box-shadow で出す
 *
 * ★1層だけだと「棒」に見えます。3層で「光」になります。
 *
 * ────────────────────────────────────────────
 * ★光過敏性発作について
 * ────────────────────────────────────────────
 * ・**繰り返す明滅はこのファイルに1つもありません。** infinite は0個。
 * ・伸びる・消えるは1回ずつ。往復しません。
 */

/* ============================================================
 * ① 帯電した札
 *   ★枠を光らせるだけ。中身（文字・絵）には触りません。
 * ========================================================== */
.zqcb-charge {
	position: relative;
	z-index: 2;
	animation: zqcb-charge var(--zqcb-cd, 620ms) cubic-bezier(.2, .8, .3, 1) 1 both;
	animation-delay: var(--zqcb-cdel, 0ms);
	will-change: transform, filter;
}

@keyframes zqcb-charge {
	0% { transform: translateY(0) scale(1); filter: brightness(1) drop-shadow(0 0 0 rgba(120, 220, 255, 0)); }
	22% { transform: translateY(-5px) scale(1.045); filter: brightness(1.35) drop-shadow(0 0 14px rgba(140, 230, 255, .95)); }
	62% { transform: translateY(-3px) scale(1.03); filter: brightness(1.22) drop-shadow(0 0 10px rgba(140, 230, 255, .75)); }
	100% { transform: translateY(0) scale(1); filter: brightness(1) drop-shadow(0 0 0 rgba(120, 220, 255, 0)); }
}

/* ============================================================
 * ② レーザー本体
 *   JS が「長さ・角度・出発点・遅れ」を変数で渡します。
 *   ★transform-origin を左端にして scaleX を 0→1 にすると「伸びる」。
 *     width を animation で変えると再計算が走って重くなります（9〜20台対策）。
 * ========================================================== */
.zqcb-beam {
	position: absolute;
	left: 0;
	top: 0;
	height: var(--zqcb-bw, 11px);
	width: var(--zqcb-len, 100px);
	margin-top: calc(var(--zqcb-bw, 11px) / -2);
	transform-origin: 0 50%;
	border-radius: 999px;

	/* 胴：両端を細く見せるため、端を透過させる */
	background: linear-gradient(90deg,
			rgba(120, 225, 255, 0) 0%,
			var(--zqcb-bc, #7fe3ff) 4%,
			#ffffff 26%,
			#ffffff 74%,
			var(--zqcb-bc, #7fe3ff) 96%,
			rgba(120, 225, 255, 0) 100%);

	/* 燐光。★3枚重ねて遠くまで届かせる。1枚だと「線」のままで「光」にならない */
	box-shadow:
		0 0 12px var(--zqcb-bg, rgba(120, 225, 255, 1)),
		0 0 34px var(--zqcb-bg, rgba(120, 225, 255, .85)),
		0 0 70px var(--zqcb-bg, rgba(120, 225, 255, .5));

	mix-blend-mode: screen;   /* ★光として重ねる。ふつうに重ねると水色の棒になる */
	animation: zqcb-beam var(--zqcb-bd, 260ms) cubic-bezier(.16, .84, .28, 1) 1 both;
	animation-delay: var(--zqcb-bdel, 0ms);
	will-change: transform, opacity;
}

@keyframes zqcb-beam {
	0% { opacity: 0; transform: rotate(var(--zqcb-ang, 0deg)) scaleX(0) scaleY(.25); }
	10% { opacity: 1; transform: rotate(var(--zqcb-ang, 0deg)) scaleX(.34) scaleY(1.5); }
	40% { opacity: 1; transform: rotate(var(--zqcb-ang, 0deg)) scaleX(1) scaleY(1.15); }
	/* ★届いた瞬間に大きく膨らませる。ここが「通した」に見えるところ */
	56% { opacity: 1; transform: rotate(var(--zqcb-ang, 0deg)) scaleX(1) scaleY(2.1); }
	74% { opacity: .9; transform: rotate(var(--zqcb-ang, 0deg)) scaleX(1) scaleY(1); }
	100% { opacity: 0; transform: rotate(var(--zqcb-ang, 0deg)) scaleX(1) scaleY(.15); }
}

/* 芯。胴の上に細く白を重ねる */
.zqcb-beam::after {
	content: '';
	position: absolute;
	left: 3%;
	right: 3%;
	top: 50%;
	height: 3px;
	margin-top: -1.5px;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 0 8px #fff, 0 0 18px rgba(255, 255, 255, .8);
	opacity: 1;
}

/* 収束ビーム（王者へ向かう分）は太く・熱く */
.zqcb-beam.to-boss {
	--zqcb-bw: 16px;
	--zqcb-bc: #ffd27a;
	--zqcb-bg: rgba(255, 185, 80, 1);
	background: linear-gradient(90deg,
			rgba(255, 210, 122, 0) 0%,
			#ffd27a 10%,
			#ffffff 55%,
			#fff3cf 92%,
			rgba(255, 243, 207, 0) 100%);
}

/* FULL COMBO の環は色を変えて「別物」に見せる */
.zqcb-beam.full {
	--zqcb-bc: #ffb0f0;
	--zqcb-bg: rgba(255, 150, 235, .95);
}

/* ============================================================
 * ③ 着弾点の閃光
 *   収束ビームが届いた瞬間だけ、点を白く飛ばす。
 *   ★これが無いと「線が消えた」だけに見えます。
 * ========================================================== */
.zqcb-hitspot {
	position: absolute;
	left: 0;
	top: 0;
	width: 44px;
	height: 44px;
	margin: -22px 0 0 -22px;
	border-radius: 50%;
	background: radial-gradient(circle, #fff 0%, rgba(255, 226, 160, .9) 40%, rgba(255, 170, 60, 0) 72%);
	mix-blend-mode: screen;
	animation: zqcb-hitspot 300ms ease-out 1 both;
	animation-delay: var(--zqcb-hdel, 0ms);
}

@keyframes zqcb-hitspot {
	0% { opacity: 0; transform: scale(.3); }
	20% { opacity: 1; transform: scale(3.4); }
	100% { opacity: 0; transform: scale(6); }
}

/* ============================================================
 * ★動きが苦手な人（prefers-reduced-motion）
 *   伸びるもの・浮くものを全部止めます。
 *   ただし「どの札が繋がったか」は情報なので、枠の光だけ静かに残します。
 * ========================================================== */
@media (prefers-reduced-motion: reduce) {

	.zqcb-beam,
	.zqcb-hitspot {
		display: none !important;
	}

	.zqcb-charge {
		animation: zqcb-charge-calm 900ms linear 1 both;
		animation-delay: 0ms;
	}

	@keyframes zqcb-charge-calm {
		0% { filter: brightness(1); }
		18% { filter: brightness(1.25); }
		82% { filter: brightness(1.25); }
		100% { filter: brightness(1); }
	}
}