#ol_reconnect_banner
{
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 260ms ease-out, transform 420ms cubic-bezier(0.22, 1.1, 0.36, 1);

	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;

	height: 10em;
	z-index: 999999;

	border-top: 2px solid rgba(255, 255, 255, 0.95);
	background: #f28c28;

	box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.25);
	user-select: none;

	overflow: hidden;
}

#ol_reconnect_banner.visible
{
	opacity: 1 !important;
	transform: translateY(0) !important;
}

/* put stripes on a moving sheet */
#ol_reconnect_banner::before
{
	content: "";
	position: absolute;
	inset: 0;

	/* make it wider than the banner so it never “tiles” into view */
	width: 240%;
	left: -70%;

	background-image: repeating-linear-gradient(
		-45deg,
		rgba(255, 255, 255, 0.18) 0px,
		rgba(255, 255, 255, 0.18) 26px,
		rgba(255, 255, 255, 0.06) 26px,
		rgba(255, 255, 255, 0.06) 52px
	);

	/* keep your content clickable/above */
	pointer-events: none;
	z-index: 0;

	/* smooth, continuous motion */
	animation: ol_reconnect_stripes_sheet 12s linear infinite;
	will-change: transform;
}

/* ensure text/bar sit above the stripes */
#ol_reconnect_banner .ol_reconnect_content
{
	position: relative;
	z-index: 1;
}

@keyframes ol_reconnect_stripes_sheet
{
	from { transform: translateX(0); }
	to   { transform: translateX(25%); }
}

#ol_reconnect_banner .ol_reconnect_content
{
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	gap: 0.65em;

	text-align: center;
	color: rgba(255, 255, 255, 0.97);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
	font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

#ol_reconnect_banner .ol_reconnect_title
{
	font-size: 1.35em;
	font-weight: 700;
	letter-spacing: 0.2px;
}

#ol_reconnect_banner .ol_reconnect_subtitle
{
	font-size: 1.05em;
	font-weight: 500;
	opacity: 0.95;
}

/* =========================================
   LOAD BAR
========================================= */
#ol_reconnect_banner .ol_reconnect_bar
{
	position: relative;
	width: min(680px, 90%);
	height: 14px;

	background: rgba(40, 40, 40, 0.35);
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 999px;

	overflow: hidden;
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25);
}

#ol_reconnect_banner .ol_reconnect_bar_scan
{
	position: absolute;
	top: 0;
	bottom: 0;

	width: 90px;
	left: -120px;

	/* soft white line / scan */
	background: linear-gradient(
		to right,
		transparent 0%,
		rgba(255, 255, 255, 0.85) 50%,
		transparent 100%);

	filter: blur(0.2px);
	animation: ol_reconnect_scan 1.4s ease-in-out infinite;
}

@keyframes ol_reconnect_scan
{
	0%   { transform: translateX(0); }
	100% { transform: translateX(900px); }
}