/* ==========================================================================
   /colors — Kit 02: the gel swatchbook
   Lighting gels fanned under a fresnel. Accent: rose gel.
   ========================================================================== */

body.kr-tool--colors {
	--kr-acc: #ea7d63;
	--kr-acc-l: #f6a58d;
	--kr-k1: "KIT 02 · GEL SWATCHBOOK";
	--kr-k2: "RACK 02 · GEL LIBRARY";
}

/* Seed mixer (injected by tool-colors.js) on the dark foam */
body.kr-tool #site-top main.kr-page .id-color-seed-mixer { border-top-color: rgba(255, 236, 214, .1); }
body.kr-tool #site-top main.kr-page .id-color-seed-count { color: var(--text-2); font-size: 12px; }
body.kr-tool #site-top main.kr-page .id-color-seed-count > div { border-color: rgba(255, 236, 214, .1); background: #0a0807; box-shadow: inset 0 2px 6px rgba(0, 0, 0, .6); }
body.kr-tool #site-top main.kr-page .id-color-seed-count button { border: 0; background: transparent; box-shadow: none; color: var(--muted); font-family: var(--mono); }
body.kr-tool #site-top main.kr-page .id-color-seed-count button[aria-pressed="true"] { background: var(--kr-cta); color: var(--kr-cta-ink); }
body.kr-tool #site-top main.kr-page .id-color-seed-help { color: var(--muted); font-size: 12px; line-height: 1.9; }
body.kr-tool #site-top main.kr-page .id-color-seed-row { color: var(--text-2); font-size: 12px; }
body.kr-tool #site-top main.kr-page :is(.id-color-seed-row, label) input[type="color"] {
	border: 1px solid rgba(255, 236, 214, .14);
	border-radius: 12px;
	background: #0a0807;
	box-shadow: inset 0 2px 6px rgba(0, 0, 0, .6);
}

/* ---------- Hero equipment: fresnel + gel swatchbook ---------- */
.kr-visual--colors { container-type: inline-size; direction: ltr; }
.kr-visual--colors .krv-glow { inset: 14% 4% 0; background: radial-gradient(closest-side, rgba(234, 125, 99, .2), rgba(122, 82, 201, .08) 55%, transparent 74%); }
.kr-visual--colors .krc-lamp { position: absolute; left: 2cqw; top: 6cqw; width: 32cqw; height: 24cqw; transform: rotate(34deg); }
.kr-visual--colors .krc-lamp__yoke { position: absolute; left: 5cqw; top: -3.5cqw; width: 15cqw; height: 31cqw; border: 1.1cqw solid #2b2421; border-radius: 2cqw; border-right-color: transparent; transform: rotate(90deg); transform-origin: 50% 50%; opacity: .9; }
.kr-visual--colors .krc-lamp__body {
	position: absolute;
	left: 0;
	top: 3cqw;
	width: 21cqw;
	height: 18cqw;
	border-radius: 3cqw 1.4cqw 1.4cqw 3cqw;
	background:
		repeating-linear-gradient(90deg, rgba(0, 0, 0, .35) 0 .6cqw, transparent .6cqw 1.7cqw) 2cqw 0 / 11cqw 100% no-repeat,
		linear-gradient(180deg, #3d3530, #1c1815 60%, #2a2420);
	box-shadow: inset 0 1px 0 rgba(255, 236, 214, .2), 0 2cqw 3cqw -1cqw rgba(0, 0, 0, .8);
}
.kr-visual--colors .krc-lamp__lens {
	position: absolute;
	left: 18.5cqw;
	top: 2cqw;
	width: 12cqw;
	height: 20cqw;
	border-radius: 50%;
	background:
		repeating-radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, .0) 0 .9cqw, rgba(255, 255, 255, .28) .9cqw 1.15cqw),
		radial-gradient(ellipse at 45% 50%, #fff7e6, #ffd9a0 40%, #e9a661 75%, #8a5427);
	box-shadow: 0 0 0 1cqw #241e1b, 0 0 5cqw rgba(255, 214, 160, .65), 0 0 12cqw rgba(255, 196, 130, .35);
	animation: krcHum 6s ease-in-out infinite;
}
.kr-visual--colors .krc-lamp__barn { position: absolute; left: 22cqw; width: 11cqw; height: 1.2cqw; border-radius: .6cqw; background: linear-gradient(90deg, #2e2724, #181412); }
.kr-visual--colors .krc-lamp__barn--t { top: 0; transform: rotate(-22deg); transform-origin: 0 50%; }
.kr-visual--colors .krc-lamp__barn--b { top: 22.6cqw; transform: rotate(22deg); transform-origin: 0 50%; }
.kr-visual--colors .krc-beam {
	position: absolute;
	left: 22cqw;
	top: 14cqw;
	width: 64cqw;
	height: 66cqw;
	background: linear-gradient(142deg, rgba(255, 238, 205, .34), rgba(255, 220, 170, .1) 55%, transparent 80%);
	clip-path: polygon(0 4%, 12% 0, 100% 74%, 62% 100%);
	filter: blur(1.2cqw);
	mix-blend-mode: screen;
	animation: krcBeam 6s ease-in-out infinite;
}
.kr-visual--colors .krc-fan { position: absolute; left: 56cqw; top: 80cqw; width: 0; height: 0; }
.kr-visual--colors .krc-gel {
	position: absolute;
	left: -5.6cqw;
	bottom: -5.6cqw;
	z-index: calc(1 + var(--i));
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	width: 11.2cqw;
	height: 58cqw;
	padding: 3cqw 0 9cqw;
	border-radius: 5.6cqw;
	background:
		linear-gradient(90deg, rgba(255, 255, 255, .22), transparent 30%, transparent 70%, rgba(0, 0, 0, .18)),
		linear-gradient(180deg, color-mix(in oklab, var(--g) 86%, #fff), var(--g) 55%, color-mix(in oklab, var(--g) 72%, #000));
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), 0 1.2cqw 2.4cqw rgba(0, 0, 0, .45);
	opacity: .9;
	transform-origin: 50% calc(100% - 5.6cqw);
	transform: rotate(calc(var(--a) * .3));
	animation: krcFan 10s var(--ease-cine) infinite;
}
.kr-visual--colors .krc-gel b,
.kr-visual--colors .krc-gel s {
	color: rgba(255, 255, 255, .88);
	font: 700 1.55cqw/1 var(--mono);
	letter-spacing: .14em;
	text-decoration: none;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
	writing-mode: vertical-rl;
	transform: rotate(180deg);
}
.kr-visual--colors .krc-gel s { font-size: 1.3cqw; opacity: .8; }
.kr-visual--colors .krc-gel:nth-child(1) :is(b, s),
.kr-visual--colors .krc-gel:nth-child(7) :is(b, s) { color: rgba(40, 28, 18, .78); text-shadow: none; }
.kr-visual--colors .krc-gel::after { content: ""; position: absolute; left: 50%; bottom: 3.6cqw; width: 3.6cqw; height: 3.6cqw; margin-left: -1.8cqw; border-radius: 50%; background: rgba(10, 8, 7, .7); box-shadow: inset 0 1px 2px #000; }
.kr-visual--colors .krc-rivet {
	position: absolute;
	left: -2.4cqw;
	top: -2.4cqw;
	z-index: 20;
	width: 4.8cqw;
	height: 4.8cqw;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #f1e6d8, #9c8f83 45%, #3c342f 80%);
	box-shadow: 0 .6cqw 1.2cqw rgba(0, 0, 0, .7);
}
.kr-visual--colors .krc-pools { position: absolute; left: 14cqw; right: 6cqw; top: 76cqw; height: 16cqw; filter: blur(3cqw); opacity: .75; }
.kr-visual--colors .krc-pool { position: absolute; top: 0; height: 100%; width: 46%; border-radius: 50%; animation: krcPool 10s ease-in-out infinite; }
.kr-visual--colors .krc-pool--a { left: 0; background: #e8794f; }
.kr-visual--colors .krc-pool--b { left: 28%; background: #7a52c9; animation-delay: -3.3s; }
.kr-visual--colors .krc-pool--c { right: 0; background: #56b3ab; animation-delay: -6.6s; }
.kr-visual--colors .krc-chips { position: absolute; right: 3cqw; top: 26cqw; display: grid; gap: 1.4cqw; }
.kr-visual--colors .krc-chips i {
	width: 7cqw;
	height: 5cqw;
	border-radius: 1.2cqw;
	background: var(--g);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), 0 1cqw 1.8cqw -.4cqw rgba(0, 0, 0, .8);
	animation: krcChip 10s var(--ease-out) infinite;
}
.kr-visual--colors .krc-chips i:nth-child(2) { animation-delay: .15s; }
.kr-visual--colors .krc-chips i:nth-child(3) { animation-delay: .3s; }
.kr-visual--colors .krc-chips i:nth-child(4) { animation-delay: .45s; }
.kr-visual--colors .krc-chips i:nth-child(5) { animation-delay: .6s; }
.kr-visual--colors .krc-tape { top: 9cqw; right: 6cqw; font-size: 1.85cqw; transform: rotate(4deg); }

@keyframes krcFan {
	0%, 8% { transform: rotate(calc(var(--a) * .3)); }
	42%, 70% { transform: rotate(var(--a)); }
	100% { transform: rotate(calc(var(--a) * .3)); }
}
@keyframes krcPool { 0%, 100% { transform: translateX(0) scale(1); opacity: .9; } 50% { transform: translateX(8%) scale(.86); opacity: .55; } }
@keyframes krcBeam { 0%, 100% { opacity: .9; } 48% { opacity: .75; } 50% { opacity: .95; } 53% { opacity: .8; } }
@keyframes krcHum { 0%, 100% { filter: none; } 50% { filter: brightness(1.08); } }
@keyframes krcChip { 0%, 40% { transform: translateX(0); opacity: .55; } 48%, 72% { transform: translateX(-1.4cqw); opacity: 1; } 84%, 100% { transform: translateX(0); opacity: .55; } }

@media (prefers-reduced-motion: reduce) {
	.kr-visual--colors .krc-gel { transform: rotate(var(--a)); }
}

/* the builder card clips its corners in the stored layout; let the case label and corner caps show */
body.kr-tool #site-top main.kr-page [data-color-builder-card] { overflow: visible; }