/*
 * NTSC test-card placeholder — .jenjam-colorbars
 *
 * Drop-in skeleton for containers waiting on an async asset (Mapbox tiles,
 * lazy-loaded photos). Pure CSS, no JS dependency. The consuming script
 * removes/hides the element on its respective load event.
 */

.jenjam-colorbars {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	background: linear-gradient(
		to right,
		#FFF1D6 0%, #FFF1D6 14.285%,
		#FFE600 14.285%, #FFE600 28.571%,
		#3FE1FF 28.571%, #3FE1FF 42.857%,
		#C8FF3D 42.857%, #C8FF3D 57.143%,
		#FF2BD6 57.143%, #FF2BD6 71.429%,
		#FF5A1F 71.429%, #FF5A1F 85.714%,
		#2D1466 85.714%, #2D1466 100%
	);
	animation: jenjam-colorbars-jitter 120ms step-end infinite;
	z-index: 1;
}

/* Inline / sized variant (for photo tile placeholders that aren't a positioned ancestor). */
.jenjam-colorbars--block {
	position: relative;
	width: 100%;
	height: 100%;
	inset: auto;
}

/* Halftone grain overlay reusing the same SVG noise pattern as the splash. */
.jenjam-colorbars::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.85' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0'/></filter><rect width='200' height='200' filter='url(%23g)'/></svg>");
	background-size: 200px 200px;
	opacity: 0.06;
	mix-blend-mode: multiply;
}

/* "CH 26 · STAND BY" centered label. */
.jenjam-colorbars::after {
	content: "CH 26 · STAND BY";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	font: 700 11px/1 "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	letter-spacing: 0.16em;
	color: #1B0B3A;
	background: rgba(255, 241, 214, 0.92);
	border: 2px solid #1B0B3A;
	padding: 6px 10px;
	box-shadow: 3px 3px 0 #1B0B3A;
	text-transform: uppercase;
	white-space: nowrap;
	animation: jenjam-colorbars-blink 800ms ease-in-out infinite;
}

@keyframes jenjam-colorbars-jitter {
	0%   { transform: translateY(0); }
	50%  { transform: translateY(1px); }
	100% { transform: translateY(0); }
}
@keyframes jenjam-colorbars-blink {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.55; }
}

/* Reduced-motion: drop the jitter and blink, hold a steady 70% opacity. */
@media (prefers-reduced-motion: reduce) {
	.jenjam-colorbars { animation: none; }
	.jenjam-colorbars::after { animation: none; opacity: 0.85; }
}

/* When the consumer signals the asset loaded, fade the skeleton out. */
.jenjam-colorbars[data-jenjam-loaded="1"] {
	opacity: 0;
	transition: opacity 220ms ease-out;
	pointer-events: none;
}