/* ==========================================================================
   /phone-call-button — Kit 03: the crew radio
   A walkie on channel one, always within reach. Accent: signal teal.
   ========================================================================== */

body.kr-tool--phone {
	--kr-acc: #4fc3a1;
	--kr-acc-l: #8fe0c6;
	--kr-cta: linear-gradient(110deg, #9be7cf 0%, #4fc3a1 48%, #2f9c84 100%);
	--kr-cta-ink: #04201a;
	--kr-k1: "KIT 03 · CREW RADIO";
	--kr-k2: "RACK 02 · OUTPUT";
}

/* ---------- Hero equipment: crew radio on channel one ---------- */
.kr-visual--phone { container-type: inline-size; direction: ltr; }
.kr-visual--phone .krv-glow { inset: 10% 8% 4%; background: radial-gradient(closest-side, rgba(79, 195, 161, .2), transparent 72%); }
.kr-visual--phone .krp-radio { position: absolute; left: 31cqw; top: 25cqw; width: 34cqw; height: 62cqw; transform: rotate(-7deg); }
.kr-visual--phone .krp-antenna {
	position: absolute;
	left: 4.5cqw;
	top: -23cqw;
	width: 4.6cqw;
	height: 25cqw;
	border-radius: 2.3cqw 2.3cqw .8cqw .8cqw;
	background:
		repeating-linear-gradient(180deg, rgba(255, 255, 255, .05) 0 .5cqw, transparent .5cqw 1.6cqw),
		linear-gradient(90deg, #121010, #2c2725 45%, #141211);
	box-shadow: 0 1cqw 2cqw -1cqw #000;
}
.kr-visual--phone .krp-knob { position: absolute; top: -4.6cqw; height: 5.4cqw; border-radius: 1cqw 1cqw .4cqw .4cqw; background: repeating-linear-gradient(90deg, #2e2926 0 .7cqw, #171413 .7cqw 1.3cqw); box-shadow: inset 0 1px 0 rgba(255, 236, 214, .15); }
.kr-visual--phone .krp-knob--ch { right: 4cqw; width: 8cqw; }
.kr-visual--phone .krp-knob--vol { right: 14cqw; width: 5.4cqw; height: 4cqw; top: -3.4cqw; }
.kr-visual--phone .krp-led { position: absolute; top: -1.6cqw; left: 13.5cqw; width: 2.2cqw; height: 1.6cqw; border-radius: .5cqw; background: #2fe3a4; box-shadow: 0 0 2cqw #2fe3a4; animation: krpLed 1.8s steps(1) infinite; }
.kr-visual--phone .krp-ptt { position: absolute; left: -2.2cqw; top: 18cqw; width: 2.8cqw; height: 13cqw; border-radius: 1.2cqw 0 0 1.2cqw; background: linear-gradient(90deg, #3a3330, #1c1817); box-shadow: inset 1px 0 0 rgba(255, 236, 214, .12); animation: krpPtt 7s ease-in-out infinite; }
.kr-visual--phone .krp-body {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-rows: auto auto 1fr auto;
	gap: 3cqw;
	padding: 4cqw 3.6cqw 3.2cqw;
	border-radius: 6cqw 6cqw 7cqw 7cqw;
	background:
		radial-gradient(rgba(255, 255, 255, .035) 1px, transparent 1.3px) 0 0 / 1.2cqw 1.2cqw,
		linear-gradient(100deg, #262220 0%, #171413 40%, #100e0d 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 236, 214, .16),
		inset 0 0 0 .9cqw #141110,
		inset 0 0 0 1.05cqw rgba(255, 236, 214, .06),
		0 5cqw 8cqw -3cqw #000,
		-1.2cqw 0 0 -.3cqw #0b0908;
}
.kr-visual--phone .krp-lcd {
	position: relative;
	display: grid;
	gap: .8cqw;
	padding: 2.2cqw 2.6cqw 2cqw;
	overflow: hidden;
	border-radius: 2cqw;
	background:
		repeating-linear-gradient(180deg, rgba(0, 0, 0, .18) 0 1px, transparent 1px 3px),
		radial-gradient(120% 120% at 30% 20%, #134a40, #08211d 70%);
	box-shadow: inset 0 0 0 .5cqw #070605, inset 0 0 3cqw rgba(0, 0, 0, .6), 0 0 5cqw rgba(79, 195, 161, .18);
	color: #9ff0d4;
	font-family: var(--mono);
	text-shadow: 0 0 1.4cqw rgba(79, 230, 180, .6);
}
.kr-visual--phone .krp-lcd__top { display: flex; justify-content: space-between; align-items: end; font-size: 1.7cqw; font-weight: 700; letter-spacing: .2em; opacity: .85; }
.kr-visual--phone .krp-bars { display: inline-flex; align-items: end; gap: .45cqw; height: 2.2cqw; }
.kr-visual--phone .krp-bars i { width: .7cqw; background: #9ff0d4; box-shadow: 0 0 .8cqw rgba(79, 230, 180, .8); animation: krpBar 2.6s steps(1) infinite; }
.kr-visual--phone .krp-bars i:nth-child(1) { height: 30%; }
.kr-visual--phone .krp-bars i:nth-child(2) { height: 55%; animation-delay: .3s; }
.kr-visual--phone .krp-bars i:nth-child(3) { height: 78%; animation-delay: .6s; }
.kr-visual--phone .krp-bars i:nth-child(4) { height: 100%; animation-delay: .9s; }
.kr-visual--phone .krp-lcd__ch { font-size: 9.5cqw; font-weight: 800; line-height: .95; letter-spacing: .04em; }
.kr-visual--phone .krp-lcd__msg { overflow: hidden; white-space: nowrap; font-size: 1.55cqw; font-weight: 700; letter-spacing: .18em; }
.kr-visual--phone .krp-lcd__msg span { display: inline-block; padding-left: 100%; animation: krpTicker 7s linear infinite; }
.kr-visual--phone .krp-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6cqw; }
.kr-visual--phone .krp-keys i { height: 3.6cqw; border-radius: 1.8cqw; background: linear-gradient(180deg, #34302d, #1d1a18); box-shadow: inset 0 1px 0 rgba(255, 236, 214, .14), 0 .5cqw 0 #090807; }
.kr-visual--phone .krp-keys i:nth-child(2) { background: linear-gradient(180deg, #2f6d5e, #1b3f37); }
.kr-visual--phone .krp-grille {
	border-radius: 2.4cqw;
	background: radial-gradient(circle, #050404 0 .55cqw, transparent .7cqw) 0 0 / 2cqw 2cqw, linear-gradient(180deg, #1d1a18, #141211);
	box-shadow: inset 0 .4cqw 1cqw rgba(0, 0, 0, .7);
}
.kr-visual--phone .krp-brand { justify-self: center; color: #6f645b; font: 700 1.5cqw/1 var(--mono); letter-spacing: .3em; }
.kr-visual--phone .krp-waves { position: absolute; left: 32.5cqw; top: 3.5cqw; width: 0; height: 0; transform: rotate(-7deg); }
.kr-visual--phone .krp-waves i {
	position: absolute;
	left: -14cqw;
	top: -14cqw;
	width: 28cqw;
	height: 28cqw;
	border: .55cqw solid transparent;
	border-top-color: rgba(79, 195, 161, .85);
	border-right-color: rgba(79, 195, 161, .5);
	border-radius: 50%;
	opacity: 0;
	transform: rotate(-20deg) scale(.3);
	animation: krpWave 3.6s var(--ease-out) infinite;
}
.kr-visual--phone .krp-waves i:nth-child(2) { animation-delay: 1.2s; }
.kr-visual--phone .krp-waves i:nth-child(3) { animation-delay: 2.4s; }
.kr-visual--phone .krp-call {
	position: absolute;
	right: 4cqw;
	bottom: 15cqw;
	display: flex;
	align-items: center;
	gap: 2cqw;
	padding: 1.6cqw 3.4cqw 1.6cqw 1.6cqw;
	border-radius: 99px;
	background: linear-gradient(135deg, #047857, #10b981);
	box-shadow: 0 2.6cqw 5cqw -1.6cqw rgba(16, 185, 129, .7), inset 0 1px 0 rgba(255, 255, 255, .3);
	color: #fff;
	animation: krpBob 5s ease-in-out infinite;
}
.kr-visual--phone .krp-call svg { width: 6.4cqw; height: 6.4cqw; padding: 1.5cqw; border-radius: 50%; background: rgba(255, 255, 255, .2); stroke-width: 2; }
.kr-visual--phone .krp-call span { width: 13cqw; height: 1.6cqw; border-radius: 1cqw; background: rgba(255, 255, 255, .75); box-shadow: 0 2.6cqw 0 -.3cqw rgba(255, 255, 255, .4); }
.kr-visual--phone .krp-call::before { content: ""; position: absolute; left: 1.6cqw; top: 50%; width: 6.4cqw; height: 6.4cqw; margin-top: -3.2cqw; border-radius: 50%; border: .4cqw solid rgba(16, 185, 129, .8); animation: krpRing 2.2s var(--ease-out) infinite; }
.kr-visual--phone .krp-tape { top: 12cqw; left: 6cqw; font-size: 1.85cqw; transform: rotate(-4deg); }

@keyframes krpWave { 0% { opacity: 0; transform: rotate(-20deg) scale(.3); } 15% { opacity: .9; } 100% { opacity: 0; transform: rotate(-20deg) scale(1.25); } }
@keyframes krpLed { 0%, 60% { background: #2fe3a4; box-shadow: 0 0 2cqw #2fe3a4; } 61%, 100% { background: #0f3a2c; box-shadow: none; } }
@keyframes krpBar { 0%, 70% { opacity: 1; } 71%, 100% { opacity: .25; } }
@keyframes krpTicker { to { transform: translateX(-100%); } }
@keyframes krpPtt { 0%, 40%, 62%, 100% { transform: none; } 44%, 58% { transform: translateX(.7cqw); } }
@keyframes krpBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2cqw); } }
@keyframes krpRing { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.9); } }